Files
Commonwealth-Online-Public/ui/views/CommonwealthOnline/browser/components/server-details.js
T
andrew cfd1fab6b2 Revamp CommonwealthOnline browser UI and styles
Rework the CommonwealthOnline browser UI: restructure HTML into a nav + subpanel layout, add SVG/PNG/font assets and new sprites, and overhaul styles with a new font-face and refreshed color/spacing variables. Refactor components: tabs use a left nav list; filters extraction (renderRow) and reset focus handling; direct-connect renders into a dedicated container; server-list switched to compact row layout and adds a scroll indicator; server-details now uses a preview area and simplified preview/stats rendering. Update app logic: adjust focus zone handling (nextFocusZone), limit zones per tab, update connection status/count display, and avoid rendering details for direct-connect. Overall changes improve responsiveness, visual hierarchy, and focus/navigation behavior.
2026-06-08 14:40:00 +12:00

46 lines
1.3 KiB
JavaScript

(function () {
"use strict";
window.CO_ServerDetails = {
render: function (root, state) {
var activePane = root.querySelector('.co-tab-pane[data-pane="' + state.activeTab + '"]');
var el = activePane && activePane.querySelector(".co-preview-area");
if (!el) return;
var server = state.servers[state.selectedServerIndex];
if (!server || !server.previewImage) {
el.innerHTML = "";
el.classList.add("co-preview-hidden");
return;
}
el.classList.remove("co-preview-hidden");
var stats = [
server.worldspace,
server.mode,
server.players + "/" + server.maxPlayers,
server.ping + " ms"
].filter(Boolean).join(" \u00b7 ");
el.innerHTML =
'<div class="co-preview"><img src="' + escapeAttr(server.previewImage) + '" alt="Preview"></div>' +
'<div class="co-preview-caption">' +
'<div class="co-preview-name">' + escapeHtml(server.name) + "</div>" +
'<div class="co-preview-stats">' + escapeHtml(stats) + "</div>" +
"</div>";
}
};
function escapeHtml(value) {
return String(value)
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
function escapeAttr(value) {
return String(value).replace(/"/g, "&quot;");
}
})();