new game styles

client/assets/styles/game.less

@@ -28,30 +28,34 @@
 
 .opponent {
     grid-area: opponent;
-}
 
-.opponent .combat-text {
+    .combat-text {
         top: 75%;
-}
+    }
 
-.opponent .combat-anim {
+    .combat-anim {
         top: 25%;
-}
+    }
 
-.opponent .game-construct {
+    .game-construct {
         align-items: flex-start;
-    grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
+        grid-template-rows: min-content min-content 1fr;
-    grid-template-columns: 1fr;
+        grid-template-columns: 1fr 2fr;
         grid-template-areas:
-        "stats  "
+            "effects stats"
-        "name   "
+            "effects name"
-        "effects "
+            "effects avatar";
-        "avatar ";
-}
 
-.opponent .game-construct .name {
+        .effects {
+            align-self: flex-start;
+            text-align: right;
+        }
+    }
+
+    .game-construct .name {
         margin-bottom: 0;
         margin-top: 0.25em;
+    }
 }
 
 .game-construct {
@@ -65,19 +69,98 @@
 
     justify-items: center;
 
-    grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
+    grid-template-rows: minmax(min-content, 1fr) min-content min-content;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 3fr;
     grid-template-areas:
-        "skills     "
+        "skills avatar"
-        "avatar     "
+        "effects name"
-        "effects    "
+        "effects stats";
-        "name       "
-        "stats      ";
 
     transition-property: translate, opacity;
     transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
+
+    .effects {
+        align-self: flex-end;
+    }
+
+    .stats {
+        align-self: flex-end;
+    }
+
+    .name {
+        width: 100%;
+        margin-bottom: 0.25em;
+        text-align: center;
+        grid-area: name;
+    }
+
+    .skills {
+        grid-area: skills;
+        width: 100%;
+
+        button {
+            width: 100%;
+            height: 2em;
+            height: 25%;
+        }
+    }
+
+    .effects {
+        grid-area: effects;
+        white-space: nowrap;
+        width: 100%;
+        text-align: center;
+        font-size: 1.5em;
+    }
+
+    .ko {
+        animation: none;
+        opacity: 0.20;
+    }
+
+    .ko button:hover {
+        color: #333;
+    }
+
+    .unfocus {
+        opacity: 0.35;
+    }
+
+    .unfocus.ko {
+        opacity: 0.20;
+    }
+
+    .stats {
+        grid-area: stats;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .stats div {
+        padding: 0 0.5em;
+        display: flex;
+        flex-flow: column;
+        white-space: nowrap;
+        text-align: center;
+    }
+
+    .stats .value {
+        display: none;
+    }
+
+    figcaption {
+        white-space: nowrap;
+        font-size: 100%;
+    }
+}
+
+@media (max-width: 1500px) {
+    .game-construct figure {
+        padding: 0 0.25em;
+    }
 }
 
 #targeting {
@@ -101,116 +184,6 @@
         max-height: 10em;
     }
 }
-/*
-.resolving #targeting {
-    opacity: 0;
-}
-*/
-.game-construct .name {
-    width: 100%;
-    margin-bottom: 0.25em;
-    text-align: center;
-    grid-area: name;
-}
-
-.game-construct .stats {
-    grid-area: stats;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-}
-
-.game-construct .stats div {
-    padding: 0 0.5em;
-    display: flex;
-    flex-flow: column;
-    white-space: nowrap;
-    text-align: center;
-}
-
-.game-construct .stats .value {
-    display: none;
-}
-
-.game-construct figcaption {
-    white-space: nowrap;
-    font-size: 100%;
-}
-
-@media (max-width: 1500px) {
-    .game-construct figure {
-        padding: 0 0.25em;
-    }
-}
-
-.game-construct .skills {
-    grid-area: skills;
-    display: flex;
-    flex-flow: column-reverse;
-    justify-self: center;
-    width: 100%;
-}
-
-.game-construct .skills button {
-    width: 100%;
-}
-
-.game-construct .effects {
-    grid-area: effects;
-    white-space: nowrap;
-    width: 100%;
-    text-align: center;
-    font-size: 1.5em;
-}
-
-.game-btn {
-    flex: 0 0 25%;
-}
-
-.game-btn:first-child {
-    margin-right: 0.5em;
-}
-
-.game-construct button {
-    color: #888;
-    flex: 1 1 100%;
-    padding: 0;
-    margin: 0 0.5em;
-    border-width: 0px;
-}
-
-.game-construct button.active {
-    color: whitesmoke;
-}
-
-.game-construct button[disabled], .game-construct button[disabled]:hover {
-    color: #333333;
-    text-decoration: line-through
-}
-
-.game-construct button:hover {
-    color: whitesmoke;
-}
-
-.game-construct.ko {
-    animation: none;
-    opacity: 0.20;
-/*    filter: grayscale(100%);
-*/}
-
-.game-construct.ko button:hover {
-    color: #333;
-}
-
-.game-construct.unfocus {
-    opacity: 0.35;
-/*    filter: blur(5px);
-*/}
-
-.game-construct.unfocus.ko {
-    opacity: 0.20;
-/*    filter: blur(5px) grayscale(100%);
-*/}
 
 .combat-text {
     font-size: 2em;
@@ -238,10 +211,6 @@
     width: 100%;
 }
 
-.game-construct.active-skill {
-/*    filter: drop-shadow(0 0 0.2em silver);
-*/}
-
 .game-construct.red-damage {
     color: #a52a2a;
     /*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
@@ -326,7 +295,7 @@
     object-fit: contain;
     background-size: contain;
     background-repeat: no-repeat;
-    background-position: center;
+    background-position: top;
     pointer-events: none;
 }
 

client/src/components/skill.btn.jsx

@@ -44,7 +44,7 @@ function Skill(props) {
         return (
             <button
                 disabled='true'
-                class='construct-skill-btn disabled'>
+                class='construct-skill-btn disabled'>&nbsp;
             </button>
         );
     }

client/src/components/targeting.arrows.jsx

@@ -52,17 +52,11 @@ class TargetSvg extends Component {
                 ? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
                 : otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
 
-            const pathOffset = [
-                [0, -1, -2],
-                [1, 0, -1],
-                [2, 1, 0],
-            ][source][target];
-
             const sourceY = height;
-            const sourceX = (source * width / 3) + width / 6;
+            const sourceX = (source * width / 3) + width / 24;
             const targetX = (target * width / 3) + width / 6
                 + (defensive ? width / 64 : 0)
-                + (pathOffset * width / 32);
+                + (source * width / 18);
             const targetY = defensive ? height : 0;
             const bendStart = height * (0.7 - 0.1 * source);
             const bendEnd = height * 0.20;