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

refactor pokemon explorer for nav

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-04 23:37:13 -05:00
parent 6de075e08c
commit f93841eb8c
39 changed files with 1353 additions and 1449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

555
dist/app.css vendored
View File

@ -50,57 +50,78 @@
background-color: #000;
opacity: 0.7; }
.nes-field.is-inline .IvForm__ivInput__xR5IU {
.PokemonApp__displayWrapper__2PiN5 {
margin: 0 auto;
width: 30rem;
display: flex;
flex-flow: column nowrap; }
.PokemonApp__container__MsUHy {
display: flex;
justify-content: space-evenly; }
.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,
.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
display: flex;
flex-flow: column nowrap;
flex-basis: 45%;
align-items: center; }
.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
text-align: center; }
.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
flex-grow: 1;
align-items: start; }
.nes-field.is-inline .IvForm__ivInput__1KM34 {
width: 4.25em;
padding-left: 0.45em;
padding-right: 0.25em; }
.nes-field.is-inline .IvForm__ivInput__xR5IU.IvForm__levelInput__1n6We {
.nes-field.is-inline .IvForm__ivInput__1KM34.IvForm__levelInput__1cOcl {
width: 6.5em; }
.nes-field.is-inline.IvForm__fieldRow__3HcBN {
.nes-field.is-inline.IvForm__fieldRow__2b-ft {
justify-content: space-between; }
.nes-field.is-inline.IvForm__fieldRow__3HcBN label {
.nes-field.is-inline.IvForm__fieldRow__2b-ft label {
flex-grow: 0;
margin-left: 1em; }
.nes-field.is-inline.IvForm__fieldRow__3HcBN label:first-child {
.nes-field.is-inline.IvForm__fieldRow__2b-ft label:first-child {
margin-left: 0; }
.LeagueSelector__wrapper__fxmRz {
.LeagueSelector__wrapper__3k27A {
font-size: 0.8em;
display: flex;
justify-content: space-between;
margin: -0.5rem 0 0.5rem 0; }
.LeagueSelector__leagueRadioLabel__3aPV9 {
.LeagueSelector__leagueRadioLabel__23hqE {
display: flex;
align-items: center; }
.LeagueSelector__leagueRadio__3hY7B {
.LeagueSelector__leagueRadio__26fWw {
display: none; }
.LeagueStatsList__selectList__1FBIL {
.LeagueStatsList__selectList__S5RTA {
flex-grow: 1;
/* for Firefox */
display: flex;
overflow: hidden; }
.LeagueStatsList__selectList__1FBIL > * {
.LeagueStatsList__selectList__S5RTA > * {
flex: 1;
overflow: auto; }
.LeagueStatsList__listItem__oCOvr {
.LeagueStatsList__listItem__1pPhh {
position: relative;
display: flex;
justify-content: space-evenly; }
.LeagueStatsList__listItem__oCOvr.list-item.active::before, .LeagueStatsList__listItem__oCOvr.list-item:hover::before {
.LeagueStatsList__listItem__1pPhh.list-item.active::before, .LeagueStatsList__listItem__1pPhh.list-item:hover::before {
top: 8px;
left: 10px; }
.StatDisplay__baseStatRow__1B60A {
.StatDisplay__baseStatRow__3_Kiv {
display: flex;
align-items: center; }
.StatDisplay__baseStatRow__1B60A > * {
.StatDisplay__baseStatRow__3_Kiv > * {
flex-shrink: 0; }
.StatDisplay__baseStatRow__1B60A > progress {
.StatDisplay__baseStatRow__3_Kiv > progress {
flex-shrink: 1;
margin: 0 0 0 1em;
width: 5em;
@ -108,170 +129,6 @@
border-image-outset: 1;
padding: 2px; }
.PokemonExplorer__wrapper__3U9Pu {
margin: 0 auto;
width: 30rem;
display: flex;
flex-flow: column nowrap; }
.PokemonExplorer__container__3LR-_ {
display: flex;
justify-content: space-evenly; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1,
.PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
display: flex;
flex-flow: column nowrap;
flex-basis: 45%;
align-items: center; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 {
text-align: center; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
flex-grow: 1;
align-items: start; }
.LeagueIvExplorer__container__3GKct {
margin-bottom: 1rem; }
.LeagueIvExplorer__leftColumn__3au0L { }
.LeagueIvExplorer__rightColumn__1eyvh { }
.LeagueIvExplorer__leaguePokemonRank__3bjyU {
justify-content: flex-start;
flex-wrap: wrap; }
.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonInfoWrapper__3WVsh {
flex: 1 0 100%;
display: flex; }
.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__leftColumn__3au0L {
align-items: flex-start; }
.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonRankValue__3k3ih {
display: inline; }
.LeagueIvExplorer__ivsContainer__31sfb {
flex: 0 999 auto;
display: flex;
flex-flow: column nowrap;
/* for Firefox */ }
.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX {
display: flex;
justify-content: flex-end;
background-color: transparent;
padding: 0; }
.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > * {
background-color: #fff; }
.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > *:first-child {
margin-right: auto;
padding: 0 0.5em; }
.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX > *:last-child {
padding-right: 0.5em; }
.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 {
padding: 1.5rem 0 0; }
.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 .title.LeagueIvExplorer__ivContainerTitle__3Z3eX {
margin-bottom: 0;
margin-right: -8px;
margin-left: -8px;
padding: 0 2.5rem; }
.TypeIndicator__pokemonType__3MOQI {
text-transform: uppercase; }
.TypeIndicator__pokemonType__3MOQI.nes-container {
text-align: center;
padding: 0;
font-size: 0.7em;
line-height: 0.9;
flex-basis: 50%;
margin: 0.5rem 7px 11px; }
.TypeIndicator__pokemonType__3MOQI.normal {
color: #fff;
background-color: #a8a878; }
.TypeIndicator__pokemonType__3MOQI.normal::after {
box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.fighting {
color: #fff;
background-color: #c03028; }
.TypeIndicator__pokemonType__3MOQI.fighting::after {
box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.flying {
color: #fff;
background-color: #a890f0; }
.TypeIndicator__pokemonType__3MOQI.flying::after {
box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.poison {
color: #fff;
background-color: #a040a0; }
.TypeIndicator__pokemonType__3MOQI.poison::after {
box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.ground {
color: #fff;
background-color: #e0c068; }
.TypeIndicator__pokemonType__3MOQI.ground::after {
box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.rock {
color: #fff;
background-color: #b8a038; }
.TypeIndicator__pokemonType__3MOQI.rock::after {
box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.bug {
color: #fff;
background-color: #a8b820; }
.TypeIndicator__pokemonType__3MOQI.bug::after {
box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.ghost {
color: #fff;
background-color: #705898; }
.TypeIndicator__pokemonType__3MOQI.ghost::after {
box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.steel {
color: #fff;
background-color: #b8b8d0; }
.TypeIndicator__pokemonType__3MOQI.steel::after {
box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.fire {
color: #fff;
background-color: #f08030; }
.TypeIndicator__pokemonType__3MOQI.fire::after {
box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.water {
color: #fff;
background-color: #6890f0; }
.TypeIndicator__pokemonType__3MOQI.water::after {
box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.grass {
color: #fff;
background-color: #78c850; }
.TypeIndicator__pokemonType__3MOQI.grass::after {
box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.electric {
color: #fff;
background-color: #f8d030; }
.TypeIndicator__pokemonType__3MOQI.electric::after {
box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.psychic {
color: #fff;
background-color: #f85888; }
.TypeIndicator__pokemonType__3MOQI.psychic::after {
box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.ice {
color: #fff;
background-color: #98d8d8; }
.TypeIndicator__pokemonType__3MOQI.ice::after {
box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.dragon {
color: #fff;
background-color: #6f35fc; }
.TypeIndicator__pokemonType__3MOQI.dragon::after {
box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.dark {
color: #fff;
background-color: #705848; }
.TypeIndicator__pokemonType__3MOQI.dark::after {
box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__3MOQI.fairy {
color: #fff;
background-color: #ee99ac; }
.TypeIndicator__pokemonType__3MOQI.fairy::after {
box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.PokemonApp__wrapper__3ZEoC {
display: flex;
flex-flow: column nowrap;
@ -322,121 +179,201 @@
background-color: #000;
opacity: 0.7; }
.PokemonDisplay__highlight__h50BA {
color: #fff;
pointer-events: none; }
.PokemonDisplay__pokemonInfoWrapper__3AW3e {
margin-bottom: 1rem; }
.PokemonDisplay__pokemonInfoLeftColumn__1vugM { }
.PokemonDisplay__pokemonInfoRightColumn__27Q49 { }
.PokemonDisplay__pokemonName__WBKbk {
margin-bottom: 0; }
.PokemonDisplay__dexHeader__2HVfr {
margin-bottom: 0.25rem; }
.PokemonDisplay__pokemonTypeWrapper__1rJIA {
display: flex;
justify-content: center;
align-self: stretch; }
.PokemonDisplay__formHeader__1pr6M {
text-transform: uppercase;
margin-bottom: 0; }
.PokemonDisplay__pokemonBaseStats__3UJvn {
display: flex;
flex-flow: column nowrap;
align-items: start;
align-self: stretch; }
.PokemonExplorer__wrapper__3U9Pu {
.PokemonApp__displayWrapper__2PiN5 {
margin: 0 auto;
width: 30rem;
display: flex;
flex-flow: column nowrap; }
.PokemonExplorer__container__3LR-_ {
.PokemonApp__container__MsUHy {
display: flex;
justify-content: space-evenly; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1,
.PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,
.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
display: flex;
flex-flow: column nowrap;
flex-basis: 45%;
align-items: center; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__leftColumn__1qHS1 {
.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L {
text-align: center; }
.PokemonExplorer__container__3LR-_ .PokemonExplorer__rightColumn__KvY23 {
.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25 {
flex-grow: 1;
align-items: start; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 {
position: relative;
padding-top: 6px;
padding-right: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
position: absolute; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(1) {
position: inherit;
z-index: 3; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(2) {
top: 0;
left: 6px;
z-index: 2; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(3) {
left: 12px;
z-index: 1; }
.TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(4) {
left: 18px;
z-index: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
padding-top: 12px;
padding-right: 12px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(3) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(2) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
padding-top: 18px;
padding-right: 18px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(4) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(3) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(2) {
top: 12px; }
.LeagueIvExplorer__container__23wLQ {
margin-bottom: 1rem; }
.TypeEffectiveDisplay__wrapper__1FFIj {
margin: 0 1em; }
.TypeEffectiveDisplay__wrapper__1FFIj * + h4 {
margin-top: 1em; }
.TypeEffectiveDisplay__wrapper__1FFIj h4 p {
font-size: 0.7em;
color: #b6b6b6;
margin: 0; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
.LeagueIvExplorer__leftColumn__1HzQ- { }
.LeagueIvExplorer__rightColumn__rwhPb { }
.LeagueIvExplorer__leaguePokemonRank__25epF {
justify-content: flex-start;
flex-wrap: wrap; }
.LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__pokemonInfoWrapper__3Zqjc {
flex: 1 0 100%;
display: flex; }
.LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__leftColumn__1HzQ- {
align-items: flex-start; }
.LeagueIvExplorer__leaguePokemonRank__25epF .LeagueIvExplorer__pokemonRankValue__2bxg3 {
display: inline; }
.LeagueIvExplorer__ivsContainer__7fSaL {
flex: 0 999 auto;
display: flex;
flex-flow: row wrap;
align-items: end; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
margin-right: 14px;
height: 0%; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 {
width: auto;
margin-right: 2px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
margin-right: -4px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
margin-right: -10px; }
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > *,
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
flex-basis: unset;
width: 6.75rem; }
flex-flow: column nowrap;
/* for Firefox */ }
.LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 {
display: flex;
justify-content: flex-end;
background-color: transparent;
padding: 0; }
.LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > * {
background-color: #fff; }
.LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > *:first-child {
margin-right: auto;
padding: 0 0.5em; }
.LeagueIvExplorer__ivsContainer__7fSaL .title.LeagueIvExplorer__ivContainerTitle__3P9q4 > *:last-child {
padding-right: 0.5em; }
.LeagueIvExplorer__ivsContainer__7fSaL.LeagueIvExplorer__diplayingIvList__3vrin {
padding: 1.5rem 0 0; }
.LeagueIvExplorer__ivsContainer__7fSaL.LeagueIvExplorer__diplayingIvList__3vrin .title.LeagueIvExplorer__ivContainerTitle__3P9q4 {
margin-bottom: 0;
margin-right: -8px;
margin-left: -8px;
padding: 0 2.5rem; }
.TypeIndicator__pokemonType__1rrg9 {
text-transform: uppercase; }
.TypeIndicator__pokemonType__1rrg9.nes-container {
text-align: center;
padding: 0;
font-size: 0.7em;
line-height: 0.9;
flex-basis: 50%;
margin: 0.5rem 7px 11px; }
.TypeIndicator__pokemonType__1rrg9.normal {
color: #fff;
background-color: #a8a878; }
.TypeIndicator__pokemonType__1rrg9.normal::after {
box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.fighting {
color: #fff;
background-color: #c03028; }
.TypeIndicator__pokemonType__1rrg9.fighting::after {
box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.flying {
color: #fff;
background-color: #a890f0; }
.TypeIndicator__pokemonType__1rrg9.flying::after {
box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.poison {
color: #fff;
background-color: #a040a0; }
.TypeIndicator__pokemonType__1rrg9.poison::after {
box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.ground {
color: #fff;
background-color: #e0c068; }
.TypeIndicator__pokemonType__1rrg9.ground::after {
box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.rock {
color: #fff;
background-color: #b8a038; }
.TypeIndicator__pokemonType__1rrg9.rock::after {
box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.bug {
color: #fff;
background-color: #a8b820; }
.TypeIndicator__pokemonType__1rrg9.bug::after {
box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.ghost {
color: #fff;
background-color: #705898; }
.TypeIndicator__pokemonType__1rrg9.ghost::after {
box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.steel {
color: #fff;
background-color: #b8b8d0; }
.TypeIndicator__pokemonType__1rrg9.steel::after {
box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.fire {
color: #fff;
background-color: #f08030; }
.TypeIndicator__pokemonType__1rrg9.fire::after {
box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.water {
color: #fff;
background-color: #6890f0; }
.TypeIndicator__pokemonType__1rrg9.water::after {
box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.grass {
color: #fff;
background-color: #78c850; }
.TypeIndicator__pokemonType__1rrg9.grass::after {
box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.electric {
color: #fff;
background-color: #f8d030; }
.TypeIndicator__pokemonType__1rrg9.electric::after {
box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.psychic {
color: #fff;
background-color: #f85888; }
.TypeIndicator__pokemonType__1rrg9.psychic::after {
box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.ice {
color: #fff;
background-color: #98d8d8; }
.TypeIndicator__pokemonType__1rrg9.ice::after {
box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.dragon {
color: #fff;
background-color: #6f35fc; }
.TypeIndicator__pokemonType__1rrg9.dragon::after {
box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.dark {
color: #fff;
background-color: #705848; }
.TypeIndicator__pokemonType__1rrg9.dark::after {
box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.TypeIndicator__pokemonType__1rrg9.fairy {
color: #fff;
background-color: #ee99ac; }
.TypeIndicator__pokemonType__1rrg9.fairy::after {
box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
.PokemonDisplay__highlight__2zbxz {
color: #fff;
pointer-events: none; }
.PokemonDisplay__pokemonInfoWrapper__1gaDq {
margin-bottom: 1rem; }
.PokemonDisplay__pokemonInfoLeftColumn__22kLA { }
.PokemonDisplay__pokemonInfoRightColumn__3TFUR { }
.PokemonDisplay__pokemonName__2XDXE {
margin-bottom: 0; }
.PokemonDisplay__dexHeader___Uki8 {
margin-bottom: 0.25rem; }
.PokemonDisplay__pokemonTypeWrapper__2GdkI {
display: flex;
justify-content: center;
align-self: stretch; }
.PokemonDisplay__formHeader__2EgEf {
text-transform: uppercase;
margin-bottom: 0; }
.PokemonDisplay__pokemonBaseStats__e699B {
display: flex;
flex-flow: column nowrap;
align-items: start;
align-self: stretch; }
.PokemonSelectList__leftPanel__2ktnA {
font-size: 0.8rem;
@ -498,5 +435,69 @@
.PokemonSelectList__form__VIw8Q {
flex: 0 1 100%; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx {
position: relative;
z-index: 0;
padding-top: 6px;
padding-right: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx > * {
position: absolute; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(1) {
position: inherit;
z-index: 3; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(2) {
top: 0;
left: 6px;
z-index: 2; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(3) {
left: 12px;
z-index: 1; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx :nth-child(4) {
left: 18px;
z-index: 0; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd {
padding-top: 12px;
padding-right: 12px; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd :nth-child(3) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd :nth-child(2) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza {
padding-top: 18px;
padding-right: 18px; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(4) {
top: 0; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(3) {
top: 6px; }
.TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza :nth-child(2) {
top: 12px; }
.TypeEffectiveDisplay__wrapper__1DgN_ {
margin: 0 1em; }
.TypeEffectiveDisplay__wrapper__1DgN_ * + h4 {
margin-top: 1em; }
.TypeEffectiveDisplay__wrapper__1DgN_ h4 p {
font-size: 0.7em;
color: #b6b6b6;
margin: 0; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n {
display: flex;
flex-flow: row wrap;
align-items: end; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n > * {
margin-right: 14px;
height: 0%; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx {
width: auto;
margin-right: 2px; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX3__3LBbd {
margin-right: -4px; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx.TypeEffectiveDisplay__multiplierWrapperX4__iKCza {
margin-right: -10px; }
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n > *,
.TypeEffectiveDisplay__wrapper__1DgN_ .TypeEffectiveDisplay__indicatorWrapper__wJ82n .TypeEffectiveDisplay__multiplierWrapper__1E9zx > * {
flex-basis: unset;
width: 6.75rem; }
/*# sourceMappingURL=main.tmp.css.map*/

1892
dist/main-bundle.js vendored
View File

File diff suppressed because it is too large Load Diff

98
src/ts/app/PokemonApp.tsx
View File

@ -8,23 +8,22 @@ import classNames from 'classnames';
import { League } from 'app/models/League';
import { appReducers } from './index';
import { appReducers } from 'app/index';
import * as ActionsPokemonExplorer from './components/PokemonExplorer/actions';
import * as ActionsPokemonSelectList from './components/PokemonSelectList/actions';
import { IPokemonAppDispatch } from './types';
import * as ActionsPokemonExplorer from 'app/actions';
import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
import { IndividualValueKey, IPokemonAppDispatch } from 'app/types';
import { IndividualValueKey } from './components/PokemonExplorer/types';
import { Footer } from './components/Footer';
import { Header } from './components/Header';
import { PokemonExplorer } from './components/PokemonExplorer/PokemonExplorer';
import { TypeEffectiveDisplay } from './components/PokemonExplorer/TypeEffectiveDisplay';
import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList';
import { Footer } from 'app/components/Footer';
import { Header } from 'app/components/Header';
import { LeagueIvExplorer } from 'app/components/LeagueIvExplorer';
import { PokemonDisplay } from 'app/components/PokemonDisplay';
import { PokemonSelectList } from 'app/components/PokemonSelectList/PokemonSelectList';
import { TypeEffectiveDisplay } from 'app/components/TypeEffectiveDisplay';
import { appendQueryString, getCurrentQueryStringVlaues } from 'app/utils/navigation';
import * as styles from './styles/PokemonApp.scss';
import * as styles from 'app/styles/PokemonApp.scss';
type PokemonAppProps = ReturnType<typeof appReducers>;
@ -33,8 +32,11 @@ interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch
location : RouteComponentProps['location'];
}
type Navigation = 'pokedex';
type SubNavigation = 'pvp' | 'types' | 'moves';
interface IState {
activeNavigation : 'pokedex' | 'pvp' | 'types' | 'moves' | null;
activeNavigation : Navigation | null;
widgets : { [ key in SubNavigation ] : boolean };
}
class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
@ -44,6 +46,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
this.state = {
activeNavigation: null,
widgets: {
pvp: true,
types: false,
moves: false,
},
};
}
@ -93,7 +100,8 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
leaguePokemon,
} = this.props.pokemonExplorerState;
const {
activeNavigation
activeNavigation,
widgets,
} = this.state;
const isOverlayShown = activeNavigation === 'pokedex';
@ -109,6 +117,10 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
styles.leftNavigation,
);
const displayWrapperCss = classNames(
styles.displayWrapper,
);
const iconCss = classNames(
'icon',
'pixel',
@ -132,36 +144,36 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
iconCss,
'pvp',
{
active: activeNavigation === 'pvp',
active: widgets.pvp,
}
);
const pvpButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'pvp',
[styles.activeNavigationButton]: widgets.pvp,
}
);
const badgeCss = classNames(
iconCss,
'badge',
{
active: activeNavigation === 'types',
active: widgets.types,
}
);
const badgeButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'types',
[styles.activeNavigationButton]: widgets.types,
}
);
const tmCss = classNames(
iconCss,
'tm',
{
active: activeNavigation === 'moves',
active: widgets.moves,
}
);
const tmButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'moves',
[styles.activeNavigationButton]: widgets.moves,
}
);
@ -169,19 +181,25 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
<div className={ wrapperCss }>
<Header />
<div className={ styles.body }>
<div className={ displayWrapperCss }>
{ leaguePokemon !== null &&
<PokemonExplorer
<PokemonDisplay
leaguePokemon={ leaguePokemon }
temporaryNavigationIsActive={ isOverlayShown }
isLoading={ this.props.pokemonExplorerState.isLoading }
/>
}
{ widgets.pvp && leaguePokemon !== null &&
<LeagueIvExplorer
activeLeague={ league }
leaguePokemon={ leaguePokemon }
individualValues={ individualValues }
handleChangeIndividualValue={ this.handleChangeIndividualValue }
handleMaximizeLevel={ this.handleMaximizeLevel }
handleChangeLeague={ this.handleChangeLeagueNavigation }
handleChangeLeague={ this.handleChangeLeague }
/>
}
{ activeNavigation === 'types' && leaguePokemon !== null &&
</div>
{ widgets.types && leaguePokemon !== null &&
<TypeEffectiveDisplay
effectiveness={ leaguePokemon.effectiveness }
pokemonName={ leaguePokemon.name }
@ -189,9 +207,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
<div className={ leftNavCss }>
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
<button className={ pvpButtonCss } onClick={ this.handleTypesClick }><i className={ pvpCss } /></button>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleTypesClick }><i className={ tmCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
</div>
{ isOverlayShown &&
<div className={ styles.overlay } onClick={ this.handleOverlayClick } />
@ -225,9 +243,33 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
});
}
private readonly handleTypesClick = () => {
private readonly handlePvpClick = () => {
const widgets = this.state.widgets;
this.setState({
activeNavigation: this.state.activeNavigation !== 'types' ? 'types' : null,
widgets: {
...widgets,
pvp: !widgets.pvp
}
});
}
private readonly handleTypesClick = () => {
const widgets = this.state.widgets;
this.setState({
widgets: {
...widgets,
types: !widgets.types
}
});
}
private readonly handleMovesClick = () => {
const widgets = this.state.widgets;
this.setState({
widgets: {
...widgets,
moves: !widgets.moves
}
});
}

3
src/ts/app/components/PokemonExplorer/actions.ts → src/ts/app/actions.ts
View File

@ -1,7 +1,6 @@
import { action } from 'typesafe-actions';
import { ThunkResult } from 'app/types';
import { PokemonExplorerActionTypes } from './types';
import { PokemonExplorerActionTypes, ThunkResult } from 'app/types';
import { calculateMaxLevelForLeague } from 'app/utils/calculator';

2
src/ts/app/components/Footer.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import * as styles from '../styles/PokemonApp.scss';
import * as styles from 'app/styles/PokemonApp.scss';
interface IFooterProps {}

2
src/ts/app/components/Header.tsx
View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import classNames from 'classnames';
import * as styles from '../styles/PokemonApp.scss';
import * as styles from 'app/styles/PokemonApp.scss';
interface IHeaderProps {}

4
src/ts/app/components/PokemonExplorer/IvForm.tsx → src/ts/app/components/IvForm.tsx
View File

@ -2,9 +2,9 @@ import React from 'react';
import classNames from 'classnames';
import { IIndividualValues, IndividualValueKey } from './types';
import { IIndividualValues, IndividualValueKey } from '../types';
import * as styles from './styles/IvForm.scss';
import * as styles from 'app/styles/IvForm.scss';
export interface IIvFormProps {
ivs : IIndividualValues;

4
src/ts/app/components/PokemonExplorer/LeagueIvExplorer.tsx → src/ts/app/components/LeagueIvExplorer.tsx
View File

@ -6,14 +6,14 @@ import { IBestWorstStats, ILeaguePokemon, League, MaxCpByLeague } from 'app/mode
import { Grade, IStats } from 'app/models/Pokemon';
import { calculateCp, calculateStatAtLevel } from 'app/utils/calculator';
import { IIndividualValues, IndividualValueKey } from './types';
import { IIndividualValues, IndividualValueKey } from 'app/types';
import { IvForm } from './IvForm';
import { LeagueSelector } from './LeagueSelector';
import { LeagueStatsList } from './LeagueStatsList';
import { StatDisplay } from './StatDisplay';
import * as styles from './styles/LeagueIvExplorer.scss';
import * as styles from 'app/styles/LeagueIvExplorer.scss';
export interface ILeagueIvExplorerProps {
activeLeague : League;

2
src/ts/app/components/PokemonExplorer/LeagueSelector.tsx → src/ts/app/components/LeagueSelector.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import { League, LeagueLabels } from 'app/models/League';
import * as styles from './styles/LeagueSelector.scss';
import * as styles from 'app/styles/LeagueSelector.scss';
export interface ILeagueSelectorProps {
activeLeague : League;

4
src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx → src/ts/app/components/LeagueStatsList.tsx
View File

@ -7,9 +7,9 @@ import { FixedSizeList } from 'react-window';
import classNames from 'classnames';
import { Grade, IStats } from 'app/models/Pokemon';
import { IIndividualValues } from './types';
import { IIndividualValues } from 'app/types';
import * as styles from './styles/LeagueStatsList.scss';
import * as styles from 'app/styles/LeagueStatsList.scss';
export interface ILeagueStatsListProps {
activePokemonId : POGOProtos.Enums.PokemonId;

2
src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx → src/ts/app/components/PokemonDisplay.tsx
View File

@ -11,7 +11,7 @@ import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';
import { StatDisplay } from './StatDisplay';
import { TypeIndicator } from './TypeIndicator';
import * as styles from './styles/PokemonDisplay.scss';
import * as styles from 'app/styles/PokemonDisplay.scss';
export interface IPokemonDisplay {
leaguePokemon : IPokemon;

54
src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
View File

@ -1,54 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import { ILeagueIvExplorerProps, LeagueIvExplorer } from './LeagueIvExplorer';
import { PokemonDisplay } from './PokemonDisplay';
import * as styles from './styles/PokemonExplorer.scss';
export interface IPokemonExplorerProps extends ILeagueIvExplorerProps {
temporaryNavigationIsActive : boolean;
className? : string;
isLoading : boolean;
}
export class PokemonExplorer extends React.Component<IPokemonExplorerProps> {
public render() {
const {
temporaryNavigationIsActive,
className,
activeLeague,
individualValues,
leaguePokemon,
handleChangeLeague,
handleChangeIndividualValue,
handleMaximizeLevel,
} = this.props;
const wrapperCss = classNames(
styles.wrapper,
className
);
return (
<React.Fragment>
<div className={ wrapperCss }>
<PokemonDisplay
leaguePokemon={ leaguePokemon }
temporaryNavigationIsActive={ temporaryNavigationIsActive }
/>
<LeagueIvExplorer
activeLeague={ activeLeague }
leaguePokemon={ leaguePokemon }
individualValues={ individualValues }
handleChangeIndividualValue={ handleChangeIndividualValue }
handleMaximizeLevel={ handleMaximizeLevel }
handleChangeLeague={ handleChangeLeague }
/>
</div>
</React.Fragment>
);
}
}

31
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
View File

@ -1,31 +0,0 @@
@import '~styles/Variables.scss';
.wrapper {
margin: 0 auto;
// flex-basis: 30rem;
width: 30rem;
display: flex;
flex-flow: column nowrap;
}
.container {
display: flex;
justify-content: space-evenly;
.leftColumn,
.rightColumn {
display: flex;
flex-flow: column nowrap;
flex-basis: 45%;
align-items: center;
}
.leftColumn {
text-align: center;
}
.rightColumn {
flex-grow: 1;
align-items: start;
}
}

6
src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts vendored
View File

@ -1,6 +0,0 @@
// This file is automatically generated.
// Please do not change this file!
export const container: string;
export const leftColumn: string;
export const rightColumn: string;
export const wrapper: string;

29
src/ts/app/components/PokemonExplorer/types.ts
View File

@ -1,29 +0,0 @@
import { ILeaguePokemon, League } from 'app/models/League';
import { IMaxStats } from 'app/models/Pokemon';
export type IndividualValueKey = 'level' | 'hp' | 'atk' | 'def';
export interface IIndividualValues {
level : number | null;
ivHp : number | null;
ivAtk : number | null;
ivDef : number | null;
}
export interface IPokemonExplorerState {
isLoading : boolean;
leaguePokemon : ILeaguePokemon | null;
maxPossibleStats : IMaxStats;
individualValues : IIndividualValues;
league : League;
}
export const PokemonExplorerActionTypes = {
SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
SET_MAX_STATS: 'POKEMON_EXPLORER/SET_MAX_STATS',
SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
};

2
src/ts/app/components/PokemonExplorer/StatDisplay.tsx → src/ts/app/components/StatDisplay.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import * as styles from './styles/StatDisplay.scss';
import * as styles from 'app/styles/StatDisplay.scss';
export interface IStartDisplayProps {
statLabel : string;

2
src/ts/app/components/PokemonExplorer/TypeEffectiveDisplay.tsx → src/ts/app/components/TypeEffectiveDisplay.tsx
View File

@ -6,7 +6,7 @@ import { IPokemon, TypeEffectiveness } from 'app/models/Pokemon';
import { TypeIndicator } from './TypeIndicator';
import * as styles from './styles/TypeEffectiveDisplay.scss';
import * as styles from 'app/styles/TypeEffectiveDisplay.scss';
export interface ITypeEffectiveDisplayProps {
pokemonName : string;

2
src/ts/app/components/PokemonExplorer/TypeIndicator.tsx → src/ts/app/components/TypeIndicator.tsx
View File

@ -6,7 +6,7 @@ import classNames from 'classnames';
import { formatType } from 'app/utils/formatter';
import * as styles from './styles/TypeIndicator.scss';
import * as styles from 'app/styles/TypeIndicator.scss';
export interface ITypeEffectiveDisplayProps {
className? : string;

4
src/ts/app/index.tsx
View File

@ -9,8 +9,8 @@ import { IPokemonAppExtraArguments } from 'app/types';
import { PokemonService } from 'api/PokemonService';
import { PokemonExplorerReducers } from './components/PokemonExplorer/reducers';
import { PokemonSelectListReducers } from './components/PokemonSelectList/reducers';
import { PokemonSelectListReducers } from 'app/components/PokemonSelectList/reducers';
import { PokemonExplorerReducers } from 'app/reducers';
import { ConnectedPokemonApp } from './PokemonApp';

4
src/ts/app/components/PokemonExplorer/reducers.ts → src/ts/app/reducers.ts
View File

@ -2,8 +2,8 @@ import { Reducer } from 'redux';
import { League } from 'app/models/League';
import * as Actions from './actions';
import { IPokemonExplorerState, PokemonExplorerActionTypes } from './types';
import * as Actions from 'app/actions';
import { IPokemonExplorerState, PokemonExplorerActionTypes } from 'app/types';
export const initialState : IPokemonExplorerState = {
isLoading: false,

0
src/ts/app/components/PokemonExplorer/styles/IvForm.scss → src/ts/app/styles/IvForm.scss
View File

0
src/ts/app/components/PokemonExplorer/styles/IvForm.scss.d.ts → src/ts/app/styles/IvForm.scss.d.ts vendored
View File

6
src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss → src/ts/app/styles/LeagueIvExplorer.scss
View File

@ -1,16 +1,16 @@
@import '~styles/Variables.scss';
.container {
composes: container from './PokemonExplorer.scss';
composes: container from './PokemonApp.scss';
margin-bottom: 1rem;
}
.leftColumn {
composes: leftColumn from './PokemonExplorer.scss';
composes: leftColumn from './PokemonApp.scss';
}
.rightColumn {
composes: rightColumn from './PokemonExplorer.scss';
composes: rightColumn from './PokemonApp.scss';
}
.leaguePokemonRank {

0
src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss.d.ts → src/ts/app/styles/LeagueIvExplorer.scss.d.ts vendored
View File

0
src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss → src/ts/app/styles/LeagueSelector.scss
View File

0
src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss.d.ts → src/ts/app/styles/LeagueSelector.scss.d.ts vendored
View File

0
src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss → src/ts/app/styles/LeagueStatsList.scss
View File

0
src/ts/app/components/PokemonExplorer/styles/LeagueStatsList.scss.d.ts → src/ts/app/styles/LeagueStatsList.scss.d.ts vendored
View File

30
src/ts/app/styles/PokemonApp.scss
View File

@ -75,3 +75,33 @@ $overlay-opacity: 0.7;
background-color: $main-overlay-color;
opacity: $overlay-opacity;
}
.displayWrapper {
margin: 0 auto;
// flex-basis: 30rem;
width: 30rem;
display: flex;
flex-flow: column nowrap;
}
.container {
display: flex;
justify-content: space-evenly;
.leftColumn,
.rightColumn {
display: flex;
flex-flow: column nowrap;
flex-basis: 45%;
align-items: center;
}
.leftColumn {
text-align: center;
}
.rightColumn {
flex-grow: 1;
align-items: start;
}
}

4
src/ts/app/styles/PokemonApp.scss.d.ts vendored
View File

@ -2,10 +2,14 @@
// Please do not change this file!
export const activeNavigationButton: string;
export const body: string;
export const container: string;
export const displayWrapper: string;
export const footer: string;
export const header: string;
export const highlight: string;
export const leftColumn: string;
export const leftNavigation: string;
export const overlaid: string;
export const overlay: string;
export const rightColumn: string;
export const wrapper: string;

8
src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss → src/ts/app/styles/PokemonDisplay.scss
View File

@ -1,22 +1,22 @@
@import '~styles/Variables.scss';
.highlight {
composes: highlight from '../../../styles/PokemonApp.scss';
composes: highlight from './PokemonApp.scss';
color: $main-active-font-color;
pointer-events: none;
}
.pokemonInfoWrapper {
composes: container from './PokemonExplorer.scss';
composes: container from './PokemonApp.scss';
margin-bottom: 1rem;
}
.pokemonInfoLeftColumn {
composes: leftColumn from './PokemonExplorer.scss';
composes: leftColumn from './PokemonApp.scss';
}
.pokemonInfoRightColumn {
composes: rightColumn from './PokemonExplorer.scss';
composes: rightColumn from './PokemonApp.scss';
}
.pokemonName {

0
src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss.d.ts → src/ts/app/styles/PokemonDisplay.scss.d.ts vendored
View File

0
src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss → src/ts/app/styles/StatDisplay.scss
View File

0
src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss.d.ts → src/ts/app/styles/StatDisplay.scss.d.ts vendored
View File

1
src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss → src/ts/app/styles/TypeEffectiveDisplay.scss
View File

@ -2,6 +2,7 @@
.multiplierWrapper {
position: relative;
z-index: 0; // so the contents don't show up over the overlay
padding-top: 6px;
padding-right: 6px;

0
src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss.d.ts → src/ts/app/styles/TypeEffectiveDisplay.scss.d.ts vendored
View File

0
src/ts/app/components/PokemonExplorer/styles/TypeIndicator.scss → src/ts/app/styles/TypeIndicator.scss
View File

0
src/ts/app/components/PokemonExplorer/styles/TypeIndicator.scss.d.ts → src/ts/app/styles/TypeIndicator.scss.d.ts vendored
View File

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

@ -3,8 +3,10 @@ import { ThunkAction, ThunkDispatch } from 'redux-thunk';
import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';
import { IPokemonExplorerState } from './components/PokemonExplorer/types';
import { IPokemonSelectListState } from './components/PokemonSelectList/types';
import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types';
import { ILeaguePokemon, League } from 'app/models/League';
import { IMaxStats } from 'app/models/Pokemon';
import { PokemonService } from 'api/PokemonService';
@ -26,3 +28,30 @@ type ThunkDispatchPokemonApp = ThunkDispatch<IPokemonAppStore, IPokemonAppExtraA
export interface IPokemonAppDispatch {
dispatch : ThunkDispatchPokemonApp;
}
export type IndividualValueKey = 'level' | 'hp' | 'atk' | 'def';
export interface IIndividualValues {
level : number | null;
ivHp : number | null;
ivAtk : number | null;
ivDef : number | null;
}
export interface IPokemonExplorerState {
isLoading : boolean;
leaguePokemon : ILeaguePokemon | null;
maxPossibleStats : IMaxStats;
individualValues : IIndividualValues;
league : League;
}
export const PokemonExplorerActionTypes = {
SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
SET_MAX_STATS: 'POKEMON_EXPLORER/SET_MAX_STATS',
SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',
SET_IV_DEF: 'POKEMON_EXPLORER/SET_IV_DEF',
SET_ACTIVE_LEAGUE: 'POKEMON_EXPLORER/SET_ACTIVE_LEAGUE',
};