Commonwealth-Online/Commonwealth-Online-Public
2
0
Fork 0
Code Pull Requests Activity

Extract reusable settings UI

Browse Source 
Move the Commonwealth Online settings screen into a shared module with its own data, styles, and controller API. The pause menu now mounts the reusable component, keeps the prompt bar behavior consistent, and animates the panel open/close with a subtler transition.
This commit is contained in:
andrew
2026-07-05 21:30:52 +12:00
parent 1af6bbd3d2
commit 8acdb4f555
8 changed files with 1359 additions and 1217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/views/CommonwealthOnline/pause-menu/index.html
+6 -66
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commonwealth Online — Pause Menu</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../settings/settings.css">
</head>
<body>
<div class="pause-screen" id="pauseScreen">
@@ -85,71 +86,8 @@
<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"
>
FALLOUT 4
</button>
<button
type="button"
class="settings-tab is-selected"
id="tabMultiplayerSettings"
role="tab"
data-tab="multiplayer"
aria-selected="true"
aria-controls="multiplayerSettingsPane"
>
MULTIPLAYER
</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>
<!-- Settings view (content mounted by ../settings/settings.js) -->
<section class="settings-view" id="settingsPanel" aria-label="Settings" hidden></section>
<!-- Bottom controller prompts (pause menu) -->
<footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
@@ -167,7 +105,7 @@
</div>
</footer>
<!-- Settings mode prompt bar (contents updated by script.js per active tab) -->
<!-- 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>
@@ -230,6 +168,8 @@
</footer>
</div>
<script src="../settings/settings-data.js"></script>
<script src="../settings/settings.js"></script>
<script src="script.js"></script>
</body>
</html>