From 5b72caa4f571b574900cd043de88c8371d54114c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 30 Nov 2023 12:21:52 +0100 Subject: fix role panel --- play.css | 52 ++++++++++++++++++++++++---------------------------- play.html | 44 ++++++++++++++++++++------------------------ play.js | 21 ++++++++------------- 3 files changed, 52 insertions(+), 65 deletions(-) diff --git a/play.css b/play.css index fec181d..925a777 100644 --- a/play.css +++ b/play.css @@ -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; diff --git a/play.html b/play.html index 9236937..4767218 100644 --- a/play.html +++ b/play.html @@ -20,16 +20,16 @@
  • CARD
  • -
  • Play Event -
  • Discard for PC action -
  • Play Campaign -
  • Activate a General -
  • Place PC markers -
  • Bring on Reinforcements -
  • Place into Operations Queue -
  • Play for +2 DRM -
  • Discard for +1 DRM -
  • Exchange for Discarded Event +
  • 🎴 Play Event +
  • ❌ Discard for PC action +
  • 👥 Play Campaign +
  • 👤 Activate a General +
  • ⭕ Place PC markers +
  • 🚩 Bring on Reinforcements +
  • ⌛ Place into Operations Queue +
  • 🎲 Play for +2 DRM +
  • 🎲 Discard for +1 DRM +
  • ♻ Exchange for Discarded Event
    • @@ -47,25 +47,21 @@
    diff --git a/play.js b/play.js index 6cb2fdc..f07bbb4 100644 --- a/play.js +++ b/play.js @@ -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"; -- cgit v1.2.3