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.
46 lines
1.3 KiB
JavaScript
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, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">");
|
|
}
|
|
|
|
function escapeAttr(value) {
|
|
return String(value).replace(/"/g, """);
|
|
}
|
|
})();
|