diff --git a/dist/app.css b/dist/app.css index a08e38b..b477894 100644 --- a/dist/app.css +++ b/dist/app.css @@ -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 { diff --git a/dist/main-bundle.js b/dist/main-bundle.js index 36903ff..6282b7e 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -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' }; /***/ }), diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index 7b18220..b01e688 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/src/ts/app/PokemonApp.tsx @@ -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 { individualValues, leaguePokemon, combatMoves, + selectedCombatMoves } = this.props.pokemonExplorerState; const { isInterruption, @@ -226,8 +227,9 @@ class PokemonApp extends React.Component { movesById={ combatMoves } quickMoves={ leaguePokemon.moves.quick } chargeMoves={ leaguePokemon.moves.cinematic } + selectedMoves={ selectedCombatMoves } handleToggleDropdownOpen={ this.handleToggleInterruption } - handleChangeTypeCoverage={ this.handleChangeTypeCoverage } + handleChangeSelectedMove={ this.handleChangeSelectedMove } /> } @@ -304,6 +306,11 @@ class PokemonApp extends React.Component { 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 { 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) => { diff --git a/src/ts/app/actions.ts b/src/ts/app/actions.ts index 3cba78e..718236c 100644 --- a/src/ts/app/actions.ts +++ b/src/ts/app/actions.ts @@ -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> => { diff --git a/src/ts/app/components/MovesExplorer.tsx b/src/ts/app/components/MovesExplorer.tsx index 57419ac..b225871 100644 --- a/src/ts/app/components/MovesExplorer.tsx +++ b/src/ts/app/components/MovesExplorer.tsx @@ -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; chargeMoves : Array; + 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 { - - constructor(props : IMovesExplorerProps) { - super(props); - - this.state = { - quickMove: null, - chargeMove1: null, - chargeMove2: null, - }; - } +export class MovesExplorer extends React.Component { public render() { const { @@ -48,7 +37,7 @@ export class MovesExplorer extends React.Component quickMove, chargeMove1, chargeMove2, - } = this.state; + } = this.props.selectedMoves; const wrapperCss = classNames( 'nes-container', @@ -119,47 +108,23 @@ export class MovesExplorer extends React.Component } 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), - }); } } diff --git a/src/ts/app/reducers.ts b/src/ts/app/reducers.ts index 1fb5baa..839b3f3 100644 --- a/src/ts/app/reducers.ts +++ b/src/ts/app/reducers.ts @@ -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 + action : ReturnType ) : IPokemonExplorerState => ({ ...state, - typeCoverage: { - ...action.payload.typeCoverage + selectedCombatMoves: { + ...action.payload.moves } }); @@ -148,8 +148,8 @@ export const PokemonExplorerReducers : Reducer = ( return reduceSetIvDef(state, action as ReturnType); case PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE: return reduceSetActiveLeague(state, action as ReturnType); - case PokemonExplorerActionTypes.SET_TYPE_COVERAGE: - return reduceSetTypeCoverage(state, action as ReturnType); + case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES: + return reduceSetSelectedCombatMoves(state, action as ReturnType); default: return state; } diff --git a/src/ts/app/styles/MovesDropdown.scss b/src/ts/app/styles/MovesDropdown.scss index 2bd1f2a..5769cd2 100644 --- a/src/ts/app/styles/MovesDropdown.scss +++ b/src/ts/app/styles/MovesDropdown.scss @@ -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, diff --git a/src/ts/app/types.ts b/src/ts/app/types.ts index 02c592a..2a71cae 100644 --- a/src/ts/app/types.ts +++ b/src/ts/app/types.ts @@ -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', };