diff --git a/static/game.html b/static/game.html
index a3d3584..c24e5fe 100644
--- a/static/game.html
+++ b/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: 165px;
+ height: 145px;
margin: 0;
- box-sizing: border-box;
- overflow-x: scroll;
- display: flex;
+ display: grid;
+ justify-content: center;
+ 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,
})
})
)