play

author: Tor Andersson <tor@ccxvii.net> 2024-05-31 21:16:06 +0200
committer: Tor Andersson <tor@ccxvii.net> 2024-05-31 21:16:06 +0200
commit: c8a135ad09d7cd758ed61e8c010dcde8580e6c2a (patch)
tree: 77669deec62ce48af4636234e545d4b7ee16b93c
parent: bb360adeaf70c96821b140021c91e11ecfac91df (diff)
download: maria-c8a135ad09d7cd758ed61e8c010dcde8580e6c2a.tar.gz
5 files changed, 286 insertions, 41 deletions
diff --git a/about.html b/about.html
index 213e38f..fca5300 100644
--- a/about.html
+++ b/about.html
@@ -18,5 +18,7 @@ Designer: Richard Sivél.
 
 <ul>
 <li><a href="/maria/info/MariaRules.pdf">Rules</a>
-<li><a href="/maria/info/cards.html">Cards</a>
+<li><a href="/maria/info/cards.html">Political Cards</a>
+<li><a href="/maria/info/aid.html">Playing Aid</a>
+<li><a href="/maria/info/readme.html">README</a>
 </ul>
diff --git a/info/aid.html b/info/aid.html
new file mode 100644
index 0000000..52f1414
--- /dev/null
+++ b/info/aid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=700">
+<title>Maria Playing Aid</title>
+<style>
+
+html {
+	background-color: slategray;
+}
+
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px;
+	margin: 40px;
+}
+
+img {
+	display: block;
+	border-radius: 8px;
+}
+</style>
+<body>
+
+<div class="list">
+<img src="../cards/Maria.PlayAid.reverse.2.150.jpg">
+<img src="../cards/Maria.PlayAid.reverse.3.150.jpg">
+<img src="../cards/Maria.PlayAid.reverse.4.150.jpg">
+<img src="../cards/Maria.PlayAid.reverse.5.150.jpg">
+<img src="../cards/Maria.PlayAid.reverse.6.150.jpg">
+<img src="../cards/Maria.PlayAid.reverse.7.150.jpg">
+</div>
diff --git a/info/cards.html b/info/cards.html
new file mode 100644
index 0000000..82ad7db
--- /dev/null
+++ b/info/cards.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=700">
+<title>Maria Political Cards</title>
+<style>
+
+html {
+	background-color: slategray;
+}
+
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px;
+	margin: 40px;
+}
+
+img {
+	display: block;
+	border-radius: 8px;
+}
+</style>
+<body>
+
+<div class="list">
+<img src="../cards/Maria.PolCard.reverse.deck_1.150.jpg">
+<img src="../cards/Maria.PolCard.reverse.deck_2.150.jpg">
+<img src="../cards/Maria.PolCard.reverse.deck_3.150.jpg">
+<img src="../cards/Maria.PolCard.reverse.deck_4.150.jpg">
+<img src="../cards/Maria.PolCard.01.150.jpg">
+<img src="../cards/Maria.PolCard.02.150.jpg">
+<img src="../cards/Maria.PolCard.03.150.jpg">
+<img src="../cards/Maria.PolCard.04.150.jpg">
+<img src="../cards/Maria.PolCard.05.150.jpg">
+<img src="../cards/Maria.PolCard.06.150.jpg">
+<img src="../cards/Maria.PolCard.07.150.jpg">
+<img src="../cards/Maria.PolCard.08.150.jpg">
+<img src="../cards/Maria.PolCard.09.150.jpg">
+<img src="../cards/Maria.PolCard.10.150.jpg">
+<img src="../cards/Maria.PolCard.11.150.jpg">
+<img src="../cards/Maria.PolCard.12.150.jpg">
+<img src="../cards/Maria.PolCard.13.150.jpg">
+<img src="../cards/Maria.PolCard.14.150.jpg">
+<img src="../cards/Maria.PolCard.15.150.jpg">
+<img src="../cards/Maria.PolCard.16.150.jpg">
+<img src="../cards/Maria.PolCard.17.150.jpg">
+<img src="../cards/Maria.PolCard.18.150.jpg">
+<img src="../cards/Maria.PolCard.19.150.jpg">
+<img src="../cards/Maria.PolCard.20.150.jpg">
+<img src="../cards/Maria.PolCard.21.150.jpg">
+<img src="../cards/Maria.PolCard.22.150.jpg">
+<img src="../cards/Maria.PolCard.23.150.jpg">
+<img src="../cards/Maria.PolCard.24.150.jpg">
+<img src="../cards/Maria.PolCard.ImpElection.150.jpg">
+</div>
diff --git a/play.css b/play.css
index 217ed27..a9195f8 100644
--- a/play.css
+++ b/play.css
@@ -25,6 +25,7 @@ body {
 	width: 2485px;
 	height: 1654px;
 	margin-bottom: 30px;
+	box-shadow: 2px 2px 4px #0006;
 }
 
 #map {
