From 3eeb5985f7f59c16ac2b59562fadaffe6df86b28 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 15 May 2019 14:48:58 +1000
Subject: [PATCH 1/2] Stat icons auto scale

---
 client/instance.css                      | 48 ++++++++----------------
 client/src/components/instance.cryps.jsx | 28 ++------------
 client/styles.css                        | 21 ++---------
 3 files changed, 23 insertions(+), 74 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index e3fe1ce4..8eac0606 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -234,36 +234,32 @@
     grid-template-columns: 3fr 1fr 3fr;
     grid-template-areas:
         "dl sl ll"
-        "di si li";
+        "st st st";
     border-top: 1px solid whitesmoke;
 }
 
-.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%;
 }
 
-.instance-cryp .stats .damage-label {
-    grid-area: dl;
-    display: flex;
-    justify-content: center;
-}
-
-.instance-cryp .stats .damage-icons {
-    grid-area: di;
+.instance-cryp .stats .icons {
+    grid-area: st;
     display: flex;
     flex-flow: row;
     flex: 1;
     justify-content: center;
 }
 
+.stat-icon {
+    width: 100%;
+}
+
+.instance-cryp .stats .damage-label {
+    grid-area: dl;
+    display: flex;
+    justify-content: center;
+}
+
 .instance-cryp .stats .speed-label {
     grid-area: sl;
     display: flex;
@@ -271,33 +267,19 @@
 
 }
 
-.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;
-}
+
 
 /* Equipment */
 .instance-equip {
     grid-area: e;
     display: flex;
-    min-height: 20%;
+    min-height: 10%;
     padding-bottom: 1em;
 }
 
diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx
index 853a5af8..b904759d 100644
--- a/client/src/components/instance.cryps.jsx
+++ b/client/src/components/instance.cryps.jsx
@@ -132,23 +132,9 @@ function Cryp(props) {
         );
     });
 
-    const damage = Object.values(STATS).slice(0, 3).map(s => (
+    const stats = Object.values(STATS).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}`)}
+            {s.svg(`stat-icon ${s.colour} stat`)}
             <figcaption>{cryp[s.stat].value}</figcaption>
         </figure>
     ));
@@ -184,20 +170,14 @@ function Cryp(props) {
                 <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 className="icons">
+                    {stats}
                 </div>
             </div>
         </div>
diff --git a/client/styles.css b/client/styles.css
index a1791470..fa763967 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -53,20 +53,11 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(10, 10%));
-    grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content 1fr;
     grid-template-areas:
-      "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
-      "nav main main main main main main main main main";
+      "hd  hd"
+      "nav main";
 }
 
 nav {
@@ -494,10 +485,6 @@ header {
     text-align: center;
 }
 
-.info-cryp .stats .stat-icon {
-    height: 2.5em;
-}
-
 .info-cryp .specs figure {
     border: 0;
     margin: 1em 0;

From 12f2fb2546ac777657ec0f5b26a80a53c559e21c Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Wed, 15 May 2019 15:05:12 +1000
Subject: [PATCH 2/2] icon fixes

---
 client/instance.css                      | 15 +++++++++++----
 client/src/components/instance.equip.jsx |  2 +-
 client/styles.css                        |  1 -
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 8eac0606..8aed01dc 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -250,7 +250,14 @@
     justify-content: center;
 }
 
-.stat-icon {
+.equip-icon {
+    height: 2em;
+    stroke-width: 5px;
+    fill: none;
+}
+
+
+.instance-cryp .stat-icon {
     width: 100%;
 }
 
@@ -279,7 +286,7 @@
 .instance-equip {
     grid-area: e;
     display: flex;
-    min-height: 10%;
+    min-height: 15%;
     padding-bottom: 1em;
 }
 
@@ -291,7 +298,7 @@
 .instance-equip .label {
     display: flex;
     font-size: 20pt;
-    padding: 15px;
+    padding: 10px;
 
 }
 .instance-equip .skills {
@@ -303,7 +310,7 @@
     flex: 1 1 100%;
     color: whitesmoke;
     font-size: 16pt;
-    padding: 10px;
+    padding: 5px;
     border-width: 0px;
     border-bottom-width: 1px;
     border-left-width: 1px;
diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx
index 53ee434a..63fd54f1 100644
--- a/client/src/components/instance.equip.jsx
+++ b/client/src/components/instance.equip.jsx
@@ -67,7 +67,7 @@ function Equipment(props) {
         if (specList.includes(item)) {
             return (
                 <figure key={i} onClick={e => boundClick(e, i)}>
-                    {SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
+                    {SPECS[item].svg(`equip-icon ${SPECS[item].colour}`)}
                     <figcaption>{SPECS[item].caption}</figcaption>
                 </figure>
             );
diff --git a/client/styles.css b/client/styles.css
index fa763967..a0cc6060 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -535,4 +535,3 @@ figure.gray {
     fill: none;
 }
 
-