From 6dcf1f001ed16a15648ecd0f64d1485bedef70d6 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Mon, 4 Mar 2019 21:13:34 -0500 Subject: [PATCH] add badges icons --- dist/a7238a57c9ba2b3d82d9a408561f77ce.png | Bin 0 -> 1547 bytes dist/global.css | 25 ++++++++++++++++--- dist/main-bundle.js | 13 ++++++++-- src/img/badges.png | Bin 0 -> 1547 bytes src/scss/sprites.scss | 28 +++++++++++++++++++--- src/ts/app/PokemonApp.tsx | 19 ++++++++++++--- 6 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 dist/a7238a57c9ba2b3d82d9a408561f77ce.png create mode 100644 src/img/badges.png diff --git a/dist/a7238a57c9ba2b3d82d9a408561f77ce.png b/dist/a7238a57c9ba2b3d82d9a408561f77ce.png new file mode 100644 index 0000000000000000000000000000000000000000..4b8e92c199d3e8e6bd7bf265dccc118fb85ab3fe GIT binary patch literal 1547 zcmV+m2K4!fP)000UI1^@s6Ge}jX00006VoOIv0RI60 z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;{yc&7&2#c>VNLEe}4D9Hv{O2 zj65yT^>kR(M*e;@(E6(E_ZYz}n`)n!F~+&)(RLg2+MT%`75P7nZ;mzufYw&GX>E1; zwCtW}eDx%yDQj!(kH6K_j=J40ILC2}IgDEeG#Y4-$mgnhem_Pa--~auPr6H>y95B_ z`1yO<7{F*tsvW}~84C;m)E+j_b{jDMB(hyI4FCW|S-G)?J;IY0dmzfoColGJ*dti% z(g`3VA_5Ur*`~GCZLF0Tckh@j+>0fV43{9evc% z2Sory`8VrMPe81+2>`X9^Q_iM=nCM95-NlWjMPj6^d5c&VlfRuI_wd4clWXW{RKSz zJuh3W3)tP=FF|;WK<2jFkhu!J@fU&d7h!{t7`)&9_)%8!^QFag4Lk|NFXyyU0a3!o zV+Vj%>w-3i{P1%Q zBLFelvX1Akqe;2DyRU5|04fwd-!SyG4Kh`j;p0>Rp$1=7oe7=x?Wc2?1|N{mMNvYk zCn=V9G6oI+@b+2*%R3oENdPF0V~p-Uu(@Vw^NjhCK?Hzqw~HC-hkBCYIPyq=idgw5 zQewPX4URvSAUJ;hTQBm^?RL>>wWLiEhFZImB!*9J+>LTw$IT>YZq&yx2_%FaHv@)H z6;Fa^xDa8pfA#W30N@S#npA?%gir_}A^hRHU$r*oI{+llK4@iCs)Em!7&wMdeLf!< zUg`b=ICpNF@WG4$=UN;UKG}&&W?VNlF?{p110ck`$!27azG%;0=3_Ll!%(HrrfYDc zzUdkS0HG?N{PAcD)M?N13YFvGP=j4?XP8ZORoXhg3p5+gUv5;k{qygqavaf>B}7-2 zpvHiSq~gbY2&6-g3<9ISOtZjD<1&V z$72~20uUTaTu+AxJy)u27={p|EjZ5R)Qz-&YE?W_{bZas)WKsVETA9-LQ>%afaa~U z=*4~fPe}+NN-9`;7XT}tAcUB?E=O+;to0KY+@Gl8>klOrw85voGh{Xwtj;5jW17K{ zIKvI&I7S$TRc`kr3L|5&9JsM|5GWwjTo^+*CB72kp3q`JQ~ewt!trz4YV61GDY2*Q zWS9gJLUzMe+xeJ?I&Cy>ovobs`Q`+UtCufAIUxdosH3mNfvQVVlvjfgufNS}?C^=_ zFE>a%1uLp3`%0dD&;}B%EKS^V4j_+N9;i(CiqJw72N62#k<|sOYryLrMG=xD;rK$E zM@^x19{9xL0u%t)el)^ATMdkd_J1Xxeih|2Ppsmx=i;&FqL~J0rUA&=1UZ`}w>lc= zuGq``N}CLx0iWiAJ8mYyWB595W`a-zqMIORQy?bvygqtfzjPv2H;C;Nn^AJXRVPA= z5&|oqW+|U|{&E9HZw_$u=73MXr4(IRLbS4^!Ds7B9kUI-B6JeVI~kvd!KdRw0fiA> ziDK;hGF8w{>!MP-d@e4dXI>sR(_o&{w(XwqYvw_PJ0|5a`Xr})9xomCsPcDDUhG-# x+D`EzT5ES{ah)zLuFqrh)Go@aE~4j|$G;1u$UYWESc3on002ovPDHLkV1i4^!e#&f literal 0 HcmV?d00001 diff --git a/dist/global.css b/dist/global.css index 1d8381f..9a986f1 100644 --- a/dist/global.css +++ b/dist/global.css @@ -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% { diff --git a/dist/main-bundle.js b/dist/main-bundle.js index 3fb6481..738c392 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -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 diff --git a/src/img/badges.png b/src/img/badges.png new file mode 100644 index 0000000000000000000000000000000000000000..4b8e92c199d3e8e6bd7bf265dccc118fb85ab3fe GIT binary patch literal 1547 zcmV+m2K4!fP)000UI1^@s6Ge}jX00006VoOIv0RI60 z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;{yc&7&2#c>VNLEe}4D9Hv{O2 zj65yT^>kR(M*e;@(E6(E_ZYz}n`)n!F~+&)(RLg2+MT%`75P7nZ;mzufYw&GX>E1; zwCtW}eDx%yDQj!(kH6K_j=J40ILC2}IgDEeG#Y4-$mgnhem_Pa--~auPr6H>y95B_ z`1yO<7{F*tsvW}~84C;m)E+j_b{jDMB(hyI4FCW|S-G)?J;IY0dmzfoColGJ*dti% z(g`3VA_5Ur*`~GCZLF0Tckh@j+>0fV43{9evc% z2Sory`8VrMPe81+2>`X9^Q_iM=nCM95-NlWjMPj6^d5c&VlfRuI_wd4clWXW{RKSz zJuh3W3)tP=FF|;WK<2jFkhu!J@fU&d7h!{t7`)&9_)%8!^QFag4Lk|NFXyyU0a3!o zV+Vj%>w-3i{P1%Q zBLFelvX1Akqe;2DyRU5|04fwd-!SyG4Kh`j;p0>Rp$1=7oe7=x?Wc2?1|N{mMNvYk zCn=V9G6oI+@b+2*%R3oENdPF0V~p-Uu(@Vw^NjhCK?Hzqw~HC-hkBCYIPyq=idgw5 zQewPX4URvSAUJ;hTQBm^?RL>>wWLiEhFZImB!*9J+>LTw$IT>YZq&yx2_%FaHv@)H z6;Fa^xDa8pfA#W30N@S#npA?%gir_}A^hRHU$r*oI{+llK4@iCs)Em!7&wMdeLf!< zUg`b=ICpNF@WG4$=UN;UKG}&&W?VNlF?{p110ck`$!27azG%;0=3_Ll!%(HrrfYDc zzUdkS0HG?N{PAcD)M?N13YFvGP=j4?XP8ZORoXhg3p5+gUv5;k{qygqavaf>B}7-2 zpvHiSq~gbY2&6-g3<9ISOtZjD<1&V z$72~20uUTaTu+AxJy)u27={p|EjZ5R)Qz-&YE?W_{bZas)WKsVETA9-LQ>%afaa~U z=*4~fPe}+NN-9`;7XT}tAcUB?E=O+;to0KY+@Gl8>klOrw85voGh{Xwtj;5jW17K{ zIKvI&I7S$TRc`kr3L|5&9JsM|5GWwjTo^+*CB72kp3q`JQ~ewt!trz4YV61GDY2*Q zWS9gJLUzMe+xeJ?I&Cy>ovobs`Q`+UtCufAIUxdosH3mNfvQVVlvjfgufNS}?C^=_ zFE>a%1uLp3`%0dD&;}B%EKS^V4j_+N9;i(CiqJw72N62#k<|sOYryLrMG=xD;rK$E zM@^x19{9xL0u%t)el)^ATMdkd_J1Xxeih|2Ppsmx=i;&FqL~J0rUA&=1UZ`}w>lc= zuGq``N}CLx0iWiAJ8mYyWB595W`a-zqMIORQy?bvygqtfzjPv2H;C;Nn^AJXRVPA= z5&|oqW+|U|{&E9HZw_$u=73MXr4(IRLbS4^!Ds7B9kUI-B6JeVI~kvd!KdRw0fiA> ziDK;hGF8w{>!MP-d@e4dXI>sR(_o&{w(XwqYvw_PJ0|5a`Xr})9xomCsPcDDUhG-# x+D`EzT5ES{ah)zLuFqrh)Go@aE~4j|$G;1u$UYWESc3on002ovPDHLkV1i4^!e#&f literal 0 HcmV?d00001 diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index af61875..32fc522 100644 --- a/src/scss/sprites.scss +++ b/src/scss/sprites.scss @@ -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; } diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index cd93bc6..ec0058f 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/src/ts/app/PokemonApp.tsx @@ -140,18 +140,30 @@ class PokemonApp extends React.Component { [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 (
@@ -178,6 +190,7 @@ class PokemonApp extends React.Component {
+
{ isOverlayShown &&