more wip

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