Mobile layout.

author: Tor Andersson <tor@ccxvii.net> 2023-10-20 18:53:57 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-20 22:30:45 +0200
commit: 395aed07b08dfda92b599c14f9e7b39efa380725 (patch)
tree: 063e9a4c8be08284257fc02d7ce0b2405fec9bb5
parent: 0920295b9ad52bd2c6ef383b88a7e6e7313caa47 (diff)
download: julius-caesar-395aed07b08dfda92b599c14f9e7b39efa380725.tar.gz
4 files changed, 112 insertions, 53 deletions
diff --git a/about.html b/about.html
index 6e7457b..7c7eef0 100644
--- a/about.html
+++ b/about.html
@@ -6,10 +6,8 @@ play key roles.
 
 <p>
 Designer: Justin Thompson and Grant Dalgliesh.
-
-<p>
-Copyright &copy; 2010
-<a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3121">Columbia Games</a>.
+<br> Copyright &copy; 2010 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3121">Columbia Games</a>.
+<br> Programming &copy; 2021 Tor Andersson.
 
 <ul>
 <li><a href="/julius-caesar/info/rules.html">Rulebook</a>
diff --git a/play.css b/play.css
index 6ca2624..08c5229 100644
--- a/play.css
+++ b/play.css
@@ -1,9 +1,5 @@
 /* MAIN */
 
-html {
-	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
-}
-
 main { background-color: #461145; }
 #roles { background-color: tan; }
 header { background-color: tan; }
@@ -35,6 +31,12 @@ header.your_turn { background-color: orange; }
 	gap: 16px;
 }
 
+@media (max-width: 800px) {
+	.hand {
+		min-width: 2425px;
+	}
+}
+
 .card_back { background-image: url('cards/card_back.jpg'); }
 .card_apollo { background-image: url('cards/card_apollo.jpg'); }
 .card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
@@ -60,7 +62,6 @@ header.your_turn { background-color: orange; }
 	height: 348px;
 	border-radius: 12px;
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
-	transition: 100ms;
 	display: none;
 }
 
@@ -89,26 +90,36 @@ header.your_turn { background-color: orange; }
 }
 
 .role_info {
-	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
-	padding-top: 16px;
+	overflow: clip;
+	transition: height 100ms, padding 100ms;
+	height: 84px;
+	padding: 12px 0;
 }
 
 .role_info .card {
 	width: 168px;
 	height: 261px;
 	border-radius: 9px;
-	margin: 0 auto 16px auto;
+	margin: 0 auto;
 }
 
