diff options
| -rw-r--r-- | play.css | 52 | ||||
| -rw-r--r-- | play.html | 44 | ||||
| -rw-r--r-- | play.js | 21 |
3 files changed, 52 insertions, 65 deletions
@@ -3,9 +3,8 @@ header { background-color: silver; } aside { background-color: #f5e8d7; } body.British header.your_turn { background-color: salmon; } body.American header.your_turn { background-color: skyblue; } -#role_American .role_name { background-color: skyblue; } -#role_British .role_name { background-color: salmon; } -.role_vp { float: right; } +#role_American { background-color: skyblue; } +#role_British { background-color: salmon; } #log > div { padding-left: 20px; text-indent: -12px; } @@ -22,26 +21,32 @@ body.American header.your_turn { background-color: skyblue; } padding: 1px; } +#log .h1, #log .h2 { + border-top: 1px solid black; + border-bottom: 1px solid black; +} + #log .h2.american { background-color: skyblue; } #log .h2.british { background-color: salmon; } #log .card_tip:hover { text-decoration: dotted underline; } +:root { + --piece-shadow: 1px 1px 4px #0008; +} + aside { width: 230px; } -.role_info { - padding: 10px 20px; - background-color: wheat; - white-space: pre-wrap; +#turn_info { } -.last_played { +#turn_info { background-color: tan; } -.last_played .card { +#turn_info .card { margin: 5px auto; } @@ -95,7 +100,7 @@ aside { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_GameTurnRegulars.jpg'); - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .marker.turn.no-regulars { background-image: url('/washingtons-war/images/Marker_GameTurnNoRegulars.jpg'); @@ -105,7 +110,7 @@ aside { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_FrenchAlliance.jpg'); - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .marker.french-alliance.european-war { @@ -116,20 +121,20 @@ aside { width: 63px; height: 126px; background-image: url('/washingtons-war/images/Marker_FrenchNavy.jpg'); - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .marker.congress { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_ContinentalCongress.jpg'); - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .marker.control { width: 38px; height: 38px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); visibility: hidden; } @@ -165,7 +170,7 @@ aside { text-shadow: 0px 0px 3px black; font-weight: bold; border-radius: 60px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .cu.american { background-image: url('/washingtons-war/images/American-CU.png'); } .cu.british { background-image: url('/washingtons-war/images/British-CU.png'); } @@ -177,7 +182,7 @@ aside { height: 126px; background-size: cover; outline: 1px solid black; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); } .general.offmap { display: none; @@ -216,11 +221,9 @@ aside { } .space.enabled { display: block; + cursor: pointer; border: 7px solid transparent; - box-shadow: 0 0 10px 10px white; -} -.space.enabled:hover { - border: 7px solid yellow; + box-shadow: 0 0 0 4px white, inset 0 0 0 2px white; } .space.regular-space { border-radius: 100px; @@ -246,7 +249,7 @@ aside { width: 186px; height: 262px; border-radius: 10px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: var(--piece-shadow); transition: 100ms; display: none; } @@ -255,13 +258,6 @@ aside { display: block; } -.hand .card.enabled:hover, .hand .card.selected { - Xtransform: scale(1.5) translate(0,-30px); - Xtransform: scale(1.1); - transform: translate(0,-10px); - z-index: 10; -} - .shift .hand .card:hover, .shift .hand .card.selected { transform: scale(1.5) translate(0,-30px); z-index: 10; @@ -20,16 +20,16 @@ <menu id="popup"> <li class="title">CARD <li class="separator"> - <li data-action="card_play_event"> Play Event - <li data-action="card_discard_event"> Discard for PC action - <li data-action="card_campaign"> Play Campaign - <li data-action="card_ops_general"> Activate a General - <li data-action="card_ops_pc"> Place PC markers - <li data-action="card_ops_reinforcements"> Bring on Reinforcements - <li data-action="card_ops_queue"> Place into Operations Queue - <li data-action="card_battle_play"> Play for +2 DRM - <li data-action="card_battle_discard"> Discard for +1 DRM - <li data-action="exchange_for_discard"> Exchange for Discarded Event + <li data-action="card_play_event">🎴 Play Event + <li data-action="card_discard_event">❌ Discard for PC action + <li data-action="card_campaign">👥 Play Campaign + <li data-action="card_ops_general">👤 Activate a General + <li data-action="card_ops_pc">⭕ Place PC markers + <li data-action="card_ops_reinforcements">🚩 Bring on Reinforcements + <li data-action="card_ops_queue">⌛ Place into Operations Queue + <li data-action="card_battle_play">🎲 Play for +2 DRM + <li data-action="card_battle_discard">🎲 Discard for +1 DRM + <li data-action="exchange_for_discard">♻ Exchange for Discarded Event </menu> <header> @@ -47,25 +47,21 @@ </header> <aside> - <div class="roles"> + <div id="roles"> <div class="role" id="role_American"> - <div class="role_name"> - American - <div class="role_vp" id="american_vp">VP</div> - <div class="role_user">-</div> - </div> - <div class="role_info" id="american_info">$N cards in hand.</div> + <div class="role_name">American</div> + <div class="role_stat">VP</div> + <div class="role_user">-</div> + <div class="role_info"></div> </div> <div class="role" id="role_British"> - <div class="role_name"> - British - <div class="role_vp" id="british_vp"></div> - <div class="role_user">-</div> - </div> - <div class="role_info" id="british_info">$N cards in hand.</div> + <div class="role_name">British</div> + <div class="role_stat">VP</div> + <div class="role_user">-</div> + <div class="role_info"></div> </div> - <div class="role_info last_played"><div id="last_played" class="card show card_back"></div></div> </div> + <div id="turn_info"><div id="last_played" class="card show card_back"></div></div> <div id="log"></div> </aside> @@ -288,27 +288,22 @@ function update_units() { build_map(); function player_info(player, nc, nq) { - let info; - if (nc == 1) - info = "1 card in hand."; - else - info = nc + " cards in hand."; - if (nq > 0) - info += "\n" + nq + " OPS in queue."; + let info = "" if (player == AMERICAN) { - if (view.pennsylvania_and_new_jersey_line_mutinies) - info += "\nPennsylvania and New Jersey Line Mutinies!"; - if (view.congress == CONTINENTAL_CONGRESS_DISPERSED) - info += "\nContinental Congress Dispersed!"; + if (view.pennsylvania_and_new_jersey_line_mutinies || view.congress == CONTINENTAL_CONGRESS_DISPERSED) + info += "\u{1f6ab} " } + if (nq > 0) + info += nq + "\u{231b} " + info += nc + "\u{1f3b4}" return info; } function on_update() { let e; - document.getElementById("british_info").textContent = player_info(BRITISH, view.b_cards, view.b_queue); - document.getElementById("american_info").textContent = player_info(AMERICAN, view.a_cards, view.a_queue); + roles.American.stat.textContent = player_info(AMERICAN, view.a_cards, view.a_queue); + roles.British.stat.textContent = player_info(BRITISH, view.b_cards, view.b_queue); if (!view.last_played) document.getElementById("last_played").className = "card show card_back"; |