From b940e63a5c3e1f9a815a835749e1bf42509ea2a2 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sat, 11 May 2019 15:31:52 +1000
Subject: [PATCH 1/8] instance cryp now grid

---
 client/cryps.css                         | 18 +++++-
 client/instance.css                      | 73 +++++++++++-------------
 client/src/components/instance.cryps.jsx | 14 +++--
 server/src/instance.rs                   |  2 +-
 4 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 08d4e7d8..9743f89e 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -131,7 +131,6 @@ button.action {
 }
 
 
-
 svg {
     flex: 1;
     fill: none;
@@ -162,6 +161,23 @@ table td {
     text-transform: uppercase;
 }
 
+table td svg {
+    stroke-width: 2px;
+    height: 96%;
+    vertical-align: text-bottom;
+}
+
+table .highlight {
+    background: whitesmoke;
+    color: black;
+    font-weight: bold;
+}
+
+button[disabled] {
+    color: #333;
+    border-color: #333;
+}
+
 /*
     COLOURS
 */
diff --git a/client/instance.css b/client/instance.css
index 9db6bbeb..3daa30bb 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -121,17 +121,6 @@
     margin: 0;
 }
 
-table .highlight {
-    background: whitesmoke;
-    color: black;
-    font-weight: bold;
-}
-
-button[disabled] {
-    color: #333;
-    border-color: #333;
-}
-
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: black;
 }
@@ -183,70 +172,76 @@ button[disabled] {
     color: black;
 }
 
