wip getting client prep for changes

client/assets/styles/instance.less

@@ -5,7 +5,7 @@
 .instance {
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: 7fr 12fr;
 
     grid-template-areas:
         "vbox"
@@ -31,13 +31,13 @@
 .instance-construct {
     flex: 1;
     display: grid;
-    grid-template-rows: min-content min-content min-content 1fr min-content;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content 1fr min-content;
     grid-template-areas:
-        "name   "
+        "name name  "
-        "skills "
+        "skills skills"
-        "specs  "
+        "stats avatar"
-        "avatar "
+        "defStats defStats";
-        "stats  ";
 
     /*padding: 0.5em;*/
     border: 0.1em solid #222;
@@ -78,7 +78,6 @@
         z-index: 2;
 
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
         grid-gap: 0 0.5em;
 
         button {
@@ -89,58 +88,34 @@
         }
     }
 
-    .specs {
+    .offStats {
-        grid-area: specs;
-        padding: 0 0.5em;
-        margin-bottom: 0.75em;
-        z-index: 2;
-
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 0 0.5em;
-
-        button {
-            padding: 0.25em 0;
-        }
-
-        figure {
-            flex: 1;
-            align-items: center;
-            text-align: center;
-        }
-
-        figcaption {
-            // font-size: 75%;
-            line-height: initial;
-        }
-
-        label {
-            display: flex;
-        }
-    }
-
-    .stats {
         grid-area: stats;
         display: flex;
-        flex-flow: row;
+        flex-flow: column;
-        flex: 1;
         border-width: 0px;
-        text-align: center;
+        justify-content: center;
-
-        figcaption {
-            // font-size: 75%;
-        }
-
         // give speed some space
-        div:nth-child(4n) {
+        div {
-            margin: 0 1em;
+            margin: 0.5em 0.75em;
+            display: flex;
+            flex-flow: row;
+            text-align: right;
+        }
     }
 
+    .defStats {
+        grid-area: defStats;
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+        justify-content: center;
         div {
-            flex: 1;
+            margin: 0.5em 0.75em;
         }
     }
 
+
+
     button {
         margin: 0;
 

client/assets/styles/vbox.less

@@ -2,11 +2,11 @@
     align-content: space-between;
     grid-area: vbox;
     display: grid;
-    grid-template-rows: 3fr minmax(min-content, 2fr);
+    grid-template-rows: 1fr min-content;
-    grid-template-columns: 1fr 4fr 6fr minmax(min-content, 2fr);;
+    grid-template-columns: 1fr 4fr;
     grid-template-areas:
-        "store-hdr store info-combiner combos"
+        "store-hdr info-combiner"
-        "stash-hdr stash info-combiner combos";
+        "store store";
     margin-bottom: 1em;
 
     // immediate children
@@ -48,53 +48,15 @@
         }
     }
 
-    .stash {
-        grid-area: stash;
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 0.5em 1em;
-
-        align-items: center;
-        border: 0.15em solid @gray;
-        border-left: 0;
-    }
-
-    .stash-hdr {
-        grid-area: stash-hdr;
-        display: flex;
-        flex-flow: column;
-
-        text-align: center;
-        border: 0.15em solid @gray;
-        border-right: 0;
-
-        h2 {
-            margin-bottom: 0.5em;
-        }
-
-        button {
-            line-height: 1.6;
-            letter-spacing: 0.15em;
-            border-width: 0.1em;
-        }
-    }
-
     .vbox-hdr {
+        grid-area: vbox-hdr;
         margin-bottom: 1em;
         height: 2em;
     }
 
-    .vbox-colours {
-        display: grid;
-        grid-template-columns: repeat(6, 1fr);
-        grid-gap: 0.5em 1em;
-        align-items: center;
-        margin-bottom: 0.5em;
-    }
-
     .vbox-items {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(5, 1fr);
         grid-gap: 0.5em 1em;
         align-items: center;
     }
@@ -115,58 +77,6 @@
             border-width: 0.1em;
         };
     }
