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

add badges icons

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-04 21:13:34 -05:00
parent eb215291a6
commit 6dcf1f001e
6 changed files with 74 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/a7238a57c9ba2b3d82d9a408561f77ce.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

25
dist/global.css vendored
View File

@ -1870,7 +1870,9 @@ input[type="checkbox"] {
width: 24px; }
@keyframes blink {
100% {
from {
background-position-x: -24px; }
to {
background-position-x: -72px; } }
.pokedex:hover, .pokedex.active {
background-position-x: -24px;
@ -1883,13 +1885,28 @@ input[type="checkbox"] {
height: 40px;
width: 40px; }
@keyframes cycle {
@keyframes pvp-cycle {
from {
background-position-x: 0; }
to {
background-position-x: -120px; } }
.pvp:hover, .pvp.active {
animation: cycle 1s steps(3) infinite; }
animation: pvp-cycle 1s steps(3) infinite; }
.badge {
background: url(a7238a57c9ba2b3d82d9a408561f77ce.png) no-repeat;
background-size: 640px 40px;
background-position: 0 0;
height: 40px;
width: 40px; }
@keyframes badge-cycle {
from {
background-position-x: 0; }
to {
background-position-x: -640px; } }
.badge:hover, .badge.active {
animation: badge-cycle 4s steps(16) infinite; }
.tm {
background: url(e4e1c19455fbabb42fe7cbfb94100d04.png) no-repeat;
@ -1899,6 +1916,8 @@ input[type="checkbox"] {
width: 40px; }
@keyframes shine {
0% {
background-position-x: -40px; }
25% {
background-position-x: -80px; }
50% {

13
dist/main-bundle.js vendored
View File

@ -37037,10 +37037,14 @@ function (_react_1$default$Comp) {
active: activeNavigation === 'pvp'
});
var pvpButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'pvp'));
var tmCss = classnames_1.default(iconCss, 'tm', {
var badgeCss = classnames_1.default(iconCss, 'badge', {
active: activeNavigation === 'types'
});
var tmButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'types'));
var badgeButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'types'));
var tmCss = classnames_1.default(iconCss, 'tm', {
active: activeNavigation === 'moves'
});
var tmButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'moves'));
return react_1.default.createElement("div", {
className: wrapperCss
}, react_1.default.createElement(Header_1.Header, null), react_1.default.createElement("div", {
@ -37069,6 +37073,11 @@ function (_react_1$default$Comp) {
onClick: this.handleTypesClick
}, react_1.default.createElement("i", {
className: pvpCss
})), react_1.default.createElement("button", {
className: badgeButtonCss,
onClick: this.handleTypesClick
}, react_1.default.createElement("i", {
className: badgeCss
})), react_1.default.createElement("button", {
className: tmButtonCss,
onClick: this.handleTypesClick

BIN
src/img/badges.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

28
src/scss/sprites.scss
View File

@ -22,7 +22,8 @@ $scale: 4;
$pokedex-scale: $scale;
@keyframes blink {
100% { background-position-x: -18px * $pokedex-scale; }
from { background-position-x: -6px * $pokedex-scale; }
to { background-position-x: -18px * $pokedex-scale; }
}
background: url('../img/pokedex_small.png') no-repeat;
@ -41,7 +42,7 @@ $scale: 4;
.pvp {
$pvp-scale: $scale;
@keyframes cycle {
@keyframes pvp-cycle {
from { background-position-x: 0 * $pvp-scale; }
to { background-position-x: -30px * $pvp-scale; }
}
@ -54,7 +55,27 @@ $scale: 4;
&:hover,
&.active {
animation: cycle 1s steps(3) infinite;
animation: pvp-cycle 1s steps(3) infinite;
}
}
.badge {
$badge-scale: $scale;
@keyframes badge-cycle {
from { background-position-x: 0 * $badge-scale; }
to { background-position-x: -160px * $badge-scale; }
}
background: url('../img/badges.png') no-repeat;
background-size: 160px * $badge-scale 10px * $badge-scale;
background-position: 0 * $badge-scale 0 * $badge-scale;
height: 10px * $badge-scale;
width: 10px * $badge-scale;
&:hover,
&.active {
animation: badge-cycle 4s steps(16) infinite;
}
}
@ -62,6 +83,7 @@ $scale: 4;
$pokedex-scale: $scale;
@keyframes shine {
0% { background-position-x: -10px * $pokedex-scale; }
25% { background-position-x: -20px * $pokedex-scale; }
50% { background-position-x: -10px * $pokedex-scale; }
75% { background-position-x: 0 * $pokedex-scale; }

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

@ -140,18 +140,30 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
[styles.activeNavigationButton]: activeNavigation === 'pvp',
}
);
const tmCss = classNames(
const badgeCss = classNames(
iconCss,
'tm',
'badge',
{
active: activeNavigation === 'types',
}
);
const tmButtonCss = classNames(
const badgeButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'types',
}
);
const tmCss = classNames(
iconCss,
'tm',
{
active: activeNavigation === 'moves',
}
);
const tmButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'moves',
}
);
return (
<div className={ wrapperCss }>
@ -178,6 +190,7 @@ 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={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleTypesClick }><i className={ tmCss } /></button>
</div>
{ isOverlayShown &&