andrew
cfd1fab6b2
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.
56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
window.CO_DirectConnect = {
|
|
render: function (root, state) {
|
|
var pane = root.querySelector('[data-pane="direct-connect"]');
|
|
if (!pane) return;
|
|
|
|
var container = pane.querySelector(".co-direct-connect");
|
|
if (!container) return;
|
|
|
|
var address = state.directConnect.address || "127.0.0.1";
|
|
var port = state.directConnect.port || "7777";
|
|
|
|
container.innerHTML =
|
|
'<div class="co-direct-row">' +
|
|
'<label for="co-dc-address">Server Address</label>' +
|
|
'<input class="co-filter-input" id="co-dc-address" type="text" value="' + escapeAttr(address) + '">' +
|
|
"</div>" +
|
|
'<div class="co-direct-row">' +
|
|
'<label for="co-dc-port">Port</label>' +
|
|
'<input class="co-filter-input" id="co-dc-port" type="text" value="' + escapeAttr(port) + '">' +
|
|
"</div>" +
|
|
'<button type="button" class="co-btn co-dc-connect">Connect</button>' +
|
|
'<p class="co-detail-desc" style="margin-top:16px;color:var(--co-text-dim);font-size:var(--co-font-sm)">Enter a server address to connect directly without browsing the list.</p>';
|
|
},
|
|
|
|
bind: function (root, onConnect) {
|
|
var pane = root.querySelector('[data-pane="direct-connect"]');
|
|
if (!pane) return;
|
|
|
|
pane.addEventListener("click", function (e) {
|
|
if (!e.target.closest(".co-dc-connect")) return;
|
|
var address = pane.querySelector("#co-dc-address");
|
|
var port = pane.querySelector("#co-dc-port");
|
|
onConnect(address ? address.value : "", port ? port.value : "");
|
|
});
|
|
},
|
|
|
|
getValues: function (root) {
|
|
var pane = root.querySelector('[data-pane="direct-connect"]');
|
|
if (!pane) return { address: "127.0.0.1", port: "7777" };
|
|
var address = pane.querySelector("#co-dc-address");
|
|
var port = pane.querySelector("#co-dc-port");
|
|
return {
|
|
address: address ? address.value : "127.0.0.1",
|
|
port: port ? port.value : "7777"
|
|
};
|
|
}
|
|
};
|
|
|
|
function escapeAttr(value) {
|
|
return String(value).replace(/"/g, """);
|
|
}
|
|
})();
|