skills

client/game.css

@@ -83,9 +83,15 @@
 .game-cryp .skills {
     grid-area: skills;
     display: flex;
-    flex-flow: row;
+    flex-flow: column-reverse;
 }
 
+/*@media (max-width: 1000px) {
+    .game-cryp .skills {
+        flex-flow: column;
+    }
+}
+*/
 .game-cryp .effects {
     font-size: 1.5em;
 }
@@ -103,7 +109,7 @@
     flex: 1 1 100%;
     font-size: 16pt;
     padding: 0;
-    margin: 0;
+    margin: 0 0.5em;
     border-width: 0px;
 }
 
@@ -114,7 +120,7 @@
 .game-cryp button[disabled], .game-cryp button[disabled]:hover {
     color: #333333;
     font-size: 14pt;
-    text-decoration: line-through
+    /*text-decoration: line-through*/
 }
 
 .game-cryp button:hover {
@@ -233,4 +239,6 @@ CRYP DAMAGE
 
 .img {
     position: relative;
+    /* stops them being resized to zero because of redraws*/
+    height: 100%;
 }

client/src/main.jsx

@@ -51,8 +51,8 @@ document.fonts.load('16pt "Jura"').then(() => {
     store.dispatch(actions.setWs(ws));
     ws.connect();
 
-    // events.setGame(testGame);
-    // ws.clearGameStateTimeout();
+    events.setGame(testGame);
+    ws.clearGameStateTimeout();
 
     const Cryps = () => (
         <main className="cryps" >

client/src/test.game.js

@@ -346,6 +346,16 @@ const game = {
               "skill": "Attack",
               "self_targeting": false,
               "cd": null
+            },
+            {
+              "skill": "Decay",
+              "self_targeting": false,
+              "cd": 2
+            },
+            {
+              "skill": "Sustain",
+              "self_targeting": false,
+              "cd": null
             }
           ],
           "effects": [],
@@ -413,6 +423,16 @@ const game = {
               "skill": "Attack",
               "self_targeting": false,
               "cd": null
+            },
+            {
+              "skill": "RAAAAAAAR",
+              "self_targeting": false,
+              "cd": null
+            },
+            {
+              "skill": "GAAAAAAAAAR",
+              "self_targeting": false,
+              "cd": null
             }
           ],
           "effects": [],