From 70e483427c41dd44ab150d25e47c1f80a8c494dd Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 29 Dec 2022 00:48:04 +0100 Subject: Panels? Panels! --- play.html | 134 ++++++++++++++++++++-------------------------------------- play.js | 141 ++++++++++++++++++++++++++++++++++++++------------------------ rules.js | 31 ++++++++++---- 3 files changed, 155 insertions(+), 151 deletions(-) diff --git a/play.html b/play.html index a6c2d94..bc6e6ac 100644 --- a/play.html +++ b/play.html @@ -43,83 +43,56 @@ header.your_turn { background-color: orange; } font-variant-numeric: tabular-nums; } -main { display: grid; grid-template-columns: 1fr; } - -#center { grid-row: 1; } -#court1 { grid-row: 2; } -#court2 { grid-row: 3; } - -body.Russians #court1 { grid-row: 3; } -body.Russians #court2 { grid-row: 2; } - /* PANELS */ .panel { max-width: 1275px; margin: 36px auto; //box-shadow: 0px 0px 4px #0008; + background-color: #555; } .panel_header { + background-color: #444; + color: white; user-select: none; font-weight: bold; text-align: center; padding: 3px 1em; } -/* ARTS OF WAR */ - -#arts_of_war { - background-color: #555; +.panel_body { + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 18px; + gap: 18px; } -#arts_of_war_header { - background-color: #444; - color: white; +.court { + gap: 24px; } +/* ARTS OF WAR */ + #arts_of_war_list { min-height: 260px; - display: flex; - justify-content: center; - flex-wrap: wrap; - padding: 18px; - gap: 12px; } /* PLAN */ #plan { - background-color: #555; -} - -#plan_header { - background-color: #444; - color: white; -} - -#plan_list { min-height: 260px; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 12px 6px; - padding: 18px 0; } #plan_actions { background-color: #444; min-height: 130px; - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: 18px; - gap: 12px; - flex-wrap: wrap; } -body.Russians #plan_actions .teutonic { display: none } -body.Teutons #plan_actions .russian { display: none } +#plan_actions.hide { + display: none +} #plan_actions .card { width: 93px; @@ -127,16 +100,10 @@ body.Teutons #plan_actions .russian { display: none } background-size: 93px 130px; } -/* BATTLE GRID WITH LORD MATS */ - -#battle_panel { - background-color: #555; -} +body.Russians #plan_actions .teutonic { display: none } +body.Teutons #plan_actions .russian { display: none } -#battle_header { - background-color: #444; - color: white; -} +/* BATTLE GRID WITH LORD MATS */ #battle_grid { display: grid; @@ -313,15 +280,6 @@ body.Teutons #plan_actions .russian { display: none } /* MATS */ -.court { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: 36px auto; - padding: 18px 0; - gap: 12px; -} - .mat { position: relative; width: 376px; @@ -505,21 +463,6 @@ body.shift .mustered_vassals { justify-content: end; } -/* EVENTS: THIS LEVY / THIS CAMPAIGN */ - -#events { - display: flex; - max-width: 1275px; - margin: 0 auto; - flex-wrap: wrap; - gap: 12px; - justify-content: center; -} - -#events:empty { - display: none; -} - /* ASSETS */ .asset { @@ -1287,8 +1230,6 @@ body.shift .mustered_vassals {
-
-
@@ -1319,17 +1260,21 @@ body.shift .mustered_vassals {
-
+
+
Arts of War
+
+
-
-
~ Arts of War ~
-
+
+
Events
+
+
-
-
~ Plan ~
-
-
+
+
Hand
+
+
@@ -1370,12 +1315,21 @@ body.shift .mustered_vassals {
-
+
+
Lords
+
+
-
+
+
Plan
+
+
+
-
-
+
+
Lords
+
+
diff --git a/play.js b/play.js index f1fbfef..48913b8 100644 --- a/play.js +++ b/play.js @@ -482,21 +482,30 @@ const ui = { smerdi: document.getElementById("smerdi"), legate: document.getElementById("legate"), veche: document.getElementById("veche"), - plan_dialog: document.getElementById("plan"), - plan_list: document.getElementById("plan_list"), + + plan_panel: document.getElementById("plan_panel"), + plan: document.getElementById("plan"), plan_actions: document.getElementById("plan_actions"), - plan_list_cards: [], + plan_cards: [], plan_action_cards: [], - arts_of_war_dialog: document.getElementById("arts_of_war"), - arts_of_war_list: document.getElementById("arts_of_war_list"), + + arts_of_war_panel: document.getElementById("arts_of_war_panel"), + arts_of_war: document.getElementById("arts_of_war"), + + events_panel: document.getElementById("events_panel"), events: document.getElementById("events"), + + hand_panel: document.getElementById("hand_panel"), + hand: document.getElementById("hand"), + capabilities1: document.getElementById("capabilities1"), capabilities2: document.getElementById("capabilities2"), - hand: document.getElementById("hand"), command: document.getElementById("command"), turn: document.getElementById("turn"), vp1: document.getElementById("vp1"), vp2: document.getElementById("vp2"), + court1_header: document.getElementById("court1_header"), + court2_header: document.getElementById("court2_header"), court1: document.getElementById("court1"), court2: document.getElementById("court2"), battle_attacker_reserves: document.getElementById("mat_attacker_reserves"), @@ -1218,52 +1227,60 @@ function update_locale(loc) { function update_plan() { if (view.plan) { - ui.plan_dialog.classList.remove("hide") + let is_planning = view.actions && view.actions.plan + + ui.plan_panel.classList.remove("hide") for (let i = 0; i < 6; ++i) { if (i < view.plan.length) { let lord = view.plan[i] if (lord < 0) { if (player === "Teutons") - ui.plan_list_cards[i].className = "card teutonic cc_pass" + ui.plan_cards[i].className = "card teutonic cc_pass" else - ui.plan_list_cards[i].className = "card russian cc_pass" + ui.plan_cards[i].className = "card russian cc_pass" } else { if (lord < 6) - ui.plan_list_cards[i].className = "card teutonic cc_lord_" + lord + ui.plan_cards[i].className = "card teutonic cc_lord_" + lord else - ui.plan_list_cards[i].className = "card russian cc_lord_" + lord + ui.plan_cards[i].className = "card russian cc_lord_" + lord } - } else if (i < max_plan_length()) { + } else if (is_planning && i < max_plan_length()) { if (player === "Teutons") - ui.plan_list_cards[i].className = "card teutonic cc_back" + ui.plan_cards[i].className = "card teutonic cc_back" else - ui.plan_list_cards[i].className = "card russian cc_back" + ui.plan_cards[i].className = "card russian cc_back" } else { - ui.plan_list_cards[i].className = "hide" + ui.plan_cards[i].className = "hide" } } - for (let lord = 0; lord < 12; ++lord) { - if (is_plan_action(lord)) { - ui.plan_action_cards[lord].classList.add("action") - ui.plan_action_cards[lord].classList.remove("disabled") + + if (is_planning) { + ui.plan_actions.classList.remove("hide") + for (let lord = 0; lord < 12; ++lord) { + if (is_plan_action(lord)) { + ui.plan_action_cards[lord].classList.add("action") + ui.plan_action_cards[lord].classList.remove("disabled") + } else { + ui.plan_action_cards[lord].classList.remove("action") + ui.plan_action_cards[lord].classList.add("disabled") + } + } + if (is_plan_action(-1)) { + ui.plan_action_pass_p1.classList.add("action") + ui.plan_action_pass_p1.classList.remove("disabled") + ui.plan_action_pass_p2.classList.add("action") + ui.plan_action_pass_p2.classList.remove("disabled") } else { - ui.plan_action_cards[lord].classList.remove("action") - ui.plan_action_cards[lord].classList.add("disabled") + ui.plan_action_pass_p1.classList.remove("action") + ui.plan_action_pass_p1.classList.add("disabled") + ui.plan_action_pass_p2.classList.remove("action") + ui.plan_action_pass_p2.classList.add("disabled") } - } - if (is_plan_action(-1)) { - ui.plan_action_pass_p1.classList.add("action") - ui.plan_action_pass_p1.classList.remove("disabled") - ui.plan_action_pass_p2.classList.add("action") - ui.plan_action_pass_p2.classList.remove("disabled") } else { - ui.plan_action_pass_p1.classList.remove("action") - ui.plan_action_pass_p1.classList.add("disabled") - ui.plan_action_pass_p2.classList.remove("action") - ui.plan_action_pass_p2.classList.add("disabled") + ui.plan_actions.classList.add("hide") } } else { - ui.plan_dialog.classList.add("hide") + ui.plan_panel.classList.add("hide") } } @@ -1274,20 +1291,37 @@ function update_cards() { elt.classList.toggle("action", is_card_action(c)) } - if (view.show_arts_of_war) { - ui.arts_of_war_dialog.classList.remove("hide") - ui.arts_of_war_list.replaceChildren() - for (let c of view.show_arts_of_war) { + if (view.arts_of_war) { + ui.arts_of_war_panel.classList.remove("hide") + ui.arts_of_war.replaceChildren() + for (let c of view.arts_of_war) { let elt = ui.cards[c] - ui.arts_of_war_list.appendChild(ui.cards[c]) + console.log("showin'", c, ui.cards[c]) + ui.arts_of_war.appendChild(ui.cards[c]) } } else { - ui.arts_of_war_dialog.classList.add("hide") + ui.arts_of_war_panel.classList.add("hide") + } + + if (view.events.length > 0) { + ui.events_panel.classList.remove("hide") + ui.events.replaceChildren() + for (let c of view.events) + ui.events.appendChild(ui.cards[c]) + } else { + ui.events_panel.classList.add("hide") } - ui.events.replaceChildren() - for (let c of view.events) - ui.events.appendChild(ui.cards[c]) + if (view.hand.length > 0) { + ui.hand_panel.classList.remove("hide") + ui.hand.replaceChildren() + if (view.hand) { + for (let c of view.hand) + ui.hand.appendChild(ui.cards[c]) + } + } else { + ui.hand_panel.classList.add("hide") + } ui.capabilities1.replaceChildren() for_each_teutonic_card(c => { @@ -1301,12 +1335,6 @@ function update_cards() { ui.capabilities2.appendChild(ui.cards[c]) }) - ui.hand.replaceChildren() - if (view.hand) { - for (let c of view.hand) - ui.hand.appendChild(ui.cards[c]) - } - for (let ix = 0; ix < data.lords.length; ++ix) { let side = ix < 6 ? "teutonic" : "russian" ui.lord_capabilities[ix].replaceChildren() @@ -1373,15 +1401,20 @@ function is_lord_in_grid(lord) { } function update_court() { -console.log("update court!") - ui.court1.replaceChildren() - ui.court2.replaceChildren() + let tcourt_hdr = (player === "Teutons") ? ui.court1_header : ui.court2_header + let rcourt_hdr = (player === "Teutons") ? ui.court2_header : ui.court1_header + tcourt_hdr.textContent = "Teutonic Lords" + rcourt_hdr.textContent = "Russian Lords" + let tcourt = (player === "Teutons") ? ui.court1 : ui.court2 + let rcourt = (player === "Teutons") ? ui.court2 : ui.court1 + tcourt.replaceChildren() + rcourt.replaceChildren() for (let lord = 0; lord < 6; ++lord) if (!is_lord_in_grid(lord) && is_lord_on_map(lord)) - ui.court1.appendChild(ui.lord_mat[lord]) + tcourt.appendChild(ui.lord_mat[lord]) for (let lord = 6; lord < 12; ++lord) if (!is_lord_in_grid(lord) && is_lord_on_map(lord)) - ui.court2.appendChild(ui.lord_mat[lord]) + rcourt.appendChild(ui.lord_mat[lord]) } function on_update() { @@ -1581,8 +1614,8 @@ function build_plan() { for (let i = 0; i < 6; ++i) { elt = document.createElement("div") elt.className = "hide" - ui.plan_list_cards.push(elt) - ui.plan_list.appendChild(elt) + ui.plan_cards.push(elt) + ui.plan.appendChild(elt) } for (let lord = 0; lord < 12; ++lord) { let side = lord < 6 ? "teutonic" : "russian" diff --git a/rules.js b/rules.js index c964daf..8aaf2ed 100644 --- a/rules.js +++ b/rules.js @@ -1459,6 +1459,7 @@ function draw_card(deck) { let i = random(deck.length) let c = deck[i] set_delete(deck, c) + console.log("deck", c, deck) return c } @@ -1544,6 +1545,8 @@ exports.setup = function (seed, scenario, options) { log_h1(scenario) + setup_decks() + switch (scenario) { default: case "Pleskau": @@ -1573,8 +1576,6 @@ exports.setup = function (seed, scenario, options) { break } - setup_decks() - return game } @@ -1751,23 +1752,31 @@ function setup_pleskau_quickstart() { add_lord_assets(LORD_KNUD_ABEL, BOAT, 1) muster_vassal(LORD_HERMANN, data.lords[LORD_HERMANN].vassals[0]) + set_delete(game.deck1, T4) set_lord_capability(LORD_HERMANN, 0, T4) + set_delete(game.deck1, T14) set_lord_capability(LORD_HERMANN, 1, T14) + set_delete(game.deck1, T3) set_lord_capability(LORD_YAROSLAV, 0, T3) + set_delete(game.deck1, T13) set_add(game.capabilities, T13) game.pieces.legate = LOC_DORPAT + set_delete(game.deck2, R8) set_add(game.capabilities, R8) muster_lord(LORD_DOMASH, LOC_NOVGOROD) add_lord_assets(LORD_DOMASH, BOAT, 2) add_lord_assets(LORD_DOMASH, CART, 2) muster_vassal(LORD_GAVRILO, data.lords[LORD_GAVRILO].vassals[0]) + set_delete(game.deck2, R2) set_lord_capability(LORD_GAVRILO, 0, R2) + set_delete(game.deck2, R6) set_lord_capability(LORD_GAVRILO, 1, R6) + game.pieces.veche_coin += 1 goto_campaign_plan() @@ -2092,7 +2101,7 @@ function resume_levy_arts_of_war_first() { states.levy_arts_of_war_first = { prompt() { let c = game.what[0] - view.show_arts_of_war = game.what + view.arts_of_war = game.what view.what = c if (data.cards[c].this_lord) { view.prompt = `Arts of War: Assign ${data.cards[c].capability} to a Lord.` @@ -2163,7 +2172,7 @@ function resume_levy_arts_of_war() { states.levy_arts_of_war = { prompt() { let c = game.what[0] - view.show_arts_of_war = [ c ] + view.arts_of_war = [ c ] view.what = c switch (data.cards[c].when) { case "this_levy": @@ -2526,7 +2535,7 @@ states.muster_capability = { prompt() { let deck = current_deck() view.prompt = `Muster: Select a new capability for ${lord_name[game.who]}.` - view.show_arts_of_war = deck + view.arts_of_war = deck for (let c of deck) { if (is_no_event_card(c)) continue @@ -3060,6 +3069,7 @@ states.campaign_plan = { view.prompt = "Plan: Designate Lieutenants and build a Plan." view.plan = plan view.who = upper + view.actions.plan = [] if (plan.length < max_plan_length()) { view.actions.end_plan = 0 @@ -7716,12 +7726,19 @@ exports.view = function (state, current) { command: game.command, hand: null, + plan: null, } - if (current === P1) + if (current === P1) { view.hand = game.hand1 - if (current === P2) + view.plan = game.plan1 + // view.arts_of_war = game.deck1 + } + if (current === P2) { view.hand = game.hand2 + view.plan = game.plan2 + // view.arts_of_war = game.deck2 + } if (game.state === "game_over") { view.prompt = game.victory -- cgit v1.2.3