murk/Dominion
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

Improve player hand UI

Browse Source
This commit is contained in:
Markus Wagner 2021-01-06 19:00:32 +01:00
parent b13205da34
commit c48c63debb
1 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
static/game.html
View File

@ -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,
})
})
)