-table td svg {
-    stroke-width: 2px;
-    height: 96%;
-    vertical-align: text-bottom;
-}
-
 .spacer {
     flex: 1 0 25%;
 }
 
 /* CRYP BOX */
 .instance-cryp {
-    flex: 1 1 auto;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-areas: 
+        "av av av sk sk"
+        "av av av sk sk"
+        "av av av sk sk"
+        "sp sp sp sp sp";
 
-    display: flex;
-    flex-flow: column;
-    border: 1px solid whitesmoke;
-    margin-left: 1em;
     max-width: 350px;
+    max-height: 350px;
+    margin-left: 1em;
+    border: 1px solid whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
 
-.instance-cryp-top {
+.instance-cryp .avatar {
+    grid-area: av;
     display: flex;
     flex: 1 1 auto;
-    width: 100%;
     justify-content: center;
-    align-items: stretch;
 }
 
-.instance-cryp figure {
+.instance-cryp .avatar figure {
     margin: 0;
-    flex: 0 0 50%;
+    height: 75%;
     text-align: center;
     box-sizing: border-box;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
 }
 
-.instance-cryp .stats {
-    flex: 0 0 20%;
-    width: 100%;
+.instance-cryp .avatar figcaption {
+    font-size: 90%;
+}
+
+.instance-cryp .specs {
+    grid-area: sp;
     display: flex;
+    flex: 1;
+    justify-content: center;
     border-top: 1px solid whitesmoke;
 }
 
-.stats figure {
-    flex: 1 1 0;
+.instance-cryp .specs figure {
+    flex: 1;
     border: 0;
     align-items: center;
     padding: 0.5em 0 0 0;
+    text-align: center;
 }
 
-.instance-cryp .stats figcaption {
+.instance-cryp .specs figcaption {
     font-size: 75%;
 }
 
 .instance-cryp .skills {
+    grid-area: sk;
     display: flex;
-    flex-flow: row wrap;
-    flex: 1 1 50%;
+    flex-flow: column;
+}
+
+.instance-cryp .skills button {
     height: 100%;
-}
\ No newline at end of file
+    width: 100%;
+}
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index acab2baa..5e437875 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -76,7 +76,9 @@ function Cryp(props) {
         }
 
         const classes = `right ${skill ? '' : 'action'}`;
-        return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
+        return (
+            <button key={i} className={classes} onClick={skillClick} >{s}</button>
+        );
     });
 
     function onClick(e) {
@@ -133,16 +135,16 @@ function Cryp(props) {
 
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
-            <div className="instance-cryp-top">
+            <div className="avatar">
                 <figure className="img">
                     {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>
-                <div className="skills">
-                    {skills}
-                </div>
             </div>
-            <div className="stats">
+            <div className="skills">
+                {skills}
+            </div>
+            <div className="specs">
                 {specs}
             </div>
         </div>
diff --git a/server/src/instance.rs b/server/src/instance.rs
index 46258fcf..f4f46c98 100644
--- a/server/src/instance.rs
+++ b/server/src/instance.rs
@@ -275,7 +275,7 @@ impl Instance {
     fn next_round(&mut self) -> &mut Instance {
         self.phase = InstancePhase::InProgress;
         self.phase_end = Utc::now()
-            .checked_add_signed(Duration::seconds(150))
+            .checked_add_signed(Duration::seconds(15000))
             .expect("could not set phase end");
 
 

From cc04738902b251196aff992790aff0bc399150fe Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sat, 11 May 2019 16:05:24 +1000
Subject: [PATCH 2/8] Return of the cryp stats

---
 client/instance.css                          | 48 ++++++++++++++------
 client/src/components/instance.component.jsx |  2 +-
 client/src/components/instance.cryps.jsx     | 11 ++++-
 client/src/utils.jsx                         |  2 +-
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 3daa30bb..84f56aea 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -7,7 +7,7 @@
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(11, 1fr);
     grid-template-areas: 
-        "n v v v v v v v x x x x"
+        ". v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
@@ -23,7 +23,7 @@
 .instance-hdr {
     grid-area: n;
     display: flex;
-    flex-flow: row;
+    flex-flow: column;
     flex: 0 0 100%;
 }
 
@@ -180,15 +180,14 @@
 .instance-cryp {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(4, 1fr);
+    grid-template-rows: repeat(5, 1fr);
     grid-template-areas: 
+        "sp sp sp sp sp"
         "av av av sk sk"
         "av av av sk sk"
         "av av av sk sk"
-        "sp sp sp sp sp";
+        "st st st st st";
 
-    max-width: 350px;
-    max-height: 350px;
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
@@ -201,12 +200,11 @@
     grid-area: av;
     display: flex;
     flex: 1 1 auto;
-    justify-content: center;
 }
 
 .instance-cryp .avatar figure {
     margin: 0;
-    height: 75%;
+    height: 100%;
     text-align: center;
     box-sizing: border-box;
 }
@@ -215,12 +213,23 @@
     font-size: 90%;
 }
 
+.instance-cryp .skills {
+    grid-area: sk;
+    display: flex;
+    flex-flow: column;
+}
+
+.instance-cryp .skills button {
+    height: 100%;
+    width: 100%;
+}
+
 .instance-cryp .specs {
     grid-area: sp;
     display: flex;
     flex: 1;
     justify-content: center;
-    border-top: 1px solid whitesmoke;
+    border-bottom: 1px solid whitesmoke;
 }
 
 .instance-cryp .specs figure {
@@ -235,13 +244,22 @@
     font-size: 75%;
 }
 
-.instance-cryp .skills {
-    grid-area: sk;
+.instance-cryp .stats {
+    grid-area: st;
     display: flex;
-    flex-flow: column;
+    flex: 1;
+    justify-content: center;
+    border-top: 1px solid whitesmoke;
 }
 
-.instance-cryp .skills button {
-    height: 100%;
-    width: 100%;
+.instance-cryp .stats figure {
+    flex: 1;
+    border: 0;
+    align-items: center;
+    padding: 0.5em 0 0 0;
+    text-align: center;
+}
+
+.instance-cryp .stats figcaption {
+    font-size: 75%;
 }
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index d4e75669..e6adf175 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -88,8 +88,8 @@ function InstanceComponent(args) {
                     <div>&nbsp;</div>
                 </div>
                 {actionBtn}
+                {timer}
             </div>
-            {timer}
             <VboxContainer />
             <InstanceCrypsContainer />
             <InfoContainer />
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 5e437875..42d6f16d 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -3,7 +3,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const shapes = require('./shapes');
-const { SPECS, crypAvatar } = require('../utils');
+const { SPECS, STATS, crypAvatar } = require('../utils');
 const actions = require('../actions');
 
 const addState = connect(
@@ -119,6 +119,12 @@ function Cryp(props) {
         );
     });
 
+    const stats = Object.values(STATS).map((s, j) => (
+        <figure key={j} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
     // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     // const colours = mapValues(cryp.colours, c => {
     //     if (cTotal === 0) return 245;
@@ -147,6 +153,9 @@ function Cryp(props) {
             <div className="specs">
                 {specs}
             </div>
+            <div className="stats">
+                {stats}
+            </div>
         </div>
     );
 }
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 70ce7a55..8ef86e2b 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -65,13 +65,13 @@ function crypAvatar(name) {
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
-    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
     redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
     greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
     blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
     redLife: { stat: 'red_life', colour: 'red', svg: shapes.square },
     greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square },
     blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square },
+    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
 };
 
 const SPECS = {

From 3a06774817e24a63afc0645a0d4ba8c965cd16b3 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Sat, 11 May 2019 20:28:45 +1000
Subject: [PATCH 3/8] Grouping stats and labels

---
 client/instance.css                      | 63 +++++++++++++++++++++---
 client/src/components/instance.cryps.jsx | 39 +++++++++++++--
 client/src/utils.jsx                     |  2 +-
 3 files changed, 92 insertions(+), 12 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 84f56aea..8037ee86 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -29,7 +29,6 @@
 
 .instance-info {
     grid-area: x;
-    justify-self: start;
     flex: 0 0 50%;
 }
 
@@ -40,7 +39,8 @@
     display: flex;
     flex-flow: row;
     padding: 0 2em 0 2em;
-    justify-content: center;
+    align-content: flex-start;
+
     min-width: 300px;
 
     overflow: hidden;
@@ -187,7 +187,8 @@
         "av av av sk sk"
         "av av av sk sk"
         "st st st st st";
-
+    max-height: 450px;
+    max-width: 450px;
     margin-left: 1em;
     border: 1px solid whitesmoke;
     transition-property: all;
@@ -204,7 +205,7 @@
 
 .instance-cryp .avatar figure {
     margin: 0;
-    height: 100%;
+    height: 80%;
     text-align: center;
     box-sizing: border-box;
 }
@@ -246,9 +247,12 @@
 
 .instance-cryp .stats {
     grid-area: st;
-    display: flex;
-    flex: 1;
-    justify-content: center;
+    display: grid;
+    grid-template-rows: 1fr 3fr;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-areas: 
+        "dl dl dl sl ll ll ll"
+        "di di di si li li li";
     border-top: 1px solid whitesmoke;
 }
 
@@ -263,3 +267,48 @@
 .instance-cryp .stats figcaption {
     font-size: 75%;
 }
+
+.instance-cryp .stats .damage-label {
+    grid-area: dl;
+    display: flex;
+    justify-content: center;
+}
+
+.instance-cryp .stats .damage-icons {
+    grid-area: di;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+.instance-cryp .stats .speed-label {
+    grid-area: sl;
+    display: flex;
+    justify-content: center;
+
+}
+
+.instance-cryp .stats .speed-icons {
+    grid-area: si;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+.instance-cryp .stats .life-label {
+    grid-area: ll;
+    display: flex;
+    justify-content: center;
+}
+
+.instance-cryp .stats .life-icons {
+    grid-area: li;
+    display: flex;
+    flex-flow: row;
+    flex: 1;
+    justify-content: center;
+}
+
+
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 42d6f16d..8e7756f0 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -119,12 +119,27 @@ function Cryp(props) {
         );
     });
 
-    const stats = Object.values(STATS).map((s, j) => (
-        <figure key={j} alt={s.stat} className={s.stat}>
+    const damage = Object.values(STATS).slice(0, 3).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
             {s.svg(`stat-icon ${s.colour}`)}
             <figcaption>{cryp[s.stat].value}</figcaption>
         </figure>
     ));
+
+    const speed = Object.values(STATS).slice(3, 4).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    const life = Object.values(STATS).slice(4, 8).map(s => (
+        <figure key={s.stat} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
     // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     // const colours = mapValues(cryp.colours, c => {
     //     if (cTotal === 0) return 245;
@@ -138,7 +153,6 @@ function Cryp(props) {
     //     return 4;
     // };
     // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
-
     return (
         <div key={cryp.id} className="instance-cryp" onClick={onClick} >
             <div className="avatar">
@@ -154,7 +168,24 @@ function Cryp(props) {
                 {specs}
             </div>
             <div className="stats">
-                {stats}
+                <div className="damage-label">
+                    Damage
+                </div>
+                <div className="damage-icons">
+                    {damage}
+                </div>
+                <div className="speed-label">
+                    Speed
+                </div>
+                <div className="speed-icons">
+                    {speed}
+                </div>
+                <div className="life-label">
+                    Life
+                </div>
+                <div className="life-icons">
+                    {life}
+                </div>
             </div>
         </div>
     );
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 8ef86e2b..8cc4bb5b 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -68,10 +68,10 @@ const STATS = {
     redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
     greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
     blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
+    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
     redLife: { stat: 'red_life', colour: 'red', svg: shapes.square },
     greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square },
     blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square },
-    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
 };
 
 const SPECS = {

From 20fd2376e80ed228eaecf3663718e22aa88a7ea0 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 13 May 2019 23:12:04 +1000
Subject: [PATCH 4/8] Added filtered skills and specs

---
 client/instance.css                          | 102 +++++++++++++++----
 client/src/components/instance.component.jsx |   2 +
 client/src/components/instance.equip.jsx     |  95 +++++++++++++++++
 3 files changed, 178 insertions(+), 21 deletions(-)
 create mode 100644 client/src/components/instance.equip.jsx

diff --git a/client/instance.css b/client/instance.css
index 8037ee86..a53cc675 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -11,8 +11,8 @@
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
         "n v v v v v v v x x x x"
-        "g g g g g g g g x x x x"
-        "g g g g g g g g x x x x"
+        "n g g g g g g g x x x x"
+        "n g g g g g g g x x x x"
         "f f f f f f f f x x x x"
         "f f f f f f f f x x x x"
         "f f f f f f f f x x x x"
@@ -33,19 +33,6 @@
 }
 
 
-.instance-cryp-list {
-    grid-area: f;
-    flex: 1 1 auto;
-    display: flex;
-    flex-flow: row;
-    padding: 0 2em 0 2em;
-    align-content: flex-start;
-
-    min-width: 300px;
-
-    overflow: hidden;
-}
-
 
 .instance .spacer {
     flex-grow: 1
@@ -54,11 +41,11 @@
 .vbox {
     grid-area: v;
     display: grid;
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: 5fr 1fr 5fr;
     grid-template-rows: repeat(2, 1fr);
     grid-template-areas: 
-        "vb vb vb vb vb . i i i i i"
-        "vb vb vb vb vb . i i i i i";
+        "vb . i"
+        "vb . i";
 }
 
 .vbox-box {
@@ -121,6 +108,8 @@
     margin: 0;
 }
 
+/* VBOX */
+
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
     color: black;
 }
@@ -177,6 +166,20 @@
 }
 
 /* CRYP BOX */
+
+.instance-cryp-list {
+    grid-area: f;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row;
+    padding: 0 2em 0 2em;
+    align-content: flex-start;
+
+    min-width: 300px;
+
+    overflow: hidden;
+}
+
 .instance-cryp {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
@@ -249,10 +252,10 @@
     grid-area: st;
     display: grid;
     grid-template-rows: 1fr 3fr;
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: 3fr 1fr 3fr;
     grid-template-areas: 
-        "dl dl dl sl ll ll ll"
-        "di di di si li li li";
+        "dl sl ll"
+        "di si li";
     border-top: 1px solid whitesmoke;
 }
 
@@ -311,4 +314,61 @@
     justify-content: center;
 }
 
+/* Equipment */
+.instance-equip {
+    grid-area: g;
+    display: flex;
+    justify-content: center;
+}
 
+.instance-equip .skills {
+    display: flex;
+    min-height: 100px;
+    flex-direction: column;
+}
+
+.instance-equip .skills button {
+    flex: 1 1 100%;
+    color: whitesmoke;
+    font-size: 16pt;
+    padding: 10px;
+    border-width: 0px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 1px;
+    height: 100%;
+
+}
+
+
+.instance-equip .specs {
+    display: flex;
+    padding-left: 50px;
+    flex-direction: column;
+}
+
+.instance-equip .items {
+    display: flex;
+    justify-content: center;
+}
+
+.instance-equip .label {
+    display: flex;
+    justify-content: center;
+    font-size: 20pt;
+    padding: 15px;
+
+}
+
+.instance-equip .specs figure {
+    flex: 1;
+    border: 0;
+    padding: 0.5em 1em 0 0;
+    text-align: center;
+}
+
+
+.instance-equip .specs figcaption {
+    font-size: 75%;
+}
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index e6adf175..d6fdf09c 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -3,6 +3,7 @@ const preact = require('preact');
 const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const InstanceCrypsContainer = require('./instance.cryps');
+const EquipmentContainer = require('./instance.equip');
 
 function InstanceComponent(args) {
     const {
@@ -92,6 +93,7 @@ function InstanceComponent(args) {
             </div>
             <VboxContainer />
             <InstanceCrypsContainer />
+            <EquipmentContainer />
             <InfoContainer />
         </main>
     );
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
new file mode 100644
index 00000000..1275eb5b
--- /dev/null
+++ b/client/src/components/instance.equip.jsx
@@ -0,0 +1,95 @@
+const { connect } = require('preact-redux');
+const preact = require('preact');
+const range = require('lodash/range');
+
+const actions = require('../actions');
+const { convertVar, SPECS } = require('./../utils');
+
+const addState = connect(
+    function receiveState(state) {
+        const { player, vboxInfo } = state;
+
+        return { player, vboxInfo };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(item, value) {
+            dispatch(actions.setInfo([item, value]));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { setInfo, clearInfo };
+    }
+
+);
+
+function Equipment(props) {
+    const {
+        player,
+        setInfo,
+        vboxInfo,
+    } = props;
+
+    const { vbox } = player;
+
+    function boundClick(e, i) {
+        const value = vbox.bound[i];
+        setInfo('item', value);
+
+        return false;
+    }
+
+    // const classes = `right ${skill ? '' : 'action'}`;
+    const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
+    const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
+
+    const skills = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (skillList.includes(item)) {
+            return (
+                <button key={i} className={''} onClick={e => boundClick(e, i)}>
+                    {item}
+                </button>
+            );
+        } return false;
+    });
+
+    const specs = range(0, 9).map(i => {
+        const item = convertVar(vbox.bound[i]);
+        if (specList.includes(item)) {
+            return (
+                <figure key={i} onClick={e => boundClick(e, i)}>
+                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
+                    <figcaption>{SPECS[item].caption}</figcaption>
+                </figure>
+            );
+        } return false;
+    });
+    // const specLabel = specs.every(i => i === false) ? '' : 'Specs';
+
+    return (
+        <div className="instance-equip" >
+            <div className="skills">
+                <div className="label">
+                    Skills
+                </div>
+                <div className ="items">
+                    {skills}
+                </div>
+            </div>
+            <div className="specs">
+                <div className="label">
+                    Specs
+                </div>
+                <div className ="items">
+                    {specs}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(Equipment);

From 76a3ddc08e78e5f2d60a060d1159d544dcfe5fbb Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 14 May 2019 00:15:35 +1000
Subject: [PATCH 5/8] Click item -> click cryp for equip

---
 client/instance.css                      | 26 +++++++++++-------------
 client/src/components/instance.cryps.jsx | 17 ++++++++++------
 client/src/components/instance.equip.jsx | 19 +++++++++++------
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index a53cc675..609ead8b 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -321,6 +321,18 @@
     justify-content: center;
 }
 
+.instance-equip .items {
+    display: flex;
+    justify-content: center;
+}
+
+.instance-equip .label {
+    display: flex;
+    justify-content: center;
+    font-size: 20pt;
+    padding: 15px;
+
+}
 .instance-equip .skills {
     display: flex;
     min-height: 100px;
@@ -341,26 +353,12 @@
 
 }
 
-
 .instance-equip .specs {
     display: flex;
     padding-left: 50px;
     flex-direction: column;
 }
 
-.instance-equip .items {
-    display: flex;
-    justify-content: center;
-}
-
-.instance-equip .label {
-    display: flex;
-    justify-content: center;
-    font-size: 20pt;
-    padding: 15px;
-
-}
-
 .instance-equip .specs figure {
     flex: 1;
     border: 0;
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 8e7756f0..94307376 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -8,7 +8,7 @@ const actions = require('../actions');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, player, account, vboxHidden, vboxInfo } = state;
+        const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state;
 
         function sendInstanceReady() {
             return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
             return ws.sendVboxApply(instance.id, crypId, i);
         }
 
-        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo };
+        return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar };
     },
 
     function receiveDispatch(dispatch) {
@@ -49,11 +49,13 @@ const addState = connect(
 
 function Cryp(props) {
     const {
+        activeVar,
         cryp,
+        sendVboxApply,
         setInfo,
         setActiveCryp,
-        vboxInfo,
         setVboxHighlight,
+        vboxInfo,
     } = props;
 
     function setHighlight(type) {
@@ -69,6 +71,7 @@ function Cryp(props) {
             : (<span>&nbsp;</span>);
 
         function skillClick(e) {
+            if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             if (!skill) setHighlight('skill');
             else setInfo('skill', { skill: skill.skill, cryp });
             e.stopPropagation();
@@ -84,6 +87,7 @@ function Cryp(props) {
     function onClick(e) {
         e.stopPropagation();
         e.preventDefault();
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
         return setActiveCryp(cryp);
     }
 
@@ -92,8 +96,9 @@ function Cryp(props) {
 
         function blankSpecClick(e) {
             e.stopPropagation();
-            setActiveCryp(cryp);
+            if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             setHighlight('spec');
+            return setActiveCryp(cryp);
         }
 
         if (!s) {
@@ -193,9 +198,9 @@ function Cryp(props) {
 
 function InstanceCryps(props) {
     const {
+        activeVar,
         player,
         instance,
-
         // clearInfo,
         setInfo,
         setActiveCryp,
@@ -210,7 +215,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeVar, cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index 1275eb5b..53ee434a 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -21,7 +21,11 @@ const addState = connect(
             return dispatch(actions.setInfo([]));
         }
 
-        return { setInfo, clearInfo };
+        function setActiveVar(v) {
+            return dispatch(actions.setActiveVar(v));
+        }
+
+        return { setInfo, setActiveVar, clearInfo };
     }
 
 );
@@ -29,8 +33,9 @@ const addState = connect(
 function Equipment(props) {
     const {
         player,
-        setInfo,
         vboxInfo,
+        setInfo,
+        setActiveVar,
     } = props;
 
     const { vbox } = player;
@@ -38,7 +43,7 @@ function Equipment(props) {
     function boundClick(e, i) {
         const value = vbox.bound[i];
         setInfo('item', value);
-
+        setActiveVar(i);
         return false;
     }
 
@@ -68,13 +73,15 @@ function Equipment(props) {
             );
         } return false;
     });
-    // const specLabel = specs.every(i => i === false) ? '' : 'Specs';
+
+    const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
+    const specLabel = specs.every(i => i === false) ? '' : 'Specs';
 
     return (
         <div className="instance-equip" >
             <div className="skills">
                 <div className="label">
-                    Skills
+                    {skillLabel}
                 </div>
                 <div className ="items">
                     {skills}
@@ -82,7 +89,7 @@ function Equipment(props) {
             </div>
             <div className="specs">
                 <div className="label">
-                    Specs
+                    {specLabel}
                 </div>
                 <div className ="items">
                     {specs}

From af050143dfd25f51b9f1f6ca200c7a1d3d0d53a0 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 14 May 2019 01:31:49 +1000
Subject: [PATCH 6/8] css fixes and removed long info componenents

---
 client/instance.css                      | 48 +++++++++++-------------
 client/src/components/info.component.jsx | 11 +++---
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 609ead8b..b7d4f604 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -7,17 +7,17 @@
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(11, 1fr);
     grid-template-areas: 
-        ". v v v v v v v x x x x"
-        "n v v v v v v v x x x x"
-        "n v v v v v v v x x x x"
-        "n v v v v v v v x x x x"
-        "n g g g g g g g x x x x"
-        "n g g g g g g g x x x x"
-        "f f f f f f f f x x x x"
-        "f f f f f f f f x x x x"
-        "f f f f f f f f x x x x"
-        "f f f f f f f f x x x x"
-        "f f f f f f f f x x x x";
+        "n v v v v v v v v i i i"
+        "n v v v v v v v v i i i"
+        "n v v v v v v v v i i i"
+        "n v v v v v v v v i i i"
+        "n e e e e e e e e e e e"
+        "n e e e e e e e e e e e"
+        "c c c c c c c c c c c c"
+        "c c c c c c c c c c c c"
+        "c c c c c c c c c c c c"
+        "c c c c c c c c c c c c"
+        "c c c c c c c c c c c c";
 }
 
 .instance-hdr {
@@ -25,39 +25,35 @@
     display: flex;
     flex-flow: column;
     flex: 0 0 100%;
+    padding-top: 50px;
+    padding-right: 20px;
 }
 
 .instance-info {
-    grid-area: x;
-    flex: 0 0 50%;
+    grid-area: i;
+    justify-self: start;
+    padding-left: 20px;
 }
 
-
-
 .instance .spacer {
     flex-grow: 1
 }
 
 .vbox {
     grid-area: v;
-    display: grid;
-    grid-template-columns: 5fr 1fr 5fr;
-    grid-template-rows: repeat(2, 1fr);
-    grid-template-areas: 
-        "vb . i"
-        "vb . i";
+    display: flex;
+    justify-content: flex-end;
 }
 
 .vbox-box {
-    grid-area: vb;
     justify-self: end;
     max-width: 450px;
     display: flex;
     flex-flow: row wrap;
+    padding-right: 50px;
 }
 
 .vbox-inventory {
-    grid-area: i;
     justify-self: start;
     max-width: 450px;
     display: flex;
@@ -168,13 +164,13 @@
 /* CRYP BOX */
 
 .instance-cryp-list {
-    grid-area: f;
+    grid-area: c;
     flex: 1 1 auto;
     display: flex;
     flex-flow: row;
     padding: 0 2em 0 2em;
     align-content: flex-start;
-
+    justify-content: center; 
     min-width: 300px;
 
     overflow: hidden;
@@ -316,7 +312,7 @@
 
 /* Equipment */
 .instance-equip {
-    grid-area: g;
+    grid-area: e;
     display: flex;
     justify-content: center;
 }
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 317fccb8..b8c19918 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -169,7 +169,7 @@ function Info(args) {
             const filteredCombos = vboxInfo.combos
                 .filter(combo => combiner.every(u => u === null
                     || combo.units.includes(player.vbox.bound[u])));
-
+            if (filteredCombos.length > 6) return false;
             return (
                 <table>
                     <tbody>
@@ -183,11 +183,12 @@ function Info(args) {
                 </table>
             );
         }
-
+        const vboxCombos = vboxInfo.combos.filter(c => c.units.includes(info[1]));
+        if (vboxCombos.length > 6) return false;
         return (
             <table>
                 <tbody>
-                    {vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
+                    {vboxCombos.map((c, i) =>
                         <tr key={i} >
                             <td className="highlight" >{convertVar(c.var)}</td>
                             {c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
@@ -206,12 +207,12 @@ function Info(args) {
 
     return (
         <div className={classes} >
-            <InfoCryp />
             <CrypVar />
             <Combos />
-            <ScoreBoard />
         </div>
     );
 }
+// <InfoCryp /> not required anymore
+// <ScoreBoard /> Takes up too much space maybe a context switch
 
 module.exports = Info;

From e56f17013245aca5deb8de1853ec4551c3e90960 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 14 May 2019 10:58:37 +1000
Subject: [PATCH 7/8] highlight empty skill slots, bug fixes

---
 client/instance.css                      | 19 ++++++++++++++++-
 client/src/components/info.component.jsx |  6 ++++--
 client/src/components/instance.cryps.jsx | 26 +++++++++++++++---------
 server/src/vbox.rs                       |  3 ++-
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index b7d4f604..d2064c61 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -320,6 +320,7 @@
 .instance-equip .items {
     display: flex;
     justify-content: center;
+    flex: 1 1 100%;
 }
 
 .instance-equip .label {
@@ -331,7 +332,6 @@
 }
 .instance-equip .skills {
     display: flex;
-    min-height: 100px;
     flex-direction: column;
 }
 
@@ -349,6 +349,23 @@
 
 }
 
+button.equip {
+    animation: equip-skill 1s infinite ease-in-out alternate;
+}
+
+@keyframes equip-skill {
+    0% {
+        background-color: black;
+        box-shadow: inset 0 0 0 0 whitesmoke;
+    }
+
+    100% {
+        background-color: #181818;
+        box-shadow: inset 0.5em 0 0 0 whitesmoke;
+    }
+}
+
+
 .instance-equip .specs {
     display: flex;
     padding-left: 50px;
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index b8c19918..3b5b07ba 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -55,10 +55,12 @@ function Info(args) {
         }
 
         if (type === 'skill') {
+            const skillInfo = SKILLS[value.skill];
+            const description = skillInfo ? skillInfo.description : '?????';
             return (
                 <div className="info-skill">
                     <div> {value.skill} </div>
-                    <div> {SKILLS[value.skill].description} </div>
+                    <div> {description} </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
                     unequip
                     </button>
@@ -165,7 +167,7 @@ function Info(args) {
         if (activeCryp) return false;
         if (!player) return false;
 
-        if (combiner[0] !== null) {
+        if (!(combiner.every(u => u === null))) {
             const filteredCombos = vboxInfo.combos
                 .filter(combo => combiner.every(u => u === null
                     || combo.units.includes(player.vbox.bound[u])));
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 94307376..c2c18ae3 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -51,6 +51,7 @@ function Cryp(props) {
     const {
         activeVar,
         cryp,
+        player,
         sendVboxApply,
         setInfo,
         setActiveCryp,
@@ -64,12 +65,22 @@ function Cryp(props) {
         return false;
     }
 
+    function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
+        return setActiveCryp(cryp);
+    }
+
+    const { vbox } = player;
+    const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
+    const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
+
     const skills = range(0, 3).map(i => {
         const skill = cryp.skills[i];
         const s = skill
             ? skill.skill
             : (<span>&nbsp;</span>);
-
         function skillClick(e) {
             if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
             if (!skill) setHighlight('skill');
@@ -78,19 +89,14 @@ function Cryp(props) {
             return setActiveCryp(cryp);
         }
 
-        const classes = `right ${skill ? '' : 'action'}`;
+        const action = skill ? '' : 'action';
+        const equip = skillList.includes(vbox.bound[activeVar]) && !skill ? 'equip' : '';
+        const classes = `right ${action} ${equip}`;
         return (
             <button key={i} className={classes} onClick={skillClick} >{s}</button>
         );
     });
 
-    function onClick(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        return setActiveCryp(cryp);
-    }
-
     const specs = range(0, 6).map(i => {
         const s = cryp.specs[i];
 
@@ -215,7 +221,7 @@ function InstanceCryps(props) {
     if (instance.phase === 'Lobby') return false;
 
     const cryps = player.cryps.map((c, i) => Cryp({
-        activeVar, cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
+        activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
     }));
 
     const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
diff --git a/server/src/vbox.rs b/server/src/vbox.rs
index 9433cc96..609cacc8 100644
--- a/server/src/vbox.rs
+++ b/server/src/vbox.rs
@@ -272,6 +272,7 @@ impl From<Skill> for Var {
             Skill::Curse => Var::Curse,
             Skill::Clutch => Var::Clutch,
             Skill::Decay => Var::Decay,
+            Skill::Debuff => Var::Debuff,
             Skill::Haste => Var::Haste,
             Skill::Hostility => Var::Hostility,
             Skill::Heal => Var::Heal,
@@ -551,7 +552,7 @@ impl Vbox {
 
         // actually move
         self.bound.push(self.free[i].remove(j));
-        self.bound.sort_unstable();
+        // self.bound.sort_unstable();
 
         Ok(self)
     }

From 2318ff3974d80a7c29246cdc8a3eb1653ea45b91 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Tue, 14 May 2019 11:18:19 +1000
Subject: [PATCH 8/8] Highlight spec on spec equip click

---
 client/instance.css                      | 17 +++++++++++++++++
 client/src/components/instance.cryps.jsx |  5 +++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index d2064c61..978ce740 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -379,6 +379,23 @@ button.equip {
     text-align: center;
 }
 
+.equip-spec {
+    animation: equip-spec 1s infinite ease-in-out alternate;
+}
+
+@keyframes equip-spec {
+    0% {
+        color: #333;
+        stroke: #333;
+    }
+
+    100% {
+        color:  #7a7a7a;
+        stroke:  #7a7a7a;
+
+    }
+}
+
 
 .instance-equip .specs figcaption {
     font-size: 75%;
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index c2c18ae3..7ff64a87 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -108,9 +108,10 @@ function Cryp(props) {
         }
 
         if (!s) {
+            const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
             return (
-                <figure key={i} className="gray" onClick={blankSpecClick}>
-                    {shapes.diamond('stat-icon gray')}
+                <figure key={i} onClick={blankSpecClick}>
+                    {shapes.diamond(`stat-icon ${equip}`)}
                     <figcaption>&nbsp;</figcaption>
                 </figure>
             );