Allow client to switch kingdom cards in setup phase

This commit is contained in:
2021-02-05 18:59:51 +01:00
parent 246962ca96
commit 73bce1bc6d
4 changed files with 647 additions and 408 deletions

View File

@@ -471,6 +471,10 @@ img.card:hover {
</div>
<div id="game"></div>
<script>
var set_data = [
["Cellar", "Market", "Merchant", "Militia", "Mine", "Moat", "Remodel", "Smithy", "Village", "Workshop"],
["Artisan", "Bandit", "Bureaucrat", "Chapel", "Festival", "Gardens", "Sentry", "Throne Room", "Witch", "Workshop"],
];
var turnStartSound = new Audio("/static/audio/chipsStack1.ogg");
var resolve_request;
@@ -619,7 +623,7 @@ img.card:hover {
},
m("img", {
class: "card",
src: "/static/images/cards/" + vnode.attrs.name.toLowerCase() + ".jpg",
src: card_url(vnode.attrs.name),
draggable: false,
onmouseenter: mouseenter,
onmouseleave: mouseleave,
@@ -690,7 +694,7 @@ img.card:hover {
view: function(vnode) {
var c;
if (vnode.attrs.card) {
c = m("img", {class: "card", src: "/static/images/cards/" + vnode.attrs.card.toLowerCase() + ".jpg"});
c = m("img", {class: "card", src: card_url(vnode.attrs.card)});
}
return m(".discard-pile",
{
@@ -777,7 +781,7 @@ img.card:hover {
vnode.attrs.hand.map(function(card, i) {
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
src: card_url(card),
draggable: true,
ondragstart: dragStart,
"data-index": i,
@@ -795,7 +799,7 @@ img.card:hover {
return {
view: function(vnode) {
return m(".opponent-hand",
m("img", {class: "card", src: "/static/images/cards/Card_back.jpg"}),
m("img", {class: "card", src: "/static/images/cards/Card_back.jpg" }),
m("span", {class: "pile-counter" }, vnode.attrs.count)
)
}
@@ -839,7 +843,7 @@ img.card:hover {
cards.map(function(card) {
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
src: card_url(card),
draggable: true,
//ondragstart: dragStart,
onmouseenter: mouseenter,
@@ -924,12 +928,24 @@ img.card:hover {
}
}
function card_url(name) {
return "/static/images/cards/" + name.toLowerCase().replace(" ", "-") + ".jpg";
}
function SetupScreen(initialVnode) {
var start_click = function(e) {
let msg = { type: "Command", command: { type: "StartGame" }};
initialVnode.attrs.socket.send(JSON.stringify(msg));
}
var set_changed = function(e) {
let choice = parseInt(e.srcElement.value);
for (card in set_data[choice]) {
let name = set_data[choice][card];
send_command("ChangeSupply", {index: parseInt(card), name: name });
}
}
return {
view: function(vnode) {
@@ -941,18 +957,27 @@ img.card:hover {
vnode.attrs.basic_cards.map(function(card) {
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
src: card_url(card),
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
})
),
m("h4", "Kingdom Cards"),
m("select",
{
name: "set",
onchange: set_changed,
},[
m("option", { value: 0, style: "background-image: url(/static/images/sets/Dominion.png);"}, "First Game"),
m("option", { value: 1}, "Size Distortion"),
]
),
m(".kingdom-cards",
vnode.attrs.kingdom_cards.map(function(card) {
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
src: card_url(card),
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
@@ -963,7 +988,7 @@ img.card:hover {
vnode.attrs.starting_deck.map(function(card) {
return m("img", {
class: "card",
src: "/static/images/cards/" + card.toLowerCase() + ".jpg",
src: card_url(card),
onmouseenter: mouseenter,
onmouseleave: mouseleave,
})
@@ -1008,11 +1033,12 @@ img.card:hover {
setup_state = {
starting_deck: [],
basic_cards: ["Copper", "Silver", "Gold", "Estate", "Duchy", "Province", "Curse"],
kingdom_cards: ["Cellar", "Moat", "Village", "Merchant", "Workshop", "Smithy", "Remodel", "Militia", "Market", "Mine"],
kingdom_cards: [],
socket: webSocket
}
var handle_setup = function(data) {
setup_state.kingdom_cards = data.supply;
setup_state.starting_deck = data.deck;
}
@@ -1062,7 +1088,7 @@ img.card:hover {
var dlg = document.querySelector("#dialog");
resolve_request = request;
document.querySelector("#dialog img").src = "/static/images/cards/" + request.card.toLowerCase() + ".jpg";
document.querySelector("#dialog img").src = card_url(request.card);
if (request.request.type == "GainCard") {
let cost = request.request?.filter?.MaxCost;
@@ -1101,6 +1127,8 @@ img.card:hover {
append_chat(player_name(msg.event.player) + " discards a card.");
} else if (msg.event.type == "CardTrashed") {
append_chat(player_name(msg.event.player) + " trashes " + msg.event.name);
} else if (msg.event.type == "CardRevealed") {
append_chat(player_name(msg.event.player) + " reveals " + msg.event.name);
} else if (msg.event.type == "TurnStarted") {
if (msg.event.player == my_player_id) {
turnStartSound.play();