-
-    .Refunding {
-        button:not([disabled]) {
-            &, &:hover, &:active {
-                background: @red;
-                color: black;
-                border: 0.1em solid black;
-            }
-        }
-        svg {
-            stroke-width: 0.75em;
-        }
-        .white {
-            stroke: black;
-        }
-    }
-
-    button {
-        height: 3.5em;
-        margin: 0;
-        width: 100%;
-
-        // text-transform: none;
-        &.empty {
-            border-style: dashed;
-        }
-
-        &.fade {
-            opacity: 0.4;
-        }
-
-        &.highlight {
-            background: @silver;
-            // overwrite the classes on white svg elements
-            svg {
-                stroke-width: 0.75em;
-            }
-        }
-    }
-
-    // figures don't scale well
-    figure {
-        svg {
-            height: 1.5em;
-            stroke-width: 0.5em;
-        }
-
-        figcaption {
-            line-height: initial;
-        }
-    }
-
     .info-combiner {
         grid-area: info-combiner;
         display: grid;
@@ -202,111 +112,46 @@
                 display: inline-block;
                 vertical-align: middle;
             }
-
             margin-left: 1em;
         }
 
-        .combiner {
-            grid-area: combiner;
-            margin: 1em 0.5em;
-            width: 50%;
-            line-height: 1.3;
-            font-size: 1.25em;
-            letter-spacing: 0.1em;
-            border: 0.1em solid @gray-exists;
-            &:hover {
-                border: 0.1em solid @gray-hover;
-            }
-        }
         // align-self: flex-end;
     }
 
