Add pause menu concept prototype

Adds a standalone Commonwealth Online pause menu mockup with the Fallout-style map, left-side navigation, server info, controller prompts, and keyboard handling. Also includes map zoom/pan behavior, fixes the UI scale custom property so sizes resolve correctly, and updates the changelog and dev log.
2026-07-03 23:04:39 +12:00
parent 153dfe525c
commit db5e50c7fd
9 changed files with 1038 additions and 0 deletions
@@ -0,0 +1,132 @@
+<!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 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>
+    </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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M8 5v14l11-7z"/></svg>
+          </span>
+          <span class="menu-item__label">RESUME</span>
+          <span class="menu-item__bar" aria-hidden="true"></span>
+        </button>
+
+        <button type="button" class="menu-item is-selected" data-index="1" data-action="map">
+          <span class="menu-item__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
+          </span>
+          <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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+          </span>
+          <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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM7 4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/></svg>
+          </span>
+          <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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
+          </span>
+          <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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
+          </span>
+          <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__icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.95 6.95 0 0 1 19 12a7 7 0 0 1-7 7 7 7 0 0 1-7-7c0-2.04.87-3.88 2.25-5.17L5.83 5.17A8.96 8.96 0 0 0 3 12a9 9 0 1 0 18 0c0-2.43-.97-4.63-2.53-6.23l-1.64 1.4z"/></svg>
+          </span>
+          <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 -->
+    <footer class="prompt-bar" 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__label">SELECT</span>
+      </div>
+      <div class="prompt">
+        <span class="prompt__glyph prompt__glyph--round" aria-hidden="true">B</span>
+        <span class="prompt__label">BACK</span>
+      </div>
+    </footer>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>