diff options
| -rw-r--r-- | about.html | 6 | ||||
| -rw-r--r-- | play.css | 32 | ||||
| -rw-r--r-- | play.html | 58 | ||||
| -rw-r--r-- | play.js | 54 |
4 files changed, 107 insertions, 43 deletions
@@ -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 © 2009 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3171">Columbia Games</a> and Jerry Taylor. +<br> Copyright © 2009 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3171">Columbia Games</a> and Jerry Taylor. +<br> Programming © 2021 Tor Andersson. <ul> <li><a href="/richard-iii/info/rules.html">Rulebook</a> @@ -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; } @@ -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" @@ -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() |