Skip to content

Commit

Permalink
feat(games): use regional_support and national_support (#314)
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinjoseph08
robinjoseph08 authored Dec 28, 2018
1 parent c1baa57 commit 2ec1980
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 53 deletions.
5 changes: 4 additions & 1 deletion app/actions/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ export function listGames () {
dispatch(checkVersion());

return API.get(`${Config.API_HOST}/games`)
.then((games) => dispatch(setGames(games)));
.then((games) => {
dispatch(setGames(games));
return games;
});
};
}

Expand Down
49 changes: 33 additions & 16 deletions app/components/dex-create.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,34 @@ import slug from 'slug';
import { AlertComponent } from './alert';
import { ReactGA } from '../utils/analytics';
import { createDex } from '../actions/dex';
import { listGames } from '../actions/game';

const NATIONAL_ONLY_GAMES = ['x', 'y', 'omega_ruby', 'alpha_sapphire'];

export class DexCreate extends Component {

constructor (props) {
super(props);
this.state = { error: null, game: 'ultra_sun', regional: false };
const { games } = props;
const latestGame = games[0];

this.state = {
error: null,
url: null,
game: latestGame.id,
regional: !latestGame.game_family.national_support
};
}

onChange = (e) => {
const { gamesById } = this.props;
const game = e.target.value;

if (NATIONAL_ONLY_GAMES.indexOf(game) > -1) {
if (!gamesById[game].game_family.regional_support) {
this.setState({ regional: false });
}

if (!gamesById[game].game_family.national_support) {
this.setState({ regional: true });
}

this.setState({ game });
}

Expand All @@ -35,7 +45,15 @@ export class DexCreate extends Component {
}

onRequestClose = () => {
this.setState({ error: null, url: null, game: 'sun', regional: false });
const { games } = this.props;
const latestGame = games[0];

this.setState({
error: null,
url: null,
game: latestGame.id,
regional: !latestGame.game_family.national_support
});
this.props.onRequestClose();
}

Expand Down Expand Up @@ -66,7 +84,7 @@ export class DexCreate extends Component {
}

render () {
const { games, isOpen, session } = this.props;
const { games, gamesById, isOpen, session } = this.props;
const { error, game, regional, url } = this.state;

if (!isOpen || !games) {
Expand Down Expand Up @@ -94,15 +112,15 @@ export class DexCreate extends Component {
</div>
<div className="form-group">
<label htmlFor="regional">Regionality</label>
<div className="radio">
<label>
<input type="radio" name="regional" checked={!regional} value="national" onChange={() => this.setState({ regional: false })} />
<div className={`radio ${gamesById[game].game_family.national_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.national_support ? '' : 'National dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={!regional} disabled={!gamesById[game].game_family.national_support} value="national" onChange={() => this.setState({ regional: false })} />
<span className="radio-custom"><span /></span>National
</label>
</div>
<div className={`radio ${NATIONAL_ONLY_GAMES.indexOf(game) > -1 ? 'disabled' : ''}`}>
<label title={NATIONAL_ONLY_GAMES.indexOf(game) > -1 ? 'Regional dexes only supported for Gen 7.' : ''}>
<input type="radio" name="regional" checked={regional} disabled={NATIONAL_ONLY_GAMES.indexOf(game) > -1} value="regional" onChange={() => this.setState({ regional: true })} />
<div className={`radio ${gamesById[game].game_family.regional_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.regional_support ? '' : 'Regional dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={regional} disabled={!gamesById[game].game_family.regional_support} value="regional" onChange={() => this.setState({ regional: true })} />
<span className="radio-custom"><span /></span>Regional
</label>
</div>
Expand Down Expand Up @@ -132,14 +150,13 @@ export class DexCreate extends Component {

}

function mapStateToProps ({ games, session }) {
return { games, session };
function mapStateToProps ({ games, gamesById, session }) {
return { games, gamesById, session };
}

function mapDispatchToProps (dispatch) {
return {
createDex: (payload) => dispatch(createDex(payload)),
listGames: () => dispatch(listGames()),
redirect: (path) => dispatch(push(path))
};
}
Expand Down
42 changes: 21 additions & 21 deletions app/components/dex-edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ import { ReactGA } from '../utils/analytics';
import { deleteDex, updateDex } from '../actions/dex';

const GAME_WARNING = 'Any capture info specific to your old game will be lost.';
const NATIONAL_ONLY_GAMES = ['x', 'y', 'omega_ruby', 'alpha_sapphire'];
const REGIONAL_WARNING = 'Any non-Alola Dex capture info will be lost.';
const REGIONAL_WARNING = 'Any non-regional capture info will be lost.';
const URL_WARNING = 'The old URL to your dex will not function anymore.';

export class DexEdit extends Component {
Expand All @@ -29,12 +28,17 @@ export class DexEdit extends Component {
}

onChange = (e) => {
const { gamesById } = this.props;
const game = e.target.value;

if (NATIONAL_ONLY_GAMES.indexOf(game) > -1) {
if (!gamesById[game].game_family.regional_support) {
this.setState({ regional: false });
}

if (!gamesById[game].game_family.national_support) {
this.setState({ regional: true });
}

this.setState({ game });
}

Expand All @@ -60,17 +64,13 @@ export class DexEdit extends Component {
}

get showGameWarning () {
const { dex } = this.props;
const { dex, gamesById } = this.props;
const { game } = this.state;

// TODO: refactor this logic to more scalable and easier to understand
if ((dex.game.game_family.id === 'sun_moon') && NATIONAL_ONLY_GAMES.indexOf(game) > -1) {
return true;
} else if ((dex.game.game_family.id === 'ultra_sun_ultra_moon') && game !== 'ultra_sun' && game !== 'ultra_moon') {
return true;
} else {
return false;
}
const differentFamily = gamesById[game].game_family.id !== dex.game.game_family.id;
const lessNationalCount = gamesById[game].game_family.national_total < dex.game.game_family.national_total;

return differentFamily && lessNationalCount;
}

get showRegionalWarning () {
Expand Down Expand Up @@ -130,7 +130,7 @@ export class DexEdit extends Component {
}

render () {
const { dex, games, isOpen, session } = this.props;
const { dex, games, gamesById, isOpen, session } = this.props;
const { confirmingDelete, confirmingEdit, error, game, regional, url } = this.state;

let dexDelete = null;
Expand Down Expand Up @@ -172,15 +172,15 @@ export class DexEdit extends Component {
<div className="form-group">
<FormWarningComponent message={this.showRegionalWarning ? REGIONAL_WARNING : null} />
<label htmlFor="regional">Regionality</label>
<div className="radio">
<label>
<input type="radio" name="regional" checked={!regional} value="national" onChange={() => this.setState({ regional: false })} />
<div className={`radio ${gamesById[game].game_family.national_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.national_support ? '' : 'National dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={!regional} disabled={!gamesById[game].game_family.national_support} value="national" onChange={() => this.setState({ regional: false })} />
<span className="radio-custom"><span /></span>National
</label>
</div>
<div className={`radio ${NATIONAL_ONLY_GAMES.indexOf(game) > -1 ? 'disabled' : ''}`}>
<label title={NATIONAL_ONLY_GAMES.indexOf(game) > -1 ? 'Regional dexes only supported for Gen 7.' : ''}>
<input type="radio" name="regional" checked={regional} disabled={NATIONAL_ONLY_GAMES.indexOf(game) > -1} value="regional" onChange={() => this.setState({ regional: true })} />
<div className={`radio ${gamesById[game].game_family.regional_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.regional_support ? '' : 'Regional dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={regional} disabled={!gamesById[game].game_family.regional_support} value="regional" onChange={() => this.setState({ regional: true })} />
<span className="radio-custom"><span /></span>Regional
</label>
</div>
Expand Down Expand Up @@ -211,8 +211,8 @@ export class DexEdit extends Component {

}

function mapStateToProps ({ games, session }) {
return { games, session };
function mapStateToProps ({ games, gamesById, session }) {
return { games, gamesById, session };
}

function mapDispatchToProps (dispatch) {
Expand Down
2 changes: 1 addition & 1 deletion app/components/dex.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function Dex ({ captures, dex, onScrollButtonClick, query, username }) {
const caught = captures.filter(({ captured }) => captured).length;
const total = captures.length;

if (query.length === 0 && !BOX_COMPONENTS[dex.id]) {
if (query.length === 0) {
const boxes = groupBoxes(captures, dex);
BOX_COMPONENTS[dex.id] = boxes.map((box, i) => {
if (i > DEFER_CUTOFF) {
Expand Down
45 changes: 31 additions & 14 deletions app/components/register.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ import { createUser } from '../actions/user';
import { friendCode } from '../utils/formatting';
import { listGames } from '../actions/game';

const NATIONAL_ONLY_GAMES = ['x', 'y', 'omega_ruby', 'alpha_sapphire'];

export class Register extends Component {

constructor (props) {
super(props);
this.state = { error: null, game: 'ultra_sun', regional: false };
this.state = { error: null };
}

componentWillMount () {
Expand All @@ -30,16 +28,31 @@ export class Register extends Component {
redirectToProfile(session.username);
}

listGames();
listGames()
.then((games) => {
const latestGame = games[0];

this.setState({
error: null,
url: null,
game: latestGame.id,
regional: !latestGame.game_family.national_support
});
});
}

onChange = (e) => {
const { gamesById } = this.props;
const game = e.target.value;

if (NATIONAL_ONLY_GAMES.indexOf(game) > -1) {
if (!gamesById[game].game_family.regional_support) {
this.setState({ regional: false });
}

if (!gamesById[game].game_family.national_support) {
this.setState({ regional: true });
}

this.setState({ game });
}

Expand Down Expand Up @@ -75,9 +88,13 @@ export class Register extends Component {
}

render () {
const { games } = this.props;
const { games, gamesById } = this.props;
const { error, game, regional } = this.state;

if (!game) {
return null;
}

return (
<DocumentTitle title="Register | Pokédex Tracker">
<div className="register-container">
Expand Down Expand Up @@ -136,15 +153,15 @@ export class Register extends Component {
</div>
<div className="form-group">
<label htmlFor="regional">Regionality</label>
<div className="radio">
<label>
<input type="radio" name="regional" checked={!regional} value="national" onChange={() => this.setState({ regional: false })} />
<div className={`radio ${gamesById[game].game_family.national_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.national_support ? '' : 'National dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={!regional} disabled={!gamesById[game].game_family.national_support} value="national" onChange={() => this.setState({ regional: false })} />
<span className="radio-custom"><span /></span>National
</label>
</div>
<div className={`radio ${game === 'omega_ruby' ? 'disabled' : ''}`}>
<label title={game === 'omega_ruby' ? 'Regional dexes only supported for Gen 7.' : ''}>
<input type="radio" name="regional" checked={regional} disabled={game === 'omega_ruby'} value="regional" onChange={() => this.setState({ regional: true })} />
<div className={`radio ${gamesById[game].game_family.regional_support ? '' : 'disabled'}`}>
<label title={gamesById[game].game_family.regional_support ? '' : 'Regional dex is not supported for this game at this time.'}>
<input type="radio" name="regional" checked={regional} disabled={!gamesById[game].game_family.regional_support} value="regional" onChange={() => this.setState({ regional: true })} />
<span className="radio-custom"><span /></span>Regional
</label>
</div>
Expand Down Expand Up @@ -181,8 +198,8 @@ export class Register extends Component {

}

function mapStateToProps ({ games, session }) {
return { games, session };
function mapStateToProps ({ games, gamesById, session }) {
return { games, gamesById, session };
}

function mapDispatchToProps (dispatch) {
Expand Down
14 changes: 14 additions & 0 deletions app/reducers/games-by-id.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { SET_GAMES } from '../actions/game';

export function gamesById (state = {}, action) {
switch (action.type) {
case SET_GAMES:
const gamesById = action.games.reduce((games, game) => {
return Object.assign({ [game.id]: game }, games);
}, {});

return gamesById;
default:
return state;
}
}
2 changes: 2 additions & 0 deletions app/reducers/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { currentDex } from './current-dex';
import { currentPokemon } from './current-pokemon';
import { currentUser } from './current-user';
import { games } from './games';
import { gamesById } from './games-by-id';
import { notification } from './notification';
import { pokemon } from './pokemon';
import { query } from './query';
Expand All @@ -22,6 +23,7 @@ export const reducer = combineReducers({
currentPokemon,
currentUser,
games,
gamesById,
notification,
pokemon,
query,
Expand Down

0 comments on commit 2ec1980

Please sign in to comment.