diff --git a/src/img/pokedex.png b/src/img/pokedex.png new file mode 100644 index 0000000..988f27d Binary files /dev/null and b/src/img/pokedex.png differ diff --git a/src/img/pokedex_small.png b/src/img/pokedex_small.png new file mode 100644 index 0000000..41a6df5 Binary files /dev/null and b/src/img/pokedex_small.png differ diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index bdadeaf..6bcfc72 100644 --- a/src/scss/sprites.scss +++ b/src/scss/sprites.scss @@ -1,5 +1,33 @@ $scale: 4; +.pokedex { + $pokedex-scale: 4; + + @keyframes blink { + 100% { background-position-x: -18px * $pokedex-scale; } + } + + display: inline-block; + background: url('../img/pokedex_small.png') no-repeat; + background-size: 18px * $pokedex-scale 12px * $pokedex-scale; + background-position: 0 * $pokedex-scale 0 * $pokedex-scale; + overflow: hidden; + text-indent: -9999px; + text-align: left; + height: 12px * $pokedex-scale; + width: 6px * $pokedex-scale; + image-rendering: -webkit-crisp-edges; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; + + &:hover { + background-position-x: -6px * $pokedex-scale; + animation: blink 500ms steps(2) infinite; + } +} + .pokeball { $pokeball-scale: 2; @@ -926,22 +954,19 @@ $scale: 4; .menu { @keyframes dance { - from { background-position-x: 0; } - to { background-position-x: -32px; } + 100% { background-position-x: -32px; } } @keyframes pokeball-dance { - from { background-position-y: -128px; } - to { background-position-y: -130px; } + 100% { background-position-y: -130px; } } @keyframes fossil-dance { - from { background-position-y: -144px; } - to { background-position-y: -146px; } + 100% { background-position-y: -146px; } } :hover > & { - animation: dance 300ms steps(2) infinite alternate; + animation: dance 300ms steps(2) infinite; } // rhydon diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 75d8c39..8ddf6c5 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -181,6 +181,11 @@ export class PokemonExplorer extends React.Component
+

No.{ dex }

diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss index 7380577..1fe4322 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss @@ -31,6 +31,13 @@ .pokemonInfoLeftColumn { text-align: center; + position: relative; + + .pokedex { + position: absolute; + top: 0.5em; + left: 0.5em; + } } .pokemonInfoRightColumn { 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 bd63d44..25d6c76 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts +++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts @@ -6,6 +6,7 @@ export const formHeader: string; export const ivContainerTitle: string; export const ivsContainer: string; export const leaguePokemonRank: string; +export const pokedex: string; export const pokemonBaseStats: string; export const pokemonInfoLeftColumn: string; export const pokemonInfoRightColumn: string;