Merge branch 'css-grid' of ssh://cryps.gg:40022/~/cryps into css-grid

client/game.css

@@ -46,23 +46,26 @@
 .opponent .game-cryp {
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-areas:
-        "stats"
+        "stats      ."
-        "effects"
+        "effects    ."
-        "avatar"
+        "avatar     target"
-        "skills";
+        "skills     .";
 }
 
 .game-cryp {
     display: grid;
 
-    justify-items: center;
+    /*justify-items: center;*/
+    justify-items: start;
 
-    grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);
+    /*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
+    /*grid-template-columns: min-content minmax(0, 1fr);*/
+    grid-template-columns: 1fr min-content 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
     grid-template-areas:
-        "skills"
+        "skills .      ."
-        "avatar"
+        "avatar target ."
-        "effects"
+        "stats stats effects";
-        "stats";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -70,6 +73,15 @@
     transition-timing-function: ease;
 }
 
+.game-cryp .targeting {
+    grid-area: target;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: flex-end;
+    width: 100%;
+}
+
 .game-cryp .img {
     grid-area: avatar;
 }
@@ -80,10 +92,21 @@
     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;
     flex-flow: column-reverse;
+    align-items: baseline;
+    /*flex-flow: column;*/
 }
 
 /*@media (max-width: 1000px) {

client/instance.css

@@ -6,12 +6,6 @@
     height: 100%;
 }
 
-.instance-hdr {
-    display: flex;
-    flex-flow: column;
-    flex: 1;
-}
-
 .instance-info {
     flex: 0 1 35%;
     padding-left: 1em;
@@ -44,11 +38,7 @@
     flex: 0 0 50%;
 }
 
-.ready-btn {
+.ready:hover {
-    flex: 1 0 50%;
-}
-
-.ready-btn:hover {
     transition-property: all;
     transition-duration: 0.5s;
     transition-timing-function: ease;

client/src/components/game.component.jsx

@@ -52,9 +52,9 @@ function GamePanel(props) {
     }
 
     const header = (
-        <div className="ready">
+        <div className="top">
             <button
-                className="game-btn instance-btn instance-ui-btn right"
+                className="instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
                 Ready
             </button>
@@ -137,6 +137,9 @@ function GamePanel(props) {
                 <div className="effects">
                     {effects}
                 </div>
+                <div className="targeting">
+                    <div>{'<'}</div>
+                </div>
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >

client/src/components/game.cryp.jsx

@@ -78,6 +78,9 @@ function GameCryp(props) {
             <div className="skills">
                 {skills}
             </div>
+            <div className="targeting">
+                <div>{'<'}</div>
+            </div>
             <figure
                 className="img"
                 onClick={() => selectSkillTarget(cryp.id)} >

client/src/components/instance.component.jsx

@@ -18,7 +18,7 @@ function InstanceComponent(args) {
 
     if (!instance) return false;
 
-    const rdyClasses = `instance-btn instance-ui-btn ready-btn ${player.ready ? 'ready' : ''}`;
+    const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
     const readyBtn = (
         <button
             className={rdyClasses}
@@ -49,7 +49,7 @@ function InstanceComponent(args) {
 
     return (
         <section className="instance" >
-            <div className="instance-hdr">
+            <div className="top">
                 {actionBtn}
                 {timer}
             </div>

client/src/components/menu.component.jsx

@@ -67,7 +67,7 @@ function Menu(args) {
         // );
 
         return (
-            <section className="menu-instance-list" >
+            <div className="menu-instance-list" >
                 <table>
                     <thead>
                         <tr>
@@ -84,7 +84,7 @@ function Menu(args) {
                     </tbody>
                 </table>
                 <InstanceCreateForm />
-            </section>
+            </div>
         );
     }
 
@@ -147,7 +147,6 @@ function Menu(args) {
     return (
         <section className="menu">
             {instanceList()}
-            {crypList()}
         </section>
     );
 }

client/src/socket.jsx

@@ -312,7 +312,7 @@ function createSocket(events) {
                 sendAccountCryps();
             }
 
-            // sendPing();
+            sendPing();
 
             return true;
         });

client/src/test.game.js

@@ -94,7 +94,10 @@ const game = {
               "cd": 1
             }
           ],
-          "effects": [],
+          "effects": [{
+            effect: "Decay",
+            duration: 2,
+          }],
           "specs": [],
           "colours": {
             "red": 0,
@@ -238,7 +241,8 @@ const game = {
               "cd": 1
             }
           ],
-          "effects": [],
+          "effects": [
+          ],
           "specs": [],
           "colours": {
             "red": 0,

client/src/utils.jsx

@@ -57,6 +57,7 @@ function crypAvatar(name) {
     return (
         <img
             src={`/molecules/${genAvatar(name)}.svg`}
+            height="500"
             onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
         />
     );

client/styles.css

@@ -17,9 +17,9 @@ html, body, main {
     -ms-user-select: none;
 
     /* this is the sweet nectar to keep it full page*/
-    height: 100%;
+    height: 100vh;
-    max-height: 100%;
+    max-height: 100vh;
-    min-height: 100%;
+    min-height: 100vh;
     /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/
@@ -501,6 +501,7 @@ header {
 
 .stats figcaption {
     font-size: 75%;
+    white-space: nowrap;
 }
 
 .resolving .skills button {
@@ -535,3 +536,8 @@ figure.gray {
     fill: none;
 }
 
+section .top {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+}