From 5b72caa4f571b574900cd043de88c8371d54114c Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
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 @@
<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>
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