-.role_info .card:not(:hover) {
-	margin: 0 auto;
-	height: 96px;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
+.role:hover .role_info {
+	height: 261px;
+}
+
+@media (max-height: 600px) {
+	.role:not(:hover) .role_info { display: none; }
+}
+
+@media (max-height: 800px) {
+	#turn_info { display: none; }
+	.role_info { height: 38px; padding: 8px 0; }
 }
 
 /* BATTLE BOARD */
 
+#battle { top: 60px; left: 160px; }
+
 #battle { background-color: tan; }
 #battle_message { background-color: wheat; }
 #battle_header { background-color: brown; color: lemonchiffon; }
diff --git a/play.html b/play.html
index 74a1534..bf2781f 100644
--- a/play.html
+++ b/play.html
@@ -1,56 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover">
+<meta name="theme-color" content="hsl(34, 20%, 35%)">
 <meta charset="utf-8">
 <title>JULIUS CAESAR</title>
 <link rel="icon" href="Vexilloid_of_the_Roman_Empire.svg">
 <link rel="stylesheet" href="/fonts/fonts.css">
-<link rel="stylesheet" href="/common/play.css">
+<link rel="stylesheet" href="/common/client.css">
 <link rel="stylesheet" href="/common/columbia.css">
 <link rel="stylesheet" href="blocks_simple.css">
 <link rel="stylesheet" href="blocks_columbia.css">
 <link rel="stylesheet" href="play.css">
-<script defer src="/common/play.js"></script>
+<script defer src="/common/client.js"></script>
 <script defer src="data.js"></script>
 <script defer src="play.js"></script>
 </head>
 <body>
 
-<div id="battle">
-<div id="battle_header"></div>
-<div id="ER"></div>
-<div id="EF"></div>
-<div id="FF"></div>
-<div id="FR"></div>
-<div id="battle_message"></div>
-</div>
-
 <header>
 	<div id="toolbar">
-	<div class="menu">
-		<div class="menu_title"><img src="/images/cog.svg"></div>
-		<div class="menu_popup">
-			<div class="menu_item" onclick="set_columbia_labels()">Columbia labels</div>
-			<div class="menu_item" onclick="set_simple_labels()">Simple labels</div>
-			<div class="menu_separator"></div>
-			<div class="menu_item" onclick="set_spread_layout()">Spread blocks</div>
-			<div class="menu_item" onclick="set_stack_layout()">Stack blocks</div>
-			<div class="menu_separator"></div>
-			<a class="menu_item" href="info/notes.html" target="_blank">Notes</a>
-			<a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
-			<a class="menu_item" href="info/cards.html" target="_blank">Cards</a>
-			<a class="menu_item" href="info/blocks.html" target="_blank">Blocks</a>
-			<div class="resign menu_separator"></div>
-			<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
-		</div>
-	</div>
-	<div class="icon_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div>
-	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
-	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li onclick="set_columbia_labels()">Columbia labels
+				<li onclick="set_simple_labels()">Simple labels
+				<li class="separator">
+				<li onclick="set_spread_layout()">Spread blocks
+				<li onclick="set_stack_layout()">Stack blocks</li>
+				<li class="separator">
+				<li><a href="info/notes.html" target="_blank">Notes</a>
+				<li><a href="info/rules.html" target="_blank">Rules</a>
+				<li><a href="info/cards.html" target="_blank">Cards</a>
+				<li><a href="info/blocks.html" target="_blank">Blocks</a>
+				<li class="resign separator">
+				<li class="resign" onclick="confirm_resign()">Resign
+			</menu>
+		</details>
+		<button onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></button>
 	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
@@ -76,8 +64,16 @@
 	<div id="log"></div>
 </aside>
 
-<main>
+<main data-min-zoom="1" data-max-zoom="2">
 	<div id="mapwrap">
+		<div id="battle">
+			<div id="battle_header"></div>
+			<div id="ER"></div>
+			<div id="EF"></div>
+			<div id="FF"></div>
+			<div id="FR"></div>
+			<div id="battle_message"></div>
+		</div>
 		<div id="map">
 			<div id="offmap" style="visibility:hidden"></div>
 			<div id="blocks"></div>
@@ -85,6 +81,7 @@
 			<div id="turn" class="year_705"></div>
 		</div>
 	</div>
+
 	<div id="cards" class="hand">
 		<div id="card+1" class="card card_apollo" onclick="select_card(1)"></div>
 		<div id="card+2" class="card card_jupiter" onclick="select_card(2)"></div>
@@ -120,6 +117,7 @@
 		<div id="back+5" class="card card_back"></div>
 		<div id="back+6" class="card card_back"></div>
 	</div>
+
 </main>
 
 <footer id="status"></footer>
diff --git a/play.js b/play.js
index 16fb4e4..1b8e3ab 100644
--- a/play.js
+++ b/play.js
@@ -16,6 +16,7 @@ function set_has(set, item) {
 	return false
 }
 
+
 const CAESAR = "Caesar"
 const POMPEIUS = "Pompeius"
 
@@ -94,6 +95,46 @@ let ui = {
 	present: new Set(),
 }
 
+function remember_position(e) {
+	if (e.classList.contains("show")) {
+		let rect = e.getBoundingClientRect()
+		e.my_parent = true
+		e.my_x = rect.x
+		e.my_y = rect.y
+	} else {
+		e.my_parent = false
+		e.my_x = 0
+		e.my_y = 0
+	}
+}
+
+function animate_position(e) {
+	if (e.parentElement) {
+		if (e.my_parent) {
+			let rect = e.getBoundingClientRect()
+			let dx = e.my_x - rect.x
+			let dy = e.my_y - rect.y
+			if (dx !== 0 || dy !== 0) {
+				e.animate(
+					[
+						{ transform: `translate(${dx}px, ${dy}px)`, },
+						{ transform: "translate(0, 0)", },
+					],
+					{ duration: 250, easing: "ease" }
+				)
+			}
+		} else {
+				e.animate(
+					[
+						{ opacity: 0 },
+						{ opacity: 1 }
+					],
+					{ duration: 250, easing: "ease" }
+				)
+		}
+	}
+}
+
 function on_focus_space_tip(x) {
 	ui.spaces[x].classList.add("tip")
 }
@@ -747,13 +788,21 @@ function on_update() {
 	action_button("pass")
 	action_button("undo", "Undo")
 
+	for (let c = 1; c <= 27; ++c)
+		remember_position(ui.cards[c])
+
 	update_cards()
 	update_map()
 
 	if (view.battle) {
 		document.getElementById("battle_header").textContent = view.battle.title
 		document.getElementById("battle_message").textContent = view.battle.flash
-		document.getElementById("battle").classList.add("show")
+		if (!document.getElementById("battle").classList.contains("show")) {
+			document.getElementById("battle").classList.add("show")
+			document.getElementById("battle").scrollIntoView({
+				block:"center", inline:"center", behavior:"smooth"
+			})
+		}
 		update_battle()
 	} else {
 		document.getElementById("battle").classList.remove("show")
@@ -761,6 +810,9 @@ function on_update() {
 
 	ui.old_location = Object.assign({}, view.location)
 	ui.old_steps = Object.assign({}, view.steps)
+
+	for (let c = 1; c <= 27; ++c)
+		animate_position(ui.cards[c])
 }
 
 function select_card(c) {
author	Tor Andersson <tor@ccxvii.net>	2023-10-20 18:53:57 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-20 22:30:45 +0200
commit	395aed07b08dfda92b599c14f9e7b39efa380725 (patch)
tree	063e9a4c8be08284257fc02d7ce0b2405fec9bb5
parent	0920295b9ad52bd2c6ef383b88a7e6e7313caa47 (diff)
download	julius-caesar-395aed07b08dfda92b599c14f9e7b39efa380725.tar.gz