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

improve layout and colors

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-01 23:08:37 -05:00
parent 4b77b4fdbe
commit 83bf78fee4
9 changed files with 164 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/scss/Variables.scss
View File

@ -1,11 +1,48 @@
$light: #e8e8e8;
$medium: #939393;
$dark: #3d3d3d;
$game-boy-1: #e3eec0;
$game-boy-2: #aeba89;
$game-boy-3: #5e6745;
$game-boy-4: #202020;
$game-boy-pocket-1: #e0dbcd;
$game-boy-pocket-2: #a89f94;
$game-boy-pocket-3: #706b66;
$game-boy-pocket-4: #2b2b26;
$gbc-pokemon-red-1: #ffefff;
$gbc-pokemon-red-2: #f7b58c;
$gbc-pokemon-red-3: #84739c;
$gbc-pokemon-red-4: #181010;
$gbc-pokemon-blue-1: #e7e8f3;
$gbc-pokemon-blue-2: #8c83c3;
$gbc-pokemon-blue-3: #634d8f;
$gbc-pokemon-blue-4: #120b19;
$gray-scale-1: #fff;
$gray-scale-2: #b6b6b6;
$gray-scale-3: #676767;
$gray-scale-4: #000;
$custom-light: #f9f9f9;
$custom-hover: #e8e8e8;
$custom-medium: #939393;
$custom-dark: #3d3d3d;
$nes-dark: #212529;
$background-color: #f9f9f9;
$font-color: $dark;
$border-color: $dark;
// $main-background-color: $custom-light;
// $main-font-primary-color: $custom-dark;
// $main-font-secondary-color: $custom-medium;
// $main-hover-color: $custom-hover;
// $main-border-color: $custom-dark;
$main-background-color: $gray-scale-1;
$main-font-primary-color: $gray-scale-4;
$main-font-secondary-color: $gray-scale-2;
$main-active-background-color: $gray-scale-3;
$main-active-font-color: $gray-scale-1;
$main-border-color: $gray-scale-4;
$main-hover-color: darken($main-background-color, 5%);
$normal-primary: #a8a77a;
$normal-contrast: #fff;

52
src/scss/index.scss
View File

