Image editing complete.

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

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/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

@@ -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/options/options.scss

@@ -18,7 +18,7 @@
     }
 
     .option {
-        border:1px solid #444;
+        border:1px solid #fff;
         height:50px;
         line-height:50px;
         margin:5px auto;
@@ -27,6 +27,7 @@
     }
 
     .selected {
-        background:rgba(17, 250, 87, 0.5);
+        background:#0d0;
+        border-color:#0d0;
     }
 }

sass/reset.scss

@@ -1,6 +1,11 @@
 * {
     box-sizing:border-box;
+    color:#fff;
     font-family:Emulogic;
     margin: 0;
     padding: 0;
 }
+
+body {
+    background:#000;
+}

webpack.config.js

@@ -1,7 +1,7 @@
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
-    entry: './index.js', 
+    entry: './index.js',
 
     module: {
         loaders: [
@@ -17,6 +17,10 @@ module.exports = {
                 test: /\.scss$/,
                 include: __dirname + '/sass',
                 loader: ExtractTextPlugin.extract('css!sass')
+            },
+            {
+                test: /\.png$/,
+                loader: "file?name=[path][name].[ext]"
             }
         ]
     },