more wip

client/game.css

@@ -2,51 +2,67 @@
 
 .game {
     display: grid;
-    grid-template-columns: repeat(3, 1fr));
-    grid-template-columns: repeat(6, 1fr));
-
+    grid-template-rows: 1.5em 1.5em 1fr 1fr;
     grid-template-areas:
-      "opponent opponent opponent"
-      "opponent opponent opponent"
-      "middle middle middle"
-      "player player player";
-      "player player player";
-      "player player player";
+        "ready"
+        "timer"
+        "opponent"
+        "player";
 }
 
 .team {
-    grid-area: player;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    text-align: center;
+    grid-auto-columns: minmax(0, 1fr);
+
+    /* stops overflow */
+    min-height: 0;
+    min-width: 0;
+}
+
+.player {
+    grid-area: player;
 }
 
 .opponent {
     grid-area: opponent;
 }
 
+.targeting-arrows {
+    grid-area: middle;
+}
+
 .opponent .combat-text {
     left: 40%;
     transform: translate(-50%, -50%);
 }
 
-.target-svg {
-    background: green;
-    flex: 1;
-}
 
-.target-svg path {
+.targeting-arrows path {
     stroke: whitesmoke;
     stroke-width: 4px;
 }
 
-
-.game-cryp {
-    display: grid;
+.opponent .game-cryp {
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-areas:
         "stats"
         "effects"
-        "avatar";
+        "avatar"
+        "skills";
+}
+
+.game-cryp {
+    display: grid;
+
+    justify-items: center;
+
+    grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);
+    grid-template-areas:
+        "skills"
+        "avatar"
+        "effects"
+        "stats";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -54,18 +70,14 @@
     transition-timing-function: ease;
 }
 
-.player .game-cryp {
-    grid-template-areas:
-        "skills"
-        "avatar"
-        "effects"
-        "stats";
+.game-cryp .img {
+    grid-area: avatar;
 }
 
 .game-cryp .stats {
     grid-area: stats;
     display: flex;
-    flex: row;
+    flex-flow: row;
 }
 
 .game-cryp .skills {
@@ -76,7 +88,6 @@
 
 .game-cryp .effects {
     font-size: 1.5em;
-    grid-area: effects;
 }
 
 .game-btn {

client/instance.css

@@ -70,6 +70,7 @@
     flex: 1 1 100%;
     width: 100%;
     height: 0.25em;
+    max-height: 0.25em;
 
     border: none;
     margin: 1em 0;

client/src/components/game.component.jsx

@@ -52,7 +52,7 @@ function GamePanel(props) {
     }
 
     const header = (
-        <div className="instance-hdr">
+        <div className="ready">
             <button
                 className="game-btn instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
@@ -131,18 +131,18 @@ function GamePanel(props) {
                 className={`game-cryp ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
+                <div className="stats">
+                    {stats}
+                </div>
+                <div className="effects">
+                    {effects}
+                </div>
                 <figure
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
                     {crypAvatar(cryp.name)}
                     {combatTextEl}
                 </figure>
-                <div className="effects">
-                    {effects}
-                </div>
-                <div className="stats">
-                    {stats}
-                </div>
             </div>
         );
     }
@@ -159,13 +159,10 @@ function GamePanel(props) {
 
     const gameClasses = `game ${resolution ? 'resolving': ''}`;
 
-            // {header}
-            // {timer}
-
-
     return (
         <section className={gameClasses} onClick={() => setActiveCryp(null)} >
-            <TargetingArrows />
+            {header}
+            {timer}
             {otherTeams.map(OpponentTeam)}
             {PlayerTeam(playerTeam, setActiveSkill)}
         </section>

client/src/components/game.cryp.jsx

@@ -14,7 +14,6 @@ const addState = connect(
             game,
             resolution,
             activeSkill,
-            activeCryp,
         } = state;
 
         function selectSkillTarget(targetCrypId) {
@@ -32,28 +31,18 @@ const addState = connect(
         return {
             resolution,
             activeSkill,
-            activeCryp,
             selectSkillTarget,
         };
     },
-
-    function receiveDispatch(dispatch) {
-        function setActiveCryp(cryp) {
-            dispatch(actions.setActiveCryp(cryp));
-        }
-
-        return { setActiveCryp };
-    }
 );
 
-
 function GameCryp(props) {
     const {
         cryp,
         resolution,
         activeSkill,
         setActiveCryp,
-        selectSkillTarget,
+        // selectSkillTarget,
     } = props;
 
     const ko = cryp.green_life.value === 0 ? 'ko' : '';
@@ -73,11 +62,6 @@ function GameCryp(props) {
     });
 
 
-    function onClick(e) {
-        e.stopPropagation();
-        return setActiveCryp(cryp);
-    }
-
     const combatText = getCombatText(cryp, resolution);
     const combatTextEl = combatText
         ? <div className="combat-text">{combatText}</div>
@@ -90,13 +74,9 @@ function GameCryp(props) {
     return (
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
-            onClick={onClick}
             className={`game-cryp ${ko} ${classes}`} >
-            <div className="stats">
-                {stats}
-            </div>
-            <div className="effects">
-                {effects}
+            <div className="skills">
+                {skills}
             </div>
             <figure
                 className="img"
@@ -104,8 +84,11 @@ function GameCryp(props) {
                 {crypAvatar(cryp.name)}
                 {combatTextEl}
             </figure>
-            <div className="skills">
-                {skills}
+            <div className="effects">
+                {effects}
+            </div>
+            <div className="stats">
+                {stats}
             </div>
         </div>
     );

client/src/components/targeting.arrows.jsx

@@ -62,7 +62,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-arrows">
+        <svg preserveAspectRatio="none" className="targeting-arrows">
             {arrows}
         </svg>
     );

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/socket.jsx

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

client/styles.css

@@ -3,7 +3,7 @@
 */
 
 html, body, main {
-    width: 100%;
+    /*width: 100%;*/
     margin: 0;
 
     background-color: #000000;
@@ -71,6 +71,7 @@ main {
 
 nav {
     grid-area: nav;
+    margin-right: 1em;
 }
 
 nav button {