summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css376
-rw-r--r--play.html21
-rw-r--r--play.js22
3 files changed, 229 insertions, 190 deletions
diff --git a/play.css b/play.css
index f26d24d..7ea25f9 100644
--- a/play.css
+++ b/play.css
@@ -2,6 +2,36 @@
Maria
*/
+/* COLORS */
+
+:root {
+ --color-light-france: hsl(0, 70%, 80%);
+ --color-light-bavaria: hsl(36, 70%, 80%);
+ --color-light-prussia: hsl(210, 80%, 75%);
+ --color-light-saxony: hsl(140, 50%, 70%);
+ --color-light-pragmatic: hsl(264, 10%, 75%);
+ --color-light-austria: hsl(0, 0%, 97%);
+ --color-light-political: hsl(50, 73%, 78%);
+ --color-light-discard: hsl(52, 37%, 80%);
+
+ --color-medium-france: hsl(0, 35%, 70%);
+ --color-medium-bavaria: hsl(36, 65%, 70%);
+ --color-medium-prussia: hsl(210, 30%, 60%);
+ --color-medium-saxony: hsl(140, 20%, 55%);
+ --color-medium-pragmatic: hsl(264, 10%, 65%);
+ --color-medium-austria: hsl(0, 0%, 90%);
+ --color-medium-political: hsl(50, 35%, 60%);
+ --color-medium-discard: hsl(52, 25%, 70%);
+
+ --color-clubs: #0079a1;
+ --color-diamonds: #9d403f;
+ --color-hearts: #ed1c23;
+ --color-spades: #00507c;
+ --color-reserve: #59594c;
+}
+
+/* FONTS */
+
@font-face {
font-family: "Suit Symbols";
src: url(fonts/FriedrichSymbols-Regular.woff2) format(woff2);
@@ -14,6 +44,11 @@
white-space: wrap;
}
+#log {
+ font-family: "Suit Symbols", var(--font-small);
+ font-variant-numeric: tabular-nums;
+}
+
button span.suit {
font-family: "Suit Symbols", var(--font-widget);
line-height: 1;
@@ -23,21 +58,56 @@ button {
height: 30px;
}
+/* BODY, HEADER, BOARD */
+
body {
background-color: slategray;
}
-#role_Maria_Theresa { background-color: var(--color-light-austria); }
-#role_Louis_XV { background-color: var(--color-light-france); }
-#role_Frederick {
- background-image: linear-gradient(45deg,
- var(--color-light-prussia) 40%,
- var(--color-light-pragmatic) 60%
- );
+header { background-color: hsl(44, 35%, 80%); color: #000c; }
+header.your_turn { color: black; }
+header.your_turn.france { background-color: var(--color-light-france); }
+header.your_turn.bavaria { background-color: var(--color-light-bavaria); }
+header.your_turn.prussia { background-color: var(--color-light-prussia); }
+header.your_turn.saxony { background-color: var(--color-light-saxony); }
+header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); }
+header.your_turn.austria { background-color: var(--color-light-austria); }
+
+#mapwrap {
+ width: 2485px;
+ height: 1654px;
+ margin-bottom: 30px;
+ box-shadow: 2px 2px 4px #0006;
}
-#role_Player_A { background-color: thistle; }
-#role_Player_B { background-color: whitesmoke; }
+#map {
+ position: absolute;
+ width: 2485px;
+ height: 1654px;
+ background-size: cover;
+ background-image: url(Maria.Gameboard.075.jpg);
+ background-color: #ece1a9;
+}
+
+#tooltip {
+ pointer-events: none;
+ position: fixed;
+ z-index: 600;
+ right: 240px;
+ top: 60px;
+}
+
+@media (max-width: 800px) {
+ #tooltip {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ }
+}
+
+/* ROLES */
.role.active span { font-weight: bold }
@@ -49,30 +119,16 @@ body {
padding-right: 3px;
}
-button:has(.austria) { background-color: #ffffff; }
-button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; }
-button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; }
-button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; }
-button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; }
-button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; }
-button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; }
-button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; }
-button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; }
-button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; }
-button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; }
+#role_Player_A { background-color: thistle; }
+#role_Player_B { background-color: whitesmoke; }
-button:not(.hide):has(img) {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: 4px;
-}
-.shift_track {
- display: block;
- border: 1px solid black;
-}
-.shift_arrow {
- display: block;
+#role_Maria_Theresa { background-color: var(--color-light-austria); }
+#role_Louis_XV { background-color: var(--color-light-france); }
+#role_Frederick {
+ background-image: linear-gradient(45deg,
+ var(--color-light-prussia) 40%,
+ var(--color-light-pragmatic) 60%
+ );
}
.role_marker {
@@ -112,99 +168,7 @@ button:not(.hide):has(img) {
.role_marker.bavaria { background-image: url(images/role_bavaria.2x.png) }
}
-#mapwrap {
- width: 2485px;
- height: 1654px;
- margin-bottom: 30px;
- box-shadow: 2px 2px 4px #0006;
-}
-
-#map {
- position: absolute;
- width: 2485px;
- height: 1654px;
- background-size: cover;
- background-image: url(Maria.Gameboard.075.jpg);
- background-color: #ece1a9;
-}
-
-#tooltip {
- pointer-events: none;
- position: fixed;
- z-index: 600;
- right: 240px;
- top: 60px;
-}
-
-@media (max-width: 800px) {
- #tooltip {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
-}
-
-#political_display {
- position: relative;
- width: 877px;
- height: 620px;
- background-size: cover;
- background-image: url(Maria.Political.Display.075.jpg);
- background-color: #ece1a9;
- Xbox-shadow: 2px 2px 4px #0006;
- border: 1px solid #0008;
-}
-
-.pc_pile {
- position: absolute;
- top: 325px;
-}
-
-#placed_prussia { left: 42px; }
-#placed_france { left: 246px; }
-#placed_pragmatic { left: 449px; }
-#placed_austria { left: 653px; }
-
-header { background-color: hsl(44, 35%, 80%); color: #000c; }
-header.your_turn { color: black; }
-header.your_turn.france { background-color: var(--color-light-france); }
-header.your_turn.bavaria { background-color: var(--color-light-bavaria); }
-header.your_turn.prussia { background-color: var(--color-light-prussia); }
-header.your_turn.saxony { background-color: var(--color-light-saxony); }
-header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); }
-header.your_turn.austria { background-color: var(--color-light-austria); }
-
-/* COLORS */
-
-:root {
- --color-light-france: hsl(0, 70%, 80%);
- --color-light-bavaria: hsl(36, 70%, 80%);
- --color-light-prussia: hsl(210, 80%, 75%);
- --color-light-saxony: hsl(140, 50%, 70%);
- --color-light-pragmatic: hsl(264, 10%, 75%);
- --color-light-austria: hsl(0, 0%, 97%);
- --color-light-political: hsl(50, 73%, 78%);
- --color-light-discard: hsl(52, 37%, 80%);
-
- --color-medium-france: hsl(0, 35%, 70%);
- --color-medium-bavaria: hsl(36, 65%, 70%);
- --color-medium-prussia: hsl(210, 30%, 60%);
- --color-medium-saxony: hsl(140, 20%, 55%);
- --color-medium-pragmatic: hsl(264, 10%, 65%);
- --color-medium-austria: hsl(0, 0%, 90%);
- --color-medium-political: hsl(50, 35%, 60%);
- --color-medium-discard: hsl(52, 25%, 70%);
-
- --color-clubs: #0079a1;
- --color-diamonds: #9d403f;
- --color-hearts: #ed1c23;
- --color-spades: #00507c;
- --color-reserve: #59594c;
-}
-
-/* DEALS */
+/* PROPOSE DEAL DIALOG */
dialog {
background-color: #f3ebd4;
@@ -214,28 +178,6 @@ dialog button {
margin-left: 8px;
}
-#political_body table {
- width: 100%;
- background-color: var(--color-light-political);
- border: 1px solid #0008;
-}
-
-#political_body td {
- border: 1px solid #0004;
- padding: 4px;
- vertical-align: top;
-}
-
-#political_body td img {
- display: block;
- border: 1px solid black;
-}
-
-#political_body th {
- font-weight: normal;
- background-color: #0002;
-}
-
/* PANELS */
.panel {
@@ -288,35 +230,126 @@ dialog button {
#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
#discard_pile_body { padding: 18px; gap: 18px; }
+/* BUTTON IMAGES */
+
+button:has(.austria) { background-color: #ffffff; }
+button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; }
+button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; }
+button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; }
+button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; }
+button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; }
+button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; }
+button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; }
+button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; }
+button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; }
+button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; }
+
+button:not(.hide):has(img) {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 4px;
+}
+
+.shift_track {
+ display: block;
+ border: 1px solid black;
+}
+
+.shift_arrow {
+ display: block;
+}
+
+/* POLITICAL DISPLAY */
+
#political_panel {
width: min-content;
}
+
+#political_display {
+ position: relative;
+ width: 877px;
+ height: 620px;
+ background-size: cover;
+ background-image: url(Maria.Political.Display.075.jpg);
+ background-color: #ece1a9;
+ Xbox-shadow: 2px 2px 4px #0006;
+ border: 1px solid #0008;
+}
+
+#placed_prussia { left: 42px; }
+#placed_france { left: 246px; }
+#placed_pragmatic { left: 449px; }
+#placed_austria { left: 653px; }
+
+.pc_pile {
+ position: absolute;
+ top: 325px;
+}
+
#political_body {
- padding: 4px;
+ padding-top: 4px;
display: grid;
- grid-template-rows: min-content 1fr;
- grid-template-columns: 179px 879px 169px;
- gap: 12px;
}
-#political_display { grid-row: 1; grid-column: 2; }
-#pc_deck { grid-row: 1; grid-column: 1; }
-#pc_show { grid-row: 1; grid-column: 3; }
-#pc_show .card + .card { margin-top: 12px ; }
-#pc_deck, #pc_show { margin-top: 4px; }
-#pd_deals { grid-row: 2; grid-column: 2; }
+#pc_deck { width: calc(167px + 6px * 3); height: 259px; }
-div.deal + div.deal {
- margin-top: 8px;
+#political_body {
+ grid-template-columns: repeat(2, min-content);
+ grid-template-rows: repeat(3, min-content);
}
-/* LOG */
+#pd_cards {
+ padding: 8px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: start;
+ align-items: center;
+ gap: 8px;
+}
-#log {
- font-family: "Suit Symbols", var(--font-small);
- font-variant-numeric: tabular-nums;
+#pd_main { grid-row: 1; grid-column: 1; }
+#pd_deals { grid-row: 2; grid-column: 1; }
+#pd_cards { grid-row: 1 / 4; grid-column: 2; }
+#pd_cards { flex-direction: column; }
+
+@media (max-width: 1300px) {
+#pd_main { grid-row: 1; grid-column: 1; }
+#pd_deals { grid-row: 3; grid-column: 1; }
+#pd_cards { grid-row: 2; grid-column: 1; }
+#pd_cards { flex-direction: row; }
+}
+
+/* POLITICAL DEAL LIST */
+
+#pd_deals table {
+ width: 100%;
+ background-color: var(--color-light-political);
+ border: 1px solid #0008;
+}
+
+#pd_deals td {
+ border: 1px solid #0004;
+ padding: 4px;
+ vertical-align: top;
+}
+
+#pd_deals td img {
+ display: block;
+ border: 1px solid black;
+}
+
+#pd_deals th {
+ font-weight: normal;
+ background-color: #0002;
}
+#pd_deals .deal {
+ margin-top: 8px;
+}
+
+/* LOG */
+
#log { background-color: #f3ebd4 }
#log div:empty {
@@ -425,21 +458,6 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
height: 56px;
}
-/*
-.space.country_austria { background-color: #fcffff; }
-.space.country_france { background-color: #ea192e; }
-.space.country_prussia { background-color: #035783; }
-.space.country_netherlands { background-color: #7d7c7a; }
-.space.country_silesia { background-color: #91b4a0; }
-.space.country_saxony { background-color: #127a3b; }
-.space.country_bavaria { background-color: #fcb01f; }
-.space.country_poland { background-color: #cac180; }
-
-.space.minor_fortress.Empire { background-color: #b41a70; }
-.space.major_fortress.Empire { background-color: #b41a70; }
-.space.city.Empire { background-color: #e0d796; }
-*/
-
.space.tip {
border-color: lime;
box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black;
@@ -695,6 +713,8 @@ body.shift span.value.deck_4 { background-color: #f002 }
width: 230px;
}
+/* @1X */
+
.card.tc.H10 { background-image: url(cards/Maria.TC.01.075.jpg) }
.card.tc.H9 { background-image: url(cards/Maria.TC.02.075.jpg) }
.card.tc.H8 { background-image: url(cards/Maria.TC.03.075.jpg) }
diff --git a/play.html b/play.html
index 3af7332..8aceacc 100644
--- a/play.html
+++ b/play.html
@@ -114,20 +114,25 @@
<div id="political_panel" class="panel">
<div id="political_header" class="panel_header">Political Display</div>
<div id="political_body">
- <div id="political_display">
- <div id="pol_tracks"></div>
- <div class="pc_pile card_pile" id="placed_prussia"></div>
- <div class="pc_pile card_pile" id="placed_france"></div>
- <div class="pc_pile card_pile" id="placed_pragmatic"></div>
- <div class="pc_pile card_pile" id="placed_austria"></div>
+ <div id="pd_main">
+ <div id="political_display">
+ <div id="pol_tracks"></div>
+ <div class="pc_pile card_pile" id="placed_prussia"></div>
+ <div class="pc_pile card_pile" id="placed_france"></div>
+ <div class="pc_pile card_pile" id="placed_pragmatic"></div>
+ <div class="pc_pile card_pile" id="placed_austria"></div>
+ </div>
</div>
- <div id="pc_deck" class="card_pile"></div>
- <div id="pc_show"></div>
<div id="pd_deals">
<div class="deal" id="subsidy_list"></div>
<div class="deal" id="active_deal_list"></div>
<div class="deal" id="proposed_deal_list"></div>
</div>
+ <div id="pd_cards">
+ <div id="pc_deck" class="card_pile"></div>
+ <div id="pc_show_1"></div>
+ <div id="pc_show_2"></div>
+ </div>
</div>
</div>
diff --git a/play.js b/play.js
index b30f94a..36b1e05 100644
--- a/play.js
+++ b/play.js
@@ -542,7 +542,8 @@ const ui = {
markers_element: document.getElementById("markers"),
pol_tracks: document.getElementById("pol_tracks"),
pc_deck: document.getElementById("pc_deck"),
- pc_show: document.getElementById("pc_show"),
+ pc_show_1: document.getElementById("pc_show_1"),
+ pc_show_2: document.getElementById("pc_show_2"),
pc_placed: [
document.getElementById("placed_france"),
document.getElementById("placed_prussia"),
@@ -1339,6 +1340,11 @@ function update_player_power_list(role) {
}
}
+function update_player_active(name) {
+ if (roles[name])
+ roles[name].element.classList.toggle("active", player_from_power(view.power) === name)
+}
+
function cmp_tc(a, b) {
let ax = (to_suit(a) << 7) + (to_value(a) << 3) + to_deck(a)
let bx = (to_suit(b) << 7) + (to_value(b) << 3) + to_deck(b)
@@ -1405,10 +1411,13 @@ function update_political() {
ui.pc_placed[pow].appendChild(show_tc(tc))
}
- ui.pc_show.replaceChildren()
+ ui.pc_show_1.replaceChildren()
+ ui.pc_show_2.replaceChildren()
if (view.political) {
- for (let pc of view.political)
- ui.pc_show.appendChild(ui.political[pc])
+ if (view.political.length > 0)
+ ui.pc_show_1.appendChild(ui.political[view.political[0]])
+ if (view.political.length > 1)
+ ui.pc_show_2.appendChild(ui.political[view.political[1]])
}
}
@@ -1423,10 +1432,15 @@ function on_update() {
if (is_two_player()) {
update_player_power_list(R_PLAYER_A)
update_player_power_list(R_PLAYER_B)
+ update_player_active(R_PLAYER_A)
+ update_player_active(R_PLAYER_B)
} else {
update_player_power_list(R_MARIA_THERESA)
update_player_power_list(R_FREDERICK)
update_player_power_list(R_LOUIS_XV)
+ update_player_active(R_MARIA_THERESA)
+ update_player_active(R_FREDERICK)
+ update_player_active(R_LOUIS_XV)
}
used_victory.fill(0)