lookin good

client/game.css

@@ -46,10 +46,10 @@
 .opponent .game-cryp {
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-areas:
-        "stats"
-        "effects"
-        "avatar"
-        "skills";
+        ".      stats"
+        ".      effects"
+        "target avatar"
+        ".      skills";
 }
 
 .game-cryp {
@@ -57,12 +57,14 @@
 
     justify-items: center;
 
-    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: min-content 1fr 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
     grid-template-areas:
-        "skills"
-        "avatar"
-        "effects"
-        "stats";
+        ".      skills skills"
+        "target avatar avatar"
+        "effects stats stats";
 
     transition-property: all;
     transition-duration: 0.5s;
@@ -70,10 +72,17 @@
     transition-timing-function: ease;
 }
 
-.game-cryp .avatar {
+.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;
-    /*max-height: 50%;*/
-    height: auto;
 }
 
 .game-cryp .stats {
@@ -86,6 +95,7 @@
     grid-area: skills;
     display: flex;
     flex-flow: column-reverse;
+    /*flex-flow: column;*/
 }
 
 /*@media (max-width: 1000px) {

client/src/components/game.component.jsx

@@ -137,17 +137,15 @@ function GamePanel(props) {
                 <div className="effects">
                     {effects}
                 </div>
-                <div className="avatar">
-                    <div className="targeting">
-                        <div>></div>
-                    </div>
-                    <figure
-                        className="img"
-                        onClick={() => selectSkillTarget(cryp.id)} >
-                        {crypAvatar(cryp.name)}
-                        {combatTextEl}
-                    </figure>
+                <div className="targeting">
+                    <div>></div>
                 </div>
+                <figure
+                    className="img"
+                    onClick={() => selectSkillTarget(cryp.id)} >
+                    {crypAvatar(cryp.name)}
+                    {combatTextEl}
+                </figure>
             </div>
         );
     }

client/src/components/game.cryp.jsx

@@ -78,17 +78,15 @@ function GameCryp(props) {
             <div className="skills">
                 {skills}
             </div>
-            <div className="avatar">
-                <div className="targeting">
-                    <div>></div>
-                </div>
-                <figure
-                    className="img"
-                    onClick={() => selectSkillTarget(cryp.id)} >
-                    {crypAvatar(cryp.name)}
-                    {combatTextEl}
-                </figure>
+            <div className="targeting">
+                <div>></div>
             </div>
+            <figure
+                className="img"
+                onClick={() => selectSkillTarget(cryp.id)} >
+                {crypAvatar(cryp.name)}
+                {combatTextEl}
+            </figure>
             <div className="effects">
                 {effects}
             </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>
         );
     }
 

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

@@ -53,7 +53,7 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: repeat(10, 10%));
+    grid-template-columns: repeat(10, 1fr);
     grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
     grid-template-areas: