Commonwealth-Online/Commonwealth-Online-Public
3
0
Fork 0
Code Pull Requests Activity
Files
1af6bbd3d25c9f0dd0f57a9007b7c8b12207ebee
Commonwealth-Online-Public/ui/views/CommonwealthOnline/pause-menu/index.html
T
andrew 1af6bbd3d2 Pause menu map: smooth zoom and pan with inertia 
Replace snappy map zoom and drag behavior with smooth animations. Wheel zoom now eases toward the cursor, keeping the map point under the pointer fixed during scale. Drag pan eases toward the pointer and coasts with inertia on release, with edge clamps and friction damping. Animations cancel each other to prevent fighting. Update tab labels from full names to shorter versions (FALLOUT 4, MULTIPLAYER). Add dev log entry and vanilla settings integration plan.
2026-07-04 23:27:02 +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"
>
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>
<!-- 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