vbox stuff

client/assets/styles/instance.css

@@ -6,12 +6,10 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 2fr minmax(min-content, 1fr);
-    grid-template-rows: min-content min-content min-content 1fr;
+    grid-template-rows: min-content 1fr;
 
     grid-template-areas:
-        "top        info"
         "vbox       info"
-        "equip      info"
         "constructs info";
 }
 
@@ -81,10 +79,6 @@
         "vbox .     combiner";
 }
 
-.vbox-box {
-    grid-area: vbox;
-}
-
 .vbox-inventory {
     grid-area: inventory;
 }
@@ -121,19 +115,6 @@
     flex: 0;
 }
 
-.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
-    color: white;
-}
-
-.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover {
-    background: #a52a2a;
-    color: black;
-    box-shadow: inset 0.5em 0 0 0 #a52a2a;
-}
-
-.vbox-btn.reclaim:hover {
-    color: #a52a2a;
-}
 
 .vbox-hdr {
     display: flex;
@@ -164,26 +145,6 @@
     }
 }
 
-.vbox-btn {
-    width: 100%;
-    margin: 0;
-    background-color: #333;
-    border-width: 0;
-}
-
-.vbox-table td {
-    transition-property: color, background, border;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: linear;
-    cursor: pointer;
-}
-
-.vbox-table td:active, .vbox-table td:focus {
-    background: whitesmoke;
-    color: black;
-}
-
 /* CONSTRUCT LIST */
 
 .construct-list {

client/assets/styles/styles.css

@@ -146,7 +146,7 @@ button, input {
     color: whitesmoke;
     height: auto;
     border-width: 2px;
-    border-color: #222;
+    border-color: #333;
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
@@ -234,8 +234,8 @@ table .highlight {
 }
 
 button[disabled] {
-    color: #333;
+    color: #222;
-    border-color: #333;
+    border-color: #222;
 }
 
 /*

client/assets/styles/vbox.less

@@ -4,23 +4,83 @@
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
-.vbox-vbox {
+@darkgray: #222;
-    grid-area: vbox;
+@gray: #333;
 
-    display: flex;
+.vbox {
-    flex-flow: column;
+    margin-bottom: 2em;
+
+    .vbox-section {
+        // border: 2px solid #444;
+    }
+
+    .vbox-hdr {
+        margin-bottom: 1em;
+        height: 2em;
+    }
 
     .vbox-colours {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em;
+        grid-gap: 1em 2em;
         align-items: center;
-        margin: 1em 0;
+        margin-bottom: 1em;
+    }
+
+    .vbox-items {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1em 2em;
+        align-items: center;
+        margin-bottom: 1em;
+
+        button {
+            width: 100%;
+        }
+    }
+
+    .vbox-btn {
+        width: 100%;
+        margin: 0;
+        background-color: @gray;
+        border-width: 0;
+
+        .reclaim {
+            height: auto;
+
+            :hover {
+                color: @red;
+            };
+        }
+
+        :active, :hover, :focus {
+            color: white;
+        }
+
+        .reclaiming, .reclaiming:hover, .reclaiming:active {
+            background: @red;
+            color: black;
+        }
+
+        &[disabled] {
+            background: black;
+            border-width: 1px;
+        };
+    }
+
+    button {
+        height: 3em;
+        margin: 0;
+    }
+
+    button.empty {
+        border-style: dashed;
+    }
 
     svg {
-            width: 100%;
         stroke: none;
-            border: 2px solid #222;
+        margin: 0 auto;
+        display: block;
     }
 
     svg.red {
@@ -34,16 +94,4 @@
     .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/src/actions.jsx

@@ -32,4 +32,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
 export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
+
+export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });
+
 export const setWs = value => ({ type: 'SET_WS', value });

client/src/components/instance.component.jsx

@@ -49,7 +49,6 @@ function Instance(args) {
         <main class={instanceClasses} onMouseOver={() => setInfo(null)} >
             <Vbox />
             <InfoContainer />
-            <EquipmentContainer />
             <InstanceConstructsContainer />
         </main>
     );

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

@@ -2,11 +2,11 @@ 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()} >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class={colour} >
             <circle
                 cx={50}
                 cy={50}
-                r={40}
+                r={50}
                 // stroke-width="2"
                 // stroke={colour}
             />

client/src/components/vbox.component.jsx

@@ -3,7 +3,6 @@ const range = require('lodash/range');
 const { connect } = require('preact-redux');
 
 const shapes = require('./shapes');
-const { convertItem } = require('./../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -15,6 +14,7 @@ const addState = connect(
             combiner,
             reclaiming,
             vboxHighlight,
+            vboxSelected,
             itemInfo,
         } = state;
 
@@ -44,6 +44,7 @@ const addState = connect(
             sendVboxDiscard,
             sendVboxReclaim,
             vboxHighlight,
+            vboxSelected,
             itemInfo,
         };
     },
@@ -65,11 +66,16 @@ const addState = connect(
             return dispatch(actions.setVboxHighlight(v));
         }
 
+        function setVboxSelected(v) {
+            return dispatch(actions.setVboxSelected(v));
+        }
+
         return {
             setCombiner,
             setReclaiming,
             setInfo,
             setVboxHighlight,
+            setVboxSelected,
         };
     }
 
@@ -90,6 +96,10 @@ function Vbox(args) {
 
         setCombiner,
         setInfo,
+
+        vboxSelected,
+        setVboxSelected,
+
         setReclaiming,
         setVboxHighlight,
     } = args;
@@ -124,39 +134,6 @@ function Vbox(args) {
     //
     // VBOX
     //
-    // const free = [];
-
-    // // Colours
-    // 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]]);
-    // // Skills
-    // free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]);
-    // // Specs
-    // free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]);
-
-    let vboxTimer;
-    const LONG_TOUCH_TIME = 500;
-    function vboxTouchStart(e, i, j) {
-        vboxTimer = (setTimeout(() => {
-            sendVboxAccept(j, i);
-            vboxTimer = null;
-        }, LONG_TOUCH_TIME));
-        return true;
-    }
-
-    function vboxTouchEnd(e, i, j) {
-        if (vboxTimer) {
-            clearTimeout(vboxTimer);
-        }
-        return true;
-    }
-
-    function vboxTouchMove(e) {
-        if (vboxTimer) clearTimeout(vboxTimer);
-        e.stopPropagation();
-        return true;
-    }
-
     function vboxHover(e, v) {
         if (v) {
             setInfo(v);
@@ -165,9 +142,29 @@ function Vbox(args) {
         return true;
     }
 
-    const vboxBtn = v => (
+    function boundBtn(v, group, index) {
-        <button>{convertItem(v)}</button>
+        if (!v) return <button disabled class='empty' >&nbsp;</button>;
+
+        function onClick() {
+            // double clicked
+            if (vboxSelected[0] === group && vboxSelected[1] === index) {
+                document.activeElement.blur();
+                setVboxSelected([]);
+                return sendVboxAccept(group, index);
+            }
+
+            return setVboxSelected([group, index]);
+        }
+
+        if (['Red', 'Green', 'Blue'].includes(v)) {
+            return (
+                <button onClick={onClick} >{shapes.vboxColour(v.toLowerCase())}</button>
             );
+        }
+
+        return <button onClick={onClick} >{v}</button>;
+    }
+
 
     function vboxElement() {
         return (
@@ -179,20 +176,17 @@ function Vbox(args) {
                     <div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
                 </div>
                 <div class="vbox-colours">
-                    {vbox.free[0].map(shapes.vboxColour)}
+                    {range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
                 </div>
-                <div class="vbox-skills">
+                <div class="vbox-items">
-                    {vbox.free[1].map(vboxBtn)}
+                    {range(0, 3).map(i => boundBtn(vbox.free[1][i], 1, i))}
+                    {range(0, 3).map(i => boundBtn(vbox.free[2][i], 2, i))}
                 </div>
-                <div class="vbox-specs">
-                    {vbox.free[2].map(vboxBtn)}
-                </div>
-
                 <button
                     class='vbox-btn'
                     onMouseOver={e => hoverInfo(e, 'reroll')}
                     onClick={() => sendVboxDiscard()}>
-                    Reroll
+                    refill - 5b
                 </button>
             </div>
         );
@@ -240,72 +234,70 @@ function Vbox(args) {
         return false;
     }
 
-    const boundTds = range(0, 9).map(i => {
+    // const boundTds = range(0, 9).map(i => {
-        const value = vbox.bound[i];
+    //     const value = vbox.bound[i];
-        if (combiner.indexOf(i) > -1) {
+    //     if (combiner.indexOf(i) > -1) {
+    //         return (
+    //             <td
+    //                 key={i}>
+    //                 &nbsp;
+    //             </td>
+    //         );
+    //     }
+
+    //     const highlighted = value && vboxHighlight.includes(value);
+
+    //     return (
+    //         <td
+    //             key={i}
+    //             class={`${highlighted ? 'highlight' : ''}`}
+    //             onMouseOver={(e) => vboxHover(e, value)}
+    //             onClick={e => boundClick(e, i, highlighted) }>
+    //             {convertItem(value)}
+    //         </td>
+    //     );
+    // });
+
+    function inventoryBtn(v, i) {
+        if (!v) return <button disabled class='empty' >&nbsp;</button>;
+
+        if (['Red', 'Green', 'Blue'].includes(v)) {
             return (
-                <td
+                <button>{shapes.vboxColour(v.toLowerCase())}</button>
-                    key={i}>
-                    &nbsp;
-                </td>
             );
         }
 
-        const highlighted = value && vboxHighlight.includes(value);
+        return <button onDblClick={() => sendVboxAccept(0, i)}>{v}</button>;
-
-        return (
-            <td
-                key={i}
-                class={`${highlighted ? 'highlight' : ''}`}
-                onMouseOver={(e) => vboxHover(e, value)}
-                onClick={e => boundClick(e, i, highlighted) }>
-                {convertItem(value)}
-            </td>
-        );
-    });
-
-    const boundRows = [
-        <tr key={0} >
-            {boundTds[0]}
-            {boundTds[1]}
-            {boundTds[2]}
-        </tr>,
-        <tr key={1}>
-            {boundTds[3]}
-            {boundTds[4]}
-            {boundTds[5]}
-        </tr>,
-        <tr key={2}>
-            {boundTds[6]}
-            {boundTds[7]}
-            {boundTds[8]}
-        </tr>,
-    ];
-
-    //
-    // COMBINER
-    //
-    function combinerRmv(i) {
-        combiner[i] = null;
-        return combinerChange(combiner);
     }
-    const combinerElement = (
+
-        <table class="vbox-table">
+
-            <tbody>
+    function inventoryElement() {
-                <tr>
+        return (
-                    <td onClick={() => combinerRmv(0)}>
+            <div class='vbox-section'
-                        {combiner[0] !== null ? convertItem(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')}
+                onClick={() => setReclaiming(false)}
-                    </td>
+                onMouseOver={e => hoverInfo(e, 'inventory')}>
-                    <td onClick={() => combinerRmv(1)}>
+                <div class="vbox-hdr">
-                        {combiner[1] !== null ? convertItem(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')}
+                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
-                    </td>
+                    <button
-                    <td onClick={() => combinerRmv(2)}>
+                        class={reclaimClass}
-                        {convertItem(vbox.bound[combiner[2]])}
+                        onMouseOver={e => hoverInfo(e, 'reclaim')}
-                    </td>
+                        onClick={reclaimClick}>
-                </tr>
+                        reclaim
-            </tbody>
+                    </button>
-        </table>
+                </div>
+                <div class='vbox-items'>
+                    {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))}
+                </div>
+                <button
+                    class='vbox-btn'
+                    disabled
+                    onMouseOver={e => hoverInfo(e, 'reroll')}
+                    onClick={() => sendVboxDiscard()}>
+                    ■ ▫ ▫
+                </button>
+            </div>
         );
+    }
 
     //
     // EVERYTHING
@@ -321,42 +313,14 @@ function Vbox(args) {
         return setInfo(info);
     }
 
-    const classes = "vbox";
+    const classes = 'vbox';
     const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
         <div class={classes}>
             {vboxElement()}
             <div class="vbox-arrow">⮞</div>
-            <div class="vbox-arrow-mobile">⮟</div>
+            {inventoryElement()}
-            <div class='vbox-inventory'
-                onClick={() => setReclaiming(false)}
-                onMouseOver={e => hoverInfo(e, 'inventory')}>
-                <div class="vbox-hdr">
-                    <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
-                    <button
-                        class={reclaimClass}
-                        onMouseOver={e => hoverInfo(e, 'reclaim')}
-                        onClick={reclaimClick}>
-                        reclaim
-                    </button>
-                </div>
-                <table class="vbox-table">
-                    <tbody>
-                        {boundRows}
-                    </tbody>
-                </table>
-            </div>
-            <div class="vbox-combiner-arrow" onTouchStart={e => e.target.scrollIntoView(true)}>⮟⮝</div>
-            <div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
-                {combinerElement}
-                <button
-                    class='vbox-btn'
-                    onMouseOver={e => hoverInfo(e, 'refine')}
-                    onClick={() => sendVboxCombine()}>
-                    combine
-                </button>
-            </div>
         </div>
     );
 }

client/src/reducers.jsx

@@ -44,5 +44,8 @@ module.exports = {
     shop:               createReducer(false, 'SET_SHOP'),
     team:               createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
     vboxHighlight:      createReducer([], 'SET_VBOX_HIGHLIGHT'),
+
+    vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),
+
     ws:                 createReducer(null, 'SET_WS'),
 };

client/src/utils.jsx

@@ -168,20 +168,6 @@ function eventClasses(game, account, resolution, construct, postSkill) {
     return '';
 }
 
-function convertItem(v) {
-    if (['Red', 'Green', 'Blue'].includes(v)) {
-        return (
-            shapes.vboxColour(v.toLowerCase())
-        );
-    }
-    return v || <span>&nbsp;</span>;
-    // uncomment for double borders in vbox;
-    // if (v) {
-    //     return <div>{v}</div>;
-    // }
-    // return;
-}
-
 const COLOURS = [
     '#a52a2a',
     '#1FF01F',
@@ -314,7 +300,6 @@ function errorToast(message) {
 
 module.exports = {
     stringSort,
-    convertItem,
     numSort,
     eventClasses,
     postData,

server/src/names.rs

@@ -1,12 +1,14 @@
 use rand::prelude::*;
 use rand::{thread_rng};
 
-const FIRSTS: [&'static str; 28] = [
+const FIRSTS: [&'static str; 33] = [
     "artificial",
+    "ambient",
     "borean",
     "brewing",
     "bristling",
     "compressed",
+    "chromatic",
     "concave",
     "convex",
     "distorted",
@@ -18,8 +20,11 @@ const FIRSTS: [&'static str; 28] = [
     "metallic",
     "mossy",
     "mighty",
+    "modulated",
     "nocturnal",
+    "noisy",
     "nutritious",
+    "powerful",
     "obscure",
     "organic",
     "piscine",
@@ -32,16 +37,19 @@ const FIRSTS: [&'static str; 28] = [
     "weary",
 ];
 
-const LASTS: [&'static str; 36] = [
+const LASTS: [&'static str; 41] = [
     "artifact",
     "assembly",
     "console",
     "construct",
     "design",
+    "drone",
+    "energy",
     "entropy",
     "foilage",
     "forest",
     "form",
+    "fossil",
     "frequency",
     "function",
     "information",
@@ -52,19 +60,21 @@ const LASTS: [&'static str; 36] = [
     "mountain",
     "nectar",
     "oak",
+    "pattern",
     "plant",
     "poseidon",
     "problem",
+    "receiver",
     "replicant",
     "river",
     "river",
+    "scaffold",
     "shape",
     "signal",
+    "synthesiser",
+    "system",
     "tower",
     "transmitter",
-    "scaffold",
-    "pattern",
-    "receiver",
     "traveller",
     "warning",
     "wildlife",