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

Embed server browser as main menu modal

Browse Source 
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:
andrew
2026-07-07 17:35:15 +12:00
parent 2961eb6512
commit 9447bc308f
12 changed files with 1514 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/views/CommonwealthOnline/browser/index.html
+1 -85
View File
@@ -6,91 +6,6 @@
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="co-root" id="coRoot">
<div class="co-panel" id="coPanel">
<svg class="co-panel-border co-panel-border-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">
<polyline class="co-panel-border-line" points="0 10.97 0 0 1075.97 0 1075.97 10.5"/>
</svg>
<svg class="co-panel-border co-panel-border-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">
<polyline class="co-panel-border-line" points="0 0.47 0 8.91 1075.97 8.97 1075.97 0.47"/>
</svg>
<div class="co-subpanel">
<nav class="co-nav-list"></nav>
<div class="co-subpanel-content">
<div class="co-tab-content">
<div class="co-tab-pane" data-pane="direct-connect">
<header class="co-subpanel-header">
<h2 class="co-subpanel-title">Direct Connect</h2>
</header>
<div class="co-direct-connect"></div>
</div>
<div class="co-tab-pane active" data-pane="server-browser">
<header class="co-subpanel-header">
<h2 class="co-subpanel-title" id="coSubpanelTitle">Servers</h2>
<div class="co-subpanel-meta">
<span id="coConnectionStatus">Online</span>
<span class="co-count" id="coServerCount"></span>
</div>
</header>
<div class="co-filters"></div>
<div class="co-server-list-wrap">
<div class="co-server-list"></div>
<div class="co-scroll-indicator" aria-hidden="true">&raquo;&raquo;</div>
</div>
</div>
<div class="co-tab-pane" data-pane="local">
<header class="co-subpanel-header">
<h2 class="co-subpanel-title" id="coLocalTitle">Local Servers</h2>
<div class="co-subpanel-meta">
<span class="co-count" id="coLocalCount"></span>
</div>
</header>
<div class="co-server-list-wrap">
<div class="co-server-list co-local-list"></div>
<div class="co-scroll-indicator" aria-hidden="true">&raquo;&raquo;</div>
</div>
</div>
<div class="co-tab-pane" data-pane="favorites">
<header class="co-subpanel-header">
<h2 class="co-subpanel-title">Favorites</h2>
</header>
<div class="co-preview-area"></div>
<div class="co-server-list-wrap">
<div class="co-server-list co-favorites-list"></div>
<div class="co-scroll-indicator" aria-hidden="true">&raquo;&raquo;</div>
</div>
</div>
<div class="co-tab-pane" data-pane="recent">
<header class="co-subpanel-header">
<h2 class="co-subpanel-title">Recent</h2>
</header>
<div class="co-preview-area"></div>
<div class="co-server-list-wrap">
<div class="co-server-list co-recent-list"></div>
<div class="co-scroll-indicator" aria-hidden="true">&raquo;&raquo;</div>
</div>
</div>
</div>
</div>
</div>
<footer class="co-action-bar">
<div class="co-prompts"></div>
</footer>
<div class="co-join-overlay hidden" id="coJoinOverlay">
<div class="co-spinner"></div>
<p id="coJoinMessage">Connecting...</p>
</div>
</div>
</div>
<script src="./components/layout.js"></script>
<script src="./components/theme.js"></script>
<script src="./components/mock-data.js"></script>
@@ -103,6 +18,7 @@
<script src="./components/controller-prompts.js"></script>
<script src="./components/direct-connect.js"></script>
<script src="./components/hover.js"></script>
<script src="./browser.js"></script>
<script src="./app.js"></script>
</body>
</html>