finished items page

assets/lang/items.js

@@ -17,55 +17,77 @@ export default {
     }
   },
   "CATEGORIES": {
+    "ITEM_CATEGORY_POWER_MANAGEMENT": {
+      "name": {
+        "en": "power management"
+      },
+      "order": 3
+    },
+    "ITEM_CATEGORY_UTILITIES": {
+      "name": {
+        "en": "utilities"
+      },
+      "order": 7
+    },
     "ITEM_CATEGORY_FOOD": {
       "name": {
         "en": "food"
-      }
+      },
+      "order": 2
     },
     "ITEM_CATEGORY_POKEBALL": {
       "name": {
         "en": "poké ball"
-      }
+      },
+      "order": 1
     },
     "ITEM_CATEGORY_MEDICINE": {
       "name": {
         "en": "medicine"
-      }
+      },
+      "order": 4
     },
     "ITEM_CATEGORY_INCENSE": {
       "name": {
         "en": "incense"
-      }
+      },
+      "order": 5
     },
     "ITEM_CATEGORY_INCUBATOR": {
       "name": {
         "en": "incubator"
-      }
+      },
+      "order": 6
     },
     "ITEM_CATEGORY_INVENTORY_UPGRADE": {
       "name": {
         "en": "inventory upgrade"
-      }
+      },
+      "order": 8
     },
     "ITEM_CATEGORY_XP_BOOST": {
       "name": {
         "en": "xp boost"
-      }
+      },
+      "order": 9
     },
     "ITEM_CATEGORY_CAMERA": {
       "name": {
         "en": "camera"
-      }
+      },
+      "order": 10
     },
     "ITEM_CATEGORY_DISK": {
       "name": {
         "en": "disk"
-      }
+      },
+      "order": 12
     },
     "ITEM_CATEGORY_BOOST": {
       "name": {
         "en": "disk"
-      }
+      },
+      "order": 11
     }
   },
   "PAGE_DESCRIPTION": {
@@ -317,7 +339,7 @@ export default {
       "it": "master ball"
     },
     "description": {
-      "en": "A ball used for catching Pokémon. This ball is guaranteed to catch whatever Pokémon it is thrown at."
+      "en": "Not yet discovered. A ball used for catching Pokémon. This ball is guaranteed to catch whatever Pokémon it is thrown at."
     },
     order: 4
   },

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack -p --progress --profile --colors",
+    "build": "NODE_ENV=production webpack -p --progress --profile --colors --config webpack.production.config.js",
     "dev": "webpack-dev-server --progress --colors --config webpack.config.js",
     "build:scss": "node-sass src/scss/style.scss build/style.css -w"
   },

src/js/components/items/item.js

@@ -19,7 +19,7 @@ export default React.createClass({
         data-name={ item.name }
       >
         <div className="item__sprite-wrapper">
-          <img className="item__sprite" src={ getSpriteUrl(item) } />
+          { getSpriteUrl(item) && <img className="item__sprite" src={ getSpriteUrl(item) } /> }
         </div>
         <div className="item__details">
           <div className="item__name">

src/js/dex/items.js

@@ -1,7 +1,7 @@
 import _ from "lodash";
 
 import lang from 'lang/items'
-import ads from "affiliate_ads";
+import affilateData from "affiliate_ads";
 
 import locale from './locale'
 import data from "./grouped";
@@ -32,9 +32,10 @@ const commonKeys = [
 function getBasicItemInfo(item) {
   return {
     id: item.id,
-    name: lang[item.id].name[locale],
+    name: lang[item.id].name[locale] || item.name,
     desc: getDescription(item),
-    category: lang.CATEGORIES[item.data.Category].name[locale]
+    category: lang.CATEGORIES[item.data.Category].name[locale],
+    catOrder: lang.CATEGORIES[item.data.Category].order
   };
 }
 
@@ -58,13 +59,21 @@ function lookupDescription(value) {
   return (typeof value === 'string' ? lang.ITEM_INFORMATION[value].name[locale] : value);
 }
 
+const ads = affilateData
+  .map(ad => {
+    return Object.assign(ad, {
+      category: lang.CATEGORIES[ad.category].name[locale],
+      catOrder: lang.CATEGORIES[ad.category].order,
+    });
+  });
+
 const items = _.chain(Item)
   .sortBy(item => lang[item.id].order)
   .map(item => {
     return Object.assign(item, getBasicItemInfo(item));
   })
   .concat(ads)
-  .sortBy("category")
+  .sortBy("catOrder")
   .groupBy("category")
   .value();
 

src/scss/components/_header.scss

@@ -4,6 +4,7 @@
 }
 
 .header__nav-item {
+  position: relative;
   width: 60px;
   height: 60px;
   border: 3px solid rgba($secondary-color, 0.5);
@@ -25,4 +26,17 @@
 
 .header__nav-icon {
   height: 100%;
+}
+
+.header__nav-item[data-nav="items"]:before {
+  content: "New!";
+  color: red;
+  position: absolute;
+  font-weight: 600;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -30px;
+  text-transform: uppercase;
+  font-size: 9px;
+  font-family: sans-serif;
 }

src/scss/components/_items.scss

@@ -19,6 +19,12 @@
   padding: 10px 20px;
 }
 
+.item__sprite-wrapper:empty::before {
+  content: "?";
+  font-size: 24px;
+  color: #ccc;
+}
+
 .item__sprite {
   height: 100%;
 }

webpack.production.config.js

@@ -23,7 +23,7 @@ module.exports = {
       loaders: ["style", "css", "sass"]
     }, {
       test: /\.js$/,
-      exclude: /(node_modules|bower_components)/,
+      exclude: /(node_modules(?!\/react-icons)|bower_components)/,
       loader: 'babel', // 'babel-loader' is also a legal name to reference
       query: {
         presets: ['es2015', 'react']