put selected moves on state

This commit is contained in:
Jeff Colombo 2019-03-09 21:27:19 -05:00
parent 6e908ab43c
commit a3cc5a7a7d
8 changed files with 82 additions and 138 deletions

2
dist/app.css vendored
View File

@ -373,7 +373,7 @@
z-index: 2;
top: 25%;
left: 50%;
margin-left: -160px;
margin-left: -212.5px;
padding: 0; }
.MovesDropdown__menu__2yxRm .list-item.active::before,
.MovesDropdown__menu__2yxRm .list-item:hover::before {

98
dist/main-bundle.js vendored
View File

@ -36942,6 +36942,11 @@ function (_react_1$default$Comp) {
dispatch(ActionsPokemonExplorer.setIvAtk(null));
dispatch(ActionsPokemonExplorer.setIvDef(null));
dispatch(ActionsPokemonExplorer.setLeaguePokemon(leaguePokemon));
dispatch(ActionsPokemonExplorer.setSelectedCombatMoves({
quickMove: null,
chargeMove1: null,
chargeMove2: null
}));
}).catch(function (error) {
// tslint:disable-next-line:no-console
console.error(error);
@ -36988,8 +36993,8 @@ function (_react_1$default$Comp) {
_this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
};
_this.handleChangeTypeCoverage = function (coverage) {
_this.props.dispatch(ActionsPokemonExplorer.setTypeCoverage(coverage));
_this.handleChangeSelectedMove = function (moves) {
_this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
};
_this.handleChangeLeagueNavigation = function (league) {
@ -37074,7 +37079,8 @@ function (_react_1$default$Comp) {
league = _this$props$pokemonEx.league,
individualValues = _this$props$pokemonEx.individualValues,
leaguePokemon = _this$props$pokemonEx.leaguePokemon,
combatMoves = _this$props$pokemonEx.combatMoves;
combatMoves = _this$props$pokemonEx.combatMoves,
selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves;
var _this$state = this.state,
isInterruption = _this$state.isInterruption,
activeNavigation = _this$state.activeNavigation,
@ -37137,8 +37143,9 @@ function (_react_1$default$Comp) {
movesById: combatMoves,
quickMoves: leaguePokemon.moves.quick,
chargeMoves: leaguePokemon.moves.cinematic,
selectedMoves: selectedCombatMoves,
handleToggleDropdownOpen: this.handleToggleInterruption,
handleChangeTypeCoverage: this.handleChangeTypeCoverage
handleChangeSelectedMove: this.handleChangeSelectedMove
})), react_1.default.createElement("div", {
className: leftNavCss
}, react_1.default.createElement("button", {
@ -37295,9 +37302,9 @@ exports.setActiveLeague = function (league) {
});
};
exports.setTypeCoverage = function (typeCoverage) {
return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE, {
typeCoverage: typeCoverage
exports.setSelectedCombatMoves = function (moves) {
return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, {
moves: moves
});
};
@ -38673,12 +38680,12 @@ var MovesExplorer =
function (_react_1$default$Comp) {
_inherits(MovesExplorer, _react_1$default$Comp);
function MovesExplorer(props) {
function MovesExplorer() {
var _this;
_classCallCheck(this, MovesExplorer);
_this = _possibleConstructorReturn(this, _getPrototypeOf(MovesExplorer).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(MovesExplorer).apply(this, arguments));
_this.getMoveType = function (move) {
var moveStats = null;
@ -38695,58 +38702,23 @@ function (_react_1$default$Comp) {
};
_this.handleChangeQuickMove = function (option) {
var _this$state = _this.state,
chargeMove1 = _this$state.chargeMove1,
chargeMove2 = _this$state.chargeMove2;
_this.setState({
_this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
quickMove: option
});
_this.props.handleChangeTypeCoverage({
type1: _this.getMoveType(option),
type2: _this.getMoveType(chargeMove1),
type3: _this.getMoveType(chargeMove2)
});
}));
};
_this.handleChangeChargeMove1 = function (option) {
var _this$state2 = _this.state,
quickMove = _this$state2.quickMove,
chargeMove2 = _this$state2.chargeMove2;
_this.setState({
_this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
chargeMove1: option
});
_this.props.handleChangeTypeCoverage({
type1: _this.getMoveType(quickMove),
type2: _this.getMoveType(option),
type3: _this.getMoveType(chargeMove2)
});
}));
};
_this.handleChangeChargeMove2 = function (option) {
var _this$state3 = _this.state,
quickMove = _this$state3.quickMove,
chargeMove1 = _this$state3.chargeMove1;
_this.setState({
_this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, {
chargeMove2: option
});
_this.props.handleChangeTypeCoverage({
type1: _this.getMoveType(quickMove),
type2: _this.getMoveType(chargeMove1),
type3: _this.getMoveType(option)
});
}));
};
_this.state = {
quickMove: null,
chargeMove1: null,
chargeMove2: null
};
return _this;
}
@ -38758,10 +38730,10 @@ function (_react_1$default$Comp) {
quickMoves = _this$props.quickMoves,
chargeMoves = _this$props.chargeMoves,
handleToggleDropdownOpen = _this$props.handleToggleDropdownOpen;
var _this$state4 = this.state,
quickMove = _this$state4.quickMove,
chargeMove1 = _this$state4.chargeMove1,
chargeMove2 = _this$state4.chargeMove2;
var _this$props$selectedM = this.props.selectedMoves,
quickMove = _this$props$selectedM.quickMove,
chargeMove1 = _this$props$selectedM.chargeMove1,
chargeMove2 = _this$props$selectedM.chargeMove2;
var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
var quickMoveType = this.getMoveType(quickMove);
var quickMoveCss = classnames_1.default(_defineProperty({}, styles.legacy, quickMove ? quickMove.isLegacy : false));
@ -40192,10 +40164,10 @@ exports.initialState = {
},
league: League_1.League.GREAT,
combatMoves: new Map(),
typeCoverage: {
type1: null,
type2: null,
type3: null
selectedCombatMoves: {
quickMove: null,
chargeMove1: null,
chargeMove2: null
}
};
@ -40261,9 +40233,9 @@ var reduceSetActiveLeague = function reduceSetActiveLeague(state, action) {
});
};
var reduceSetTypeCoverage = function reduceSetTypeCoverage(state, action) {
var reduceSetSelectedCombatMoves = function reduceSetSelectedCombatMoves(state, action) {
return Object.assign({}, state, {
typeCoverage: Object.assign({}, action.payload.typeCoverage)
selectedCombatMoves: Object.assign({}, action.payload.moves)
});
};
@ -40299,8 +40271,8 @@ exports.PokemonExplorerReducers = function () {
case types_1.PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE:
return reduceSetActiveLeague(state, action);
case types_1.PokemonExplorerActionTypes.SET_TYPE_COVERAGE:
return reduceSetTypeCoverage(state, action);
case types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
return reduceSetSelectedCombatMoves(state, action);
default:
return state;
@ -40476,7 +40448,7 @@ exports.PokemonExplorerActionTypes = {
SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
SET_TYPE_COVERAGE: 'POKEMON_EXPLORER/SET_TYPE_COVERAGE'
SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES'
};
/***/ }),

