diff options
| -rw-r--r-- | play.css | 52 | ||||
| -rw-r--r-- | play.html | 12 | ||||
| -rw-r--r-- | play.js | 122 | ||||
| -rw-r--r-- | rules.js | 2 |
4 files changed, 151 insertions, 37 deletions
@@ -34,6 +34,16 @@ --color-light-austria: hsl(0, 0%, 97%); --color-light-imperial: hsl(55, 85%, 75%); --color-light-france: hsl(0, 70%, 80%); + --color-light-clock: hsl(52, 37%, 80%); + + --color-medium-prussia: hsl(210, 30%, 60%); + --color-medium-hanover: hsl(200, 25%, 65%); + --color-medium-russia: hsl(120, 20%, 55%); + --color-medium-sweden: hsl(80, 25%, 55%); + --color-medium-austria: hsl(0, 0%, 90%); + --color-medium-imperial: hsl(55, 35%, 60%); + --color-medium-france: hsl(0, 35%, 70%); + --color-medium-clock: hsl(52, 25%, 70%); --color-dark-prussia: hsl(198, 100%, 24%); --color-dark-hanover: hsl(203, 72%, 75%); @@ -118,7 +128,6 @@ span.suit.reserve { color: var(--color-reserve); font-size: 18px; font-weight: b #mapwrap { width: 2485px; height: 1654px; - margin-bottom: 30px; } #map { @@ -215,13 +224,23 @@ TWOD.piece.cylinder { .number.france { background-color: var(--color-france); } */ -#hand_prussia_header { background-color: var(--color-dark-prussia); color: white; } -#hand_hanover_header { background-color: var(--color-dark-hanover); color: black; } -#hand_russia_header { background-color: var(--color-dark-russia); color: white; } -#hand_sweden_header { background-color: var(--color-dark-sweden); color: black; } -#hand_austria_header { background-color: var(--color-dark-austria); color: black; } -#hand_imperial_header { background-color: var(--color-dark-imperial); color: black; } -#hand_france_header { background-color: var(--color-dark-france); color: black; } +#hand_prussia_header { background-color: var(--color-light-prussia); } +#hand_hanover_header { background-color: var(--color-light-hanover); } +#hand_russia_header { background-color: var(--color-light-russia); } +#hand_sweden_header { background-color: var(--color-light-sweden); } +#hand_austria_header { background-color: var(--color-light-austria); } +#hand_imperial_header { background-color: var(--color-light-imperial); } +#hand_france_header { background-color: var(--color-light-france); } +#clock_of_fate_header { background-color: var(--color-light-clock); } + +#hand_prussia_panel { background-color: var(--color-medium-prussia); } +#hand_hanover_panel { background-color: var(--color-medium-hanover); } +#hand_russia_panel { background-color: var(--color-medium-russia); } +#hand_sweden_panel { background-color: var(--color-medium-sweden); } +#hand_austria_panel { background-color: var(--color-medium-austria); } +#hand_imperial_panel { background-color: var(--color-medium-imperial); } +#hand_france_panel { background-color: var(--color-medium-france); } +#clock_of_fate_panel { background-color: var(--color-medium-clock); } .marker { pointer-events: none; @@ -243,23 +262,22 @@ TWOD.piece.cylinder { } .panel { - background-color: #444; - width: clamp(824px, calc(100% - 30px), 1636px); - margin: 12px auto 36px auto; - box-shadow: 1px 2px 6px #0004; + background-color: darkgray; + width: clamp(500px, calc(100% - 48px), 2485px); + margin: 24px auto; + box-shadow: 2px 2px 4px #0006; border: 1px solid #0008; + padding: 4px; } .panel_header { - color: white; - font-weight: bold; + border: 1px solid #000a; + box-shadow: 1px 1px 4px #0003; text-align: center; - padding: 3px 1em; - border-bottom: 1px solid #0008; + padding: 2px 0; } .panel_body { - background-color: #555; display: flex; justify-content: start; flex-wrap: wrap; @@ -44,18 +44,6 @@ </div> </div> -<div id="defend_panel" class="panel hide"> -<div id="defend_header" class="panel_header">Defend</div> -<div id="defend" class="panel_body"> -</div> -</div> - -<div id="attack_panel" class="panel hide"> -<div id="attack_header" class="panel_header">Attack</div> -<div id="attack" class="panel_body"> -</div> -</div> - <div id="power_panel_list"> <div id="hand_prussia_panel" class="panel"> @@ -15,6 +15,8 @@ function toggle_pieces() { /* DATA */ +const max_power_troops = [ 32, 12, 16, 4, 30, 6, 20 ] + const P_PRUSSIA = 0 const P_HANOVER = 1 const P_RUSSIA = 2 @@ -26,6 +28,13 @@ const P_FRANCE = 6 const cities = data.cities const last_city = cities.name.length - 1 +const FC_POEMS = 13 +const FC_LORD_BUTE = 14 +const FC_ELISABETH = 15 +const FC_SWEDEN = 16 +const FC_INDIA = 17 +const FC_AMERICA = 18 + const ELIMINATED = data.cities.name.length const REMOVED = ELIMINATED + 1 const ELIMINATED_TRAIN_X = 1065 @@ -100,6 +109,49 @@ function to_value(c) { return c & 15 } +function count_captured_objectives(pow) { + let n = 0 + for (let s of objective1[pow]) + if (set_has(view.conquest, s)) + ++n + for (let s of objective2[pow]) + if (set_has(view.conquest, s)) + ++n + return n +} + +function has_russia_dropped_out() { + return set_has(view.fate, FC_ELISABETH) +} + +function has_sweden_dropped_out() { + return set_has(view.fate, FC_SWEDEN) +} + +function has_france_dropped_out() { + return set_has(view.fate, FC_INDIA) && set_has(view.fate, FC_AMERICA) +} + +function has_imperial_army_switched_players() { + return (has_russia_dropped_out() && has_sweden_dropped_out()) || has_france_dropped_out() +} + +function has_eased_victory(power) { + if (power === P_SWEDEN) + return has_russia_dropped_out() + if (power === P_AUSTRIA) + return has_imperial_army_switched_players() + if (power === P_IMPERIAL) + return has_imperial_army_switched_players() + return false +} + +function count_total_objectives(pow) { + if (has_eased_victory(pow)) + return objective1[pow].length + return objective1[pow].length + objective2[pow].length +} + /* CARD TEXTS */ const fate_flavor_text = [ @@ -252,16 +304,64 @@ const fate_effect_text = [ /* PANEL ORDER */ const panel_order = [ P_PRUSSIA, P_HANOVER, P_RUSSIA, P_SWEDEN, P_AUSTRIA, P_IMPERIAL, P_FRANCE, P_FRANCE+1 ] +const panel_start = { + "Frederick": P_PRUSSIA, + "Elisabeth": P_RUSSIA, + "Maria Theresa": P_AUSTRIA, + "Pompadour": P_FRANCE, +} + +function remember_position(e) { + if (e.parentElement) { + let rect = e.getBoundingClientRect() + e.my_parent = e.parentElement + e.my_x = rect.x + e.my_y = rect.y + } else { + e.my_parent = null + e.my_x = 0 + e.my_y = 0 + } +} + +function animate_position(e) { + if (e.parentElement) { + if (e.my_parent) { + let rect = e.getBoundingClientRect() + let dx = e.my_x - rect.x + let dy = e.my_y - rect.y + if (dx !== 0 || dy !== 0) { + e.animate( + [ + { transform: `translate(${dx}px, ${dy}px)`, }, + { transform: "translate(0, 0)", }, + ], + { duration: 333, easing: "ease" } + ) + } + } + } +} + +function sort_power_panel(animate) { + let start = panel_start[params.role] + + if (animate) + for (let i = 0; i < 8; ++i) + remember_position(ui.power_panel[i]) -function sort_power_panel() { - let start = 0 - if (view) - start = view.power ui.power_panel_list.replaceChildren() for (let i = 0; i < 8; ++i) { let p = panel_order[(i + start) % 8] ui.power_panel_list.appendChild(ui.power_panel[p]) } + + if (view && view.actions) + ui.power_panel_list.prepend(ui.power_panel[view.power]) + + if (animate) + for (let i = 0; i < 8; ++i) + animate_position(ui.power_panel[i]) } /* BUILD UI */ @@ -542,7 +642,7 @@ function on_init() { ui.spaces_element.appendChild(e) } - sort_power_panel() + sort_power_panel(false) update_favicon() } @@ -776,7 +876,7 @@ function on_update() { ui.header.classList.toggle("imperial", view.power === P_IMPERIAL) ui.header.classList.toggle("france", view.power === P_FRANCE) - sort_power_panel() + sort_power_panel(true) for (let g = 0; g <= 23; ++g) layout_general(g, view.pos[g]) @@ -789,7 +889,15 @@ function on_update() { ui.turns[i].classList.toggle("hide", (typeof view.fate === "object") || (i + 1 < view.fate)) for (let pow = 0; pow < 7; ++pow) { - ui.power_header[pow].textContent = power_name[pow] + " - " + view.pt[pow] + " troops" + // let banner = `${power_name[pow]} \u2013 ${view.pt[pow]}/${max_power_troops[pow]} troops` + let banner = `${power_name[pow]} \u2014 ${view.pt[pow]} troops` + let m_obj = count_total_objectives(pow) + if (m_obj > 0) { + let n_obj = count_captured_objectives(pow) + banner += ` \u2014 ${n_obj} of ${m_obj} objectives` + } + + ui.power_header[pow].textContent = banner ui.power_panel[pow].classList.toggle("hide", has_removed_all_pieces(pow)) ui.hand[pow].replaceChildren() @@ -4056,7 +4056,7 @@ function total_troops_list() { let list = [] for (let pow of all_powers) { let n = 0 - for (let p of all_power_generals) + for (let p of all_power_generals[pow]) n += game.troops[p] list[pow] = n } |