From 3598e7f1f7b2a3ec6ebb1458baae576e4e65aa95 Mon Sep 17 00:00:00 2001 From: iainp5 Date: Tue, 29 Oct 2024 17:53:37 +0000 Subject: Add small power cards --- play.css | 129 +++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 64 insertions(+), 65 deletions(-) (limited to 'play.css') diff --git a/play.css b/play.css index a0d7094..0619a98 100644 --- a/play.css +++ b/play.css @@ -39,6 +39,7 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } #log { background-color: floralwhite } #log .h1 { background-color: tan } #log .h2 { background-color: wheat } +#log .h3 { background-color: wheat } #log .h2.dem { background-color: hsl(206, 85%, 80%); } #log .h2.com { background-color: hsl(355, 70%, 80%); } @@ -233,22 +234,14 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } min-height: 350px; } -.panel:has(.panel_body:empty) { - display: none; +.panel_body.power { + min-height: 263px; } -#scoring_card_panel { - display: flex; - flex-direction: column; - width: 100%; -} - -#scoring_card_panel .card_row { - display: flex; - gap: 10px; +.panel.autohide:has(.panel_body:empty) { + display: none; } - /* CARD IMAGES */ #tooltip { @@ -269,6 +262,12 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } box-shadow: 0 0 0 1px #444, 1px 2px 4px #0004; } +.power_card { + width: 188px; + height: 263px; + border-radius: 12px; +} + .card.action { box-shadow: 0 0 0 1px #444, 0 0 0 4px white; } @@ -389,56 +388,56 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } .card.event_109 { background-image: url(cards100/event_109.avif) } .card.event_110 { background-image: url(cards100/event_110.avif) } -.card.power_0 { background-image: url(cards100/power_back.avif) } -.card.power_1 { background-image: url(cards100/power_1_6.avif) } -.card.power_2 { background-image: url(cards100/power_1_6.avif) } -.card.power_3 { background-image: url(cards100/power_1_6.avif) } -.card.power_4 { background-image: url(cards100/power_1_6.avif) } -.card.power_5 { background-image: url(cards100/power_1_6.avif) } -.card.power_6 { background-image: url(cards100/power_1_6.avif) } -.card.power_7 { background-image: url(cards100/power_7_8.avif) } -.card.power_8 { background-image: url(cards100/power_7_8.avif) } -.card.power_9 { background-image: url(cards100/power_9_10.avif) } -.card.power_10 { background-image: url(cards100/power_9_10.avif) } -.card.power_11 { background-image: url(cards100/power_11_14.avif) } -.card.power_12 { background-image: url(cards100/power_11_14.avif) } -.card.power_13 { background-image: url(cards100/power_11_14.avif) } -.card.power_14 { background-image: url(cards100/power_11_14.avif) } -.card.power_15 { background-image: url(cards100/power_15_18.avif) } -.card.power_16 { background-image: url(cards100/power_15_18.avif) } -.card.power_17 { background-image: url(cards100/power_15_18.avif) } -.card.power_18 { background-image: url(cards100/power_15_18.avif) } -.card.power_19 { background-image: url(cards100/power_19_20.avif) } -.card.power_20 { background-image: url(cards100/power_19_20.avif) } -.card.power_21 { background-image: url(cards100/power_21_22.avif) } -.card.power_22 { background-image: url(cards100/power_21_22.avif) } -.card.power_23 { background-image: url(cards100/power_23_26.avif) } -.card.power_24 { background-image: url(cards100/power_23_26.avif) } -.card.power_25 { background-image: url(cards100/power_23_26.avif) } -.card.power_26 { background-image: url(cards100/power_23_26.avif) } -.card.power_27 { background-image: url(cards100/power_27_30.avif) } -.card.power_28 { background-image: url(cards100/power_27_30.avif) } -.card.power_29 { background-image: url(cards100/power_27_30.avif) } -.card.power_30 { background-image: url(cards100/power_27_30.avif) } -.card.power_31 { background-image: url(cards100/power_31_33.avif) } -.card.power_32 { background-image: url(cards100/power_31_33.avif) } -.card.power_33 { background-image: url(cards100/power_31_33.avif) } -.card.power_34 { background-image: url(cards100/power_34_36.avif) } -.card.power_35 { background-image: url(cards100/power_34_36.avif) } -.card.power_36 { background-image: url(cards100/power_34_36.avif) } -.card.power_37 { background-image: url(cards100/power_37.avif) } -.card.power_38 { background-image: url(cards100/power_38.avif) } -.card.power_39 { background-image: url(cards100/power_39.avif) } -.card.power_40 { background-image: url(cards100/power_40.avif) } -.card.power_41 { background-image: url(cards100/power_41.avif) } -.card.power_42 { background-image: url(cards100/power_42.avif) } -.card.power_43 { background-image: url(cards100/power_43.avif) } -.card.power_44 { background-image: url(cards100/power_44.avif) } -.card.power_45 { background-image: url(cards100/power_45.avif) } -.card.power_46 { background-image: url(cards100/power_46.avif) } -.card.power_47 { background-image: url(cards100/power_47.avif) } -.card.power_48 { background-image: url(cards100/power_48.avif) } -.card.power_49 { background-image: url(cards100/power_49.avif) } -.card.power_50 { background-image: url(cards100/power_50.avif) } -.card.power_51 { background-image: url(cards100/power_51.avif) } -.card.power_52 { background-image: url(cards100/power_52.avif) } +.card.power_0 { background-image: url(cards75/power_back.avif) } +.card.power_1 { background-image: url(cards75/power_1_6.avif) } +.card.power_2 { background-image: url(cards75/power_1_6.avif) } +.card.power_3 { background-image: url(cards75/power_1_6.avif) } +.card.power_4 { background-image: url(cards75/power_1_6.avif) } +.card.power_5 { background-image: url(cards75/power_1_6.avif) } +.card.power_6 { background-image: url(cards75/power_1_6.avif) } +.card.power_7 { background-image: url(cards75/power_7_8.avif) } +.card.power_8 { background-image: url(cards75/power_7_8.avif) } +.card.power_9 { background-image: url(cards75/power_9_10.avif) } +.card.power_10 { background-image: url(cards75/power_9_10.avif) } +.card.power_11 { background-image: url(cards75/power_11_14.avif) } +.card.power_12 { background-image: url(cards75/power_11_14.avif) } +.card.power_13 { background-image: url(cards75/power_11_14.avif) } +.card.power_14 { background-image: url(cards75/power_11_14.avif) } +.card.power_15 { background-image: url(cards75/power_15_18.avif) } +.card.power_16 { background-image: url(cards75/power_15_18.avif) } +.card.power_17 { background-image: url(cards75/power_15_18.avif) } +.card.power_18 { background-image: url(cards75/power_15_18.avif) } +.card.power_19 { background-image: url(cards75/power_19_20.avif) } +.card.power_20 { background-image: url(cards75/power_19_20.avif) } +.card.power_21 { background-image: url(cards75/power_21_22.avif) } +.card.power_22 { background-image: url(cards75/power_21_22.avif) } +.card.power_23 { background-image: url(cards75/power_23_26.avif) } +.card.power_24 { background-image: url(cards75/power_23_26.avif) } +.card.power_25 { background-image: url(cards75/power_23_26.avif) } +.card.power_26 { background-image: url(cards75/power_23_26.avif) } +.card.power_27 { background-image: url(cards75/power_27_30.avif) } +.card.power_28 { background-image: url(cards75/power_27_30.avif) } +.card.power_29 { background-image: url(cards75/power_27_30.avif) } +.card.power_30 { background-image: url(cards75/power_27_30.avif) } +.card.power_31 { background-image: url(cards75/power_31_33.avif) } +.card.power_32 { background-image: url(cards75/power_31_33.avif) } +.card.power_33 { background-image: url(cards75/power_31_33.avif) } +.card.power_34 { background-image: url(cards75/power_34_36.avif) } +.card.power_35 { background-image: url(cards75/power_34_36.avif) } +.card.power_36 { background-image: url(cards75/power_34_36.avif) } +.card.power_37 { background-image: url(cards75/power_37.avif) } +.card.power_38 { background-image: url(cards75/power_38.avif) } +.card.power_39 { background-image: url(cards75/power_39.avif) } +.card.power_40 { background-image: url(cards75/power_40.avif) } +.card.power_41 { background-image: url(cards75/power_41.avif) } +.card.power_42 { background-image: url(cards75/power_42.avif) } +.card.power_43 { background-image: url(cards75/power_43.avif) } +.card.power_44 { background-image: url(cards75/power_44.avif) } +.card.power_45 { background-image: url(cards75/power_45.avif) } +.card.power_46 { background-image: url(cards75/power_46.avif) } +.card.power_47 { background-image: url(cards75/power_47.avif) } +.card.power_48 { background-image: url(cards75/power_48.avif) } +.card.power_49 { background-image: url(cards75/power_49.avif) } +.card.power_50 { background-image: url(cards75/power_50.avif) } +.card.power_51 { background-image: url(cards75/power_51.avif) } +.card.power_52 { background-image: url(cards75/power_52.avif) } \ No newline at end of file -- cgit v1.2.3 From 4090f2cebe2bae78979260bb8aa7f5ee7e9a4b72 Mon Sep 17 00:00:00 2001 From: iainp5 Date: Thu, 31 Oct 2024 09:31:25 +0000 Subject: Increase size of systematisation marker --- play.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'play.css') diff --git a/play.css b/play.css index 0619a98..8b8d19f 100644 --- a/play.css +++ b/play.css @@ -209,6 +209,9 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } /* The Wall */ #event_9 { top: 175px; left: 216px; } +/* Systematisation */ +#event_69 {height: 65px; width: 65px; background-size: cover;} + /* CARD PANELS */ .panel { -- cgit v1.2.3 From 1640855336f524cf44f61571b0bb25c10f70c34b Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 2 Nov 2024 00:13:34 +0100 Subject: stack influence markers to go above 8 --- play.css | 1 + play.js | 50 ++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 37 insertions(+), 14 deletions(-) (limited to 'play.css') diff --git a/play.css b/play.css index 8b8d19f..f2113ed 100644 --- a/play.css +++ b/play.css @@ -266,6 +266,7 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } } .power_card { + background-color: #093a5b; width: 188px; height: 263px; border-radius: 12px; diff --git a/play.js b/play.js index 73357fe..aa7a8b6 100644 --- a/play.js +++ b/play.js @@ -395,11 +395,16 @@ function create_country(id, name) { document.getElementById("markers").appendChild(e) } +const INF_DX = 35 +const INF_DY = 10 + function create_ui() { ui.layout_xy = [] ui.spaces = [] ui.dem_inf = [] ui.com_inf = [] + ui.dem_inf2 = [] + ui.com_inf2 = [] for (let s = 0; s <= last_space; ++s) { let info = spaces[s] @@ -428,15 +433,29 @@ function create_ui() { com_e.style.top = yc + 12 - 25 + "px" ui.com_inf[s] = com_e + let com_e2 = document.createElement("div") + com_e2.className = "marker comInfl hide" + com_e2.style.left = xc + 32 - 25 + INF_DX + "px" + com_e2.style.top = yc + 12 - 25 + INF_DY + "px" + ui.com_inf2[s] = com_e2 + let dem_e = document.createElement("div") dem_e.className = "marker demInfl hide" dem_e.style.left = xc - 32 - 25 + "px" dem_e.style.top = yc + 12 - 25 + "px" ui.dem_inf[s] = dem_e + let dem_e2 = document.createElement("div") + dem_e2.className = "marker demInfl hide" + dem_e2.style.left = xc - 32 - 25 - INF_DX + "px" + dem_e2.style.top = yc + 12 - 25 + INF_DY + "px" + ui.dem_inf2[s] = dem_e2 + document.getElementById("spaces").append(space_e) document.getElementById("markers").appendChild(com_e) + document.getElementById("markers").appendChild(com_e2) document.getElementById("markers").appendChild(dem_e) + document.getElementById("markers").appendChild(dem_e2) } ui.cards = [] @@ -550,6 +569,21 @@ function layout_country(id) { } } +function layout_inf_markers(cn, one, two, v, ctl) { + if (ctl) + cn += " ctl" + if (v > 8) { + one.className = cn + " v" + 8 + two.className = cn + " v" + (v - 8) + } else if (v > 0) { + one.className = cn + " v" + v + two.className = "hide" + } else { + one.className = "hide" + two.className = "hide" + } +} + function on_update() { if (!ui.spaces) create_ui() @@ -615,20 +649,8 @@ function on_update() { for (let s = 0; s <= last_space; ++s) { const demInfl = view.demInfl[s] const comInfl = view.comInfl[s] - - if (demInfl - comInfl >= spaces[s].stability) - ui.dem_inf[s].className = "marker demInfl ctl v" + demInfl - else if (demInfl > 0) - ui.dem_inf[s].className = "marker demInfl v" + demInfl - else - ui.dem_inf[s].className = "marker demInfl hide" - - if (comInfl - demInfl >= spaces[s].stability) - ui.com_inf[s].className = "marker comInfl ctl v" + comInfl - else if (comInfl > 0) - ui.com_inf[s].className = "marker comInfl v" + comInfl - else - ui.com_inf[s].className = "marker comInfl hide" + layout_inf_markers("marker demInfl", ui.dem_inf[s], ui.dem_inf2[s], demInfl, demInfl - comInfl >= spaces[s].stability) + layout_inf_markers("marker comInfl", ui.com_inf[s], ui.com_inf2[s], comInfl, comInfl - demInfl >= spaces[s].stability) } // UPDATE COUNTRY MARKERS -- cgit v1.2.3 From 1d073110c0937e2a057efd0eeeef5223036c1187 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 2 Nov 2024 20:36:16 +0100 Subject: Highlight selected space. --- play.css | 5 +++++ play.js | 3 +++ rules.js | 17 +++-------------- 3 files changed, 11 insertions(+), 14 deletions(-) (limited to 'play.css') diff --git a/play.css b/play.css index f2113ed..dc801f8 100644 --- a/play.css +++ b/play.css @@ -90,6 +90,11 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } .space.Romania.action { border-color: peachpuff; } .space.Bulgaria.action { border-color: palegreen; } +.space.selected { + border-color: aqua; + box-shadow: 0 0 0 1px black, inset 0 0 0 1px black; +} + .space.tip { border-color: lime; box-shadow: 0 0 0 1px black, inset 0 0 0 1px black; diff --git a/play.js b/play.js index aa7a8b6..a201e8a 100644 --- a/play.js +++ b/play.js @@ -715,6 +715,9 @@ function on_update() { for (let e of action_register) e.classList.toggle("action", is_action(e.my_action, e.my_id)) + for (let s = 0; s <= last_space; ++s) + ui.spaces[s].classList.toggle("selected", view.selected_space === s) + action_button("yes", "Yes") action_button("no", "No") action_button("start", "Start") diff --git a/rules.js b/rules.js index dff42c5..3e4a867 100644 --- a/rules.js +++ b/rules.js @@ -387,19 +387,8 @@ exports.view = function(state, player) { view.drawn = game.vm.draw if (player === game.active) { - if (game.selected_space) { - view.valid_spaces = [game.selected_space] - } else { - view.valid_spaces = game.valid_spaces - } - } else { - view.valid_spaces = [] - } - - if (player === game.active) { - view.valid_cards = game.valid_cards - } else { - view.valid_cards = [] + if (game.selected_space >= 0) + view.selected_space = game.selected_space } if (player === DEM) { @@ -422,7 +411,7 @@ exports.view = function(state, player) { if (game.state === "game_over") { view.prompt = game.victory - } else if (player === "Observer" || (game.active !== player && game.active !== "Both")) { + } else if (game.active !== player) { if (states[game.state]) { let inactive = states[game.state].inactive if (typeof inactive === "function") -- cgit v1.2.3