View File

@ -12,7 +12,7 @@ import { appReducers } from 'app/index';
import * as ActionsPokemonExplorer from 'app/actions';
import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
import { IndividualValueKey, IPokemonAppDispatch, ITypeCoverage } from 'app/types';
import { IndividualValueKey, IPokemonAppDispatch, ISelectedCombatMoves } from 'app/types';
import { Footer } from 'app/components/Footer';
import { Header } from 'app/components/Header';
@ -102,6 +102,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
individualValues,
leaguePokemon,
combatMoves,
selectedCombatMoves
} = this.props.pokemonExplorerState;
const {
isInterruption,
@ -226,8 +227,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
movesById={ combatMoves }
quickMoves={ leaguePokemon.moves.quick }
chargeMoves={ leaguePokemon.moves.cinematic }
selectedMoves={ selectedCombatMoves }
handleToggleDropdownOpen={ this.handleToggleInterruption }
handleChangeTypeCoverage={ this.handleChangeTypeCoverage }
handleChangeSelectedMove={ this.handleChangeSelectedMove }
/>
}
</div>
@ -304,6 +306,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
dispatch(ActionsPokemonExplorer.setIvAtk(null));
dispatch(ActionsPokemonExplorer.setIvDef(null));
dispatch(ActionsPokemonExplorer.setLeaguePokemon(leaguePokemon));
dispatch(ActionsPokemonExplorer.setSelectedCombatMoves({
quickMove: null,
chargeMove1: null,
chargeMove2: null,
}));
})
.catch((error) => {
// tslint:disable-next-line:no-console
@ -347,8 +354,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
}
private readonly handleChangeTypeCoverage = (coverage : ITypeCoverage) => {
this.props.dispatch(ActionsPokemonExplorer.setTypeCoverage(coverage));
private readonly handleChangeSelectedMove = (moves : ISelectedCombatMoves) => {
this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
}
private readonly handleChangeLeagueNavigation = (league : League) => {

View File

@ -1,6 +1,6 @@
import { action } from 'typesafe-actions';
import { ITypeCoverage, PokemonExplorerActionTypes, ThunkResult } from 'app/types';
import { ISelectedCombatMoves, PokemonExplorerActionTypes, ThunkResult } from 'app/types';
import { calculateMaxLevelForLeague } from 'app/utils/calculator';
@ -25,7 +25,7 @@ export const setIvDef = (ivDef : number | null) => action(PokemonExplorerActionT
export const setActiveLeague = (league : League) => action(PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE, { league });
export const setTypeCoverage = (typeCoverage : ITypeCoverage) => action(PokemonExplorerActionTypes.SET_TYPE_COVERAGE, { typeCoverage });
export const setSelectedCombatMoves = (moves : ISelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves });
export const fetchConfig = (
) : ThunkResult<Promise<void>> => {

View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import { CombatMoveStats, ICombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
import { ITypeCoverage } from 'app/types';
import { ISelectedCombatMoves } from 'app/types';
import { MovesDropdown } from 'app/components/MovesDropdown';
import { TypeIndicator } from './TypeIndicator';
@ -15,27 +15,16 @@ export interface IMovesExplorerProps {
movesById : CombatMoveStats;
quickMoves : Array<IPokemonMove>;
chargeMoves : Array<IPokemonMove>;
selectedMoves : {
quickMove : IPokemonMove | null;
chargeMove1 : IPokemonMove | null;
chargeMove2 : IPokemonMove | null;
};
handleToggleDropdownOpen : (isOpen : boolean) => void;
handleChangeTypeCoverage : (typeCoverage : ITypeCoverage) => void;
handleChangeSelectedMove : (moves : ISelectedCombatMoves) => void;
}
interface IState {
quickMove : IPokemonMove | null;
chargeMove1 : IPokemonMove | null;
chargeMove2 : IPokemonMove | null;
}
export class MovesExplorer extends React.Component<IMovesExplorerProps, IState> {
constructor(props : IMovesExplorerProps) {
super(props);
this.state = {
quickMove: null,
chargeMove1: null,
chargeMove2: null,
};
}
export class MovesExplorer extends React.Component<IMovesExplorerProps> {
public render() {
const {
@ -48,7 +37,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
quickMove,
chargeMove1,
chargeMove2,
} = this.state;
} = this.props.selectedMoves;
const wrapperCss = classNames(
'nes-container',
@ -119,47 +108,23 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
}
private readonly handleChangeQuickMove = (option : IPokemonMove) => {
const {
chargeMove1,
chargeMove2,
} = this.state;
this.setState({
this.props.handleChangeSelectedMove({
...this.props.selectedMoves,
quickMove: option,
});
this.props.handleChangeTypeCoverage({
type1: this.getMoveType(option),
type2: this.getMoveType(chargeMove1),
type3: this.getMoveType(chargeMove2),
});
}
private readonly handleChangeChargeMove1 = (option : IPokemonMove) => {
const {
quickMove,
chargeMove2,
} = this.state;
this.setState({
this.props.handleChangeSelectedMove({
...this.props.selectedMoves,
chargeMove1: option,
});
this.props.handleChangeTypeCoverage({
type1: this.getMoveType(quickMove),
type2: this.getMoveType(option),
type3: this.getMoveType(chargeMove2),
});
}
private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
const {
quickMove,
chargeMove1,
} = this.state;
this.setState({
this.props.handleChangeSelectedMove({
...this.props.selectedMoves,
chargeMove2: option,
});
this.props.handleChangeTypeCoverage({
type1: this.getMoveType(quickMove),
type2: this.getMoveType(chargeMove1),
type3: this.getMoveType(option),
});
}
}

View File

@ -22,10 +22,10 @@ export const initialState : IPokemonExplorerState = {
},
league: League.GREAT,
combatMoves: new Map(),
typeCoverage: {
type1: null,
type2: null,
type3: null,
selectedCombatMoves: {
quickMove: null,
chargeMove1: null,
chargeMove2: null,
},
};
@ -115,13 +115,13 @@ const reduceSetActiveLeague = (
league: action.payload.league
});
const reduceSetTypeCoverage = (
const reduceSetSelectedCombatMoves = (
state : IPokemonExplorerState,
action : ReturnType<typeof Actions.setTypeCoverage>
action : ReturnType<typeof Actions.setSelectedCombatMoves>
) : IPokemonExplorerState => ({
...state,
typeCoverage: {
...action.payload.typeCoverage
selectedCombatMoves: {
...action.payload.moves
}
});
@ -148,8 +148,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
return reduceSetIvDef(state, action as ReturnType<typeof Actions.setIvDef>);
case PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE:
return reduceSetActiveLeague(state, action as ReturnType<typeof Actions.setActiveLeague>);
case PokemonExplorerActionTypes.SET_TYPE_COVERAGE:
return reduceSetTypeCoverage(state, action as ReturnType<typeof Actions.setTypeCoverage>);
case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
return reduceSetSelectedCombatMoves(state, action as ReturnType<typeof Actions.setSelectedCombatMoves>);
default:
return state;
}

View File

@ -11,7 +11,7 @@
z-index: 2;
top: 25%;
left: 50%;
margin-left: -160px;
margin-left: -1 * map-get($container-width, 'desktop') / 2;
padding: 0;
:global(.list-item):global(.active)::before,

View File

@ -8,7 +8,7 @@ import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';
import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types';
import { ILeaguePokemon, League } from 'app/models/League';
import { CombatMoveStats, IMaxStats } from 'app/models/Pokemon';
import { CombatMoveStats, IMaxStats, IPokemonMove } from 'app/models/Pokemon';
import { PokemonService } from 'api/PokemonService';
@ -39,10 +39,10 @@ export interface IIndividualValues {
ivDef : number | null;
}
export interface ITypeCoverage {
type1 : POGOProtos.Enums.PokemonType | null;
type2 : POGOProtos.Enums.PokemonType | null;
type3 : POGOProtos.Enums.PokemonType | null;
export interface ISelectedCombatMoves {
quickMove : IPokemonMove | null;
chargeMove1 : IPokemonMove | null;
chargeMove2 : IPokemonMove | null;
}
export interface IPokemonExplorerState {
@ -52,7 +52,7 @@ export interface IPokemonExplorerState {
individualValues : IIndividualValues;
league : League;
combatMoves : CombatMoveStats;
typeCoverage : ITypeCoverage;
selectedCombatMoves : ISelectedCombatMoves;
}
export const PokemonExplorerActionTypes = {
@ -65,5 +65,5 @@ export const PokemonExplorerActionTypes = {
SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
SET_TYPE_COVERAGE: 'POKEMON_EXPLORER/SET_TYPE_COVERAGE',
SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES',
};