icons wip

client/src/components/instance.constructs.jsx

@@ -125,7 +125,7 @@ function Construct(props) {
 
         // const action = skill ? '' : 'action';
         const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
-        const classes = `${equip}`;
+        const classes = `${equip} ${!skill ? 'empty' : ''}`;
         return (
             <button
                 key={i}
@@ -171,14 +171,13 @@ function Construct(props) {
 
 
         return (
-            <figure
+            <button
                 key={i}
                 onClick={specClick}
                 onDblClick={specDblClick}
                 onMouseOver={e => hoverInfo(e, s)} >
                 {shapes[s]()}
-                <figcaption>{s}</figcaption>
-            </figure>
+            </button>
         );
     });
 

client/src/components/nav.jsx

@@ -1,15 +1,9 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
-const { Fragment } = require('preact');
 
-const { postData } = require('../utils');
-console.log(postData);
 const actions = require('../actions');
 const AccountStatus = require('./account.status');
 
-const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
-const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance');
-
 const addState = connect(
     function receiveState(state) {
         const {
@@ -115,15 +109,6 @@ function Nav(args) {
         return <button key={i.id} onClick={() => joinInstance(i)} >{`${phase} ${score.wins} / ${score.losses}`}</button>
     });
 
-    const haxSection = process.env.NODE_ENV === 'development'
-        ? (
-            <Fragment>
-                <h2>Hax</h2>
-                <button onClick={() => setTestGame(account.id)}>Test Game</button>
-                <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
-            </Fragment>)
-        : null;
-
     const canJoin = team.some(c => !c);
 
     return (
@@ -134,7 +119,6 @@ function Nav(args) {
             <button class="play-btn" disabled={canJoin} onClick={() => navTo('list')}>Play</button>
             <hr />
             {joined}
-            {haxSection}
         </nav>
     );
 }

client/src/components/shapes.jsx

@@ -1,3 +1,5 @@
+const preact = require('preact');
+
 const circle = require('./svgs/circle');
 const diamond = require('./svgs/diamond');
 const hexagon = require('./svgs/hexagon');
@@ -20,6 +22,10 @@ module.exports = {
     saw,
     vboxColour,
 
+    Red: () => vboxColour('red'),
+    Green: () => vboxColour('green'),
+    Blue: () => vboxColour('blue'),
+
     // stats
     RedLife: () => square(['red']),
     GreenLife: () => square(['green']),
@@ -29,11 +35,27 @@ module.exports = {
     BluePower: () => circle(['blue']),
     Speed: () => triangle(['white']),
 
+
     // specs
     // Base
-    Power: () => circle(['white']),
-    Life: () => square(['white']),
-    // Speed,
+    Power: () =>
+    <figure>
+        {circle(['white'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    Life: () =>
+    <figure>
+        {square(['white'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    // Speed:
+    // <figure>
+    //     {triangle(['white'])}
+    //     <figcaption>Speed</figcaption>
+    // </figure>,
+
 
     // Lifes Upgrades
     LifeGG: () => square(['green']),
@@ -52,7 +74,12 @@ module.exports = {
     PowerRB: () => circle(['red', 'blue']),
 
     // Speed Upgrades
-    SpeedGG: () => triangle(['green']),
+    SpeedGG: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
     SpeedRR: () => triangle(['red']),
     SpeedBB: () => triangle(['blue']),
     SpeedRG: () => triangle(['red', 'green']),

client/src/components/vbox.component.jsx

@@ -171,12 +171,12 @@ function Vbox(args) {
             return setVboxSelected([group, index]);
         }
 
-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
             return (
                 <button
                     onMouseOver={e => vboxHover(e, v)}
                     onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                 </button>
             );
         }
@@ -271,13 +271,13 @@ function Vbox(args) {
         const highlighted = combiner.indexOf(i) > -1;
         const classes = `${highlighted ? 'highlight' : ''}`;
 
-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
             return (
                 <button
                     class={classes}
                     onMouseOver={e => vboxHover(e, v)}
                     onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                 </button>
             );
         }