Merge branch 'automnml' of ssh://git.mnml.gg:40022/home/mnml/mnml into automnml

client/assets/styles/instance.less

@@ -32,10 +32,11 @@
     flex: 1;
     display: grid;
     grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content min-content 1fr min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name name  "
         "skills skills"
+        "colours colours"
         "stats avatar"
         "defStats defStats";
 
@@ -88,6 +89,16 @@
         }
     }
 
+    .colours {
+        grid-area: colours;
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+        justify-content: center;
+        div {
+            margin: 0.5em 0.75em;
+        }    }
+
     .offStats {
         grid-area: stats;
         display: flex;

client/src/components/instance.constructs.jsx

@@ -169,43 +169,15 @@ function Construct(props) {
         );
     });
 
-    const specs = range(0, 0).map(i => {
-        const s = construct.specs[i];
-
-        if (!s) {
-            const equipping = specList.includes(vbox.stash[itemEquip]) && i === construct.specs.length;
-            const classes = `${equipping ? 'equipping' : 'gray'} empty`;
+    const colours = () => {
         return (
-                <button key={i} class={classes} disabled={!equipping} >
-                    {shapes.None()}
-                </button>
+            <div class="colours" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
+                <div> {shapes.Red()} {construct.colours.red} </div>
+                <div> {shapes.Blue()} {construct.colours.blue} </div>
+                <div> {shapes.Green()} {construct.colours.green} </div>
+            </div>
         );
-        }
-
-        function specClick(e) {
-            if (!s) return false;
-            e.stopPropagation();
-            if (itemUnequip.length && itemUnequip[0] === construct.id && itemUnequip[1] === s
-                && i === itemUnequip[2]) return setItemUnequip([]);
-            return setItemUnequip([construct.id, s, i]);
-        }
-
-        const highlight = itemUnequip[0] === construct.id && itemUnequip[1] === s && i === itemUnequip[2];
-        return (
-            <label onDragStart={ev => {
-                ev.dataTransfer.setData('text', '');
-                specClick(ev);
-            }} key={i} draggable="true" onDragEnd={() => setItemUnequip([])}>
-                <button
-                    key={i}
-                    class={`${highlight ? 'highlight' : ''}`}
-                    onClick={specClick}
-                    onMouseOver={e => hoverInfo(e, s)} >
-                    {shapes[s]()}
-                </button>
-            </label>
-        );
-    });
+    };
 
     const offensiveStats = Object.keys(OFFENSE).map(s => {
         const stat = OFFENSE[s];
@@ -243,9 +215,7 @@ function Construct(props) {
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}
             </div>
-            <div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
-                {specs}
-            </div>
+            {colours()}
             <div class="offStats">
                 {offensiveStats}
             </div>