-    .combos {
-        display: grid;
-        grid-area: combos;
-        margin-left: 0.5em;
-        margin-right: 0.5em;
-        grid-template-rows: min-content min-content;
-        width: 15.5em;
-        grid-template-areas:
-            "comboHeader"
-            "comboList";
 
-        h2 {
+
-            text-transform: uppercase;
+    button {
+        height: 5em;
+        margin: 0;
+        width: 100%;
+
+        // text-transform: none;
+        &.empty {
+            border-style: dashed;
         }
 
+        &.fade {
+            opacity: 0.4;
+        }
+
+        &.highlight {
+            background: @silver;
+            // overwrite the classes on white svg elements
             svg {
-            display: inline;
+                stroke-width: 0.75em;
-            height: 1em;
+            }
+        }
     }
 
+    // figures don't scale well
     figure {
-            display: inline;
-            height: 0.5em;
         svg {
-                margin-right: 0.5em;
+            height: 1.5em;
-            }
+            stroke-width: 0.5em;
         }
 
         figcaption {
-            font-size: 1em;
+            line-height: initial;
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-
-        .combo-header {
-            text-align: center;
-        }
-
-        .combo-list {
-            display: grid;
-            grid-template-rows: min-content min-content min-content;
-            grid-template-columns: min-content min-content;
-            grid-gap: 0.5em;
-            margin-top: 0.5em;
-            width: 15.5em;
-
-            .table-button {
-                display: grid;
-                text-align: center;
-                align-content: center;
-                grid-template-areas:
-                    "item"
-                    "ingr";
-
-                cursor: pointer;
-                &:hover {
-                    color: whitesmoke;
-                    background-color: @gray;
-                }
-
-                .item {
-                    border-top: 0.1em solid #222;
-                    border-bottom: 0.1em solid #222;
-                    flex: 1;
-                    grid-area: item;
-                    font-weight: bold;
-                    div {
-                        width: 5em;
-                    }
-                }
-
-
-                div {
-                    border-left: 0.1em solid #222;
-                    border-right: 0.1em solid #222;
-                    height: 1.75em;
-                    width: 7.5em;
-                    svg {
-                        vertical-align: middle;
-                    }
-                    &:last-child {
-                        border-bottom: 0.1em solid #222;
-                    }
-                }
-            }
         }
     }
 }

client/src/components/instance.constructs.jsx

@@ -5,7 +5,7 @@ const range = require('lodash/range');
 
 const buttons = require('./buttons');
 const shapes = require('./shapes');
-const { STATS } = require('../utils');
+const { OFFENSE, DEFENSE } = require('../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('../actions');
 const { removeTier } = require('../utils');
@@ -125,7 +125,7 @@ function Construct(props) {
     const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
     const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
 
-    const skills = range(0, 3).map(i => {
+    const skills = range(0, 1).map(i => {
         const skill = construct.skills[i];
         const s = skill
             ? skill.skill
@@ -169,7 +169,7 @@ function Construct(props) {
         );
     });
 
-    const specs = range(0, 3).map(i => {
+    const specs = range(0, 0).map(i => {
         const s = construct.specs[i];
 
         if (!s) {
@@ -207,12 +207,24 @@ function Construct(props) {
         );
     });
 
-    const stats = Object.keys(STATS).map(s => {
+    const offensiveStats = Object.keys(OFFENSE).map(s => {
-        const stat = STATS[s];
+        const stat = OFFENSE[s];
 
         const info = (s === 'SpeedStat' && 'speedStat')
-            || (s.includes('Power') && 'powerStat')
+            || (s.includes('Power') && 'powerStat');
-            || (s.includes('Life') && 'lifeStat');
+        return <div key={stat.stat}
+            alt={stat.stat}
+            class={stat.stat}
+            onMouseOver={e => hoverInfo(e, info)} >
+            {shapes[s]()}
+            <div>{construct[stat.stat].value}</div>
+        </div>;
+    });
+
+    const defensiveStats = Object.keys(DEFENSE).map(s => {
+        const stat = DEFENSE[s];
+
+        const info = (s.includes('Life') && 'lifeStat');
         return <div key={stat.stat}
             alt={stat.stat}
             class={stat.stat}
@@ -234,8 +246,11 @@ function Construct(props) {
             <div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
                 {specs}
             </div>
-            <div class="stats">
+            <div class="offStats">
-                {stats}
+                {offensiveStats}
+            </div>
+            <div class="defStats">
+                {defensiveStats}
             </div>
         </div>
     );

client/src/components/vbox.component.jsx

@@ -45,10 +45,6 @@ const addState = connect(
             return ws.sendVboxRefund(instance.id, i);
         }
 
-        function sendItemUnequip([constructId, item]) {
-            return ws.sendVboxUnequip(instance.id, constructId, item);
-        }
-
         return {
             itemUnequip,
             instance,
@@ -59,7 +55,6 @@ const addState = connect(
             itemInfo,
 
             sendInstance,
-            sendItemUnequip,
             sendVboxBuy,
             sendVboxCombine,
             sendVboxRefill,
@@ -112,7 +107,6 @@ class Vbox extends preact.Component {
             itemInfo,
             // Function Calls
             dispatchVboxSelect,
-            sendItemUnequip,
             sendInstance,
             sendVboxBuy,
             sendVboxCombine,
@@ -128,7 +122,6 @@ class Vbox extends preact.Component {
 
         const setVboxSelected = v => dispatchVboxSelect(v, { itemInfo, itemUnequip, vbox });
         const clearVboxSelected = () => setVboxSelected({ storeSelect: [], stashSelect: [] });
-        const vboxBuySelected = () => sendVboxBuy(storeSelect[0][0], storeSelect[0][1]);
         const clearTutorial = () => {
             setTutorial(null);
             sendInstance();
@@ -147,7 +140,7 @@ class Vbox extends preact.Component {
                 <div class="store-hdr">
                     <h2
                         onTouchStart={e => e.target.scrollIntoView(true)}
-                        onMouseOver={e => vboxHover(e, 'store')}> STORE
+                        onMouseOver={e => vboxHover(e, 'store')}> VBOX
                     </h2>
                     <h1 class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => vboxHover(e, 'bits')}>
                         {vbox.bits}b
@@ -168,41 +161,10 @@ class Vbox extends preact.Component {
             );
         }
 
-        function stashHdr() {
-            const refund = storeSelect.length === 0 && stashSelect.length === 1
-                ? itemInfo.items.find(i => i.item === vbox.stash[stashSelect[0]]).cost
-                : 0;
-            const tutorialDisabled = tutorial && tutorial < 8
-                && instance.time_control === 'Practice' && instance.rounds.length === 1;
-            const refundBtn = (
-                <button
-                    disabled={tutorialDisabled || !refund}
-                    class='vbox-btn'
-                    onClick={e => e.stopPropagation()}
-                    onMouseDown={e => {
-                        e.stopPropagation();
-                        sendVboxRefund(vboxSelected.stashSelect[0]);
-                    }}>
-                    refund <br />
-                    {refund}b
-                </button>
-            );
-
-            return (
-                <div class='stash-hdr'>
-                    <h2 onTouchStart={e => e.target.scrollIntoView(true)}
-                        onMouseOver={e => vboxHover(e, 'stash')}> STASH
-                    </h2>
-                    {refundBtn}
-                </div>
-            );
-        }
-
         // EVERYTHING
         return (
             <div class='vbox'>
                 {storeHdr()}
-                {stashHdr()}
                 <StoreElement
                     clearVboxSelected={clearVboxSelected}
                     setVboxSelected={setVboxSelected}
@@ -210,26 +172,11 @@ class Vbox extends preact.Component {
                     vboxSelected={vboxSelected}
                     vboxHover = {vboxHover}
                 />
-                <StashElement
-                    sendItemUnequip={sendItemUnequip}
-                    setInfo={setInfo}
-                    setVboxSelected={setVboxSelected}
-                    vbox={vbox}
-                    vboxBuySelected={vboxBuySelected}
-                    vboxHover={vboxHover}
-                />
                 <div class='info-combiner'>
                     <InfoContainer
                         clearTutorial={clearTutorial}
                     />
-                    <Combiner
-                        vbox={vbox}
-                        vboxSelected={vboxSelected}
-                        vboxBuySelected={vboxBuySelected}
-                        sendVboxCombine={sendVboxCombine}
-                    />
                 </div>
-                <Combos />
             </div>
         );
     }

client/src/components/vbox.store.jsx

@@ -80,11 +80,8 @@ class storeElement extends preact.Component {
         return (
             <div class='store'
                 onClick={e => e.stopPropagation()}>
-                <div class="vbox-colours">
-                    {range(0, 6).map(i => availableBtn(vbox.store['Colours'][i], 'Colours', i.toString()))}
-                </div>
                 <div class="vbox-items">
-                    {range(0, 3).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
+                    {range(0, 2).map(i => availableBtn(vbox.store['Skills'][i], 'Skills', i.toString()))}
                     {range(0, 3).map(i => availableBtn(vbox.store['Specs'][i], 'Specs', i.toString()))}
                 </div>
             </div>

client/src/utils.jsx

@@ -47,7 +47,7 @@ const numSort = (k, desc) => {
 
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
-const STATS = {
+const OFFENSE = {
     RedPower: {
         stat: 'red_power',
         colour: 'red',
@@ -68,6 +68,8 @@ const STATS = {
         colour: 'white',
         svg: shapes.triangle,
     },
+};
+const DEFENSE = {
     RedLife: {
         stat: 'red_life',
         colour: 'red',
@@ -83,7 +85,7 @@ const STATS = {
         colour: 'blue',
         svg: shapes.square,
     },
-};
+}
 
 const COLOURS = [
     '#a52a2a',
@@ -294,7 +296,8 @@ module.exports = {
     errorToast,
     infoToast,
     NULL_UUID,
-    STATS,
+    OFFENSE,
+    DEFENSE,
     COLOURS,
     TARGET_COLOURS,
     randomPoints,