diff options
| -rw-r--r-- | play.css | 37 | ||||
| -rw-r--r-- | play.html | 4 | ||||
| -rw-r--r-- | play.js | 5 | ||||
| -rw-r--r-- | rules.js | 7 |
4 files changed, 39 insertions, 14 deletions
@@ -11,6 +11,7 @@ main { background-color: #777; } #log { background-color: whitesmoke; } #log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; } +#log .h1 { background-image: linear-gradient(60deg, skyblue, khaki, lightcoral, darkseagreen) } #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; } #log .h2.govt { background-color: #c6d1eb } #log .h2.farc { background-color: #ebc9be } @@ -24,7 +25,6 @@ main { background-color: #777; } #log div { padding-left: 20px; text-indent: -12px; } #log div.indent { padding-left: 32px; text-indent: -12px; } -#log .h1 { background-image: linear-gradient(60deg, skyblue, khaki, lightcoral, darkseagreen) } #log { font-variant-numeric: tabular-nums; } @@ -39,6 +39,19 @@ 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; } +/* +main.fit #deck_outer { height: 96px; background-position: 0 -15px } +*/ + +/* MAP */ + #mapwrap { box-shadow: 0px 1px 10px #0008; width: 1650px; @@ -46,6 +59,10 @@ main { background-color: #777; } margin-bottom: 36px; } +#mapwrap.fit { + margin-bottom: 0 +} + #map { width: 1650px; height: 2550px; @@ -205,10 +222,6 @@ path.tip { stroke: yellow; } height: 36px; } -.token.reminder { - //margin: 4px 5px 5px 4px; -} - .token.shipment { border-radius: 50%; @@ -324,13 +337,13 @@ path.tip { stroke: yellow; } /* CARDS */ #card_panel { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 18px; - padding: 0 18px; - max-width: 1614px; - margin: 36px auto; + text-align: center; + margin: 24px; +} + +#card_panel .card { + display: inline-block; + margin: 9px; } .card { @@ -39,10 +39,10 @@ </div> </div> <div class="icon_button" onclick="toggle_pieces()"><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_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/back-forth.svg"></div> + <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> @@ -369,6 +369,11 @@ 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") @@ -2377,7 +2377,14 @@ states.eligible = { gen_any_operation() gen_any_event() } + + // Limited negotiation menu until committed to op/event view.actions.remove_pieces = 1 + view.actions.ask_resources = 0 + view.actions.transfer_resources = 0 + view.actions.ask_shipment = 0 + view.actions.transfer_shipment = 0 + view.actions.pass = game.op.pass ? 1 : 0 }, train: goto_train, |