Mobile layout.

author: Tor Andersson <tor@ccxvii.net> 2023-10-20 18:43:22 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-20 22:30:12 +0200
commit: caa2c274ba4a361cdc04fa9115cdbe140d3c362b (patch)
tree: 8e36d6717eb23b430b1a4bdb8cb2620ce9d2ab74
parent: de49a77ff2105c0a88bd8ca36ea273886dcaa2a3 (diff)
download: hammer-of-the-scots-caa2c274ba4a361cdc04fa9115cdbe140d3c362b.tar.gz
4 files changed, 147 insertions, 101 deletions
diff --git a/about.html b/about.html
index 1c77532..c28a44c 100644
--- a/about.html
+++ b/about.html
@@ -1,13 +1,11 @@
 <p>
 Hammer of the Scots brings the rebellion of the Braveheart, William Wallace, to life. As the English player, you seek to pacify Scotland by controlling all the important noble lords. The Scottish player also seeks the allegiance of nobles to support a difficult struggle for freedom.
 
-<br clear=left>
 
 <p>
 Designer: Tom Dalgliesh and Jerry Taylor.
-
-<p>
-Copyright &copy; 2002-2019 <a href="https://secure.columbiagames.com/product/3161DX">Columbia Games</a> and Jerry Taylor.
+<br> Copyright &copy; 2002-2019 <a href="https://secure.columbiagames.com/product/3161DX">Columbia Games</a> and Jerry Taylor.
+<br> Programming &copy; 2021 Tor Andersson.
 
 <ul>
 <li><a href="/hammer-of-the-scots/info/rules.html">Rulebook</a>
diff --git a/play.css b/play.css
index 2348984..12b1b9d 100644
--- a/play.css
+++ b/play.css
@@ -28,6 +28,12 @@ header.your_turn { background-color: orange; }
 	gap: 24px;
 }
 
+@media (max-width: 800px) {
+	.hand {
+		min-width: 1638px;
+	}
+}
+
 .card_back{background-image: url('cards/card_back.svg')}
 
 .card_truce{background-image:url('cards/card_truce.jpg')}
@@ -68,22 +74,30 @@ 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: 258px;
 	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: 258px;
+}
+
+@media (max-height: 600px) {
+	.role:not(:hover) .role_info { display: none; }
+}
+
+@media (max-height: 800px) {
+	#turn_info { display: none; }
+	.role_info { height: 56px; padding: 8px 0; }
 }
 
 /* MAP */
@@ -233,40 +247,23 @@ div.block {
 /* HERALD DIALOG */
 
 #herald {
-	background-color: white;
-	border: 1px solid black;
-	position: fixed;
-	top: 80px;
-	left: 36px;
+	top: calc(44px + 12px);
+	left: 12px;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	z-index: 50;
-	user-select: none;
-	display: none;
-}
-#herald.show {
-	display: block;
-}
-#herald_header {
-	font-weight: bold;
-	cursor: move;
-	border-bottom: 1px solid black;
-	background-color: lightsteelblue;
-	padding: 3px 1em;
-}
-.herald_noble {
-	padding: 3px 1em;
-	display: none;
-}
-.herald_noble:hover {
-	color: white;
-	background-color: black;
-}
-.herald_noble.show {
-	display: block;
+	min-width: 120px;
+	max-height: calc(100% - 44px - 24px);
 }
+#herald li.title { font-weight: bold; }
+#herald li.title { background-color: hsl(43, 79%, 70%) }
+#herald li { background-color: hsl(43, 79%, 95%) }
+
+body.England #herald li.action:hover { background-color: hsl(204, 100%, 35%); }
+body.Scotland #herald li.action:hover { background-color: hsl(0, 59%, 35%); }
 
 /* BATTLE BOARD */
 
+#battle { top: 160px; left: 185px; }
+
 #battle { background-color: silver; }
 #battle_message { background-color: lightsteelblue; }
 #battle_header { background-color: steelblue; color: white; }
diff --git a/play.html b/play.html
index 724c171..c81d84e 100644
--- a/play.html
+++ b/play.html
@@ -1,68 +1,57 @@
 <!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="#444">
 <meta charset="UTF-8">
 <title>HAMMER OF THE SCOTS</title>
 <link rel="icon" href="Scottish_Thistle_(Heraldry).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="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 class="oldblocks">
 
