From f3a5ff6820f93d35a6a7f7ec0237cf8b34ed9d2b Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sat, 20 Mar 2021 12:59:28 +1000
Subject: [PATCH 1/2] remove spec limit

---
 core/src/construct.rs | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/core/src/construct.rs b/core/src/construct.rs
index 3703e74c..9dccc33d 100644
--- a/core/src/construct.rs
+++ b/core/src/construct.rs
@@ -309,10 +309,6 @@ impl Construct {
     }
 
     pub fn spec_add(&mut self, spec: Spec) -> Result<&mut Construct, Error> {
-        if self.specs.len() >= 3 {
-            return Err(err_msg("maximum specs equipped"));
-        }
-
         self.specs.push(spec);
         return Ok(self.calculate_colours());
     }

From 7576081c525aafcbceee76a14518ef5b6d763dcf Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sat, 20 Mar 2021 13:33:05 +1000
Subject: [PATCH 2/2] see colours

---
 client/assets/styles/instance.less            | 13 +++++-
 client/src/components/instance.constructs.jsx | 46 ++++---------------
 2 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 2ce78fbf..d1170764 100644
--- a/client/assets/styles/instance.less
+++ b/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;
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 68044c59..bf42b952 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/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`;
-            return (
-                <button key={i} class={classes} disabled={!equipping} >
-                    {shapes.None()}
-                </button>
-            );
-        }
-
-        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];
+    const colours = () => {
         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>
+            <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>
         );
-    });
+    };
 
     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>