wip"

client/assets/styles/game.css

@@ -454,4 +454,8 @@
     #mnml .game .skills button, #mnml .game .stats {
         font-size: 75%;
     }
+
+    .game-construct .name {
+        display: none;
+    }
 }

client/assets/styles/instance.css

@@ -164,7 +164,7 @@
     }
 }
 
-.vbox button {
+.vbox-btn {
     width: 100%;
     margin: 0;
     background-color: #333;
@@ -179,7 +179,7 @@
     cursor: pointer;
 }
 
-.vbox-table td:active {
+.vbox-table td:active, .vbox-table td:focus {
     background: whitesmoke;
     color: black;
 }

client/assets/styles/vbox.less

@@ -0,0 +1,49 @@
+@green: #1FF01F;
+@red: #a52a2a;
+@blue: #3498db;
+@white: #f5f5f5; // whitesmoke
+@purple: #9355b5; // 6lack - that far cover
+
+.vbox-vbox {
+    grid-area: vbox;
+
+    display: flex;
+    flex-flow: column;
+
+    .vbox-colours {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-gap: 1em;
+        align-items: center;
+        margin: 1em 0;
+
+        svg {
+            width: 100%;
+            stroke: none;
+            border: 2px solid #222;
+        }
+
+        svg.red {
+            fill: @red;
+        }
+
+        svg.green {
+            fill: @green;
+        }
+
+        .blue {
+            fill: @blue;
+        }
+    }
+
+    .vbox-skills, .vbox-specs {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1em;
+        align-items: center;
+
+        button {
+            width: 100%;
+        }
+    }
+}

client/index.js

@@ -1,6 +1,7 @@
 require('./assets/styles/styles.css');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.css');
+require('./assets/styles/vbox.less');
 require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
 

client/package.json

@@ -40,7 +40,8 @@
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
-    "jest": "^18.0.0"
+    "jest": "^18.0.0",
+    "less": "^3.9.0"
   },
   "alias": {
     "react": "preact-compat",

client/src/components/instance.constructs.jsx

@@ -140,7 +140,7 @@ function Construct(props) {
         );
     });
 
