ethan icons

client/assets/styles/colours.less

@@ -33,6 +33,25 @@ svg {
     }
 }
 
+// icons from ethan are fills not strokes
+svg.ethan-icon {
+    fill: @white;
+    stroke: none;
+
+    .red {
+        fill: @red;
+    }
+
+    .green {
+        fill: @green;
+    }
+
+    .blue {
+        fill: @blue;
+    }
+}
+
+
 .green {
     color: @green;
     stroke: @green;

client/assets/styles/styles.less

@@ -271,7 +271,6 @@ figure.gray {
 
 .stats svg, .specs svg {
     height: 2em;
-    fill: none;
 }
 
 .credits {

client/src/components/shapes.jsx

@@ -11,6 +11,10 @@ const triangle = require('./svgs/triangle');
 // const vboxColour = require('./svgs/colour');
 const vboxColour = require('./svgs/vbox.colour');
 
+const speed = require('./svgs/speed');
+const power = require('./svgs/power');
+const life = require('./svgs/life');
+
 module.exports = {
     circle,
     diamond,
@@ -19,6 +23,7 @@ module.exports = {
     square,
     squircle,
     triangle,
+    speed,
     saw,
     vboxColour,
 
@@ -27,17 +32,17 @@ module.exports = {
     Blue: () => vboxColour('blue'),
 
     // stats
-    RedLife: () => square(['red']),
+    RedLife: () => life(['red']),
-    GreenLife: () => square(['green']),
+    GreenLife: () => life(['green']),
-    BlueLife: () => square(['blue']),
+    BlueLife: () => life(['blue']),
-    RedPower: () => circle(['red']),
+    RedPower: () => power(['red']),
-    GreenPower: () => circle(['green']),
+    GreenPower: () => power(['green']),
-    BluePower: () => circle(['blue']),
+    BluePower: () => power(['blue']),
-    SpeedStat: () => triangle(['white']),
+    SpeedStat: () => speed(['white']),
 
-    POWER: () => circle(['white']),
+    POWER: () => power(['white']),
-    LIFE: () => square(['white']),
+    LIFE: () => life(['white']),
-    SPEED: () => triangle(['white']),
+    SPEED: () => speed(['white']),
     // specs
     // Base
 
@@ -50,343 +55,343 @@ module.exports = {
 
     Power: () =>
     <figure>
-        {circle(['white'])}
+        {power(['white'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     Life: () =>
     <figure>
-        {square(['white'])}
+        {life(['white'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     Speed: () =>
     <figure>
-        {triangle(['white'])}
+        {speed(['white'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     // Lifes Upgrades
     LifeGG: () =>
     <figure>
-        {square(['green'])}
+        {life(['green'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeRR: () =>
     <figure>
-        {square(['red'])}
+        {life(['red'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeBB:() =>
     <figure>
-        {square(['blue'])}
+        {life(['blue'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeRG: () =>
     <figure>
-        {square(['red', 'green'])}
+        {life(['red', 'green'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeGB: () =>
     <figure>
-        {square(['green', 'blue'])}
+        {life(['green', 'blue'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeRB:() =>
     <figure>
-        {square(['red', 'blue'])}
+        {life(['red', 'blue'])}
         <figcaption>Life</figcaption>
     </figure>,
     LifeGGPlus: () =>
     <figure>
-        {square(['green'])}
+        {life(['green'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeRRPlus: () =>
     <figure>
-        {square(['red'])}
+        {life(['red'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeBBPlus:() =>
     <figure>
-        {square(['blue'])}
+        {life(['blue'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeRGPlus: () =>
     <figure>
-        {square(['red', 'green'])}
+        {life(['red', 'green'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeGBPlus: () =>
     <figure>
-        {square(['green', 'blue'])}
+        {life(['green', 'blue'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeRBPlus:() =>
     <figure>
-        {square(['red', 'blue'])}
+        {life(['red', 'blue'])}
         <figcaption>Life+</figcaption>
     </figure>,
 
     LifeGGPlusPlus: () =>
     <figure>
-        {square(['green'])}
+        {life(['green'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     LifeRRPlusPlus: () =>
     <figure>
-        {square(['red'])}
+        {life(['red'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     LifeBBPlusPlus:() =>
     <figure>
-        {square(['blue'])}
+        {life(['blue'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     LifeRGPlusPlus: () =>
     <figure>
-        {square(['red', 'green'])}
+        {life(['red', 'green'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     LifeGBPlusPlus: () =>
     <figure>
-        {square(['green', 'blue'])}
+        {life(['green', 'blue'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     LifeRBPlusPlus:() =>
     <figure>
-        {square(['red', 'blue'])}
+        {life(['red', 'blue'])}
         <figcaption>Life++</figcaption>
     </figure>,
 
     // Powers Upgrades
     PowerGG: () =>
     <figure>
-        {circle(['green'])}
+        {power(['green'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerRR: () =>
     <figure>
-        {circle(['red'])}
+        {power(['red'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerBB:() =>
     <figure>
-        {circle(['blue'])}
+        {power(['blue'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerRG: () =>
     <figure>
-        {circle(['red', 'green'])}
+        {power(['red', 'green'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerGB: () =>
     <figure>
-        {circle(['green', 'blue'])}
+        {power(['green', 'blue'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerRB:() =>
     <figure>
-        {circle(['red', 'blue'])}
+        {power(['red', 'blue'])}
         <figcaption>Power</figcaption>
     </figure>,
     PowerGGPlus: () =>
     <figure>
-        {circle(['green'])}
+        {power(['green'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerRRPlus: () =>
     <figure>
-        {circle(['red'])}
+        {power(['red'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerBBPlus:() =>
     <figure>
-        {circle(['blue'])}
+        {power(['blue'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerRGPlus: () =>
     <figure>
-        {circle(['red', 'green'])}
+        {power(['red', 'green'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerGBPlus: () =>
     <figure>
-        {circle(['green', 'blue'])}
+        {power(['green', 'blue'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerRBPlus:() =>
     <figure>
-        {circle(['red', 'blue'])}
+        {power(['red', 'blue'])}
         <figcaption>Power+</figcaption>
     </figure>,
 
     PowerGGPlusPlus: () =>
     <figure>
-        {circle(['green'])}
+        {power(['green'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     PowerRRPlusPlus: () =>
     <figure>
-        {circle(['red'])}
+        {power(['red'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     PowerBBPlusPlus:() =>
     <figure>
-        {circle(['blue'])}
+        {power(['blue'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     PowerRGPlusPlus: () =>
     <figure>
-        {circle(['red', 'green'])}
+        {power(['red', 'green'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     PowerGBPlusPlus: () =>
     <figure>
-        {circle(['green', 'blue'])}
+        {power(['green', 'blue'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     PowerRBPlusPlus:() =>
     <figure>
-        {circle(['red', 'blue'])}
+        {power(['red', 'blue'])}
         <figcaption>Power++</figcaption>
     </figure>,
 
     // Speeds Upgrades
     SpeedGG: () =>
     <figure>
-        {triangle(['green'])}
+        {speed(['green'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedRR: () =>
     <figure>
-        {triangle(['red'])}
+        {speed(['red'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedBB:() =>
     <figure>
-        {triangle(['blue'])}
+        {speed(['blue'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedRG: () =>
     <figure>
-        {triangle(['red', 'green'])}
+        {speed(['red', 'green'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedGB: () =>
     <figure>
-        {triangle(['green', 'blue'])}
+        {speed(['green', 'blue'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedRB:() =>
     <figure>
-        {triangle(['red', 'blue'])}
+        {speed(['red', 'blue'])}
         <figcaption>Speed</figcaption>
     </figure>,
     SpeedGGPlus: () =>
     <figure>
-        {triangle(['green'])}
+        {speed(['green'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedRRPlus: () =>
     <figure>
-        {triangle(['red'])}
+        {speed(['red'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedBBPlus:() =>
     <figure>
-        {triangle(['blue'])}
+        {speed(['blue'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedRGPlus: () =>
     <figure>
-        {triangle(['red', 'green'])}
+        {speed(['red', 'green'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedGBPlus: () =>
     <figure>
-        {triangle(['green', 'blue'])}
+        {speed(['green', 'blue'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedRBPlus:() =>
     <figure>
-        {triangle(['red', 'blue'])}
+        {speed(['red', 'blue'])}
         <figcaption>Speed+</figcaption>
     </figure>,
 
     SpeedGGPlusPlus: () =>
     <figure>
-        {triangle(['green'])}
+        {speed(['green'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 
     SpeedRRPlusPlus: () =>
     <figure>
-        {triangle(['red'])}
+        {speed(['red'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 
     SpeedBBPlusPlus:() =>
     <figure>
-        {triangle(['blue'])}
+        {speed(['blue'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 
     SpeedRGPlusPlus: () =>
     <figure>
-        {triangle(['red', 'green'])}
+        {speed(['red', 'green'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 
     SpeedGBPlusPlus: () =>
     <figure>
-        {triangle(['green', 'blue'])}
+        {speed(['green', 'blue'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 
     SpeedRBPlusPlus:() =>
     <figure>
-        {triangle(['red', 'blue'])}
+        {speed(['red', 'blue'])}
         <figcaption>Speed++</figcaption>
     </figure>,
 };