@@ -44,8 +45,150 @@ body {
 	background-size: cover;
 	background-image: url(Maria.Political.Display.075.jpg);
 	background-color: #ece1a9;
+	box-shadow: 2px 2px 4px #0006;
+	border: 1px solid #0008;
 }
 
+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(0, 0%, 75%);
+	--color-light-austria: hsl(0, 0%, 97%);
+	--color-light-political: hsl(50, 73%, 78%);
+
+	--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(0, 0%, 65%);
+	--color-medium-austria: hsl(0, 0%, 90%);
+	--color-medium-political: hsl(50, 35%, 60%);
+
+	--color-dark-france: hsl(358, 85%, 52%);
+	--color-dark-bavaria: hsl(36, 65%, 52%);
+	--color-dark-prussia: hsl(198, 100%, 24%);
+	--color-dark-saxony: hsl(139, 72%, 28%);
+	--color-dark-pragmatic: hsl(0, 0%, 87%);
+	--color-dark-austria: hsl(0, 0%, 97%);
+
+	--color-role-louis: hsl(0, 70%, 80%);
+	--color-role-frederick: hsl(210, 80%, 75%);
+	--color-role-maria: hsl(0, 0%, 97%);
+
+	--color-clubs: #007c49;
+	--color-diamonds: #c2263e;
+	--color-hearts: #ed1c24;
+	--color-spades: #274085;
+	--color-reserve: #0094c9;
+}
+
+/* PANELS */
+
+.panel {
+	background-color: darkgray;
+	width: clamp(500px, calc(100% - 48px), 2475px);
+	margin: 24px auto;
+	box-shadow: 2px 2px 4px #0006;
+	border: 1px solid #0008;
+	padding: 4px;
+}
+
+.panel_header {
+	border: 1px solid #000a;
+	box-shadow: 1px 1px 4px #0003;
+	text-align: center;
+	padding: 2px 0;
+}
+
+.panel_body {
+	display: flex;
+	justify-content: start;
+	flex-wrap: wrap;
+	padding: 18px;
+	gap: 18px;
+	min-height: 256px;
+}
+
+#hand_france_header { background-color: var(--color-light-france) }
+#hand_bavaria_header { background-color: var(--color-light-bavaria) }
+#hand_prussia_header { background-color: var(--color-light-prussia) }
+#hand_saxony_header { background-color: var(--color-light-saxony) }
+#hand_pragmatic_header { background-color: var(--color-light-pragmatic) }
+#hand_austria_header { background-color: var(--color-light-austria) }
+
+#hand_france_panel { background-color: var(--color-medium-france) }
+#hand_bavaria_panel { background-color: var(--color-medium-bavaria) }
+#hand_prussia_panel { background-color: var(--color-medium-prussia) }
+#hand_saxony_panel { background-color: var(--color-medium-saxony) }
+#hand_pragmatic_panel { background-color: var(--color-medium-pragmatic) }
+#hand_austria_panel { background-color: var(--color-medium-austria) }
+
+#political_header { background-color: var(--color-light-political) }
+#political_panel { background-color: var(--color-medium-political) }
+
+
+/* LOG */
+
+#log {
+	font-family: "Suit Symbols", var(--font-small);
+	font-variant-numeric: tabular-nums;
+}
+
+#log { background-color: #f3ebd4 }
+
+#log div:empty {
+	min-height: 4px;
+}
+
+#log .city_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .piece_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .h {
+	background-color: tan;
+	border-top: 1px solid black; border-bottom: 1px solid black;
+	margin: 8px 0;
+}
+
+#log .h.fate { text-align: center; }
+#log .h.fate::before { content: "\2014  " }
+#log .h.fate::after { content: " \2014" }
+
+#log .combat { background-color: #d7cfb8; }
+
+#log .h.austria { background-color: var(--color-light-austria); }
+#log .h.france { background-color: var(--color-light-france); }
+#log .h.bavaria { background-color: var(--color-light-bavaria); }
+#log .h.prussia { background-color: var(--color-light-prussia); }
+#log .h.pragmatic { background-color: var(--color-light-pragmatic); }
+#log .h.saxony { background-color: var(--color-light-saxony); }
+
+#log .q { font-style: italic; }
+
+#log .i { padding-left: 20px }
+#log .ii { padding-left: 32px }
+
+#log span.suit { font-size: 11px; }
+
+span.suit.reserve { padding: 0 1px; }
+
+span.suit.spades { color: var(--color-spades) }
+span.suit.clubs { color: var(--color-clubs) }
+span.suit.hearts { color: var(--color-hearts) }
+span.suit.diamonds { color: var(--color-diamonds) }
+span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: "Source Serif SmText"; }
+
 /* SPACES */
 
 .space {
diff --git a/play.html b/play.html
index a7c8e9d..1e6d210 100644
--- a/play.html
+++ b/play.html
@@ -46,56 +46,71 @@
 	</div>
 </div>
 
-<div id="political_display">
-	<div id="display_track_saxony"></div>
-	<div id="display_track_russia"></div>
-	<div id="display_track_italy"></div>
-	<div id="display_prussia"></div>
-	<div id="display_france"></div>
-	<div id="display_pragmatic_army"></div>
-	<div id="display_austria"></div>
-</div>
-
 <div id="power_panel_list">
 
-<div id="hand_prussia_panel" class="panel">
-<div id="hand_prussia_header" class="panel_header">Prussia</div>
-<div id="hand_prussia" class="panel_body">
-</div>
-</div>
+	<!-- Louis XV -->
 
-<div id="hand_bavaria_panel" class="panel">
-<div id="hand_bavaria_header" class="panel_header">Bavaria</div>
-<div id="hand_bavaria" class="panel_body">
-</div>
-</div>
+	<div id="hand_france_panel" class="panel">
+	<div id="hand_france_header" class="panel_header">France</div>
+	<div id="hand_france" class="panel_body">
+	</div>
+	</div>
 
-<div id="hand_france_panel" class="panel">
-<div id="hand_france_header" class="panel_header">France</div>
-<div id="hand_france" class="panel_body">
-</div>
-</div>
+	<div id="hand_bavaria_panel" class="panel">
+	<div id="hand_bavaria_header" class="panel_header">Bavaria</div>
+	<div id="hand_bavaria" class="panel_body">
+	</div>
+	</div>
 
-<div id="hand_saxony_panel" class="panel">
-<div id="hand_saxony_header" class="panel_header">Saxony</div>
-<div id="hand_saxony" class="panel_body">
-</div>
-</div>
+	<!-- Frederick -->
 
-<div id="hand_pragmatic_army_panel" class="panel">
-<div id="hand_pragmatic_army_header" class="panel_header">Pragmatic Army</div>
-<div id="hand_pragmatic_army" class="panel_body">
-</div>
-</div>
+	<div id="hand_prussia_panel" class="panel">
+	<div id="hand_prussia_header" class="panel_header">Prussia</div>
+	<div id="hand_prussia" class="panel_body">
+	</div>
+	</div>
 
-<div id="hand_austria_panel" class="panel">
-<div id="hand_austria_header" class="panel_header">Austria</div>
-<div id="hand_austria" class="panel_body">
-</div>
-</div>
+	<div id="hand_saxony_panel" class="panel">
+	<div id="hand_saxony_header" class="panel_header">Saxony</div>
+	<div id="hand_saxony" class="panel_body">
+	</div>
+	</div>
+
+	<div id="hand_pragmatic_panel" class="panel">
+	<div id="hand_pragmatic_header" class="panel_header">Pragmatic Army</div>
+	<div id="hand_pragmatic" class="panel_body">
+	</div>
+	</div>
+
+	<!-- Maria Theresa -->
+
+	<div id="hand_austria_panel" class="panel">
+	<div id="hand_austria_header" class="panel_header">Austria</div>
+	<div id="hand_austria" class="panel_body">
+	</div>
+	</div>
+
+	<!-- Political Display -->
+
+	<div id="political_panel" class="panel" style="width:905px">
+	<div id="political_header" class="panel_header">Political Display</div>
+	<div class="panel_body" style="padding:12px">
+		<div id="political_display">
+			<div id="display_track_saxony"></div>
+			<div id="display_track_russia"></div>
+			<div id="display_track_italy"></div>
+			<div id="display_prussia"></div>
+			<div id="display_france"></div>
+			<div id="display_pragmatic_army"></div>
+			<div id="display_austria"></div>
+		</div>
+	</div>
+	</div>
 
 </div>
 
+<br>
+
 </main>
 
 <footer id="status"></footer>
author	Tor Andersson <tor@ccxvii.net>	2024-05-31 21:16:06 +0200
committer	Tor Andersson <tor@ccxvii.net>	2024-05-31 21:16:06 +0200
commit	c8a135ad09d7cd758ed61e8c010dcde8580e6c2a (patch)
tree	77669deec62ce48af4636234e545d4b7ee16b93c
parent	bb360adeaf70c96821b140021c91e11ecfac91df (diff)
download	maria-c8a135ad09d7cd758ed61e8c010dcde8580e6c2a.tar.gz