diff options
| -rw-r--r-- | about.html | 11 | ||||
| -rw-r--r-- | play.css | 36 | ||||
| -rw-r--r-- | play.html | 63 | ||||
| -rw-r--r-- | play.js | 15 |
4 files changed, 71 insertions, 54 deletions
@@ -14,16 +14,11 @@ role of a faction seeking to run Colombian affairs: the Government or one of three insurgent factions — the Marxist FARC, the right-wing AUC paramilitaries, or the narco-trafficking Cartels. -<br clear="left"> - <p> Designer: Volko Ruhnke. - -<p> -Copyright © 2012 -<a href="https://www.gmtgames.com/p-536-andean-abyss-2nd-printing.aspx">GMT Games, LLC</a>. -<br> -Cover art by Rodger B. MacGowan © 2012. +<br> Copyright © 2012 <a href="https://www.gmtgames.com/p-536-andean-abyss-2nd-printing.aspx">GMT Games, LLC</a>. +<br> Cover art by Rodger B. MacGowan © 2012. +<br> Programming © 2023 by Tor Andersson. <ul> <li><a href="/andean-abyss/info/rulebook.html">Rules of Play</a> @@ -41,20 +41,13 @@ main { background-color: #777; } top: 60px; } -/* Put cards on right of map when zoomed to fit, or very wide screen */ -main { grid-template-columns: 1fr min-content min-content 1fr; } -#mapwrap { grid-row: 1; grid-column: 2 } -#card_panel { grid-row: 1; grid-column: 3 } -@media (min-width: 2200px) { main { display: grid; } } -main.fit { display: grid; } - /* MAP */ #mapwrap { box-shadow: 0px 1px 10px #0008; width: 1650px; height: 2550px; - margin-bottom: 36px; + margin-bottom: 24px; } #mapwrap.fit { @@ -341,15 +334,32 @@ path.tip { stroke: white; stroke-dasharray: 4 4; } /* CARDS */ #card_panel { - text-align: center; - margin: 24px; + display: flex; + flex-wrap: wrap; + align-content: start; + justify-content: center; + gap: 18px; + padding: 18px; } -#card_panel .card { - display: inline-block; - margin: 9px; +#card_panel { width: 800px; margin: 0 auto; } +@media (max-width: 800px) { + #card_panel { width: 1614px; justify-content: start; } } +/* Put cards on right of map when zoomed to fit, or very wide screen */ +#mapwrap { grid-row: 1; grid-column: 2 } +#card_panel { grid-row: 1; grid-column: 3 } +#grid { grid-template-columns: 1fr min-content min-content 1fr; } + +@media (min-width: 2200px) { + #grid { display: grid; } + #card_panel { width: 250px; } +} + +#grid.fit { display: grid; } +#grid.fit #card_panel { width: 250px; } + .card { width: 248px; height: 348px; @@ -2,14 +2,15 @@ <!-- vim:set nowrap: --> <html lang="en"> <head> -<meta name="viewport" content="width=device-width, initial-scale=1"> +<meta name="viewport" content="width=device-width, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> <meta charset="UTF-8"> <title>ANDEAN ABYSS</title> <link id="favicon" rel="icon" href="favicon.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="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> @@ -19,31 +20,34 @@ <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/rulebook.html" target="_blank")">Rulebook</a> - <a class="menu_item" href="info/playbook.html" target="_blank")">Playbook</a> - <a class="menu_item" href="info/pac.html" target="_blank")">Player Aids</a> - <a class="menu_item" href="info/cards.html" target="_blank")">Cards</a> - </div> - </div> - <div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-america.svg"></div> - <div class="icon_button" onclick="toggle_zoom2()"><img src="/images/magnifying-glass.svg"></div> - <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> - <div id="negotiate_menu" class="menu hide"> - <div class="menu_title"><img src="images/shaking-hands.svg"></div> - <div class="menu_popup"> - <div id="remove_pieces_menu" class="menu_item" onclick="send_action('remove_pieces')">Remove Pieces</div> - <div id="transfer_resources_menu" class="menu_item" onclick="send_action('transfer_resources')">Transfer Resources</div> - <div id="transfer_shipment_menu" class="menu_item" onclick="send_action('transfer_shipment')">Transfer Shipment</div> - <div id="ask_resources_menu" class="menu_item" onclick="send_action('ask_resources')">Ask for Resources</div> - <div id="ask_shipment_menu" class="menu_item" onclick="send_action('ask_shipment')">Ask for Shipment</div> - </div> + <details> + <summary> + <img src="/images/cog.svg"> + </summary> + <menu> + <li><a href="info/rulebook.html" target="_blank")">Rulebook</a> + <li><a href="info/playbook.html" target="_blank")">Playbook</a> + <li class="separator"> + <li><a href="info/pac.html" target="_blank")">Player Aids</a> + <li><a href="info/cards.html" target="_blank")">Cards</a> + </menu> + </details> + <details id="negotiate_menu"> + <summary> + <img src="images/shaking-hands.svg"> + </summary> + <menu> + <li id="remove_pieces_menu" onclick="send_action('remove_pieces')">Remove Pieces + <li id="transfer_resources_menu" onclick="send_action('transfer_resources')">Transfer Resources + <li id="transfer_shipment_menu" onclick="send_action('transfer_shipment')">Transfer Shipment + <li id="ask_resources_menu" onclick="send_action('ask_resources')">Ask for Resources + <li id="ask_shipment_menu" onclick="send_action('ask_shipment')">Ask for Shipment + </menu> + </details> + <!-- + <button onclick="toggle_pieces()"><img src="/images/earth-america.svg"></button> + --> </div> - </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -94,7 +98,9 @@ <div id="log"></div> </aside> -<main> +<main data-max-zoom="1"> + +<div id="grid"> <div id="card_panel"> <div id="this_card" class="hide"><div id="unshaded_event"></div><div id="shaded_event"></div></div> @@ -200,6 +206,7 @@ </div> </div> +</div> </main> @@ -428,11 +428,6 @@ function is_action(action, arg) { return !!(view.actions && view.actions[action] && set_has(view.actions[action], arg)) } -function toggle_zoom2() { - document.querySelector("main").classList.toggle("fit") - toggle_zoom() -} - function toggle_pieces() { if (ui.map.classList.contains("hide_tokens")) { ui.map.classList.remove("hide_tokens") @@ -1590,4 +1585,14 @@ function map_get(map, key, missing) { return missing } +// TODO: clean up this mess... +var orig_toggle_zoom = toggle_zoom +toggle_zoom = function () { + orig_toggle_zoom() + if (document.getElementById("mapwrap").classList.contains("fit")) + document.getElementById("grid").classList.add("fit") + else + document.getElementById("grid").classList.remove("fit") +} + scroll_with_middle_mouse("main") |