Improve player hand UI

static/game.html

@@ -52,17 +52,33 @@
     border-radius: 6px;
 }
 
+img.card:hover {
+    box-shadow: 0 0 5px white;
+}
+
 .player-hand {
-    border: 1px solid red;
+    height: 145px;
-    height: 165px;
     margin: 0;
-    box-sizing: border-box;
+    display: grid;
-    overflow-x: scroll;
+    justify-content: center;
-    display: flex;
+    grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
+    padding-right: 115px;
+}
+
+.player-hand img.card {
+    transform: rotate(3deg);
+    transition: transform 0.1s ease-in;
 }
 
 .player-hand img.card:hover {
     box-shadow: 0 0 5px blue;
+    transform: scale(1.2);
+    transition: transform 0.1s ease-in;
+}
+
+.player-hand img.card:hover ~ img.card {
+    transform: translate(60px, 0) rotate(3deg);
+    transition: transform 0.1s ease-in;
 }
 
 .chat-window {
@@ -73,6 +89,21 @@
     box-sizing: border-box;
 }
 
+.chat-window h4 {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+.chat-window .players {
+    list-style: none;
+    padding: 0;
+    margin: 0 5px 5px;
+}
+
+.chat-window .players li {
+}
+
 #chat li[data-repeat]::after {
     content: "x" attr(data-repeat);
     margin-left: 10px;
@@ -207,6 +238,17 @@
     margin: 5px 0;
 }
 
+.inplay-area h3 {
+    position: relative;
+    top: 50px;
+    left: 30px;
+    transform-origin: 0 0;
+    transform: rotate(90deg);
+    padding: 0;
+    margin: 0;
+    width: 100px;
+}
+
 .inplay-area.inactive {
     height: 0;
     transition: height 0.4s ease;
@@ -216,6 +258,7 @@
 
 .inplay-area img.card {
     margin-left: -55px;
+    transform: translate(85px, 10px);
 }
 
 .turn-status {
@@ -240,6 +283,7 @@
 .opponent-area {
     display: flex;
     position: relative;
+    min-height: 145px;
 }
 
 .opponent-status {
@@ -418,7 +462,7 @@
                 view: function(vnode) {
                     return [m(".chat-window",
                         m("h4", "Players"),
-                        m("ul", vnode.attrs.players.map(function(p) {
+                        m("ul", {class: "players" }, vnode.attrs.players.map(function(p) {
                             return m("li", p.name);
                         })),
                         m("h4", "Messages"),
@@ -605,7 +649,6 @@
                             ondragover: dragover,
                             ondrop: drop,
                         },
-                        "Player Hand",
                         vnode.attrs.hand.map(function(card, i) {
                             return m("img", {
                                 class: "card",
@@ -613,6 +656,8 @@
                                 draggable: true,
                                 ondragstart: dragStart,
                                 "data-index": i,
+                                onmouseenter: mouseenter,
+                                onmouseleave: mouseleave,
                             })
                         })
                     )
@@ -656,10 +701,13 @@
                             ondragover: dragover,
                             ondrop: drop,
                         },
-                        "Player play area",
+                        m("h3", "In-Play"),
                         m(".turn-status",
                             "Actions: " + vnode.attrs.actions + " | Buys: " + vnode.attrs.buys + " | ",
-                            m("img", {src: "/static/images/64px-Coin.png", style: "height: 16px;"}),
+                            m("img", {
+                                src: "/static/images/64px-Coin.png",
+                                style: "height: 16px; position: relative; top: 2px;",
+                            }),
                             ": " + vnode.attrs.coin
                         ),
                         cards.map(function(card) {
@@ -668,6 +716,8 @@
                                 src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
                                 draggable: true,
                                 //ondragstart: dragStart,
+                                onmouseenter: mouseenter,
+                                onmouseleave: mouseleave,
                             })
                         })
                     )