diff options
| -rw-r--r-- | play.css | 104 | ||||
| -rw-r--r-- | play.html | 11 | ||||
| -rw-r--r-- | play.js | 35 | ||||
| -rw-r--r-- | rules.js | 24 |
4 files changed, 125 insertions, 49 deletions
@@ -8,6 +8,52 @@ unicode-range:U+2660-2667; } +#prompt { + font-family: "Suit Symbols", var(--font-widget); + font-variant-numeric: tabular-nums; +} + +#log { + font-family: "Suit Symbols", var(--font-small); + font-variant-numeric: tabular-nums; +} + +#role_Frederick { background-color: var(--color-role-prussia) } +#role_Elisabeth { background-color: var(--color-role-russia) } +#role_Maria_Theresa { background-color: var(--color-role-austria) } +#role_Pompadour { background-color: var(--color-role-france) } + +.role.active span { text-decoration: dotted underline; } + +header.your_turn.prussia { background-color: var(--color-light-prussia); } +header.your_turn.hanover { background-color: var(--color-light-hanover); } +header.your_turn.russia { background-color: var(--color-light-russia); } +header.your_turn.sweden { background-color: var(--color-light-sweden); } +header.your_turn.austria { background-color: var(--color-light-austria); } +header.your_turn.imperial { background-color: var(--color-light-imperial); } +header.your_turn.france { background-color: var(--color-light-france); } + +#mapwrap { + width: 2485px; + height: 1654px; + box-shadow: 2px 2px 4px #0006; +} + +#map { + position: absolute; + width: 2485px; + height: 1654px; + background-size: cover; + background-image: url(Fried.Gameboard.075.jpg); + background-color: #ece1a9; +} + +body { + background-color: slategray; +} + +/* COLORS */ + :root { --color-prussia: #005478; --color-hanover: #91c9ed; @@ -66,52 +112,8 @@ --color-reserve: #0094c9; } -#role_Frederick { background-color: var(--color-role-prussia) } -#role_Elisabeth { background-color: var(--color-role-russia) } -#role_Maria_Theresa { background-color: var(--color-role-austria) } -#role_Pompadour { background-color: var(--color-role-france) } - -.role.active span { text-decoration: dotted underline; } - -#prompt { - font-family: "Suit Symbols", var(--font-widget); - font-variant-numeric: tabular-nums; -} - -header.your_turn.prussia { background-color: var(--color-light-prussia); } -header.your_turn.hanover { background-color: var(--color-light-hanover); } -header.your_turn.russia { background-color: var(--color-light-russia); } -header.your_turn.sweden { background-color: var(--color-light-sweden); } -header.your_turn.austria { background-color: var(--color-light-austria); } -header.your_turn.imperial { background-color: var(--color-light-imperial); } -header.your_turn.france { background-color: var(--color-light-france); } - -#mapwrap { - width: 2485px; - height: 1654px; - box-shadow: 2px 2px 4px #0006; -} - -#map { - position: absolute; - width: 2485px; - height: 1654px; - background-size: cover; - background-image: url(Fried.Gameboard.075.jpg); - background-color: #ece1a9; -} - -body { - background-color: slategray; -} - /* LOG */ -#log { - font-family: "Suit Symbols", var(--font-small); - font-variant-numeric: tabular-nums; -} - #log { background-color: #f3ebd4 } #log div:empty { @@ -170,6 +172,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; } #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); } +#discard_pile_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); } @@ -179,6 +182,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; } #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); } +#discard_pile_panel { background-color: var(--color-medium-clock); } .panel { background-color: darkgray; @@ -202,7 +206,7 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; } flex-wrap: wrap; padding: 18px; gap: 18px; - min-height: 256px; + min-height: calc(257px + 4px); } /* MARKERS */ @@ -458,7 +462,7 @@ body.shift .card.tc.face.deck_1 { box-shadow: 0 0 0 2px silver; } .card { width: 165px; - height: 256px; + height: 257px; background-size: 100%; background-color: #f3ebd5; border-radius: 8px; @@ -488,11 +492,19 @@ body.shift .card.tc.face.deck_1 { box-shadow: 0 0 0 2px silver; } .draw-break { margin-left: 145px; } .card.tc { margin-right: -145px; } +.card.tc.reverse { margin-right: -165px; } .panel_body { padding-right: calc(18px + 145px); } #clock_of_fate { padding: 18px; } #clock_of_fate .card.tc { margin-right: 0px; } +.discard_pile { + display: flex; + flex-wrap: wrap; + width: 230px; + gap: 4px; +} + .card.tc.S13 { background-image: url(cards/Friedrich.TC.01.075.jpg) } .card.tc.S12 { background-image: url(cards/Friedrich.TC.02.075.jpg) } .card.tc.S11 { background-image: url(cards/Friedrich.TC.03.075.jpg) } @@ -99,6 +99,17 @@ </div> +<div id="discard_pile_panel" class="panel"> +<div id="discard_pile_header" class="panel_header">Decks & Discard Piles</div> +<div id="discard_pile_body" class="panel_body"> + <div class="discard_pile" id="discard_1"></div> + <div class="discard_pile" id="discard_2"></div> + <div class="discard_pile" id="discard_3"></div> + <div class="discard_pile" id="discard_4"></div> + <div class="discard_pile" id="discard_5"></div> +</div> +</div> + </main> <footer id="status"></footer> @@ -442,6 +442,13 @@ const ui = { pieces_element: document.getElementById("pieces"), markers_element: document.getElementById("markers"), clock_of_fate: document.getElementById("clock_of_fate"), + discard: [ + document.getElementById("discard_1"), + document.getElementById("discard_2"), + document.getElementById("discard_3"), + document.getElementById("discard_4"), + document.getElementById("discard_5"), + ], power_panel_list: document.getElementById("power_panel_list"), power_header: [ document.getElementById("hand_prussia_header"), @@ -526,12 +533,12 @@ function make_tc_deck(n) { for (let suit = 0; suit <= 3; ++suit) { for (let value = 2; value <= 13; ++value) { let c = (n << 7) | (suit << 4) | value - ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " " + suit_class[suit] + " " + suit_letter[suit] + value) + ui.tc[c] = create_element("card", c, "card tc face deck_" + (n+1) + " " + suit_class[suit] + " " + suit_letter[suit] + value) } } for (let value = 2; value <= 3; ++value) { let c = (n << 7) | (4 << 4) | value - ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " reserve R") + ui.tc[c] = create_element("card", c, "card tc face deck_" + (n+1) + " reserve R") } } @@ -545,6 +552,16 @@ function make_tc_deck_back(n) { return list } +function make_tc_deck_discard(n) { + let list = [] + for (let i = 0; i < 10; ++i) { + let e = document.createElement("div") + e.className = "card tc discard reverse " + n + list.push(e) + } + return list +} + function make_fate_card(fc) { let e = document.createElement("div") if (fc === 0) @@ -647,6 +664,14 @@ function on_init() { make_tc_deck_back("deck_5"), ] + ui.tc_discard = [ + make_tc_deck_discard("deck_1"), + make_tc_deck_discard("deck_2"), + make_tc_deck_discard("deck_3"), + make_tc_deck_discard("deck_4"), + make_tc_deck_discard("deck_5"), + ] + ui.combat = document.createElement("div") ui.combat.id = "combat" ui.combat.style.zIndex = 2000 @@ -1079,6 +1104,12 @@ function on_update() { for (let c of view.fate) ui.clock_of_fate.appendChild(ui.fate[c]) + for (let deck = 0; deck < 5; ++deck) { + ui.discard[deck].replaceChildren() + for (let i = 0; i < view.discard[deck]; ++i) + ui.discard[deck].appendChild(ui.tc_discard[deck][i]) + } + ui.markers_element.replaceChildren() for (let s of view.conquest) ui.markers_element.appendChild(ui.conquest[s]) @@ -1050,7 +1050,7 @@ function find_largest_discard(u) { throw "OUT OF CARDS" } -function next_tactics_deck() { +function count_used_cards() { let held = [ 0, 0, 0, 0, 0 ] // count cards in hands @@ -1058,12 +1058,26 @@ function next_tactics_deck() { for (let c of game.hand[pow]) held[to_deck(c)]++ } + + // count cards currently being drawn if (game.draw) for (let c of game.draw) held[to_deck(c)]++ + + // count cards remaining in deck + for (let c of game.deck) + held[to_deck(c)]++ + + // set-aside prussian card if (game.oo > 0) held[to_deck(game.oo)]++ + return held +} + +function next_tactics_deck() { + let held = count_used_cards() + // find next unused deck for (let i = 1; i < 5; ++i) { if (held[i] === 0) { @@ -4425,6 +4439,13 @@ function total_troops_list() { return list } +function total_discard_list() { + let discard = count_used_cards() + for (let i = 0; i < 5; ++i) + discard[i] = Math.ceil((50 - discard[i]) / 5) + return discard +} + exports.view = function (state, player) { game = state view = { @@ -4440,6 +4461,7 @@ exports.view = function (state, player) { hand: mask_hand(player), oo: game.oo, pt: total_troops_list(), + discard: total_discard_list(), power: game.power, retro: game.retro, |