diff --git a/generatePokemonData.ts b/generatePokemonData.ts index 8dd7957..1ccf8a3 100644 --- a/generatePokemonData.ts +++ b/generatePokemonData.ts @@ -1,8 +1,9 @@ import * as fs from 'fs'; +import PokemonDescription from 'pokemongo-json-pokedex/output/locales/en-US/pokemon.json'; import Pokemon from 'pokemongo-json-pokedex/output/pokemon.json'; import { LevelMultipliers } from 'app/models/LevelMultipliers'; -import { Grade, ILeaguePokemon, IPokemon, IStats, League, Type } from 'app/models/Pokemon'; +import { Grade, ILeaguePokemon, IPokemon, IStats, League, PokemonIds, Type } from 'app/models/Pokemon'; type ICpAndTotalFound = Record>; interface IStatsDistribution { @@ -36,20 +37,17 @@ const familyEvolutionOrder : Record> = {}; const familyEncountered : Record> = {}; const parseNameAndForm = (monId : string, monName : string) => { if (monId.indexOf('_ALOLA') > -1 || - monId.indexOf('CASTFORM') > -1 || - monId.indexOf('DEOXYS') > -1 || - monId.indexOf('WORMADAM') > -1 || - monId.indexOf('BURMY') > -1 || - monId.indexOf('CHERRIM') > -1 || - monId.indexOf('SHELLOS') > -1 || - monId.indexOf('GASTRODON') > -1 || - monId.indexOf('ROTOM') > -1 || - monId.indexOf('GIRATINA') > -1 || - monId.indexOf('SHAYMIN') > -1 || - monId.indexOf('ARCEUS') > -1 || - monId.indexOf('DEOXYS') > -1 || - monId.indexOf('DEOXYS') > -1 || - monId.indexOf('DEOXYS') > -1 + monId.indexOf('CASTFORM_') > -1 || + monId.indexOf('DEOXYS_') > -1 || + monId.indexOf('WORMADAM_') > -1 || + monId.indexOf('BURMY_') > -1 || + monId.indexOf('CHERRIM_') > -1 || + monId.indexOf('SHELLOS_') > -1 || + monId.indexOf('GASTRODON_') > -1 || + monId.indexOf('ROTOM_') > -1 || + monId.indexOf('GIRATINA_') > -1 || + monId.indexOf('SHAYMIN_') > -1 || + monId.indexOf('ARCEUS_') > -1 ) { const formTokenIndex = monId.indexOf('_'); return { @@ -67,9 +65,11 @@ Pokemon.forEach((mon) => { const baseAtk = mon.stats.baseAttack; const baseDef = mon.stats.baseDefense; const baseHp = mon.stats.baseStamina; + const pokemonDescription = typeof PokemonDescription[mon.id as PokemonIds] !== 'undefined' ? PokemonDescription[mon.id as PokemonIds] : {}; const pokemon : ILeaguePokemon = { id: mon.id, - name, + name: pokemonDescription.name || name || 'MissingNo.', + category: pokemonDescription.category || '', form, dex: mon.dex, types: { @@ -97,8 +97,8 @@ Pokemon.forEach((mon) => { ) { familyEvolutionOrder[pokemon.family] = []; if (mon.forms.length > 0) { - mon.forms.forEach((form) => { - familyEvolutionOrder[pokemon.family].push(form.id); + mon.forms.forEach((monForm) => { + familyEvolutionOrder[pokemon.family].push(monForm.id); }); } else { familyEvolutionOrder[pokemon.family].push(pokemon.id); diff --git a/src/scss/index.scss b/src/scss/index.scss index cbf1b3b..99189db 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -7,6 +7,15 @@ body { margin: 0; } +a { + display: flex; + align-items: center; +} + +a:hover { + background-color: $light; +} + /** nes.css overrides */ body { @@ -19,9 +28,8 @@ body { border-color: $dark; } -.nes-input, -.nes-textarea { - box-shadow: 0 4px $dark, 0 -4px $dark, 4px 0 $dark, -4px 0 $dark; +.nes-container.with-title > .title { + background-color: $background-color; } .nes-container:not(:last-child) { @@ -40,3 +48,8 @@ body { margin-left: 0; } } + +.nes-input, +.nes-textarea { + box-shadow: 0 4px $dark, 0 -4px $dark, 4px 0 $dark, -4px 0 $dark; +} diff --git a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx index 7c95832..16e9867 100644 --- a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx +++ b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx @@ -131,6 +131,15 @@ export class LeagueStatsList extends React.Component{ `${ Grade[stats.speciesGrade] } ${ stats.cp } ${ stats.level } ${ stats.ivHp } ${ stats.ivAtk } ${ stats.ivDef }` }; + return ( + + { `${ Grade[stats.speciesGrade] } ${ stats.cp } ${ stats.level } ${ stats.ivHp } ${ stats.ivAtk } ${ stats.ivDef }` } + + ); } } diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 735a644..cab57da 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { Grade, ILeaguePokemon, IStats } from 'app/models/Pokemon'; import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator'; +import { formatDexNumber } from 'app/utils/formatter'; import { IIndividualValues, IndividualValueKey } from './types'; @@ -62,7 +63,7 @@ export class PokemonExplorer extends React.Component
-

No.{ dex }

+

No.{ dex }

{ leaguePokemon.form &&
{ leaguePokemon.form } Forme
} @@ -201,11 +202,9 @@ export class PokemonExplorer extends React.Component
-
-

- { leaguePokemon.name } -

-

The Seed Pokemon

+
+

{ leaguePokemon.name }

+
{ leaguePokemon.category }

Base Stats

HP  { leaguePokemon.stats.baseStamina }
@@ -299,17 +298,6 @@ export class PokemonExplorer extends React.Component) => { const raw = event.currentTarget.value; const value = parseFloat(raw); diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss index 864d301..7380ebc 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss @@ -4,19 +4,34 @@ display: flex; flex-flow: column nowrap; height: 100vh; + width: 25rem; +} + +.pokemonName { + margin-bottom: 0; } .pokemonInfoWrapper { display: flex; justify-content: space-evenly; + margin-bottom: 1rem; - .pokemonInfoLeftColumn { + .pokemonInfoLeftColumn, + .pokemonInfoRightColumn { display: flex; flex-flow: column nowrap; flex-basis: 45%; align-items: center; + } + + .pokemonInfoLeftColumn { text-align: center; } + + .pokemonInfoRightColumn { + flex-grow: 1; + align-items: start; + } } .pokemonTypeWrapper { @@ -30,7 +45,7 @@ &:global(.nes-container) { padding: 0; - margin-bottom: 0; + margin-top: 0.5rem; font-size: 0.7em; flex-basis: 50%; } @@ -203,13 +218,19 @@ } } +.dexHeader { + margin-bottom: 0.25rem; +} + .formHeader { - margin: 0; text-transform: uppercase; } .pokemonBaseStats { - display: block; + display: flex; + flex-flow: column nowrap; + align-items: start; + align-self: stretch; } .popkemonIndividualStats { @@ -222,7 +243,7 @@ :global(.nes-field.is-inline) .ivInput { flex-grow: 0; - flex-basis: 5rem; + width: 5em; } :global(.nes-field.is-inline).fieldRow { diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts index 7c8efc1..24579e0 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts @@ -1,12 +1,15 @@ // This file is automatically generated. // Please do not change this file! +export const dexHeader: string; export const fieldRow: string; export const formHeader: string; export const ivInput: string; export const leaguePokemonRank: string; export const pokemonBaseStats: string; export const pokemonInfoLeftColumn: string; +export const pokemonInfoRightColumn: string; export const pokemonInfoWrapper: string; +export const pokemonName: string; export const pokemonType: string; export const pokemonTypeWrapper: string; export const popkemonIndividualStats: string; diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index 7e78a45..9f0ec7f 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -4,6 +4,8 @@ import { FixedSizeList } from 'react-window'; import classNames from 'classnames'; +import { formatDexNumber } from 'app/utils/formatter'; + import { IPokemon } from 'app/models/Pokemon'; import * as styles from './styles/PokemonSelectList.scss'; @@ -80,10 +82,20 @@ export class PokemonSelectList extends React.Component this.props.handleActivatePokemon(index); - return
{ pokemon.name + (pokemon.form ? ` (${pokemon.form})` : '') }
; + return ( + + { `#${dex} ${pokemon.name} ${(pokemon.form ? ` (${pokemon.form})` : '')}` } + + ); } } diff --git a/src/ts/app/models/Pokemon.ts b/src/ts/app/models/Pokemon.ts index 6b2acb3..65b5afe 100644 --- a/src/ts/app/models/Pokemon.ts +++ b/src/ts/app/models/Pokemon.ts @@ -15,8 +15,9 @@ export interface IBaseStats { export type Type = 'bug' | 'dark' | 'dragon' | 'electric' | 'fairy' | 'fighting' | 'fire' | 'flying' | 'ghost' | 'grass' | 'ground' | 'ice' | 'normal' | 'poison' | 'psychic' | 'rock' | 'steel' | 'water'; export interface IPokemon { - name : string; id : string; + name : string; + category : string; form : string | null; family : string; dex : number; @@ -47,3 +48,75 @@ export interface IStats { speciesGrade : Grade; metaGrade : Grade; } + +export type PokemonIds = 'BULBASAUR' | 'IVYSAUR' | 'VENUSAUR' | 'CHARMANDER' | +'CHARMELEON' | 'CHARIZARD' | 'SQUIRTLE' | 'WARTORTLE' | 'BLASTOISE' | +'CATERPIE' | 'METAPOD' | 'BUTTERFREE' | 'WEEDLE' | 'KAKUNA' | 'BEEDRILL' | +'PIDGEY' | 'PIDGEOTTO' | 'PIDGEOT' | 'RATTATA' | 'RATTATA_ALOLA' | 'RATICATE' | +'RATICATE_ALOLA' | 'SPEAROW' | 'FEAROW' | 'EKANS' | 'ARBOK' | 'PIKACHU' | +'RAICHU' | 'RAICHU_ALOLA' | 'SANDSHREW' | 'SANDSHREW_ALOLA' | 'SANDSLASH' | +'SANDSLASH_ALOLA' | 'NIDORAN_FEMALE' | 'NIDORINA' | 'NIDOQUEEN' | +'NIDORAN_MALE' | 'NIDORINO' | 'NIDOKING' | 'CLEFAIRY' | 'CLEFABLE' | 'VULPIX' | +'VULPIX_ALOLA' | 'NINETALES' | 'NINETALES_ALOLA' | 'JIGGLYPUFF' | +'WIGGLYTUFF' | 'ZUBAT' | 'GOLBAT' | 'ODDISH' | 'GLOOM' | 'VILEPLUME' | +'PARAS' | 'PARASECT' | 'VENONAT' | 'VENOMOTH' | 'DIGLETT' | 'DIGLETT_ALOLA' | +'DUGTRIO' | 'DUGTRIO_ALOLA' | 'MEOWTH' | 'MEOWTH_ALOLA' | 'PERSIAN' | +'PERSIAN_ALOLA' | 'PSYDUCK' | 'GOLDUCK' | 'MANKEY' | 'PRIMEAPE' | 'GROWLITHE' | +'ARCANINE' | 'POLIWAG' | 'POLIWHIRL' | 'POLIWRATH' | 'ABRA' | 'KADABRA' | +'ALAKAZAM' | 'MACHOP' | 'MACHOKE' | 'MACHAMP' | 'BELLSPROUT' | 'WEEPINBELL' | +'VICTREEBEL' | 'TENTACOOL' | 'TENTACRUEL' | 'GEODUDE' | 'GEODUDE_ALOLA' | +'GRAVELER' | 'GRAVELER_ALOLA' | 'GOLEM' | 'GOLEM_ALOLA' | 'PONYTA' | +'RAPIDASH' | 'SLOWPOKE' | 'SLOWBRO' | 'MAGNEMITE' | 'MAGNETON' | 'FARFETCHD' | +'DODUO' | 'DODRIO' | 'SEEL' | 'DEWGONG' | 'GRIMER' | 'GRIMER_ALOLA' | 'MUK' | +'MUK_ALOLA' | 'SHELLDER' | 'CLOYSTER' | 'GASTLY' | 'HAUNTER' | 'GENGAR' | +'ONIX' | 'DROWZEE' | 'HYPNO' | 'KRABBY' | 'KINGLER' | 'VOLTORB' | 'ELECTRODE' | +'EXEGGCUTE' | 'EXEGGUTOR' | 'EXEGGUTOR_ALOLA' | 'CUBONE' | 'MAROWAK' | +'MAROWAK_ALOLA' | 'HITMONLEE' | 'HITMONCHAN' | 'LICKITUNG' | 'KOFFING' | +'WEEZING' | 'RHYHORN' | 'RHYDON' | 'CHANSEY' | 'TANGELA' | 'KANGASKHAN' | +'HORSEA' | 'SEADRA' | 'GOLDEEN' | 'SEAKING' | 'STARYU' | 'STARMIE' | +'MR_MIME' | 'SCYTHER' | 'JYNX' | 'ELECTABUZZ' | 'MAGMAR' | 'PINSIR' | +'TAUROS' | 'MAGIKARP' | 'GYARADOS' | 'LAPRAS' | 'DITTO' | 'EEVEE' | +'VAPOREON' | 'JOLTEON' | 'FLAREON' | 'PORYGON' | 'OMANYTE' | 'OMASTAR' | +'KABUTO' | 'KABUTOPS' | 'AERODACTYL' | 'SNORLAX' | 'ARTICUNO' | 'ZAPDOS' | +'MOLTRES' | 'DRATINI' | 'DRAGONAIR' | 'DRAGONITE' | 'MEWTWO' | 'MEW' | +'CHIKORITA' | 'BAYLEEF' | 'MEGANIUM' | 'CYNDAQUIL' | 'QUILAVA' | 'TYPHLOSION' | +'TOTODILE' | 'CROCONAW' | 'FERALIGATR' | 'SENTRET' | 'FURRET' | 'HOOTHOOT' | +'NOCTOWL' | 'LEDYBA' | 'LEDIAN' | 'SPINARAK' | 'ARIADOS' | 'CROBAT' | +'CHINCHOU' | 'LANTURN' | 'PICHU' | 'CLEFFA' | 'IGGLYBUFF' | 'TOGEPI' | +'TOGETIC' | 'NATU' | 'XATU' | 'MAREEP' | 'FLAAFFY' | 'AMPHAROS' | 'BELLOSSOM' | +'MARILL' | 'AZUMARILL' | 'SUDOWOODO' | 'POLITOED' | 'HOPPIP' | 'SKIPLOOM' | +'JUMPLUFF' | 'AIPOM' | 'SUNKERN' | 'SUNFLORA' | 'YANMA' | 'WOOPER' | +'QUAGSIRE' | 'ESPEON' | 'UMBREON' | 'MURKROW' | 'SLOWKING' | 'MISDREAVUS' | +'UNOWN' | 'WOBBUFFET' | 'GIRAFARIG' | 'PINECO' | 'FORRETRESS' | 'DUNSPARCE' | +'GLIGAR' | 'STEELIX' | 'SNUBBULL' | 'GRANBULL' | 'QWILFISH' | 'SCIZOR' | +'SHUCKLE' | 'HERACROSS' | 'SNEASEL' | 'TEDDIURSA' | 'URSARING' | 'SLUGMA' | +'MAGCARGO' | 'SWINUB' | 'PILOSWINE' | 'CORSOLA' | 'REMORAID' | 'OCTILLERY' | +'DELIBIRD' | 'MANTINE' | 'SKARMORY' | 'HOUNDOUR' | 'HOUNDOOM' | 'KINGDRA' | +'PHANPY' | 'DONPHAN' | 'PORYGON2' | 'STANTLER' | 'SMEARGLE' | 'TYROGUE' | +'HITMONTOP' | 'SMOOCHUM' | 'ELEKID' | 'MAGBY' | 'MILTANK' | 'BLISSEY' | +'RAIKOU' | 'ENTEI' | 'SUICUNE' | 'LARVITAR' | 'PUPITAR' | 'TYRANITAR' | +'LUGIA' | 'HO_OH' | 'CELEBI' | 'TREECKO' | 'GROVYLE' | 'SCEPTILE' | 'TORCHIC' | +'COMBUSKEN' | 'BLAZIKEN' | 'MUDKIP' | 'MARSHTOMP' | 'SWAMPERT' | +'POOCHYENA' | 'MIGHTYENA' | 'ZIGZAGOON' | 'LINOONE' | 'WURMPLE' | 'SILCOON' | +'BEAUTIFLY' | 'CASCOON' | 'DUSTOX' | 'LOTAD' | 'LOMBRE' | 'LUDICOLO' | +'SEEDOT' | 'NUZLEAF' | 'SHIFTRY' | 'TAILLOW' | 'SWELLOW' | 'WINGULL' | +'PELIPPER' | 'RALTS' | 'KIRLIA' | 'GARDEVOIR' | 'SURSKIT' | 'MASQUERAIN' | +'SHROOMISH' | 'BRELOOM' | 'SLAKOTH' | 'VIGOROTH' | 'SLAKING' | 'NINCADA' | +'NINJASK' | 'SHEDINJA' | 'WHISMUR' | 'LOUDRED' | 'EXPLOUD' | 'MAKUHITA' | +'HARIYAMA' | 'AZURILL' | 'NOSEPASS' | 'SKITTY' | 'DELCATTY' | 'SABLEYE' | +'MAWILE' | 'ARON' | 'LAIRON' | 'AGGRON' | 'MEDITITE' | 'MEDICHAM' | +'ELECTRIKE' | 'MANECTRIC' | 'PLUSLE' | 'MINUN' | 'VOLBEAT' | 'ILLUMISE' | +'ROSELIA' | 'GULPIN' | 'SWALOT' | 'CARVANHA' | 'SHARPEDO' | 'WAILMER' | +'WAILORD' | 'NUMEL' | 'CAMERUPT' | 'TORKOAL' | 'SPOINK' | 'GRUMPIG' | +'SPINDA' | 'TRAPINCH' | 'VIBRAVA' | 'FLYGON' | 'CACNEA' | 'CACTURNE' | +'SWABLU' | 'ALTARIA' | 'ZANGOOSE' | 'SEVIPER' | 'LUNATONE' | 'SOLROCK' | +'BARBOACH' | 'WHISCASH' | 'CORPHISH' | 'CRAWDAUNT' | 'BALTOY' | 'CLAYDOL' | +'LILEEP' | 'CRADILY' | 'ANORITH' | 'ARMALDO' | 'FEEBAS' | 'MILOTIC' | +'CASTFORM' | 'CASTFORM_RAINY' | 'CASTFORM_SNOWY' | 'CASTFORM_SUNNY' | +'KECLEON' | 'SHUPPET' | 'BANETTE' | 'DUSKULL' | 'DUSCLOPS' | 'TROPIUS' | +'CHIMECHO' | 'ABSOL' | 'WYNAUT' | 'SNORUNT' | 'GLALIE' | 'SPHEAL' | 'SEALEO' | +'WALREIN' | 'CLAMPERL' | 'HUNTAIL' | 'GOREBYSS' | 'RELICANTH' | 'LUVDISC' | +'BAGON' | 'SHELGON' | 'SALAMENCE' | 'BELDUM' | 'METANG' | 'METAGROSS' | +'REGIROCK' | 'REGICE' | 'REGISTEEL' | 'LATIAS' | 'LATIOS' | 'KYOGRE' | +'GROUDON' | 'RAYQUAZA' | 'JIRACHI' | 'DEOXYS' | 'DEOXYS_ATTACK' | +'DEOXYS_DEFENSE' | 'DEOXYS_SPEED'; diff --git a/src/ts/app/utils/formatter.ts b/src/ts/app/utils/formatter.ts new file mode 100644 index 0000000..5da5f91 --- /dev/null +++ b/src/ts/app/utils/formatter.ts @@ -0,0 +1,10 @@ +export const formatDexNumber = (dex : number) => { + let prefix : string = ''; + if (dex < 100) { + prefix += '0'; + } + if (dex < 10) { + prefix += '0'; + } + return prefix + dex; +};