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.
This commit is contained in:
@@ -73,7 +73,7 @@
|
||||
</aside>
|
||||
|
||||
<!-- Top-right server info -->
|
||||
<section class="server-panel" aria-label="Current server">
|
||||
<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">
|
||||
@@ -85,6 +85,72 @@
|
||||
<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">
|
||||
@@ -101,6 +167,34 @@
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user