From 03a35109dc59e53eca107f94ce65aeb8bf6c62a3 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 3 Jun 2019 14:46:30 +1000
Subject: [PATCH] vbox highlighting

---
 WORKLOG.md                               |  7 +++-
 client/assets/styles/game.css            | 42 ++++++++++++++----------
 client/assets/styles/instance.css        | 21 ++++--------
 client/src/components/game.construct.jsx |  3 +-
 client/src/utils.jsx                     |  7 ++--
 5 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/WORKLOG.md b/WORKLOG.md
index 5f6b105c..6f92f453 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -33,8 +33,12 @@
 ## NOW
 
 *CLIENT*
-
 targeting arrows back?
+highlight on touch until buy
+reconnect based on time delta
+dont' nav to list on connect
+menu footer
+
 
 *SERVER*
 * std game mode
@@ -92,6 +96,7 @@ targeting arrows back?
 $$$
 * Items
   * Colour scheme
+    * targeting highlight colour
   * number of constructs
   * Highlight (dota) colour
   * fx colours + styles
diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 0b81c126..82144be3 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -14,7 +14,6 @@
 .team {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-auto-columns: minmax(0, 1fr);
 
     /* stops overflow */
     min-height: 0;
@@ -39,12 +38,12 @@
 .opponent .game-construct {
     align-items: flex-start;
     grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "stats  ."
-        "name   ."
-        "effects ."
-        "avatar target";
+        "stats  "
+        "name   "
+        "effects "
+        "avatar ";
 }
 
 .opponent .game-construct .name {
@@ -59,14 +58,14 @@
     justify-items: start;
     /*align-items: flex-end;*/
 
-    grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
-    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "skills     ."
-        "avatar     target"
-        "effects    ."
-        "name       ."
-        "stats      .";
+        "skills     "
+        "avatar     "
+        "effects    "
+        "name       "
+        "stats      ";
 
     transition-property: all;
     transition-duration: 0.25s;
@@ -98,15 +97,14 @@
 .game-construct .stats {
     grid-area: stats;
     display: flex;
-    flex-flow: row;
     width: 100%;
+    justify-content: center;
 }
 
 .game-construct .stats div {
     padding: 0 0.5em;
     display: flex;
     flex-flow: column;
-    flex: 1;
     white-space: nowrap;
     text-align: center;
 }
@@ -203,7 +201,6 @@
     left: 50%;
 }
 
-CONSTRUCT DAMAGE
 
 .game-construct.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
@@ -299,8 +296,15 @@ CONSTRUCT DAMAGE
 
 .game .avatar {
     grid-area: avatar;
-    background: forestgreen;
     width: 100%;
+    height: 100%;
+
+    grid-area: avatar;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
 }
 
 /*@keyframes rotate {
@@ -409,6 +413,10 @@ CONSTRUCT DAMAGE
         height: 1em;
     }
 
+    .game .stats div {
+        margin: 0 0.2em;
+    }
+
     .game .effects {
         font-size: 100%;
     }
diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index d5397595..da30514a 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.css
@@ -150,10 +150,15 @@
     transition-property: color, background, border;
     transition-duration: 0.5s;
     transition-delay: 0;
-    transition-timing-function: ease;
+    transition-timing-function: linear;
     cursor: pointer;
 }
 
+.vbox-table td:active {
+    background: whitesmoke;
+    color: black;
+}
+
 /* CONSTRUCT LIST */
 
 .construct-list {
@@ -224,20 +229,6 @@
     border-width: 0px;
 }
 
-
-/*button.action {
-    animation: action 1s infinite ease-in-out alternate;
-}
-
-@keyframes action {
-    0% {
-        box-shadow: inset 0 0 0 0 whitesmoke;
-    }
-    100% {
-        box-shadow: inset 0.5em 0 0 0 whitesmoke;
-    }
-}
-*/
 .construct-list .specs {
     margin-top: 1em;
     grid-area: specs;
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 4151f0eb..b60bb1c1 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -100,9 +100,8 @@ function GameConstruct(props) {
             className={`game-construct ${ko} ${classes}`} >
             <h3 className="name"> {construct.name} </h3>
             {crypSkills}
-            <div className="avatar"></div>
-            <div className="targeting"> {targeting} </div>
             <div className="stats"> {stats} </div>
+            <ConstructAvatar name={construct.name} id={construct.id} />
             <div className="effects"> {effects} </div>
         </div>
     );
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 54ee27c2..2e780b42 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -82,11 +82,10 @@ function clearAnimation(id) {
 class ConstructAvatar extends Component {
     render() {
         return (
-            <img
+            <div
+                className="avatar"
                 id={this.props.id}
-                src={`/molecules/${genAvatar(this.props.name)}.svg`}
-                height="500"
-                onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
+                style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
             />
         );
     }