diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-10-19 01:31:31 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-10-20 19:06:35 +0200 |
| commit | 89d05a73e3e91ad727174f1d9ac6cb720e460332 (patch) | |
| tree | 735b2e6e70fcac092e5ac18203d50f8e14229973 /play.html | |
| parent | 2a9f4e4e5bab2345e12d43ae7bbca307c829091b (diff) | |
| download | wilderness-war-89d05a73e3e91ad727174f1d9ac6cb720e460332.tar.gz | |
Mobile layout.
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 115 |
1 files changed, 57 insertions, 58 deletions
@@ -1,15 +1,16 @@ <!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=content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> <meta charset="utf-8"> <title>WILDERNESS WAR</title> <link rel="icon" href="logo.png"> <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"> <link rel="stylesheet" href="images.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> @@ -17,14 +18,16 @@ <div id="tooltip"></div> -<div id="popup" onmouseleave="hide_popup_menu()"> -<div id="menu_play_event" class="always" onclick="on_play_event()">Play Event</div> -<div id="menu_activate_force" class="always" onclick="on_activate_force()">Activate force</div> -<div id="menu_activate_individually" class="always" onclick="on_activate_individually()">Activate individually</div> -<div id="menu_construct_stockades" class="always" onclick="on_construct_stockades()">Construct stockades</div> -<div id="menu_construct_forts" class="always" onclick="on_construct_forts()">Construct forts</div> -<div id="menu_discard" onclick="on_discard()">Discard</div> -</div> +<menu id="popup"> + <li class="title">CARD + <li class="separator"> + <li data-action="play_event"> 🎴 Play Event + <li data-action="activate_force"> 👤 Activate force + <li data-action="activate_individually"> 👥 Activate individually + <li data-action="construct_stockades"> 🔨 Construct stockades + <li data-action="construct_forts"> 🔨 Construct forts + <li data-action="discard"> 🚫 Discard +</menu> <div id="removed" class="card_list_dialog hide"> <div id="removed_x" class="card_list_x" onclick="hide_card_list('removed')">❌</div> @@ -40,53 +43,49 @@ <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/charts.html" target="_blank">Charts & Tables</a> - <a class="menu_item" href="info/cards.html" target="_blank">Cards</a> - <a class="menu_item" href="info/pieces.html" target="_blank">Leaders & Units</a> - <div class="resign menu_separator"></div> - <div class="resign menu_item" onclick="confirm_resign()">Resign</div> - </div> - </div> - <div class="menu"> - <div class="menu_title"><img src="/images/stack.svg"></div> - <div class="menu_popup"> - <div id="stack_v" class="menu_item unchecked" onclick="set_layout(0)">Vertical</div> - <div id="stack_h" class="menu_item unchecked" onclick="set_layout(1)">Horizontal</div> - <div id="stack_d" class="menu_item unchecked" onclick="set_layout(2)">Diagonal</div> - <div class="menu_separator"></div> - <div id="mouse_focus" class="menu_item unchecked" onclick="set_mouse_focus()">Mouse-focus</div> - <div class="menu_separator"></div> - <div id="style_bevel" class="menu_item unchecked" onclick="set_style('bevel')">Beveled</div> - <div id="style_flat" class="menu_item unchecked" onclick="set_style('flat')">Flat</div> - </div> - </div> - <div class="menu"> - <div class="menu_title"><img src="/images/wooden-sign.svg"></div> - <div class="menu_popup"> - <div class="menu_item" onclick="send_query('supply')">Supply lines</div> - <div class="menu_item" onclick="send_query('removed')">Removed</div> - <div class="menu_item" onclick="send_query('discard')">Discard</div> - </div> - </div> - <div class="icon_button" onclick="toggle_counters()"><img src="/images/earth-america.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 id="demolish_menu" class="menu hide"> - <div class="menu_title"><img src="/images/dig-dug.svg"></div> - <div class="menu_popup"> - <div id="demolish_fort" class="menu_item" onclick="send_action('demolish_fort')">Demolish fort</div> - <div id="demolish_stockade" class="menu_item" onclick="send_action('demolish_stockade')">Demolish stockade</div> - <div id="demolish_fieldworks" class="menu_item" onclick="send_action('demolish_fieldworks')">Demolish fieldworks</div> - </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><a href="info/charts.html" target="_blank">Charts & Tables</a> + <li><a href="info/cards.html" target="_blank">Cards</a> + <li><a href="info/pieces.html" target="_blank">Leaders & Units</a> + <li class="resign separator"> + <li class="resign" onclick="confirm_resign()">Resign + </menu> + </details> + <details id="stack_menu"> + <summary><img src="/images/stack.svg"></summary> + <menu> + <li class="unchecked" id="stack_v" onclick="set_layout(0)"> Vertical + <li class="unchecked" id="stack_h" onclick="set_layout(1)"> Horizontal + <li class="unchecked" id="stack_d" onclick="set_layout(2)"> Diagonal + <li class="separator"> + <li class="unchecked" id="mouse_focus" onclick="set_mouse_focus()"> Mouse-focus + <li class="separator"> + <li class="unchecked" id="style_bevel" onclick="set_style('bevel')"> Beveled + <li class="unchecked" id="style_flat" onclick="set_style('flat')"> Flat + </menu> + </details> + <details id="info_menu"> + <summary><img src="/images/wooden-sign.svg"></summary> + <menu> + <li onclick="send_query('supply')"> Supply lines + <li onclick="send_query('removed')"> Removed + <li onclick="send_query('discard')"> Discard + </menu> + </details> + <button id="piece_button" onclick="toggle_counters()"><img src="/images/earth-america.svg"></button> + <details id="demolish_menu" class="hide"> + <summary><img src="/images/dig-dug.svg"></summary> + <menu> + <li id="demolish_fort" onclick="send_action('demolish_fort')"> Demolish fort + <li id="demolish_stockade" onclick="send_action('demolish_stockade')"> Demolish stockade + <li id="demolish_fieldworks" onclick="send_action('demolish_fieldworks')"> Demolish fieldworks + </menu> + </details> </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -110,7 +109,7 @@ <div id="log"></div> </aside> -<main> +<main data-max-zoom="2" onclick="hide_popup_menu()"> <div id="mapwrap"> <div id="map"> <div id="events"> |