Consolidate shared UI assets

Move common logo and controller glyphs into `ui/views/CommonwealthOnline/shared/` and update the pause menu, main menu, and browser glyph loader to use the shared paths. Also add a sync script and update deploy/staging scripts to copy controller icons once into the shared folder.
2026-07-05 22:46:38 +12:00
parent 8acdb4f555
commit c3f5afe7f6
15 changed files with 1048 additions and 26 deletions
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Commonwealth Online — Main Menu</title>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="../settings/settings.css">
+</head>
+<body>
+  <div class="main-screen" id="mainScreen">
+    <!-- Title-screen scenic background -->
+    <div class="scene-layer" aria-hidden="true"></div>
+    <div class="scene-overlay" aria-hidden="true"></div>
+
+    <!-- CRT / HUD texture overlays -->
+    <div class="screen-effects" aria-hidden="true"></div>
+
+    <!-- Left main menu panel -->
+    <aside class="left-panel">
+      <img
+        class="brand-logo"
+        src="../shared/logo.svg"
+        alt="Commonwealth Online"
+        width="220"
+        height="54"
+      >
+
+      <nav class="menu" id="menu" aria-label="Main menu">
+        <button type="button" class="menu-item" data-index="0" data-action="multiplayer">
+          <span class="menu-item__label">MULTIPLAYER</span>
+          <span class="menu-item__bar" aria-hidden="true"></span>
+        </button>
+
+        <button type="button" class="menu-item" data-index="1" data-action="creations">
+          <span class="menu-item__label">CREATIONS</span>
+          <span class="menu-item__bar" aria-hidden="true"></span>
+        </button>
+
+        <button type="button" class="menu-item" data-index="2" 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="3" 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="4" data-action="quit">
+          <span class="menu-item__label">QUIT</span>
+          <span class="menu-item__bar" aria-hidden="true"></span>
+        </button>
+      </nav>
+    </aside>
+
+    <!-- Settings view (content mounted by ../settings/settings.js) -->
+    <section class="settings-view" id="settingsPanel" aria-label="Settings" hidden></section>
+
+    <!-- Bottom controller prompts (main menu) -->
+    <footer class="prompt-bar" id="mainPromptBar" 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="../shared/icons/Xbox/T_X_A_White_Alt.png" src="../shared/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="../shared/icons/Xbox/T_X_B_White_Alt.png" src="../shared/icons/Xbox/T_X_B_White_Alt.png" alt="" draggable="false">
+        </span>
+        <span class="prompt__label">BACK</span>
+      </div>
+    </footer>
+
+    <!-- Settings mode prompt bar -->
+    <footer class="prompt-bar prompt-bar--settings" id="settingsPromptBar" aria-label="Settings prompts" hidden>
+      <div class="prompt" data-prompt="move">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">↑↓</span>
+        <span class="prompt__label">MOVE</span>
+      </div>
+      <div class="prompt" data-prompt="change">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">←→</span>
+        <span class="prompt__label">CHANGE</span>
+      </div>
+      <div class="prompt" data-prompt="select">
+        <span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
+          <img class="prompt__glyph-img" data-glyph-src="../shared/icons/Xbox/T_X_A_White_Alt.png" src="../shared/icons/Xbox/T_X_A_White_Alt.png" alt="" draggable="false">
+        </span>
+        <span class="prompt__label">SELECT</span>
+      </div>
+      <div class="prompt" data-prompt="back">
+        <span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
+          <img class="prompt__glyph-img" data-glyph-src="../shared/icons/Xbox/T_X_B_White_Alt.png" src="../shared/icons/Xbox/T_X_B_White_Alt.png" alt="" draggable="false">
+        </span>
+        <span class="prompt__label">BACK</span>
+      </div>
+      <div class="prompt" data-prompt="tab">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">TAB</span>
+        <span class="prompt__label">SWITCH FOCUS</span>
+      </div>
+    </footer>
+  </div>
+
+  <script src="../settings/settings-data.js"></script>
+  <script src="../settings/settings.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>