@ -10,26 +10,63 @@ body {
a {
display: flex;
align-items: center;
&:hover {
background-color: $main-hover-color;
}
&.active {
background-color: $main-active-background-color;
color: $main-active-font-color;
& > * {
color: $main-active-font-color;
}
}
}
a:hover {
background-color: $light;
.de-emphasize {
color: $main-font-secondary-color;
}
/** nes.css overrides */
body {
background-color: $background-color;
color: $font-color;
background-color: $main-background-color;
color: $main-font-primary-color;
}
a.active:not([href]):not([tabindex]) {
color: $main-active-font-color;
}
a.list-item {
position: relative;
&.active,
&:hover {
&::before {
content: "\A";
border-style: solid;
border-width: 7px 0 7px 11px;
border-color: transparent transparent transparent $main-font-primary-color;
position: absolute;
left: 8px;
}
}
&.active::before {
border-color: transparent transparent transparent $main-active-font-color;
}
}
.nes-container::after,
.nes-container.is-rounded::after, {
border-color: $dark;
border-color: $main-border-color;
}
.nes-container.with-title > .title {
background-color: $background-color;
background-color: $main-background-color;
}
.nes-container:not(:last-child) {
@ -51,5 +88,6 @@ body {
.nes-input,
.nes-textarea {
box-shadow: 0 4px $dark, 0 -4px $dark, 4px 0 $dark, -4px 0 $dark;
background-color: $main-background-color;
box-shadow: 0 4px $main-border-color, 0 -4px $main-border-color, 4px 0 $main-border-color, -4px 0 $main-border-color;
}

7
src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
View File

@ -120,13 +120,16 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
private rowFactory({ index, style } : IRowFactory) {
const activeIvs = this.props.activeIndividualValues;
const stats = this.props.leagueStatsList[index];
const css = classNames({
const css = classNames(
'list-item',
{
active: activeIvs.level === stats.level &&
activeIvs.hp === stats.ivHp &&
activeIvs.atk === stats.ivAtk &&
activeIvs.def === stats.ivDef,
highlight: this.state.activeIndex === index,
});
}
);
const onClick = () => {
this.props.handleActivateLeagueStats(stats);
this.setState({ activeIndex: index });

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

@ -195,7 +195,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<i className={ pokemonIconCss } />
<h4 className={ styles.dexHeader }>No.{ dex }</h4>
{ leaguePokemon.form &&
<h6 className={ styles.formHeader }>{ leaguePokemon.form } Forme</h6>
<h6 className={ styles.formHeader }>{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Forme</h6>
}
<div className={ styles.pokemonTypeWrapper }>
{ type1 }

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

@ -1,10 +1,11 @@
@import 'styles/Variables.scss';
.wrapper {
height: 100vh;
margin: 0 auto;
flex-basis: 15rem;
display: flex;
flex-flow: column nowrap;
height: 100vh;
width: 25rem;
}
.pokemonName {
@ -48,6 +49,7 @@
margin-top: 0.5rem;
font-size: 0.7em;
flex-basis: 50%;
margin-bottom: 14px; // reset to default nes.css value
}
// override the default nes.css default, which uses #fff
@ -243,7 +245,9 @@
:global(.nes-field.is-inline) .ivInput {
flex-grow: 0;
width: 5em;
width: 3.75rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
:global(.nes-field.is-inline).fieldRow {

43
src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { ContentRect, default as Measure } from 'react-measure';
import { FixedSizeList } from 'react-window';
import { VariableSizeList } from 'react-window';
import classNames from 'classnames';
@ -50,10 +50,13 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
this.setState({ dimensions: contentRect.bounds });
}
};
const classes = classNames({
const classes = classNames(
'nes-container',
styles.leftPanel,
{
loading: this.props.isLoading,
[styles.leftPanel]: true,
});
}
);
return (
<div id="pokemon-select-list" className={ classes }>
@ -64,14 +67,15 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
{
({ measureRef }) => (
<div ref={ measureRef }>
<FixedSizeList
<VariableSizeList
height={ height }
itemCount={ this.props.pokemonList.length }
itemSize={ 35 }
estimatedItemSize={ 25 }
itemSize={ this.calculateRowHeight }
width={ width }
>
{ this.rowFactory.bind(this) }
</FixedSizeList>
</VariableSizeList>
</div>
)
}
@ -80,21 +84,38 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
);
}
private readonly calculateRowHeight = (index : number) => this.props.pokemonList[index].form !== null ? 40 : 25;
private rowFactory({ index, style } : IRowFactory) {
const pokemon = this.props.pokemonList[index];
const dex = formatDexNumber(pokemon.dex);
const css = classNames({
const anchorCss = classNames(
'list-item',
{
active: this.props.activePokemonIndex === index
});
}
);
const dexCss = classNames(
'de-emphasize',
styles.dex
);
const formCss = classNames(
'de-emphasize',
styles.form
);
const onClick = () => this.props.handleActivatePokemon(index);
return (
<a
key={ index }
style={ style }
className={ css }
className={ anchorCss }
onClick={ onClick }
>
<span>{ `#${dex} ${pokemon.name} ${(pokemon.form ? ` (${pokemon.form})` : '')}` }</span>
<span>{ pokemon.name }</span>
<span className={ dexCss }>#{ dex }</span>
{ pokemon.form &&
<span className={ formCss }>{ pokemon.form.toLowerCase().replace('_', ' ') } Forme</span>
}
</a>
);
}

22
src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
View File

@ -2,10 +2,28 @@
.leftPanel {
height: 100vh;
border: 1px solid $border-color;
width: 20em;
font-size: 0.8rem;
flex-basis: 20em;
padding: 6px;
& > * {
height: 100%;
}
a {
padding: 5px 1em 5px 2em;
justify-content: space-between;
align-content: space-around;
flex-wrap: wrap;
}
}
.dex,
.form {
font-size: 0.8em;
text-transform: capitalize;
}
.form {
flex: 0 1 100%;
}

2
src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts vendored
View File

@ -1,3 +1,5 @@
// This file is automatically generated.
// Please do not change this file!
export const dex: string;
export const form: string;
export const leftPanel: string;

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

@ -7,6 +7,7 @@
height: 100vh;
& > * {
flex: 1 auto;
flex-grow: 0;
flex-shrink: 0;
}
}