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

Add prototype for player resolveable events using Cellar

Browse Source
This commit is contained in:
Markus Wagner
2021-01-14 23:29:50 +01:00
parent b30cc02306
commit d6e2543b9c
3 changed files with 179 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
static/game.html
View File

@@ -81,6 +81,11 @@ img.card:hover {
transition: transform 0.1s ease-in;
}
.player-hand img.card.selected {
transform: translate(0px, -40px) scale(1.1) !important;
box-shadow: 0 0 10px lime;
}
.chat-window {
border: 1px solid black;
width: 300px;
@@ -411,13 +416,71 @@ img.card:hover {
width: 120px;
}
.dialog {
position: absolute;
width: 500px;
border: 1px solid dimgray;
top: 50%;
z-index: 200;
background-color: rgba(1.0, 1.0, 1.0, 0.9);
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px black;
display: grid;
grid-template-columns: auto auto;
color: white;
visibility: hidden;
grid-template-rows: 5fr auto;
}
.dialog img {
grid-row-start: 1;
grid-row-end: 3;
margin: 5px;
width: 180px;
height: 288px;
}
.dialog button {
grid-row-start: 2;
grid-column-start: 2;
margin: 10px auto;
}
</style>
<script src="/static/mithril.js"></script>
</head>
<body>
<div id="dialog" class="dialog">
<img class="card" style="margin: 5px; width:180px; height:288px;" src="/static/images/cards/cellar.jpg">
<p style="margin: 20px;">Choose any number of cards to discard.</p>
<button onclick="dialog_confirm()">Confirm</button>
</div>
<div id="game"></div>
<script>
var turnStartSound = new Audio("/static/audio/chipsStack1.ogg");
var resolve_request;
var enable_hand_selection = false;
var toggle_hand_selection = function(index) {
document.querySelectorAll(".player-hand img.card")[index].classList.toggle("selected");
}
function dialog_confirm(ev) {
var selected = [];
document.querySelectorAll(".player-hand img.card.selected").forEach((c) => {
selected.push(parseInt(c.dataset.index));
c.classList.remove("selected");
});
var msg = { type: "HandCardsChosen", choice: selected };
webSocket.send(JSON.stringify(msg));
enable_hand_selection = false;
document.querySelector("#dialog").style.visibility = "hidden";
}
var mouseenter = function(ev) {
var img = ev.target.src;
document.querySelector("#preview img").src = img;
@@ -651,6 +714,15 @@ img.card:hover {
handle_dnd(data);
}
var click = function(e) {
e.preventDefault();
console.log("hand card click", e.target.dataset.index);
if (enable_hand_selection) {
toggle_hand_selection(parseInt(e.target.dataset.index));
}
}
return {
view: function(vnode) {
return m(".player-hand",
@@ -667,6 +739,7 @@ img.card:hover {
"data-index": i,
onmouseenter: mouseenter,
onmouseleave: mouseleave,
onclick: click,
})
})
)
@@ -927,6 +1000,7 @@ img.card:hover {
}
var handle_game_state = function(state) {
var last_player = game_state.active_player;
game_state = {
...game_state,
...state,
@@ -940,6 +1014,19 @@ img.card:hover {
setup_state.active = false;
game_state.active = true;
}
if (last_player != game_state.active_player) {
if (game_state.active_player == my_player_id) {
turnStartSound.play();
}
}
}
var handle_resolve_request = function(request) {
var dlg = document.querySelector("#dialog");
dlg.style.visibility = "visible";
enable_hand_selection = true;
}
var handle_gameover = function(msg) {
@@ -951,7 +1038,6 @@ img.card:hover {
webSocket.onopen = function(event) {
console.log("ws open");
//webSocket.send("HALLO");
};
webSocket.onmessage = function(event) {
@@ -990,6 +1076,8 @@ img.card:hover {
game_state.player.hand = msg.hand;
} else if (msg.type == "PlayerId") {
my_player_id = msg.id;
} else if (msg.type == "ResolveRequest") {
handle_resolve_request(msg.request);
} else {
console.log("event?");
console.log(event.data);