Improve player hand UI

This commit is contained in:
Markus Wagner 2021-01-06 19:00:32 +01:00
parent b13205da34
commit c48c63debb

View File

@ -52,17 +52,33 @@
border-radius: 6px; border-radius: 6px;
} }
img.card:hover {
box-shadow: 0 0 5px white;
}
.player-hand { .player-hand {
border: 1px solid red; height: 145px;
height: 165px;
margin: 0; 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 { .player-hand img.card:hover {
box-shadow: 0 0 5px blue; 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 { .chat-window {
@ -73,6 +89,21 @@
box-sizing: border-box; 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 { #chat li[data-repeat]::after {
content: "x" attr(data-repeat); content: "x" attr(data-repeat);
margin-left: 10px; margin-left: 10px;
@ -207,6 +238,17 @@
margin: 5px 0; 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 { .inplay-area.inactive {
height: 0; height: 0;
transition: height 0.4s ease; transition: height 0.4s ease;
@ -216,6 +258,7 @@
.inplay-area img.card { .inplay-area img.card {
margin-left: -55px; margin-left: -55px;
transform: translate(85px, 10px);
} }
.turn-status { .turn-status {
@ -240,6 +283,7 @@
.opponent-area { .opponent-area {
display: flex; display: flex;
position: relative; position: relative;
min-height: 145px;
} }
.opponent-status { .opponent-status {
@ -418,7 +462,7 @@
view: function(vnode) { view: function(vnode) {
return [m(".chat-window", return [m(".chat-window",
m("h4", "Players"), 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); return m("li", p.name);
})), })),
m("h4", "Messages"), m("h4", "Messages"),
@ -605,7 +649,6 @@
ondragover: dragover, ondragover: dragover,
ondrop: drop, ondrop: drop,
}, },
"Player Hand",
vnode.attrs.hand.map(function(card, i) { vnode.attrs.hand.map(function(card, i) {
return m("img", { return m("img", {
class: "card", class: "card",
@ -613,6 +656,8 @@
draggable: true, draggable: true,
ondragstart: dragStart, ondragstart: dragStart,
"data-index": i, "data-index": i,
onmouseenter: mouseenter,
onmouseleave: mouseleave,
}) })
}) })
) )
@ -656,10 +701,13 @@
ondragover: dragover, ondragover: dragover,
ondrop: drop, ondrop: drop,
}, },
"Player play area", m("h3", "In-Play"),
m(".turn-status", m(".turn-status",
"Actions: " + vnode.attrs.actions + " | Buys: " + vnode.attrs.buys + " | ", "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 ": " + vnode.attrs.coin
), ),
cards.map(function(card) { cards.map(function(card) {
@ -668,6 +716,8 @@
src: "/static/images/cards/" + card.toLowerCase() + ".jpg", src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
draggable: true, draggable: true,
//ondragstart: dragStart, //ondragstart: dragStart,
onmouseenter: mouseenter,
onmouseleave: mouseleave,
}) })
}) })
) )