-    const specs = range(0, 6).map(i => {
+    const specs = range(0, 3).map(i => {
         const s = construct.specs[i];
 
         if (!s) {

client/src/components/nav.jsx

@@ -26,10 +26,6 @@ const addState = connect(
             return ws.sendInstanceState(instance.id);
         }
 
-        function sendAccountInstances() {
-            return ws.sendAccountInstances();
-        }
-
         function sendInstanceList() {
             return ws.sendInstanceList();
         }
@@ -41,7 +37,6 @@ const addState = connect(
             game,
             ping,
             sendInstanceState,
-            sendAccountInstances,
             sendInstanceList,
         };
     },
@@ -90,7 +85,6 @@ function Nav(args) {
         team,
 
         sendInstanceState,
-        sendAccountInstances,
         sendInstanceList,
 
         setTestGame,
@@ -102,7 +96,6 @@ function Nav(args) {
     function navTo(p) {
         if (p === 'list') {
             sendInstanceList();
-            sendAccountInstances();
         }
         return setNav(p);
     }

client/src/components/shapes.jsx

@@ -6,7 +6,8 @@ const saw = require('./svgs/saw');
 const square = require('./svgs/square');
 const squircle = require('./svgs/squircle');
 const triangle = require('./svgs/triangle');
-const vboxColour = require('./svgs/colour');
+// const vboxColour = require('./svgs/colour');
+const vboxColour = require('./svgs/vbox.colour');
 
 module.exports = {
     circle,

client/src/components/svgs/vbox.colour.jsx

@@ -0,0 +1,15 @@
+const preact = require('preact');
+
+module.exports = function vboxColour(colour) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour.toLowerCase()} >
+            <circle
+                cx={50}
+                cy={50}
+                r={40}
+                // stroke-width="2"
+                // stroke={colour}
+            />
+        </svg>
+    );
+};

client/src/components/vbox.component.jsx

@@ -124,15 +124,15 @@ function Vbox(args) {
     //
     // VBOX
     //
-    const free = [];
+    // const free = [];
 
-    // Colours
+    // // Colours
-    free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
+    // free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]);
-    free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
+    // free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]);
-    // Skills
+    // // Skills
-    free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
+    // free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
-    // Specs
+    // // Specs
-    free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
+    // free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
 
     let vboxTimer;
     const LONG_TOUCH_TIME = 500;
@@ -165,32 +165,65 @@ function Vbox(args) {
         return true;
     }
 
-    const freeRows = free.map((row, i) => {
+    const vboxBtn = v => (
-        const cells = row.map((c, j) => {
+        <button>{convertItem(v)}</button>
-            const highlighted = c && vboxHighlight.includes(c);
-            // First two rows are colours
-            const sendItemType = i > 1 ? i - 1 : 0;
-            const sendItemIndex = i === 1 ? j + 3 : j;
-            return <td
-                key={j}
-                class={`${highlighted ? 'highlight' : ''}`}
-                onTouchStart={e => vboxTouchStart(e, i, j)}
-                onTouchEnd={e => vboxTouchEnd(e, i, j)}
-                onTouchMove={e => vboxTouchMove(e)}
-
-                // onClick={freeClick}
-                onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
-                onMouseOver={e => vboxHover(e, c)}
-            >
-                {convertItem(c)}
-            </td>;
-        });
-        return (
-            <tr key={i}>
-                {cells}
-            </tr>
     );
-    });
+
+    function vboxElement() {
+        return (
+            <div class='vbox-vbox'
+                onClick={() => setReclaiming(false)}
+                onMouseOver={e => hoverInfo(e, 'vbox')}>
+                <div class="vbox-hdr">
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
+                    <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
+                </div>
+                <div class="vbox-colours">
+                    {vbox.free[0].map(shapes.vboxColour)}
+                </div>
+                <div class="vbox-skills">
+                    {vbox.free[1].map(vboxBtn)}
+                </div>
+                <div class="vbox-specs">
+                    {vbox.free[2].map(vboxBtn)}
+                </div>
+
+                <button
+                    class='vbox-btn'
+                    onMouseOver={e => hoverInfo(e, 'reroll')}
+                    onClick={() => sendVboxDiscard()}>
+                    Reroll
+                </button>
+            </div>
+        );
+    }
+
+    // const freeRows = free.map((row, i) => {
+    //     const cells = row.map((c, j) => {
+    //         const highlighted = c && vboxHighlight.includes(c);
+    //         // First two rows are colours
+    //         const sendItemType = i > 1 ? i - 1 : 0;
+    //         const sendItemIndex = i === 1 ? j + 3 : j;
+    //         return <td
+    //             key={j}
+    //             class={`${highlighted ? 'highlight' : ''}`}
+    //             onTouchStart={e => vboxTouchStart(e, i, j)}
+    //             onTouchEnd={e => vboxTouchEnd(e, i, j)}
+    //             onTouchMove={e => vboxTouchMove(e)}
+
+    //             // onClick={freeClick}
+    //             onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) }
+    //             onMouseOver={e => vboxHover(e, c)}
+    //         >
+    //             {convertItem(c)}
+    //         </td>;
+    //     });
+    //     return (
+    //         <tr key={i}>
+    //             {cells}
+    //         </tr>
+    //     );
+    // });
 
     //
     //  INVENTORY
@@ -293,37 +326,7 @@ function Vbox(args) {
 
     return (
         <div class={classes}>
-            <div class='vbox-box'
+            {vboxElement()}
-                onClick={() => setReclaiming(false)}
-                onMouseOver={e => hoverInfo(e, 'vbox')}>
-                <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
-                    <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
-                </div>
-                <div style="text-align: center"> Colours </div>
-                <table class="vbox-table">
-                    <tbody>
-                        {freeRows.slice(0, 2)}
-                    </tbody>
-                </table>
-                <div style="text-align: center"> Skills </div>
-                <table class="vbox-table">
-                    <tbody>
-                        {freeRows[2]}
-                    </tbody>
-                </table>
-                <div style="text-align: center"> Specs </div>
-                <table class="vbox-table">
-                    <tbody>
-                        {freeRows[3]}
-                    </tbody>
-                </table>
-                <button
-                    onMouseOver={e => hoverInfo(e, 'reroll')}
-                    onClick={() => sendVboxDiscard()}>
-                    Reroll
-                </button>
-            </div>
             <div class="vbox-arrow">⮞</div>
             <div class="vbox-arrow-mobile">⮟</div>
             <div class='vbox-inventory'
@@ -348,6 +351,7 @@ function Vbox(args) {
             <div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
                 {combinerElement}
                 <button
+                    class='vbox-btn'
                     onMouseOver={e => hoverInfo(e, 'refine')}
                     onClick={() => sendVboxCombine()}>
                     combine

server/src/construct.rs

@@ -277,7 +277,7 @@ impl Construct {
     }
 
     pub fn spec_add(&mut self, spec: Spec) -> Result<&mut Construct, Error> {
-        if self.specs.len() >= 6 {
+        if self.specs.len() >= 3 {
             return Err(err_msg("maximum specs equipped"));
         }
 

server/src/names.rs

@@ -1,7 +1,8 @@
 use rand::prelude::*;
 use rand::{thread_rng};
 
-const FIRSTS: [&'static str; 25] = [
+const FIRSTS: [&'static str; 28] = [
+    "artificial",
     "borean",
     "brewing",
     "bristling",
@@ -15,6 +16,7 @@ const FIRSTS: [&'static str; 25] = [
     "leafy",
     "lurking",
     "metallic",
+    "mossy",
     "mighty",
     "nocturnal",
     "nutritious",
@@ -25,11 +27,12 @@ const FIRSTS: [&'static str; 25] = [
     "recalcitrant",
     "rogue",
     "subterranean",
+    "synthetic",
     "sweet",
     "weary",
 ];
 
-const LASTS: [&'static str; 34] = [
+const LASTS: [&'static str; 36] = [
     "artifact",
     "assembly",
     "console",
@@ -43,7 +46,6 @@ const LASTS: [&'static str; 34] = [
     "function",
     "information",
     "insulator",
-    "kaffe",
     "layout",
     "lens",
     "mechanism",
@@ -60,6 +62,9 @@ const LASTS: [&'static str; 34] = [
     "signal",
     "tower",
     "transmitter",
+    "scaffold",
+    "pattern",
+    "receiver",
     "traveller",
     "warning",
     "wildlife",