icons wip

client/assets/styles/instance.css

@@ -192,29 +192,29 @@
 }
 
 .construct-list .skills {
+    padding: 0 0.5em;
     grid-area: skills;
-    display: flex;
-    border-width: 0px;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 0 0.5em;
 }
 
-.construct-list .skills button {
-    flex: 1;
-    /*border: 1px solid #222;*/
-    border: none;
+.construct-list .skills button.empty {
+    border-style: dashed;
 }
 
 .construct-list .specs {
     margin-top: 1em;
     grid-area: specs;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    border-width: 0px;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 0 0.5em;
 }
 
 .construct-list .specs figure {
     flex: 1;
-    border: 0;
     align-items: center;
     text-align: center;
 }
@@ -294,19 +294,6 @@
     flex: 1 0 100%;
 }
 
-.equip .skills {
-    flex: 1;
-    border: 2px solid #222;
-}
-
-.equip .skills button {
-    color: whitesmoke;
-    font-size: 1em;
-    padding: 0.2em;
-    border-width: 0px;
-    margin-bottom: 0.5em;
-}
-
 .equipping {
   position: relative;
 }
@@ -349,11 +336,6 @@
     }
 }
 
-.equip .specs figure {
-    border: 0;
-    text-align: center;
-}
-
 .equip-spec {
     position: relative;
     stroke: #333;
@@ -372,10 +354,6 @@
     opacity: 0;
 }
 
-.equip .specs figcaption {
-    font-size: 75%;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;

client/assets/styles/vbox.less

@@ -15,17 +15,17 @@
     .vbox-colours {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
     }
 
     .vbox-items {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
         align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
 
         button {
             width: 100%;
@@ -38,6 +38,8 @@
         background-color: @gray;
         border-width: 0;
 
+        height: 3em;
+
         :active, :hover, :focus {
             color: white;
         }
@@ -62,9 +64,11 @@
     }
 
     button {
-        height: 3em;
+        height: 4em;
         margin: 0;
 
+        text-transform: none;
+
         &.empty {
             border-style: dashed;
         }
@@ -79,4 +83,15 @@
     svg {
         stroke: none;
     }
+
+    // figures don't scale well
+    figure {
+        svg {
+            height: 2em;
+        }
+
+        figcaption {
+            line-height: initial;
+        }
+    }
 }

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