From d9f1c35fa3d48f4baa588e231fecbc079eefc027 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Sun, 10 Mar 2019 18:40:27 -0400 Subject: [PATCH] refactor move overlay to state --- dist/app.css | 5 +- dist/main-bundle.js | 98 +++++++++++++++++++------ src/ts/app/PokemonApp.tsx | 25 +++++-- src/ts/app/actions.ts | 6 +- src/ts/app/components/MovesDropdown.tsx | 26 ++++--- src/ts/app/components/MovesExplorer.tsx | 30 ++++++-- src/ts/app/reducers.ts | 17 +++++ src/ts/app/styles/LeagueSelector.scss | 2 +- src/ts/app/styles/MovesDropdown.scss | 3 +- src/ts/app/types.ts | 18 +++-- 10 files changed, 172 insertions(+), 58 deletions(-) diff --git a/dist/app.css b/dist/app.css index d5db97f..7427db1 100644 --- a/dist/app.css +++ b/dist/app.css @@ -93,7 +93,7 @@ font-size: 0.8em; display: flex; justify-content: space-between; - margin: -0.5rem 0 0.5rem 0; } + margin: 0 0 0.5rem 0; } .LeagueSelector__leagueRadioLabel__23hqE { display: flex; @@ -370,8 +370,7 @@ .MovesDropdown__menu__2yxRm { width: 425px; - max-height: 454px; - overflow: hidden; + max-height: 458px; position: fixed; z-index: 2; top: 25%; diff --git a/dist/main-bundle.js b/dist/main-bundle.js index 69d2876..5e0cf5c 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -36767,8 +36767,6 @@ exports.PokemonService = PokemonService; function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } @@ -36777,6 +36775,8 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } @@ -36885,16 +36885,27 @@ function (_react_1$default$Comp) { _this = _possibleConstructorReturn(this, _getPrototypeOf(PokemonApp).call(this, props)); - _this.handleToggleInterruption = function (isInterruption) { + _this.handleToggleDropdownOpen = function (menu, isOpen) { _this.setState({ - isInterruption: isInterruption + isInterruption: isOpen }); + + var combatMoveSelectorsOpen = Object.assign({}, _this.props.pokemonExplorerState.combatMoveSelectorsOpen, _defineProperty({}, menu, isOpen)); + + _this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen(combatMoveSelectorsOpen)); }; _this.handleOverlayClick = function () { _this.setState({ - activeNavigation: null + activeNavigation: null, + isInterruption: false }); + + _this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({ + quickMove: false, + chargeMove1: false, + chargeMove2: false + })); }; _this.handlePokedexClick = function () { @@ -37080,7 +37091,8 @@ function (_react_1$default$Comp) { individualValues = _this$props$pokemonEx.individualValues, leaguePokemon = _this$props$pokemonEx.leaguePokemon, combatMoves = _this$props$pokemonEx.combatMoves, - selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves; + selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves, + combatMoveSelectorsOpen = _this$props$pokemonEx.combatMoveSelectorsOpen; var _this$state = this.state, isInterruption = _this$state.isInterruption, activeNavigation = _this$state.activeNavigation, @@ -37144,7 +37156,8 @@ function (_react_1$default$Comp) { quickMoves: leaguePokemon.moves.quick, chargeMoves: leaguePokemon.moves.cinematic, selectedMoves: selectedCombatMoves, - handleToggleDropdownOpen: this.handleToggleInterruption, + combatMoveSelectorsOpen: combatMoveSelectorsOpen, + handleToggleDropdownOpen: this.handleToggleDropdownOpen, handleChangeSelectedMove: this.handleChangeSelectedMove })), react_1.default.createElement("div", { className: leftNavCss @@ -37308,6 +37321,12 @@ exports.setSelectedCombatMoves = function (moves) { }); }; +exports.setCombatMoveSelectorsOpen = function (selectorsOpen) { + return typesafe_actions_1.action(types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN, { + selectorsOpen: selectorsOpen + }); +}; + exports.fetchConfig = function () { return function (dispatch, getState, extraArguments) { return __awaiter(_this, void 0, void 0, @@ -38490,17 +38509,10 @@ function (_react_1$default$Comp) { _this = _possibleConstructorReturn(this, _getPrototypeOf(MovesDropdown).call(this, props)); _this.toggleMenu = function () { - var isMenuOpen = !_this.state.isMenuOpen; - - _this.setState({ - isMenuOpen: isMenuOpen - }); - - _this.props.handleToggleOpen(isMenuOpen); + _this.props.handleToggleOpen(!_this.props.isMenuOpen); }; _this.state = { - isMenuOpen: false, listRef: react_1.default.createRef(), dimensions: { width: -1, @@ -38516,11 +38528,11 @@ function (_react_1$default$Comp) { var _this2 = this; var _this$props = this.props, + isMenuOpen = _this$props.isMenuOpen, menuLabel = _this$props.menuLabel, movesById = _this$props.movesById, selectedMove = _this$props.selectedMove, options = _this$props.options; - var isMenuOpen = this.state.isMenuOpen; var _this$state$dimension = this.state.dimensions, width = _this$state$dimension.width, height = _this$state$dimension.height; @@ -38607,6 +38619,20 @@ function (_react_1$default$Comp) { type: moveStats.type }))); } + }], [{ + key: "getDerivedStateFromProps", + value: function getDerivedStateFromProps(nextProps, previousState) { + if (!nextProps.isMenuOpen) { + return Object.assign({}, previousState, { + dimensions: { + width: -1, + height: -1 + } + }); + } + + return null; + } }]); return MovesDropdown; @@ -38703,18 +38729,30 @@ function (_react_1$default$Comp) { return null; }; + _this.handleToggleQuickMoveMenu = function (isOpen) { + _this.props.handleToggleDropdownOpen('quickMove', isOpen); + }; + _this.handleChangeQuickMove = function (option) { _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, { quickMove: option })); }; + _this.handleToggleChargeMove1Menu = function (isOpen) { + _this.props.handleToggleDropdownOpen('chargeMove1', isOpen); + }; + _this.handleChangeChargeMove1 = function (option) { _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, { chargeMove1: option })); }; + _this.handleToggleChargeMove2Menu = function (isOpen) { + _this.props.handleToggleDropdownOpen('chargeMove2', isOpen); + }; + _this.handleChangeChargeMove2 = function (option) { _this.props.handleChangeSelectedMove(Object.assign({}, _this.props.selectedMoves, { chargeMove2: option @@ -38731,7 +38769,7 @@ function (_react_1$default$Comp) { movesById = _this$props.movesById, quickMoves = _this$props.quickMoves, chargeMoves = _this$props.chargeMoves, - handleToggleDropdownOpen = _this$props.handleToggleDropdownOpen; + combatMoveSelectorsOpen = _this$props.combatMoveSelectorsOpen; var _this$props$selectedM = this.props.selectedMoves, quickMove = _this$props$selectedM.quickMove, chargeMove1 = _this$props$selectedM.chargeMove1, @@ -38747,30 +38785,33 @@ function (_react_1$default$Comp) { className: wrapperCss }, react_1.default.createElement(MovesDropdown_1.MovesDropdown, { menuLabel: "Quick Move", + isMenuOpen: combatMoveSelectorsOpen.quickMove, movesById: movesById, selectedMove: quickMove, options: quickMoves, - handleToggleOpen: handleToggleDropdownOpen, + handleToggleOpen: this.handleToggleQuickMoveMenu, handleChangeSelectedOption: this.handleChangeQuickMove }), quickMove && quickMoveType && react_1.default.createElement(TypeIndicator_1.TypeIndicator, { className: quickMoveCss, type: quickMoveType }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, { + isMenuOpen: combatMoveSelectorsOpen.chargeMove1, menuLabel: "Charge Move 1", movesById: movesById, selectedMove: chargeMove1, options: chargeMoves, - handleToggleOpen: handleToggleDropdownOpen, + handleToggleOpen: this.handleToggleChargeMove1Menu, handleChangeSelectedOption: this.handleChangeChargeMove1 }), chargeMove1 && chargeMove1Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, { className: chargeMove1Css, type: chargeMove1Type }), react_1.default.createElement(MovesDropdown_1.MovesDropdown, { + isMenuOpen: combatMoveSelectorsOpen.chargeMove2, menuLabel: "Charge Move 2", movesById: movesById, selectedMove: chargeMove2, options: chargeMoves, - handleToggleOpen: handleToggleDropdownOpen, + handleToggleOpen: this.handleToggleChargeMove2Menu, handleChangeSelectedOption: this.handleChangeChargeMove2 }), chargeMove2 && chargeMove2Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, { className: chargeMove2Css, @@ -40170,6 +40211,11 @@ exports.initialState = { quickMove: null, chargeMove1: null, chargeMove2: null + }, + combatMoveSelectorsOpen: { + quickMove: false, + chargeMove1: false, + chargeMove2: false } }; @@ -40241,6 +40287,12 @@ var reduceSetSelectedCombatMoves = function reduceSetSelectedCombatMoves(state, }); }; +var reduceSetCombatMoveSelectorsOpen = function reduceSetCombatMoveSelectorsOpen(state, action) { + return Object.assign({}, state, { + combatMoveSelectorsOpen: Object.assign({}, action.payload.selectorsOpen) + }); +}; + exports.PokemonExplorerReducers = function () { var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : exports.initialState; var action = arguments.length > 1 ? arguments[1] : undefined; @@ -40276,6 +40328,9 @@ exports.PokemonExplorerReducers = function () { case types_1.PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES: return reduceSetSelectedCombatMoves(state, action); + case types_1.PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN: + return reduceSetCombatMoveSelectorsOpen(state, action); + default: return state; } @@ -40450,7 +40505,8 @@ 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_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES' + SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES', + SET_COMBAT_MOVE_SELECTORS_OPEN: 'POKEMON_EXPLORER/SET_COMBAT_MOVE_SELECTORS_OPEN' }; /***/ }), diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index b01e688..4492ca3 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, ISelectedCombatMoves } from 'app/types'; +import { CombatMoveSelectorsOpen, IndividualValueKey, IPokemonAppDispatch, SelectedCombatMoves } from 'app/types'; import { Footer } from 'app/components/Footer'; import { Header } from 'app/components/Header'; @@ -102,7 +102,8 @@ class PokemonApp extends React.Component { individualValues, leaguePokemon, combatMoves, - selectedCombatMoves + selectedCombatMoves, + combatMoveSelectorsOpen, } = this.props.pokemonExplorerState; const { isInterruption, @@ -228,7 +229,8 @@ class PokemonApp extends React.Component { quickMoves={ leaguePokemon.moves.quick } chargeMoves={ leaguePokemon.moves.cinematic } selectedMoves={ selectedCombatMoves } - handleToggleDropdownOpen={ this.handleToggleInterruption } + combatMoveSelectorsOpen={ combatMoveSelectorsOpen } + handleToggleDropdownOpen={ this.handleToggleDropdownOpen } handleChangeSelectedMove={ this.handleChangeSelectedMove } /> } @@ -247,16 +249,27 @@ class PokemonApp extends React.Component { ); } - private readonly handleToggleInterruption = (isInterruption : boolean) => { + private readonly handleToggleDropdownOpen = (menu : keyof CombatMoveSelectorsOpen, isOpen : boolean) => { this.setState({ - isInterruption, + isInterruption: isOpen, }); + const combatMoveSelectorsOpen : CombatMoveSelectorsOpen = { + ...this.props.pokemonExplorerState.combatMoveSelectorsOpen, + [menu]: isOpen, // 3/10/2019: TyepScript is not checking this! + }; + this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen(combatMoveSelectorsOpen)); } private readonly handleOverlayClick = () => { this.setState({ activeNavigation: null, + isInterruption: false, }); + this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({ + quickMove: false, + chargeMove1: false, + chargeMove2: false, + })); } private readonly handlePokedexClick = () => { @@ -354,7 +367,7 @@ class PokemonApp extends React.Component { this.props.dispatch(ActionsPokemonExplorer.maximizeLevel()); } - private readonly handleChangeSelectedMove = (moves : ISelectedCombatMoves) => { + private readonly handleChangeSelectedMove = (moves : SelectedCombatMoves) => { this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves)); } diff --git a/src/ts/app/actions.ts b/src/ts/app/actions.ts index 718236c..6926af0 100644 --- a/src/ts/app/actions.ts +++ b/src/ts/app/actions.ts @@ -1,6 +1,6 @@ import { action } from 'typesafe-actions'; -import { ISelectedCombatMoves, PokemonExplorerActionTypes, ThunkResult } from 'app/types'; +import { CombatMoveSelectorsOpen, PokemonExplorerActionTypes, SelectedCombatMoves, ThunkResult } from 'app/types'; import { calculateMaxLevelForLeague } from 'app/utils/calculator'; @@ -25,7 +25,9 @@ export const setIvDef = (ivDef : number | null) => action(PokemonExplorerActionT export const setActiveLeague = (league : League) => action(PokemonExplorerActionTypes.SET_ACTIVE_LEAGUE, { league }); -export const setSelectedCombatMoves = (moves : ISelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves }); +export const setSelectedCombatMoves = (moves : SelectedCombatMoves) => action(PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES, { moves }); + +export const setCombatMoveSelectorsOpen = (selectorsOpen : CombatMoveSelectorsOpen) => action(PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN, { selectorsOpen }); export const fetchConfig = ( ) : ThunkResult> => { diff --git a/src/ts/app/components/MovesDropdown.tsx b/src/ts/app/components/MovesDropdown.tsx index bb2432c..557c0a4 100644 --- a/src/ts/app/components/MovesDropdown.tsx +++ b/src/ts/app/components/MovesDropdown.tsx @@ -11,6 +11,7 @@ import { TypeIndicator } from './TypeIndicator'; import * as styles from 'app/styles/MovesDropdown.scss'; export interface IMovesDropdownProps { + isMenuOpen : boolean; menuLabel : string; movesById : CombatMoveStats; selectedMove : IPokemonMove | null; @@ -20,7 +21,6 @@ export interface IMovesDropdownProps { } interface IState { - isMenuOpen : boolean; listRef : React.RefObject; dimensions : { width : number; @@ -35,11 +35,23 @@ interface IRowFactory { export class MovesDropdown extends React.Component { + public static getDerivedStateFromProps(nextProps : IMovesDropdownProps, previousState : IState) { + if (!nextProps.isMenuOpen) { + return { + ...previousState, + dimensions: { + width: -1, + height: -1, + } + }; + } + return null; + } + constructor(props : IMovesDropdownProps) { super(props); this.state = { - isMenuOpen: false, listRef: React.createRef(), dimensions: { width: -1, @@ -50,14 +62,12 @@ export class MovesDropdown extends React.Component public render() { const { + isMenuOpen, menuLabel, movesById, selectedMove, options, } = this.props; - const { - isMenuOpen, - } = this.state; const { width, height } = this.state.dimensions; const onResize = (contentRect : ContentRect) => { @@ -128,11 +138,7 @@ export class MovesDropdown extends React.Component } private readonly toggleMenu = () => { - const isMenuOpen = !this.state.isMenuOpen; - this.setState({ - isMenuOpen, - }); - this.props.handleToggleOpen(isMenuOpen); + this.props.handleToggleOpen(!this.props.isMenuOpen); } private rowFactory({ index, style } : IRowFactory) { diff --git a/src/ts/app/components/MovesExplorer.tsx b/src/ts/app/components/MovesExplorer.tsx index b225871..4d9e938 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 { ISelectedCombatMoves } from 'app/types'; +import { CombatMoveSelectorsOpen, SelectedCombatMoves } from 'app/types'; import { MovesDropdown } from 'app/components/MovesDropdown'; import { TypeIndicator } from './TypeIndicator'; @@ -20,8 +20,9 @@ export interface IMovesExplorerProps { chargeMove1 : IPokemonMove | null; chargeMove2 : IPokemonMove | null; }; - handleToggleDropdownOpen : (isOpen : boolean) => void; - handleChangeSelectedMove : (moves : ISelectedCombatMoves) => void; + combatMoveSelectorsOpen : CombatMoveSelectorsOpen; + handleToggleDropdownOpen : (menu : keyof CombatMoveSelectorsOpen, isOpen : boolean) => void; + handleChangeSelectedMove : (moves : SelectedCombatMoves) => void; } export class MovesExplorer extends React.Component { @@ -31,7 +32,7 @@ export class MovesExplorer extends React.Component { movesById, quickMoves, chargeMoves, - handleToggleDropdownOpen, + combatMoveSelectorsOpen, } = this.props; const { quickMove, @@ -61,32 +62,35 @@ export class MovesExplorer extends React.Component {
{ quickMove && quickMoveType && } { chargeMove1 && chargeMove1Type && } { chargeMove2 && chargeMove2Type && @@ -107,6 +111,10 @@ export class MovesExplorer extends React.Component { return null; } + private readonly handleToggleQuickMoveMenu = (isOpen : boolean) => { + this.props.handleToggleDropdownOpen('quickMove', isOpen); + } + private readonly handleChangeQuickMove = (option : IPokemonMove) => { this.props.handleChangeSelectedMove({ ...this.props.selectedMoves, @@ -114,6 +122,10 @@ export class MovesExplorer extends React.Component { }); } + private readonly handleToggleChargeMove1Menu = (isOpen : boolean) => { + this.props.handleToggleDropdownOpen('chargeMove1', isOpen); + } + private readonly handleChangeChargeMove1 = (option : IPokemonMove) => { this.props.handleChangeSelectedMove({ ...this.props.selectedMoves, @@ -121,6 +133,10 @@ export class MovesExplorer extends React.Component { }); } + private readonly handleToggleChargeMove2Menu = (isOpen : boolean) => { + this.props.handleToggleDropdownOpen('chargeMove2', isOpen); + } + private readonly handleChangeChargeMove2 = (option : IPokemonMove) => { this.props.handleChangeSelectedMove({ ...this.props.selectedMoves, diff --git a/src/ts/app/reducers.ts b/src/ts/app/reducers.ts index 839b3f3..a6c965e 100644 --- a/src/ts/app/reducers.ts +++ b/src/ts/app/reducers.ts @@ -27,6 +27,11 @@ export const initialState : IPokemonExplorerState = { chargeMove1: null, chargeMove2: null, }, + combatMoveSelectorsOpen: { + quickMove: false, + chargeMove1: false, + chargeMove2: false, + }, }; const reduceSetIsLoading = ( @@ -125,6 +130,16 @@ const reduceSetSelectedCombatMoves = ( } }); +const reduceSetCombatMoveSelectorsOpen = ( + state : IPokemonExplorerState, + action : ReturnType +) : IPokemonExplorerState => ({ + ...state, + combatMoveSelectorsOpen: { + ...action.payload.selectorsOpen + } +}); + export const PokemonExplorerReducers : Reducer = ( state : IPokemonExplorerState = initialState, action, @@ -150,6 +165,8 @@ export const PokemonExplorerReducers : Reducer = ( return reduceSetActiveLeague(state, action as ReturnType); case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES: return reduceSetSelectedCombatMoves(state, action as ReturnType); + case PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN: + return reduceSetCombatMoveSelectorsOpen(state, action as ReturnType); default: return state; } diff --git a/src/ts/app/styles/LeagueSelector.scss b/src/ts/app/styles/LeagueSelector.scss index f611868..f0d0bdf 100644 --- a/src/ts/app/styles/LeagueSelector.scss +++ b/src/ts/app/styles/LeagueSelector.scss @@ -71,7 +71,7 @@ font-size: 0.8em; display: flex; justify-content: space-between; - margin: -0.5rem 0 0.5rem 0; + margin: 0 0 0.5rem 0; } .leagueRadioLabel { diff --git a/src/ts/app/styles/MovesDropdown.scss b/src/ts/app/styles/MovesDropdown.scss index d932f99..3c52a77 100644 --- a/src/ts/app/styles/MovesDropdown.scss +++ b/src/ts/app/styles/MovesDropdown.scss @@ -6,8 +6,7 @@ .menu { width: map-get($container-width, 'desktop'); - max-height: 450px + 4px; // +4 for border offset causing issue with .nes-container - overflow: hidden; + max-height: 450px + 8px; // +4 for top/bottom border offset causing issue with .nes-container position: fixed; z-index: 2; top: 25%; diff --git a/src/ts/app/types.ts b/src/ts/app/types.ts index 2a71cae..64953b6 100644 --- a/src/ts/app/types.ts +++ b/src/ts/app/types.ts @@ -39,11 +39,15 @@ export interface IIndividualValues { ivDef : number | null; } -export interface ISelectedCombatMoves { - quickMove : IPokemonMove | null; - chargeMove1 : IPokemonMove | null; - chargeMove2 : IPokemonMove | null; -} +type MoveTypes = 'quickMove' | 'chargeMove1' | 'chargeMove2'; + +export type SelectedCombatMoves = { + [ key in MoveTypes ] : IPokemonMove | null; +}; + +export type CombatMoveSelectorsOpen = { + [ key in MoveTypes ] : boolean; +}; export interface IPokemonExplorerState { isLoading : boolean; @@ -52,7 +56,8 @@ export interface IPokemonExplorerState { individualValues : IIndividualValues; league : League; combatMoves : CombatMoveStats; - selectedCombatMoves : ISelectedCombatMoves; + selectedCombatMoves : SelectedCombatMoves; + combatMoveSelectorsOpen : CombatMoveSelectorsOpen; } export const PokemonExplorerActionTypes = { @@ -66,4 +71,5 @@ export const PokemonExplorerActionTypes = { SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF', SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE', SET_SELECTED_COMBAT_MOVES: 'POKEMON_EXPLORER/SET_SELECTED_COMBAT_MOVES', + SET_COMBAT_MOVE_SELECTORS_OPEN: 'POKEMON_EXPLORER/SET_COMBAT_MOVE_SELECTORS_OPEN', };