Embed server browser as main menu modal

Refactors the browser UI into a reusable `CO_Browser.create()` module and adds embedded modal styling so MULTIPLAYER opens inside the main menu instead of swapping to a separate view. Updates main-menu JS/CSS to host, animate, and route input for the browser panel while keeping nav and prompts in sync. On the C++ side, PrismaUI now drives browser show/hide and event dispatch through the main menu view, and `ServerBrowserBridge::SetView()` was added so bridge events target the active host view.
This commit is contained in:
2026-07-07 17:35:15 +12:00
parent 2961eb6512
commit 9447bc308f
12 changed files with 1514 additions and 982 deletions
@@ -5,6 +5,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">
@@ -56,6 +58,9 @@
<!-- 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>
<!-- Bottom controller prompts (main menu) -->
<footer class="prompt-bar" id="mainPromptBar" aria-label="Controller prompts">
<div class="prompt">
@@ -103,6 +108,19 @@
<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>