Prod bundle build.

components/board/scorebar.component.js

@@ -11,8 +11,8 @@ export class Scorebar extends Component {
         }
 
         return (<div className='scorebar'>
-            <div className='item current-score'>{this.props.current}</div>
+            <div className='item currentscore'>{this.props.current}</div>
-            <div className='item high-score'>{this.props.high}</div>
+            <div className='item highscore'>{this.props.high}</div>
             <div className='item lives'>{lives}</div>
         </div>);
     };

controllers/board/muncher.controller.js

@@ -12,6 +12,8 @@ const MuncherCtrl = {
     setDispatch: d => dispatch = d,
 
     move: (e) => {
+        e.preventDefault();
+        
         switch (e.keyCode) {
             case 37:
                 if (x !== 0) {

controllers/board/scorebar.controller.js

@@ -1,7 +1,7 @@
 import * as ScorebarActions from '../../actions/board/scorebar.actions';
 import SETTINGS from '../../AppSettings';
 
-const stored = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY) || [{ score: 0 }];
+const stored = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY)) || [{ score: 0 }];
 
 let dispatch;
 let lives = SETTINGS.LIVES;
@@ -27,6 +27,7 @@ const ScorebarCtrl = {
             highScore = previousHighScore;
         }
 
+
         dispatch(ScorebarActions.update(lives, currentScore, highScore));
     },
 

controllers/board/troggle.controller.js

