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

Add game end condition check and simple scoring end screen

Browse Source
This commit is contained in:
Markus Wagner
2021-01-05 20:40:42 +01:00
parent a67aa2c0d9
commit 7b172b5f03
4 changed files with 186 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
static/game.html
View File

@@ -8,8 +8,9 @@
<style type="text/css">
#game {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto 300px;
user-select: none;
position: relative;
}
.pile-counter {
@@ -53,7 +54,7 @@
.player-hand {
border: 1px solid red;
height: 160px;
height: 165px;
margin: 0;
box-sizing: border-box;
overflow-x: scroll;
@@ -68,6 +69,8 @@
border: 1px solid black;
width: 300px;
grid-column-start: 2;
grid-row-start: 1;
box-sizing: border-box;
}
#chat li[data-repeat]::after {
@@ -109,7 +112,7 @@
.supply-pile::after {
position: absolute;
bottom: 5px;
bottom: 20px;
right: 5px;
color: wheat;
background-color: darkred;
@@ -211,6 +214,10 @@
padding-top: 0;
}
.inplay-area img.card {
margin-left: -55px;
}
.turn-status {
line-height: 24px;
height: 24px;
@@ -309,6 +316,57 @@
z-index: -1;
}
#preview {
grid-column-start: 2;
grid-row-start: 1;
height: 290px;
margin-top: 500px;
}
#preview img {
height: 290px;
width: 180px;
}
#modal {
display: none;
grid-row-start: 1;
grid-column-end: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(1.0, 1.0, 1.0, 0.6);
}
.modal-content {
width: 600px;
height: 300px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightgray;
box-shadow: 0 0 10px;
border: 1px solid black;
}
.modal-content h1 {
text-align: center;
margin-top: 1px;
}
.rank {
display: flex;
border-bottom: 1px solid dimgray;
padding: 2px;
}
.rank span:first-child {
width: 120px;
}
</style>
<script src="/static/mithril.js"></script>
</head>
@@ -316,7 +374,17 @@
<body>
<div id="game"></div>
<script>
function handle_dnd(data) {
var mouseenter = function(ev) {
var img = ev.target.src;
document.querySelector("#preview img").src = img;
document.querySelector("#preview img").style.visibility = "visible";
}
var mouseleave = function(ev) {
document.querySelector("#preview img").style.visibility = "hidden";
}
function handle_dnd(data) {
if (data.source == "Hand" && data.dest == "InPlay") {
var msg = { type: "PlayCard", name: "", index: data.index};
webSocket.send(JSON.stringify(msg));
@@ -348,7 +416,7 @@
return {
view: function(vnode) {
return m(".chat-window",
return [m(".chat-window",
m("h4", "Players"),
m("ul", vnode.attrs.players.map(function(p) {
return m("li", p.name);
@@ -359,8 +427,10 @@
id: "chat_input",
placeholder: "Type to chat...",
onkeyup: keyup
})
)
}),
),
m("#preview", m("img")),
]
}
}
}
@@ -376,7 +446,7 @@
ev.dataTransfer.setData("text", JSON.stringify(data));
}
return {
return {
view: function(vnode) {
return m(".supply-pile",
{
@@ -390,6 +460,8 @@
class: "card",
src: "/static/images/cards/" + vnode.attrs.name.toLowerCase() + ".jpg",
draggable: false,
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
)
}
@@ -693,19 +765,34 @@
m("h4", "Basic cards"),
m(".basic-cards",
vnode.attrs.basic_cards.map(function(card) {
return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
})
),
m("h4", "Kingdom Cards"),
m(".kingdom-cards",
vnode.attrs.kingdom_cards.map(function(card) {
return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
})
),
m("h4", "Starting Deck"),
m(".start-deck",
vnode.attrs.starting_deck.map(function(card) {
return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
})
),
m("button", {onclick: start_click}, "Start Game")
@@ -714,10 +801,27 @@
}
}
function EndScreen(initialVnode) {
return {
view: function(vnode) {
return m(".modal-content",
m("h1", "Score"),
gameover_state.map(function(rank) {
return m(".rank",
m("span", game_state.players[rank[0]].name),
m("span", rank[1])
)
})
)
}
}
}
var game_state;
var setup_state;
var my_player_id = 0;
var webSocket;
var gameover_state;
function App(initialVnode) {
if (document.location.protocol == "https:") {
@@ -779,6 +883,12 @@
}
}
var handle_gameover = function(msg) {
gameover_state = msg.score;
var modal = document.querySelector("#modal");
modal.style.display = "block";
m.mount(modal, EndScreen);
}
webSocket.onopen = function(event) {
console.log("ws open");
@@ -815,6 +925,8 @@
handle_game_state(msg);
} else if (msg.type == "GameSetup") {
handle_setup(msg.setup);
} else if (msg.type == "GameOver") {
handle_gameover(msg);
} else if (msg.type == "PlayerHand") {
game_state.player.hand = msg.hand;
} else if (msg.type == "PlayerId") {
@@ -832,6 +944,7 @@
return [
m(SetupScreen, setup_state),
m(GameScreen, game_state),
m("#modal"),
m(Chat, chat_state)
]
}