Commonwealth-Online/Commonwealth-Online-Public
2
0
Fork 0
Code Pull Requests Activity
Files
0a07c502c184a974c007db7e5d7a9ea03861e98b
Commonwealth-Online-Public/ui/views/CommonwealthOnline/pause-menu/index.html
T
andrew 0a07c502c1 Add data-driven pause menu settings view 
Introduce a new SETTINGS view to the pause menu with two tabs: GAME SETTINGS (placeholder to open vanilla Fallout 4 settings) and MULTIPLAYER SETTINGS (data-driven custom options). Adds HTML for the settings panel and tabs, comprehensive CSS for tab/pane/row styling, and a large JS update that provides: F4SE/C++ bridge stubs (openGameSettings, setMultiplayerSetting, onBack, onOpenView), a multiplayerSettings data model, rendering and keyboard navigation (tab/content focus, row movement, value cycling), prompt-bar updates, and view-mode transitions (pause/map/settings). Also: map interaction refinements, map blur handling, open settings by default, and documentation updates in changelog.md and docs/dev-log.md.
2026-07-04 21:45:55 +12:00

236 lines
9.9 KiB
HTML
Raw Blame History

<!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" id="serverPanel" 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>
<!-- Settings view: GAME SETTINGS | MULTIPLAYER SETTINGS -->
<section class="settings-view" id="settingsPanel" aria-label="Settings" hidden>
<div class="settings-panel">
<h1 class="settings-panel__heading">SETTINGS</h1>
<div class="settings-tabs" id="settingsTabs" role="tablist" aria-label="Settings tabs">
<button
type="button"
class="settings-tab"
id="tabGameSettings"
role="tab"
data-tab="game"
aria-selected="false"
aria-controls="gameSettingsPane"
>
GAME SETTINGS
</button>
<button
type="button"
class="settings-tab is-selected"
id="tabMultiplayerSettings"
role="tab"
data-tab="multiplayer"
aria-selected="true"
aria-controls="multiplayerSettingsPane"
>
MULTIPLAYER SETTINGS
</button>
</div>
<div
class="settings-pane settings-pane--game"
id="gameSettingsPane"
role="tabpanel"
aria-labelledby="tabGameSettings"
hidden
>
<h2 class="settings-pane__heading">GAME SETTINGS</h2>
<p class="settings-pane__description">
Adjust Fallout 4 controls, display, audio, and gameplay options using the default game settings menu.
</p>
<button type="button" class="settings-open-btn" id="openGameSettingsBtn">
OPEN FALLOUT 4 SETTINGS
</button>
<p class="settings-pane__note">
This will open the vanilla Fallout 4 settings menu. Commonwealth Online will return after it closes.
</p>
</div>
<div
class="settings-pane settings-pane--multiplayer"
id="multiplayerSettingsPane"
role="tabpanel"
aria-labelledby="tabMultiplayerSettings"
>
<div
class="settings-rows"
id="settingsRows"
aria-label="Multiplayer setting options"
role="listbox"
></div>
<p class="settings-description" id="settingsDescription"></p>
</div>
</div>
</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>
<!-- Settings mode prompt bar (contents updated by script.js per active tab) -->
<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="./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" data-prompt="back">
<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>
<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>
<!-- 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>
View Git Blame Copy Permalink