@@ -72,7 +72,7 @@ const TroggleCtrl = {
 
     getMoveCoords(currX, currY) {
         // Randomize movement with boolean flags. Aggression can be controlled here.
-        const moveToAttack = Boolean(Math.random() > 0.35);
+        const moveToAttack = Boolean(Math.random() > 0.25);
         const moveAlongXAxis = Boolean(Math.random() > 0.5);
         const moveInPositiveDirection = Boolean(Math.random() > 0.5);
 

controllers/options/options.controller.js

@@ -22,6 +22,8 @@ const OptionsCtrl = {
     },
 
     keyListener(e) {
+        e.preventDefault();
+        
         if (e.keyCode === 32 || e.keyCode === 13) {
             let model;
             switch (selected) {

index.html

@@ -5,6 +5,7 @@
     <title>Number Munchers</title>
     <script src="react-0.14.7.js"></script>
     <script src="react-dom-0.14.7.js"></script>
+    <script type="text/javascript" src='../core/js/ui.js'></script>   
     <link rel="stylesheet" href="./style.css"></link>
 </head>
 

models/multiples.model.js

@@ -5,7 +5,7 @@ const MultiplesModel = Object.create(BaseModel);
 MultiplesModel.generate = function(n, level) {
     const multiples = [];
     const nonmultiples = [];
-    const target = 19//level + 2;
+    const target = level + 2;
     const upperLimit = target * 150;
 
     let tmp;

package.json

@@ -17,6 +17,7 @@
     "css-loader": "^0.23.1",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
     "immutable": "^3.8.0",
     "jsx-loader": "^0.13.2",
     "node-sass": "^3.4.2",

sass/board/board.scss

@@ -1,5 +1,7 @@
 .board {
+    font-family:Emulogic;
     margin:0 auto;
+    padding-bottom:50px;
     position:relative;
     width:600px;
 

sass/board/grid.scss

@@ -7,7 +7,7 @@
 
     .cell {
         border:1px solid purple;
-        font-size:12px;
+        font-size:14px;
         height:100px;
         line-height:100px;
         position:absolute;

sass/board/message.scss

@@ -1,6 +1,6 @@
 .message {
-    background:#fff;
+    background:#000;
-    border:1px solid #000;
+    border:1px solid #fff;
     cursor: default;
     font-size:14px;
     line-height:40px;

sass/board/muncher.scss

@@ -1,10 +1,7 @@
 .muncher {
-    $bg: aqua;
+    background: url('../../res/muncher.png');
-
-    background: $bg;
     height:100px;
     margin-top:110px;
-    opacity: 0.5;
     position:absolute;
     width:100px;
 

sass/board/scorebar.scss

@@ -17,11 +17,11 @@
         vertical-align:top;
     }
 
-    .current-score {
+    .currentscore {
         width:35%;
     }
 
-    .high-score {
+    .highscore {
         text-align:center;
         width:30%;
     }
@@ -32,7 +32,7 @@
     }
 
     .life {
-        background:lime;
+        background:url('../../res/muncher-mini.png');
         display:inline-block;
         height:30px;
         margin-left:5px;

sass/board/troggle.scss

@@ -7,15 +7,12 @@
     top:110px;
     width:600px;
     z-index:0;
-}
-
-.troggle {
-    $bg: crimson;
 
-    background: $bg;
+    .troggle {
-    height:100px;
+        background: url('../../res/troggle.png');
-    opacity: 0.5;
+        height:100px;
-    position:absolute;
+        position:absolute;
-    transition:left 0.3s, top 0.3s;
+        transition:left 0.3s, top 0.3s;
-    width:100px;
+        width:100px;
+    }
 }

sass/high-score/high-score.scss

@@ -1,6 +1,7 @@
 .high-score {
     $w: 350px;
 
+    font-family:Emulogic;
     padding:20px;
     text-align:center;
 

sass/options/options.scss

@@ -1,6 +1,8 @@
 .options {
     $w: 600px;
 
+    font-family:Emulogic;
+    margin:0 auto;
     padding:50px;
 
     .line {
@@ -18,7 +20,7 @@
     }
 
     .option {
-        border:1px solid #444;
+        border:1px solid #fff;
         height:50px;
         line-height:50px;
         margin:5px auto;
@@ -27,6 +29,7 @@
     }
 
     .selected {
-        background:rgba(17, 250, 87, 0.5);
+        background:#0d0;
+        border-color:#0d0;
     }
 }

sass/reset.scss

@@ -1,6 +1,18 @@
+@font-face {
+    font-family: 'Emulogic';
+    src: url('../res/emulogic-webfont.woff2') format('woff2'),
+         url('../res/emulogic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
 * {
     box-sizing:border-box;
-    font-family:Emulogic;
+    color:#fff;
     margin: 0;
     padding: 0;
 }
+
+body {
+    background:#000;
+}

sass/welcome/welcome.scss

@@ -2,6 +2,7 @@
     $fs: 14px;
     $w: 400px;
 
+    font-family:Emulogic;
     padding:20px;
     text-align:center;
 
@@ -13,12 +14,12 @@
         font-size:14px;
         line-height:70px;
         margin:0 auto;
-        width: $w;
     }
 
     hr {
         border:0;
         border-top:1px solid #ccc;
+        display:inline-block;
         margin:20px auto;
         width: $w;
     }

style.css

@@ -1 +1 @@
-.scorebar{font-size:0;height:70px;line-height:50px;margin:0 auto;width:600px}.scorebar .item{display:inline-block;font-size:13px;height:70px;line-height:70px;vertical-align:top}.scorebar .current-score{width:30%}.scorebar .high-score{text-align:center;width:40%}.scorebar .lives{text-align:right;width:30%}.scorebar .life{background:lime;display:inline-block;height:36px;margin-left:10px;vertical-align:middle;width:36px}.titlebar{font-size:13px;height:40px;line-height:40px;text-align:center}.grid{height:500px;overflow:hidden;position:relative;width:600px;z-index:0}.grid .cell{border:1px solid purple;height:100px;line-height:100px;position:absolute;text-align:center;width:100px}.message{background:#fff;border:1px solid #000;font-size:14px;line-height:40px;margin:150px 5%;padding:30px;position:absolute;text-align:center;width:90%;z-index:1000}.message,.message *{cursor:default}.message.hidden{opacity:0}.muncher{background:aqua;height:100px;margin-top:110px;opacity:.5;position:absolute;width:100px}.muncher.active{border:10px solid purple}.troggle{background:crimson;height:100px;margin-top:110px;opacity:.5;position:absolute;width:100px}.board{margin:0 auto;position:relative;width:600px}.board .x-1{left:-100px}.board .y-1{top:-100px}.board .x0{left:0}.board .y0{top:0}.board .x1{left:100px}.board .y1{top:100px}.board .x2{left:200px}.board .y2{top:200px}.board .x3{left:300px}.board .y3{top:300px}.board .x4{left:400px}.board .y4{top:400px}.board .x5{left:500px}.board .y5{top:500px}.board .x6{left:600px}.board .y6{top:600px}.board .x7{left:700px}.board .y7{top:700px}.highscores{font-size:0}.highscores .entry{font-size:16px;line-height:40px}.highscores .rank{display:inline-block;text-align:left;width:50px}.highscores .initials{display:inline-block;width:100px}.highscores .score{display:inline-block;text-align:right;width:200px}.welcome{padding:20px;text-align:center}.welcome img{width:350px}.welcome .highscores{margin:0 auto;width:350px}.welcome .newgame{margin:20px 0;transition:opacity .1s ease}.welcome .newgame.hidden{opacity:.5}*{box-sizing:border-box;font-family:Emulogic;margin:0;outline:none;padding:0}
+.welcome{font-family:Emulogic;padding:20px;text-align:center}.welcome img{width:400px}.welcome .line{font-size:14px;line-height:70px;margin:0 auto}.welcome hr{border:0;border-top:1px solid #ccc;display:inline-block;margin:20px auto;width:400px}.welcome .entry{font-size:16px;line-height:40px}.welcome .rank{display:inline-block;text-align:left;width:50px}.welcome .initials{display:inline-block;width:100px}.welcome .score{display:inline-block;text-align:right;width:200px}.high-score{font-family:Emulogic;padding:20px;text-align:center}.high-score img{width:350px}.high-score .line{line-height:50px;margin:0 auto;width:350px}.high-score .initial{display:inline-block}.options{font-family:Emulogic;margin:0 auto;padding:50px}.options .line{line-height:50px;margin:5px auto;text-align:center;width:600px}.options hr{border:0;border-top:1px solid #ccc;margin:40px auto;width:600px}.options .option{border:1px solid #fff;height:50px;line-height:50px;margin:5px auto;text-align:center;width:600px}.options .selected{background:#0d0;border-color:#0d0}.scorebar{font-size:0;height:70px;line-height:50px;margin:0 auto;width:600px}.scorebar .item{display:inline-block;font-size:13px;height:70px;line-height:70px;vertical-align:top}.scorebar .currentscore{width:35%}.scorebar .highscore{text-align:center;width:30%}.scorebar .lives{text-align:right;width:35%}.scorebar .life{background:url(res/muncher-mini.png);display:inline-block;height:30px;margin-left:5px;vertical-align:middle;width:30px}.titlebar{font-size:13px;height:40px;line-height:40px;text-align:center}.grid{height:500px;overflow:hidden;position:relative;width:600px;z-index:0}.grid .cell{border:1px solid purple;font-size:14px;height:100px;line-height:100px;position:absolute;text-align:center;width:100px}.message{background:#000;border:1px solid #fff;font-size:14px;line-height:40px;margin:150px 5%;padding:30px;position:absolute;text-align:center;width:90%;z-index:1000}.message,.message *{cursor:default}.message.hidden{opacity:0}.muncher{background:url(res/muncher.png);height:100px;margin-top:110px;position:absolute;width:100px}.muncher.active{border:10px solid purple}.troggles{height:500px;left:50%;margin-left:-300px;overflow:hidden;position:absolute;top:110px;width:600px;z-index:0}.troggles .troggle{background:url(res/troggle.png);height:100px;position:absolute;transition:left .3s,top .3s;width:100px}.board{font-family:Emulogic;margin:0 auto;padding-bottom:50px;position:relative;width:600px}.board .x-1{left:-100px}.board .y-1{top:-100px}.board .x0{left:0}.board .y0{top:0}.board .x1{left:100px}.board .y1{top:100px}.board .x2{left:200px}.board .y2{top:200px}.board .x3{left:300px}.board .y3{top:300px}.board .x4{left:400px}.board .y4{top:400px}.board .x5{left:500px}.board .y5{top:500px}.board .x6{left:600px}.board .y6{top:600px}.board .x7{left:700px}.board .y7{top:700px}@font-face{font-family:Emulogic;src:url(a4cec82f233d2e037bfc9261110ae0f1.woff2) format("woff2"),url(41d3f937fcc8c32e9e4dd645299d2d07.woff) format("woff");font-weight:400;font-style:normal}*{box-sizing:border-box;color:#fff;margin:0;padding:0}body{background:#000}@keyframes blink{50%{opacity:.6}}@-webkit-keyframes blink{50%{opacity:.6}}.blink{animation:blink 1s step-start 0s infinite;-webkit-animation:blink 1s step-start 0s infinite}

webpack.config.js

@@ -17,6 +17,14 @@ module.exports = {
                 test: /\.scss$/,
                 include: __dirname + '/sass',
                 loader: ExtractTextPlugin.extract('css!sass')
+            },
+            {
+                test: /\.png$/,
+                loader: "file?name=[path][name].[ext]"
+            },
+            {
+                test   : /\.woff2?$/,
+                loader : 'file-loader'
             }
         ]
     },