Commonwealth-Online/Commonwealth-Online-Public
2
0
Fork 0
Code Pull Requests Activity
Files
a30690cc9fbef580ce8a35645e095fd81e459671
Commonwealth-Online-Public/ui/views/CommonwealthOnline/main-menu/index.html
T
andrew 2a3e614a47 Add quit confirmation to main menu 
Implement a quit confirmation dialog that appears when the QUIT button is selected on the main menu. The dialog displays 'EXIT GAME?' with YES/NO options. YES sends a coAction quit request to the plugin, which hides the overlay, disconnects any active server session, and sets RE::Main::quitGame to exit the game. NO returns to the main menu. Includes full keyboard (arrow keys, Enter, Escape), gamepad (dpad, A/B buttons), and mouse support. Default selection is NO.
2026-07-07 22:33:33 +12:00

144 lines
6.6 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Commonwealth Online — Main Menu</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../settings/settings.css">
<link rel="stylesheet" href="../browser/styles.css">
<link rel="stylesheet" href="../browser/browser-modal.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>
<!-- Server browser view (content mounted by ../browser/browser.js) -->
<section class="browser-view" id="browserPanel" aria-label="Server browser" hidden></section>
<!-- Quit confirmation -->
<section class="quit-confirm" id="quitConfirmPanel" aria-label="Quit confirmation" hidden>
<div class="quit-confirm__dialog" role="dialog" aria-modal="true" aria-labelledby="quitConfirmTitle">
<h2 class="quit-confirm__title" id="quitConfirmTitle">EXIT GAME?</h2>
<nav class="quit-confirm__options" id="quitConfirmOptions" aria-label="Quit confirmation options">
<button type="button" class="menu-item quit-confirm__option" data-index="0" data-choice="yes">
<span class="menu-item__label">YES</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item quit-confirm__option" data-index="1" data-choice="no">
<span class="menu-item__label">NO</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
</nav>
</div>
</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="../browser/components/layout.js"></script>
<script src="../browser/components/theme.js"></script>
<script src="../browser/components/mock-data.js"></script>
<script src="../browser/components/tabs.js"></script>
<script src="../browser/components/filters.js"></script>
<script src="../browser/components/server-list.js"></script>
<script src="../browser/components/server-details.js"></script>
<script src="../browser/components/controller-glyphs.js"></script>
<script src="../browser/components/controller-icons.js"></script>
<script src="../browser/components/controller-prompts.js"></script>
<script src="../browser/components/direct-connect.js"></script>
<script src="../browser/components/hover.js"></script>
<script src="../browser/browser.js"></script>
<script src="script.js"></script>
</body>
</html>
View Git Blame Copy Permalink