diff options
| -rw-r--r-- | about.html | 6 | ||||
| -rw-r--r-- | play.css | 37 | ||||
| -rw-r--r-- | play.html | 68 | ||||
| -rw-r--r-- | play.js | 54 |
4 files changed, 112 insertions, 53 deletions
@@ -6,10 +6,8 @@ play key roles. <p> Designer: Justin Thompson and Grant Dalgliesh. - -<p> -Copyright © 2010 -<a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3121">Columbia Games</a>. +<br> Copyright © 2010 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3121">Columbia Games</a>. +<br> Programming © 2021 Tor Andersson. <ul> <li><a href="/julius-caesar/info/rules.html">Rulebook</a> @@ -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; } @@ -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> @@ -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) { |