wip

client/game.css

@@ -1,12 +1,52 @@
 /* GAME */
-.game-cryp {
-/*    flex: 1 1 100%;
 
-    display: flex;
+.game {
-    flex-flow: column;
+    display: grid;
-*/    /*border: 1px solid whitesmoke;*/
+    grid-template-columns: repeat(3, 1fr));
-    /*margin-bottom: 1em;*/
+    grid-template-columns: repeat(6, 1fr));
-    /*justify-content: center;*/
+
+    grid-template-areas:
+      "opponent opponent opponent"
+      "opponent opponent opponent"
+      "middle middle middle"
+      "player player player";
+      "player player player";
+      "player player player";
+}
+
+.team {
+    grid-area: player;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    text-align: center;
+}
+
+.opponent {
+    grid-area: opponent;
+}
+
+.opponent .combat-text {
+    left: 40%;
+    transform: translate(-50%, -50%);
+}
+
+.target-svg {
+    background: green;
+    flex: 1;
+}
+
+.target-svg path {
+    stroke: whitesmoke;
+    stroke-width: 4px;
+}
+
+
+.game-cryp {
+    display: grid;
+    grid-template-areas:
+        "stats"
+        "effects"
+        "avatar";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -14,23 +54,29 @@
     transition-timing-function: ease;
 }
 
+.player .game-cryp {
+    grid-template-areas:
+        "skills"
+        "avatar"
+        "effects"
+        "stats";
+}
+
 .game-cryp .stats {
+    grid-area: stats;
     display: flex;
     flex: row;
 }
 
 .game-cryp .skills {
+    grid-area: skills;
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: row;
-    flex: 1 0 25%;
-    height: 100%;
-    z-index: 10;
 }
 
 .game-cryp .effects {
-    max-height: 100%;
     font-size: 1.5em;
-    flex: 1;
+    grid-area: effects;
 }
 
 .game-btn {
@@ -90,13 +136,6 @@
     text-align: center;
 }
 
-
-.cryp-list {
-    display: flex;
-    flex-flow: row;
-    width: 100%;
-}
-
 /*
 CRYP DAMAGE
 */
@@ -179,4 +218,8 @@ CRYP DAMAGE
 
 .purple-damage .stats {
     border-top: 1px solid purple;
+}
+
+.img {
+    position: relative;
 }

client/src/components/game.component.jsx

@@ -99,7 +99,7 @@ function GamePanel(props) {
         const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
 
         return (
-            <div className="team-player cryp-list">
+            <div className="team player">
                 {cryps}
             </div>
         );
@@ -151,7 +151,7 @@ function GamePanel(props) {
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCryp);
         return (
-            <div className="team-opponent cryp-list">
+            <div className="team opponent">
                 {cryps}
             </div>
         );
@@ -159,13 +159,15 @@ function GamePanel(props) {
 
     const gameClasses = `game ${resolution ? 'resolving': ''}`;
 
+            // {header}
+            // {timer}
+
+
     return (
         <section className={gameClasses} onClick={() => setActiveCryp(null)} >
-            {header}
-            {timer}
-            {PlayerTeam(playerTeam, setActiveSkill)}
             <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
+            {PlayerTeam(playerTeam, setActiveSkill)}
         </section>
     );
 }

client/src/components/targeting.arrows.jsx

@@ -24,8 +24,8 @@ function TargetSvg(args) {
         const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
 
         const skillOffset = (100 * skillIndex) + 50;
-        const sourceX = 0;
+        const sourceY = 0;
-        const sourceY = (source * 300) + skillOffset;
+        const sourceX = (source * 300) + skillOffset;
         const targetY = (target * 300) + 150;
         const curveStart = 150 + (150 * source);
         const curveEnd = 450 + curveStart;
@@ -33,12 +33,12 @@ function TargetSvg(args) {
         if (defensive) {
             const path = `
                 M${sourceX},${sourceY}
-                L150,${sourceY}
+                L${sourceY},150
-                C150,${sourceY} 150,${targetY} 150,${targetY}
+                C${sourceY},150 ${targetY},150 ${targetY},150
-                L0,${targetY}
+                L${targetY},0
-                L50,${targetY - 4}
+                L${targetY - 4},50
-                M0,${targetY}
+                M${targetY},0
-                L50,${targetY + 4}
+                L${targetY + 4},0
             `;
 
             return <path d={path} />;
@@ -48,10 +48,10 @@ function TargetSvg(args) {
             M${sourceX},${sourceY}
             L${curveStart},${sourceY}
             C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
-            L900,${targetY}
+            L${targetY},900
-            L850,${targetY - 4}
+            L${targetY - 4},850
-            M900,${targetY}
+            M${targetY},900
-            L850,${targetY + 4}
+            L${targetY + 4},850
         `;
 
         return <path d={path} />;
@@ -62,7 +62,7 @@ function TargetSvg(args) {
         : outgoing.map(getPath);
 
     return (
-        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
+        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-arrows">
             {arrows}
         </svg>
     );

client/styles.css

@@ -21,6 +21,9 @@ html, body, main {
     max-height: 100%;
     min-height: 100%;
     /*padding: 0 20%;*/
+
+    /* stops inspector going skitz*/
+    overflow: hidden;
 }
 
 html {
@@ -50,8 +53,8 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(10, minmax(min-content, 10%));
+    grid-template-columns: repeat(10, 10%));
-    grid-template-rows: repeat(10, min-content);
+    grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
     grid-template-areas:
       "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
@@ -62,8 +65,8 @@ 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";
-      /*"ft  ft   ft   ft   ft   ft   ft   ft   ft   ft";*/
 }
 
 nav {
@@ -545,23 +548,3 @@ figure.gray {
 }
 
 
-.team-opponent .combat-text {
-    left: 40%;
-    transform: translate(-50%, -50%);
-}
-
-.img {
-    position: relative;
-}
-
-.game .target-svg {
-    flex: 1;
-    height: 94%;
-    max-width: 100%;
-}
-
-.game .target-svg path {
-    stroke: whitesmoke;
-    stroke-width: 4px;
-}
-