Merge branch 'develop' of ssh://mnml.gg:40022/~/mnml into develop

client/src/components/instance.constructs.jsx

@@ -124,12 +124,12 @@ function Construct(props) {
         }
 
         // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
-        const classes = `${equip}`;
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
+        const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`;
         return (
             <button
                 key={i}
-                disabled={!skill && itemEquip === null}
+                disabled={!skill && !equipping}
                 class={classes}
                 onClick={skillClick}
                 onDblClick={skillDblClick}
@@ -143,12 +143,12 @@ function Construct(props) {
         const s = construct.specs[i];
 
         if (!s) {
-            const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
+            const equipping = specList.includes(vbox.bound[itemEquip]);
+            const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
             return (
-                <figure key={i} class={equip} >
-                    {shapes.diamond(equip)}
-                    <figcaption>&nbsp;</figcaption>
-                </figure>
+                <button key={i} class={classes} disabled={!equipping} >
+                    {shapes.None()}
+                </button>
             );
         }
 
@@ -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,33 +35,145 @@ module.exports = {
     BluePower: () => circle(['blue']),
     Speed: () => triangle(['white']),
 
+
     // specs
     // Base
-    Power: () => circle(['white']),
-    Life: () => square(['white']),
-    // Speed,
+
+    None: () =>
+    <figure>
+        {diamond(['gray'])}
+        <figcaption>&nbsp;</figcaption>
+    </figure>,
+
+
+    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']),
-    LifeRR: () => square(['red']),
-    LifeBB: () => square(['blue']),
-    LifeRG: () => square(['red', 'green']),
-    LifeGB: () => square(['green', 'blue']),
-    LifeRB: () => square(['red', 'blue']),
+    LifeGG: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRR: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeBB:() =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRG: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeGB: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRB:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
 
     // Power Upgrades
-    PowerGG: () => circle(['green']),
-    PowerRR: () => circle(['red']),
-    PowerBB: () => circle(['blue']),
-    PowerRG: () => circle(['red', 'green']),
-    PowerGB: () => circle(['green', 'blue']),
-    PowerRB: () => circle(['red', 'blue']),
+    PowerGG: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRR: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerBB:() =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRG: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerGB: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRB:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
 
     // Speed Upgrades
-    SpeedGG: () => triangle(['green']),
-    SpeedRR: () => triangle(['red']),
-    SpeedBB: () => triangle(['blue']),
-    SpeedRG: () => triangle(['red', 'green']),
-    SpeedGB: () => triangle(['green', 'blue']),
-    SpeedRB: () => triangle(['red', 'blue']),
+    SpeedGG: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRR: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedBB:() =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRG: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedGB: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRB:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 };

client/src/components/vbox.component.jsx

@@ -124,7 +124,7 @@ function Vbox(args) {
     function combinerChange(newCombiner) {
         setCombiner(newCombiner);
 
-        if (combiner.length === 1) {
+        if (newCombiner.length === 1) {
             setItemEquip(newCombiner[0]);
         } else {
             setItemEquip(null);
@@ -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>
             );
         }