andrew
38b6011de8
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.
142 lines
6.2 KiB
HTML
142 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Commonwealth Online — Pause Menu</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="pause-screen" id="pauseScreen">
|
|
<!-- 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>
|
|
|
|
<!-- Left pause menu panel -->
|
|
<aside class="left-panel">
|
|
<img
|
|
class="brand-logo"
|
|
src="assets/logo.svg"
|
|
alt="Commonwealth Online"
|
|
width="220"
|
|
height="54"
|
|
>
|
|
|
|
<nav class="menu" id="menu" aria-label="Pause menu">
|
|
<button type="button" class="menu-item" data-index="0" data-action="resume">
|
|
<span class="menu-item__label">RESUME</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="1" data-action="map">
|
|
<span class="menu-item__label">MAP</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="2" data-action="social">
|
|
<span class="menu-item__label">SOCIAL</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="3" data-action="server">
|
|
<span class="menu-item__label">SERVER</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="4" data-action="settings">
|
|
<span class="menu-item__label">SETTINGS</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="5" data-action="help">
|
|
<span class="menu-item__label">HELP</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="6" data-action="quit">
|
|
<span class="menu-item__label">QUIT</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Top-right server info -->
|
|
<section class="server-panel" aria-label="Current server">
|
|
<h2 class="server-panel__heading">CURRENT SERVER</h2>
|
|
<div class="server-panel__row">
|
|
<span class="signal-bars" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span>
|
|
</span>
|
|
<p class="server-panel__name">Commonwealth Online #47</p>
|
|
</div>
|
|
<h2 class="server-panel__heading">PLAYERS ONLINE</h2>
|
|
<p class="server-panel__players">12 / 24</p>
|
|
</section>
|
|
|
|
<!-- Bottom controller prompts (pause menu) -->
|
|
<footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
|
|
<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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|