-<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="herald">
-<div id="herald_header">Name an enemy noble:</div>
-<div id="herald+Angus" class="herald_noble" onclick="on_herald('Angus')">Angus</div>
-<div id="herald+Argyll" class="herald_noble" onclick="on_herald('Argyll')">Argyll</div>
-<div id="herald+Atholl" class="herald_noble" onclick="on_herald('Atholl')">Atholl</div>
-<div id="herald+Bruce" class="herald_noble" onclick="on_herald('Bruce')">Bruce</div>
-<div id="herald+Buchan" class="herald_noble" onclick="on_herald('Buchan')">Buchan</div>
-<div id="herald+Comyn" class="herald_noble" onclick="on_herald('Comyn')">Comyn</div>
-<div id="herald+Dunbar" class="herald_noble" onclick="on_herald('Dunbar')">Dunbar</div>
-<div id="herald+Galloway" class="herald_noble" onclick="on_herald('Galloway')">Galloway</div>
-<div id="herald+Lennox" class="herald_noble" onclick="on_herald('Lennox')">Lennox</div>
-<div id="herald+Mar" class="herald_noble" onclick="on_herald('Mar')">Mar</div>
-<div id="herald+Mentieth" class="herald_noble" onclick="on_herald('Mentieth')">Mentieth</div>
-<div id="herald+Ross" class="herald_noble" onclick="on_herald('Ross')">Ross</div>
-<div id="herald+Steward" class="herald_noble" onclick="on_herald('Steward')">Steward</div>
-</div>
+<menu id="herald">
+<li class="title"> &#x2767; HERALD
+<li class="separator">
+<li data-noble="Angus" onclick="on_herald()"> Angus
+<li data-noble="Argyll" onclick="on_herald()"> Argyll
+<li data-noble="Atholl" onclick="on_herald()"> Atholl
+<li data-noble="Bruce" onclick="on_herald()"> Bruce
+<li data-noble="Buchan" onclick="on_herald()"> Buchan
+<li data-noble="Comyn" onclick="on_herald()"> Comyn
+<li data-noble="Dunbar" onclick="on_herald()"> Dunbar
+<li data-noble="Galloway" onclick="on_herald()"> Galloway
+<li data-noble="Lennox" onclick="on_herald()"> Lennox
+<li data-noble="Mar" onclick="on_herald()"> Mar
+<li data-noble="Mentieth" onclick="on_herald()"> Mentieth
+<li data-noble="Ross" onclick="on_herald()"> Ross
+<li data-noble="Steward" onclick="on_herald()"> Steward
+</menu>
 
 <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="old_block_style()">Classic labels</div>
-			<div class="menu_item" onclick="new_block_style()">New labels</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>
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li onclick="old_block_style()">Classic labels
+				<li onclick="new_block_style()">New labels
+				<li class="menu_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 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>
-	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
@@ -92,11 +81,20 @@
 	<div id="log"></div>
 </aside>
 
-<main>
+<main data-min-zoom="1" data-max-zoom="2">
 
 <div id="mapwrap">
 <div id="map">
 
+<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>
+
 <svg id="svgmap" width="1688px" height="1950px" viewBox="0 0 1688 1950">
 <g id="areas" transform="translate(0,1950) scale(0.1,-0.1)">
 <path id="area+Ross" class="area" d="M4865 17971 c-23 -5 -37 -19 -64 -68 -43 -77 -74 -94 -130 -69 -26
diff --git a/play.js b/play.js
index 608d2d9..d792f9a 100644
--- a/play.js
+++ b/play.js
@@ -76,6 +76,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_area_tip(x) {
 	ui.areas[x].classList.add("tip")
 }
@@ -247,8 +287,8 @@ function on_click_card(evt) {
 	send_action('play', c)
 }
 
-function on_herald(noble) {
-	send_action('noble', noble)
+function on_herald() {
+	send_action('noble', event.target.dataset.noble)
 }
 
 function build_battle_button(menu, b, c, click, enter, img_src) {
@@ -701,32 +741,45 @@ function on_update() {
 	document.getElementById("scotland_vp").textContent = view.s_vp
 	document.getElementById("turn_info").textContent = `Turn ${view.turn} of Year ${view.year}`
 
+	for (let c = 1; c <= 25; ++c) {
+		remember_position(ui.cards[c])
+
 	update_cards()
 	update_map()
 
 	if (view.actions && view.actions.noble) {
-		document.getElementById("herald").classList.add("show")
-		for (let noble of NOBLES) {
-			let element = document.getElementById("herald+" + noble)
-			if (view.actions.noble.includes(noble))
-				element.classList.add("show")
-			else
-				element.classList.remove("show")
+		document.getElementById("herald").style.display = "block"
+		for (let e of document.getElementById("herald").querySelectorAll("li[data-noble]")) {
+			let noble = e.dataset.noble
+			if (view.actions.noble.includes(noble)) {
+				e.classList.add("action")
+				e.classList.remove("disabled")
+			} else {
+				e.classList.remove("action")
+				e.classList.add("disabled")
+			}
 		}
 	} else {
-		document.getElementById("herald").classList.remove("show")
+		document.getElementById("herald").style.display = null
 	}
 
 	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")
 	}
+
+	for (let c = 1; c <= 25; ++c) {
+		animate_position(ui.cards[c])
 }
 
 drag_element_with_mouse("#battle", "#battle_header")
-drag_element_with_mouse("#herald", "#herald_header")
 scroll_with_middle_mouse("main", 2)
author	Tor Andersson <tor@ccxvii.net>	2023-10-20 18:43:22 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-20 22:30:12 +0200
commit	caa2c274ba4a361cdc04fa9115cdbe140d3c362b (patch)
tree	8e36d6717eb23b430b1a4bdb8cb2620ce9d2ab74
parent	de49a77ff2105c0a88bd8ca36ea273886dcaa2a3 (diff)
download	hammer-of-the-scots-caa2c274ba4a361cdc04fa9115cdbe140d3c362b.tar.gz