Pause menu: shared map blur, PC back, Xbox glyphs
Wrap map art and markers in a new .map-world so blur, pan and zoom animate together; add a PC-facing top-left ESC BACK button and a map-mode prompt bar using Xbox PNG glyphs. Implement JS glyph-tinting, map-mode enter/exit logic, and pan/zoom handlers; update styles for .map-world, markers, prompt bars, and the PC back button. Add Xbox icon assets and update deploy/stage scripts to copy them. Update changelog and dev-log entries to document the changes.
This commit is contained in:
@@ -8,18 +8,18 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="pause-screen" id="pauseScreen">
|
||||
<!-- Map background -->
|
||||
<div class="map-layer" aria-hidden="true"></div>
|
||||
<div class="map-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- Subtle multiplayer markers on the map -->
|
||||
<div class="map-markers" aria-hidden="true">
|
||||
<span class="marker marker--player" style="left: 58%; top: 42%;"></span>
|
||||
<span class="marker marker--ally" style="left: 64%; top: 38%;"></span>
|
||||
<span class="marker marker--ally" style="left: 52%; top: 48%;"></span>
|
||||
<span class="marker marker--ally" style="left: 71%; top: 55%;"></span>
|
||||
<span class="marker marker--ally" style="left: 45%; top: 36%;"></span>
|
||||
<!-- Map + markers share one filter so blur/unblur stays in lockstep -->
|
||||
<div class="map-world" id="mapWorld" aria-hidden="true">
|
||||
<div class="map-layer"></div>
|
||||
<div class="map-markers">
|
||||
<span class="marker marker--player" style="left: 58%; top: 42%;"></span>
|
||||
<span class="marker marker--ally" style="left: 64%; top: 38%;"></span>
|
||||
<span class="marker marker--ally" style="left: 52%; top: 48%;"></span>
|
||||
<span class="marker marker--ally" style="left: 71%; top: 55%;"></span>
|
||||
<span class="marker marker--ally" style="left: 45%; top: 36%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- CRT / HUD texture overlays -->
|
||||
<div class="screen-effects" aria-hidden="true"></div>
|
||||
@@ -85,22 +85,52 @@
|
||||
<p class="server-panel__players">12 / 24</p>
|
||||
</section>
|
||||
|
||||
<!-- Bottom controller prompts -->
|
||||
<footer class="prompt-bar" aria-label="Controller prompts">
|
||||
<!-- Bottom controller prompts (pause menu) -->
|
||||
<footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph" aria-hidden="true">☰</span>
|
||||
<span class="prompt__label">MOVE</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--rs" aria-hidden="true">RS</span>
|
||||
<span class="prompt__label">ZOOM</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--round" aria-hidden="true">A</span>
|
||||
<span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_A_White_Alt.png" src="./assets/icons/Xbox/T_X_A_White_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">SELECT</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--round" aria-hidden="true">B</span>
|
||||
<span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_B_White_Alt.png" src="./assets/icons/Xbox/T_X_B_White_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">BACK</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- PC back button (map mode only) -->
|
||||
<button type="button" class="map-pc-back" id="mapBackButton" aria-hidden="true">
|
||||
<span class="map-pc-back__key" aria-hidden="true">ESC</span>
|
||||
<span class="map-pc-back__label">BACK</span>
|
||||
</button>
|
||||
|
||||
<!-- Map mode prompt bar (controller: LS MOVE / RS ZOOM / A SELECT / B BACK) -->
|
||||
<footer class="prompt-bar prompt-bar--map-mode" id="mapPromptBar" aria-label="Map mode prompts" hidden>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--icon prompt__glyph--icon-stick" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_L_2D_Alt.png" src="./assets/icons/Xbox/T_X_L_2D_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">MOVE</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--icon prompt__glyph--icon-stick" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_R_Y_Alt.png" src="./assets/icons/Xbox/T_X_R_Y_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">ZOOM</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_A_White_Alt.png" src="./assets/icons/Xbox/T_X_A_White_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">SELECT</span>
|
||||
</div>
|
||||
<div class="prompt">
|
||||
<span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
|
||||
<img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_B_White_Alt.png" src="./assets/icons/Xbox/T_X_B_White_Alt.png" alt="" draggable="false">
|
||||
</span>
|
||||
<span class="prompt__label">BACK</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user