summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-10-20 19:14:46 +0200
committerTor Andersson <tor@ccxvii.net>2023-10-20 22:31:23 +0200
commitda620aa17fa8b0c50d6a64b7fe6ba76863d5cef1 (patch)
treec4fa38b956568796c10a63cdb6eecd1625d0b6fb
parent82d252775049a7b58980ff36f9e7a62487654a7f (diff)
downloadrichard-iii-da620aa17fa8b0c50d6a64b7fe6ba76863d5cef1.tar.gz
Mobile layout.
Diffstat
-rw-r--r--about.html6
-rw-r--r--play.css32
-rw-r--r--play.html58
-rw-r--r--play.js54
4 files changed, 107 insertions, 43 deletions
diff --git a/about.html b/about.html
index b26cfb1..f54f9d0 100644
--- a/about.html
+++ b/about.html
@@ -13,13 +13,11 @@ throne, and the Yorkists are in exile ready to invade. Kingship can be won or
lost several times during the game. Will Richard III emerge triumphant, or will
he perish in battle as he did historically?
-<br clear=left>
<p>
Designer: Jerry Taylor.
-
-<p>
-Copyright &copy; 2009 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3171">Columbia Games</a> and Jerry Taylor.
+<br> Copyright &copy; 2009 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3171">Columbia Games</a> and Jerry Taylor.
+<br> Programming &copy; 2021 Tor Andersson.
<ul>
<li><a href="/richard-iii/info/rules.html">Rulebook</a>
diff --git a/play.css b/play.css
index 5cd3648..274cf68 100644
--- a/play.css
+++ b/play.css
@@ -26,6 +26,12 @@ header.your_turn { background-color: orange; }
min-height: 280px;
}
+@media (max-width: 800px) {
+ .hand {
+ min-width: 1638px;
+ }
+}
+
.card {
background-size: cover;
background-repeat: no-repeat;
@@ -54,19 +60,27 @@ 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: 80px;
+ padding: 12px 0;
}
.role_info .card {
- 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: 280px;
+}
+
+@media (max-height: 600px) {
+ .role:not(:hover) .role_info { display: none; }
+}
+
+@media (max-height: 900px) {
+ #turn_info { display: none; }
+ .role_info { height: 48px; padding: 8px 0; }
}
/* MAP */
@@ -196,6 +210,8 @@ div.block {
/* BATTLE BOARD */
+#battle { top: 295px; left: 195px; }
+
#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 6f03d91..c6b06f5 100644
--- a/play.html
+++ b/play.html
@@ -1,48 +1,36 @@
<!DOCTYPE html>
<html>
<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>RICHARD III</title>
<link rel="icon" href="icons/Red_Rose_Badge_of_Lancaster.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>
-<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">
- <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>
+ <a href="info/notes.html" target="_blank">Notes</a>
+ <a href="info/rules.html" target="_blank">Rules</a>
+ <a href="info/cards.html" target="_blank">Cards</a>
+ <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>
@@ -68,10 +56,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>
+
+<div id="map">
<svg id="svgmap" viewBox="0 0 1688 1950">
<g transform="translate(0,1950) scale(0.1,-0.1)">
<path id="area_Scotland" class="area"
diff --git a/play.js b/play.js
index b236266..2793dad 100644
--- a/play.js
+++ b/play.js
@@ -93,6 +93,46 @@ let ui = {
for (let a of AREAS)
a.nbname = a.name.replace(/ /g, "\xa0")
+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.areas[x].classList.add("tip")
}
@@ -766,17 +806,29 @@ function on_update() {
action_button("pass", "Pass")
action_button("undo", "Undo")
+ for (let c = 1; c <= 25; ++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")
}
+
+ for (let c = 1; c <= 25; ++c)
+ animate_position(ui.cards[c])
}
build_map()