whew

client/game.css

@@ -65,7 +65,7 @@
     grid-template-areas:
         "skills .      ."
         "avatar target ."
-        "stats effects .";
+        "stats stats effects";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -92,6 +92,15 @@
     flex-flow: row;
 }
 
+.game-cryp figure {
+    padding: 0 0.5em;
+}
+
+.game-cryp figcaption {
+    white-space: nowrap;
+    font-size: 100%;
+}
+
 .game-cryp .skills {
     grid-area: skills;
     display: flex;

client/instance.css

@@ -224,36 +224,39 @@
     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 {
+.instance-cryp .stats .icons {
-    grid-area: dl;
+    grid-area: st;
-    display: flex;
-    justify-content: center;
-}
-
-.instance-cryp .stats .damage-icons {
-    grid-area: di;
     display: flex;
     flex-flow: row;
     flex: 1;
     justify-content: center;
 }
 
+.equip-icon {
+    height: 2em;
+    stroke-width: 5px;
+    fill: none;
+}
+
+
+.instance-cryp .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;
@@ -261,33 +264,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: 15%;
     padding-bottom: 1em;
 }
 
@@ -299,7 +288,7 @@
 .instance-equip .label {
     display: flex;
     font-size: 20pt;
-    padding: 15px;
+    padding: 10px;
 
 }
 .instance-equip .skills {
@@ -311,7 +300,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;

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}`)}
+            {s.svg(`stat-icon ${s.colour} stat`)}
-            <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>
     ));
@@ -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">
+                <div className="icons">
-                    {life}
+                    {stats}
                 </div>
             </div>
         </div>

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>
             );

client/styles.css

@@ -53,20 +53,11 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: min-content 1fr;
-
     grid-template-areas:
-      "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
+      "hd  hd"
-      "nav main main main main main main main main main"
+      "nav 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";
 }
 
 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;
@@ -514,6 +501,7 @@ header {
 
 .stats figcaption {
     font-size: 75%;
+    white-space: nowrap;
 }
 
 .resolving .skills button {
@@ -548,10 +536,8 @@ figure.gray {
     fill: none;
 }
 
-
 section .top {
     display: flex;
     flex-flow: column;
     flex: 1;
-}
+}
-