jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor move overlay to state

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-10 18:40:27 -04:00
parent cfff4e7872
commit d9f1c35fa3
10 changed files with 172 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/app.css vendored
View File

@ -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%;

98
dist/main-bundle.js vendored
View File

@ -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'
};
/***/ }),

25
src/ts/app/PokemonApp.tsx
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, 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<IConnectedPokemonAppProps, IState> {
individualValues,
leaguePokemon,
combatMoves,
selectedCombatMoves
selectedCombatMoves,
combatMoveSelectorsOpen,
} = this.props.pokemonExplorerState;
const {
isInterruption,
@ -228,7 +229,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
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<IConnectedPokemonAppProps, IState> {
);
}
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<IConnectedPokemonAppProps, IState> {
this.props.dispatch(ActionsPokemonExplorer.maximizeLevel());
}
private readonly handleChangeSelectedMove = (moves : ISelectedCombatMoves) => {
private readonly handleChangeSelectedMove = (moves : SelectedCombatMoves) => {
this.props.dispatch(ActionsPokemonExplorer.setSelectedCombatMoves(moves));
}

6
src/ts/app/actions.ts
View File

@ -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<Promise<void>> => {

26
src/ts/app/components/MovesDropdown.tsx
View File

@ -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<FixedSizeList>;
dimensions : {
width : number;
@ -35,11 +35,23 @@ interface IRowFactory {
export class MovesDropdown extends React.Component<IMovesDropdownProps, IState> {
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<IMovesDropdownProps, IState>
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<IMovesDropdownProps, IState>
}
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) {

30
src/ts/app/components/MovesExplorer.tsx
View File

@ -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<IMovesExplorerProps> {
@ -31,7 +32,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
movesById,
quickMoves,
chargeMoves,
handleToggleDropdownOpen,
combatMoveSelectorsOpen,
} = this.props;
const {
quickMove,
@ -61,32 +62,35 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
<div className={ wrapperCss }>
<MovesDropdown
menuLabel="Quick Move"
isMenuOpen={ combatMoveSelectorsOpen.quickMove }
movesById={ movesById }
selectedMove={ quickMove }
options={ quickMoves }
handleToggleOpen={ handleToggleDropdownOpen }
handleToggleOpen={ this.handleToggleQuickMoveMenu }
handleChangeSelectedOption={ this.handleChangeQuickMove }
/>
{ quickMove && quickMoveType &&
<TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
}
<MovesDropdown
isMenuOpen={ combatMoveSelectorsOpen.chargeMove1 }
menuLabel="Charge Move 1"
movesById={ movesById }
selectedMove={ chargeMove1 }
options={ chargeMoves }
handleToggleOpen={ handleToggleDropdownOpen }
handleToggleOpen={ this.handleToggleChargeMove1Menu }
handleChangeSelectedOption={ this.handleChangeChargeMove1 }
/>
{ chargeMove1 && chargeMove1Type &&
<TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
}
<MovesDropdown
isMenuOpen={ combatMoveSelectorsOpen.chargeMove2 }
menuLabel="Charge Move 2"
movesById={ movesById }
selectedMove={ chargeMove2 }
options={ chargeMoves }
handleToggleOpen={ handleToggleDropdownOpen }
handleToggleOpen={ this.handleToggleChargeMove2Menu }
handleChangeSelectedOption={ this.handleChangeChargeMove2 }
/>
{ chargeMove2 && chargeMove2Type &&
@ -107,6 +111,10 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
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<IMovesExplorerProps> {
});
}
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<IMovesExplorerProps> {
});
}
private readonly handleToggleChargeMove2Menu = (isOpen : boolean) => {
this.props.handleToggleDropdownOpen('chargeMove2', isOpen);
}
private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
this.props.handleChangeSelectedMove({
...this.props.selectedMoves,

17
src/ts/app/reducers.ts
View File

@ -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<typeof Actions.setCombatMoveSelectorsOpen>
) : IPokemonExplorerState => ({
...state,
combatMoveSelectorsOpen: {
...action.payload.selectorsOpen
}
});
export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
state : IPokemonExplorerState = initialState,
action,
@ -150,6 +165,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
return reduceSetActiveLeague(state, action as ReturnType<typeof Actions.setActiveLeague>);
case PokemonExplorerActionTypes.SET_SELECTED_COMBAT_MOVES:
return reduceSetSelectedCombatMoves(state, action as ReturnType<typeof Actions.setSelectedCombatMoves>);
case PokemonExplorerActionTypes.SET_COMBAT_MOVE_SELECTORS_OPEN:
return reduceSetCombatMoveSelectorsOpen(state, action as ReturnType<typeof Actions.setCombatMoveSelectorsOpen>);
default:
return state;
}

2
src/ts/app/styles/LeagueSelector.scss
View File

@ -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 {

3
src/ts/app/styles/MovesDropdown.scss
View File

@ -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%;

18
src/ts/app/types.ts
View File

@ -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',
};