diff options
| -rw-r--r-- | about.html | 10 | ||||
| -rw-r--r-- | play.css | 53 | ||||
| -rw-r--r-- | play.html | 115 | ||||
| -rw-r--r-- | rules.js | 4 |
4 files changed, 85 insertions, 97 deletions
@@ -6,14 +6,10 @@ political and military maneuvering, culminating in a Final Crisis representing the “Bloody Week” in May of 1871. -<br clear="left"> - -<p> -Designer: Fred Serval - <p> -Copyright © 2021 -<a href="https://www.gmtgames.com/p-996-red-flag-over-paris-2nd-printing.aspx">GMT Games, LLC</a>. +Designer: Fred Serval. +<br> Copyright © 2021 <a href="https://www.gmtgames.com/p-996-red-flag-over-paris-2nd-printing.aspx">GMT Games, LLC</a>. +<br> Programming © 2022 Tor Andersson. <ul> <li><a href="/red-flag-over-paris/info/rules.html">Rules</a> @@ -41,21 +41,21 @@ body.Versailles header.your_turn { background-color: hsl(199, 45%, 70%); } .panel_grid { display: flex; - flex-wrap: wrap; justify-content: center; - margin: 20px; + min-width: 1500px; + max-width: 1500px; + margin: 20px auto; gap: 20px; } -#final, #hand, #discard, #set_aside, #red_objective, #blue_objective { - min-height: 350px; - min-width: 250px; -} - -#hand_panel { width: clamp(290px, 1100px, 100%) } -body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } -#final_panel { width: clamp(290px, 560px, 100%) } -#set_aside_panel { width: clamp(290px, 830px, 100%) } +#final, #hand, #discard, #set_aside, #red_objective, #blue_objective { min-height: 350px; } +#hand_panel { min-width: 1100px; } +body.censorship #hand_panel { min-width: 1370px; } +#final_panel { min-width: 560px; } +#set_aside_panel { min-width: 830px; } +#discard_panel { min-width: 290px; } +#red_objective_panel, +#blue_objective_panel { min-width: 290px; max-width: 560px; } #red_objective_header { background-color: hsl(358, 20%, 28%) } #blue_objective_header { background-color: hsl(199, 20%, 26%) } @@ -96,11 +96,22 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } #tooltip { position: fixed; - z-index: 100; + pointer-events: none; + z-index: 600; right: 240px; top: 60px; } +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + /* MAP */ #mapwrap { @@ -400,21 +411,3 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) } .card_52{background-image:url(cards.2x/objective_11.jpg)} .card_53{background-image:url(cards.2x/objective_12.jpg)} } - -/* MOBILE LAYOUT */ - -@media (max-width: 640px) { - #mapwrap { - margin: 0 - } - .panel_grid { - gap: 0; - margin: 0; - } - .panel { - width: 100% !important; - } - .panel_body { - justify-content: center; - } -} @@ -2,14 +2,15 @@ <!-- vim:set nowrap: --> <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="#444"> <meta charset="UTF-8"> <title>RED FLAG OVER PARIS</title> <link 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="play.js"></script> </head> <body> @@ -18,21 +19,17 @@ <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/rules.html" target="_blank">Rules</a> - <a class="menu_item" href="info/censorship.html" target="_blank">Reference</a> - <a class="menu_item" href="info/cards.html" target="_blank">Cards</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_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><a href="info/rules.html" target="_blank">Rules</a> + <li><a href="info/censorship.html" target="_blank">Reference</a> + <li><a href="info/cards.html" target="_blank">Cards</a> + <li class="resign separator"> + <li class="resign" onclick="confirm_resign()">Resign + </menu> + </details> </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -55,56 +52,62 @@ <div id="log"></div> </aside> -<main> +<main data-min-zoom="1" data-max-zoom="1"> + + <div id="mapwrap"> + <div id="map"> + <div id="spaces"></div> + <div id="pieces"> + <div id="round_marker" class="piece pawn round1"></div> + <div id="political_vp" class="piece cylinder orange vp5"></div> + <div id="military_vp" class="piece cylinder purple vp5"></div> + <div id="red_momentum" class="piece cylinder red m0"></div> + <div id="blue_momentum" class="piece cylinder blue m0"></div> + </div> + </div> + </div> -<div id="mapwrap"> -<div id="map"> -<div id="spaces"></div> -<div id="pieces"> -<div id="round_marker" class="piece pawn round1"></div> -<div id="political_vp" class="piece cylinder orange vp5"></div> -<div id="military_vp" class="piece cylinder purple vp5"></div> -<div id="red_momentum" class="piece cylinder red m0"></div> -<div id="blue_momentum" class="piece cylinder blue m0"></div> -</div> -</div> -</div> + <div class="panel_grid"> -<div class="panel_grid"> + <div id="hand_panel" class="panel hide"> + <div id="hand_header" class="panel_header">Hand</div> + <div id="hand" class="panel_body"></div> + </div> -<div id="hand_panel" class="panel hide"> -<div id="hand_header" class="panel_header">Hand</div> -<div id="hand" class="panel_body"></div> -</div> + <div id="discard_panel" class="panel"> + <div id="discard_header" class="panel_header">Discard</div> + <div id="discard" class="panel_body"></div> + </div> + </div> -<div id="discard_panel" class="panel"> -<div id="discard_header" class="panel_header">Discard</div> -<div id="discard" class="panel_body"></div> -</div> + <div class="panel_grid"> -<div id="final_panel" class="panel"> -<div id="final_header" class="panel_header">Final Cards</div> -<div id="final" class="panel_body"></div> -</div> + <div id="final_panel" class="panel"> + <div id="final_header" class="panel_header">Final Cards</div> + <div id="final" class="panel_body"></div> + </div> + <div id="blue_objective_panel" class="panel"> + <div id="blue_objective_header" class="panel_header">Versailles Objective</div> + <div id="blue_objective" class="panel_body"></div> + </div> -<div id="blue_objective_panel" class="panel"> -<div id="blue_objective_header" class="panel_header">Versailles Objective</div> -<div id="blue_objective" class="panel_body"></div> -</div> + <div id="red_objective_panel" class="panel"> + <div id="red_objective_header" class="panel_header">Commune Objective</div> + <div id="red_objective" class="panel_body"></div> + </div> -<div id="red_objective_panel" class="panel"> -<div id="red_objective_header" class="panel_header">Commune Objective</div> -<div id="red_objective" class="panel_body"></div> -</div> + </div> -<div id="set_aside_panel" class="panel hide"> -<div id="set_aside_header" class="panel_header">Set-aside cards</div> -<div id="set_aside" class="panel_body"></div> -</div> + <div class="panel_grid"> -</div> + <div id="set_aside_panel" class="panel hide"> + <div id="set_aside_header" class="panel_header">Set-aside cards</div> + <div id="set_aside" class="panel_body"></div> + </div> + + </div> </main> @@ -3474,10 +3474,6 @@ function draw_strategy_card() { // === VIEW === -exports.is_checkpoint = function (a, b) { - return a.round !== b.round -} - exports.view = function (state, player) { game = state |