add badges icons

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% {

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

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; }

src/ts/app/PokemonApp.tsx

@@ -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 &&