diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-11-01 16:33:33 +0100 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-11-01 16:33:33 +0100 |
| commit | 0a35b1d9ad0b5791c1123944492df07dabc6b876 (patch) | |
| tree | c738a14065ea97ee08c0fb7f52dc29906699c6f5 | |
| parent | 916879d092219443cc0b1e7a4119e7bab08adb57 (diff) | |
| download | algeria-0a35b1d9ad0b5791c1123944492df07dabc6b876.tar.gz | |
Reinstate mapwrap. Tweak mobile layout. Lift selected units.
| -rw-r--r-- | play.html | 83 | ||||
| -rw-r--r-- | play.js | 5 |
2 files changed, 50 insertions, 38 deletions
@@ -90,6 +90,11 @@ main { background-color: dimgray } border: 1px solid #222; } +#mapwrap { + width: 1503px; + height: 1103px; +} + #map { width: 1503px; height: 1103px; @@ -358,12 +363,11 @@ svg .area.tip { .panel { max-width: 900px; margin: 36px auto; - background-color: #808080; + background-color: #555; border: 3px solid #555; } .panel_header { - background-color: #555; color: white; user-select: none; font-weight: bold; @@ -372,6 +376,7 @@ svg .area.tip { } .panel_body { + background-color: #808080; display: flex; justify-content: start; flex-wrap: wrap; @@ -380,6 +385,10 @@ svg .area.tip { min-height: 43px; } +@media (max-width: 800px) { + section { min-width: 1503px; } +} + </style> </head> <body> @@ -426,9 +435,10 @@ svg .area.tip { <div id="log"></div> </aside> -<main> +<main data-map-width="1503" data-map-height="1103"> -<div id="map"> + <div id="mapwrap"> + <div id="map"> <svg id="svgmap" width="1503px" height="1103px" viewBox="0 0 1503 1103"> @@ -579,45 +589,44 @@ svg .area.tip { </g> </svg> -<div id="decor"></div> - -<div id="boxes"></div> - -<div id="pieces"> - <div id="turn_now" class="counter turn_now"></div> - <div id="fln_psl" class="counter fln_psl"></div> - <div id="fln_ap" class="counter fln_ap"></div> - <div id="gov_psl" class="counter gov_psl"></div> - <div id="air_avail" class="counter air_avail hide"></div> - <div id="air_max" class="counter air_max"></div> - <div id="helo_avail" class="counter helo_avail hide"></div> - <div id="helo_max" class="counter helo_max"></div> - <div id="naval" class="counter naval_pts"></div> - <div id="border_zone" class="counter border_zone hide"></div> -</div> - -</div> + <div id="decor"></div> + + <div id="boxes"></div> + + <div id="pieces"> + <div id="turn_now" class="counter turn_now"></div> + <div id="fln_psl" class="counter fln_psl"></div> + <div id="fln_ap" class="counter fln_ap"></div> + <div id="gov_psl" class="counter gov_psl"></div> + <div id="air_avail" class="counter air_avail hide"></div> + <div id="air_max" class="counter air_max"></div> + <div id="helo_avail" class="counter helo_avail hide"></div> + <div id="helo_max" class="counter helo_max"></div> + <div id="naval" class="counter naval_pts"></div> + <div id="border_zone" class="counter border_zone hide"></div> + </div> -<div id="gov_supply_panel" class="panel"> -<div id="gov_supply_header" class="panel_header">Government Available Forces</div> -<div id="gov_supply" class="panel_body"> + </div> + </div> -</div> -</div> + <section> -<div id="fln_supply_panel" class="panel"> -<div id="fln_supply_header" class="panel_header">FLN Available Forces</div> -<div id="fln_supply" class="panel_body"> + <div id="gov_supply_panel" class="panel"> + <div id="gov_supply_header" class="panel_header">Government Available Forces</div> + <div id="gov_supply" class="panel_body"></div> + </div> -</div> -</div> + <div id="fln_supply_panel" class="panel"> + <div id="fln_supply_header" class="panel_header">FLN Available Forces</div> + <div id="fln_supply" class="panel_body"></div> + </div> -<div id="eliminated_panel" class="panel"> -<div id="eliminated_header" class="panel_header">Eliminated / Out of Play</div> -<div id="eliminated" class="panel_body"> + <div id="eliminated_panel" class="panel"> + <div id="eliminated_header" class="panel_header">Eliminated / Out of Play</div> + <div id="eliminated" class="panel_body"></div> + </div> -</div> -</div> + </section> </main> @@ -505,7 +505,10 @@ function layout_stack(loc_id, box_id) { e.my_stack = stack e.style.left = x + "px" e.style.top = y + "px" - e.style.zIndex = z++ + if (is_unit_selected(e.my_id)) + e.style.zIndex = 100 + z++ + else + e.style.zIndex = z++ x += dx y += dy } |