Extract reusable settings UI
Move the Commonwealth Online settings screen into a shared module with its own data, styles, and controller API. The pause menu now mounts the reusable component, keeps the prompt bar behavior consistent, and animates the panel open/close with a subtler transition.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Commonwealth Online — Pause Menu</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="../settings/settings.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="pause-screen" id="pauseScreen">
|
||||
@@ -85,71 +86,8 @@
|
||||
<p class="server-panel__players">12 / 24</p>
|
||||
</section>
|
||||
|
||||
<!-- Settings view: GAME SETTINGS | MULTIPLAYER SETTINGS -->
|
||||
<section class="settings-view" id="settingsPanel" aria-label="Settings" hidden>
|
||||
<div class="settings-panel">
|
||||
<h1 class="settings-panel__heading">SETTINGS</h1>
|
||||
|
||||
<div class="settings-tabs" id="settingsTabs" role="tablist" aria-label="Settings tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="settings-tab"
|
||||
id="tabGameSettings"
|
||||
role="tab"
|
||||
data-tab="game"
|
||||
aria-selected="false"
|
||||
aria-controls="gameSettingsPane"
|
||||
>
|
||||
FALLOUT 4
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="settings-tab is-selected"
|
||||
id="tabMultiplayerSettings"
|
||||
role="tab"
|
||||
data-tab="multiplayer"
|
||||
aria-selected="true"
|
||||
aria-controls="multiplayerSettingsPane"
|
||||
>
|
||||
MULTIPLAYER
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="settings-pane settings-pane--game"
|
||||
id="gameSettingsPane"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabGameSettings"
|
||||
hidden
|
||||
>
|
||||
<h2 class="settings-pane__heading">GAME SETTINGS</h2>
|
||||
<p class="settings-pane__description">
|
||||
Adjust Fallout 4 controls, display, audio, and gameplay options using the default game settings menu.
|
||||
</p>
|
||||
<button type="button" class="settings-open-btn" id="openGameSettingsBtn">
|
||||
OPEN FALLOUT 4 SETTINGS
|
||||
</button>
|
||||
<p class="settings-pane__note">
|
||||
This will open the vanilla Fallout 4 settings menu. Commonwealth Online will return after it closes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="settings-pane settings-pane--multiplayer"
|
||||
id="multiplayerSettingsPane"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabMultiplayerSettings"
|
||||
>
|
||||
<div
|
||||
class="settings-rows"
|
||||
id="settingsRows"
|
||||
aria-label="Multiplayer setting options"
|
||||
role="listbox"
|
||||
></div>
|
||||
<p class="settings-description" id="settingsDescription"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Settings view (content mounted by ../settings/settings.js) -->
|
||||
<section class="settings-view" id="settingsPanel" aria-label="Settings" hidden></section>
|
||||
|
||||
<!-- Bottom controller prompts (pause menu) -->
|
||||
<footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
|
||||
@@ -167,7 +105,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Settings mode prompt bar (contents updated by script.js per active tab) -->
|
||||
<!-- Settings mode prompt bar -->
|
||||
<footer class="prompt-bar prompt-bar--settings" id="settingsPromptBar" aria-label="Settings prompts" hidden>
|
||||
<div class="prompt" data-prompt="move">
|
||||
<span class="prompt__glyph prompt__glyph--text" aria-hidden="true">↑↓</span>
|
||||
@@ -230,6 +168,8 @@
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="../settings/settings-data.js"></script>
|
||||
<script src="../settings/settings.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -147,194 +147,11 @@
|
||||
|
||||
hydratePromptGlyphs();
|
||||
|
||||
// ── Multiplayer settings (data-driven) ─────────────────────────
|
||||
|
||||
var multiplayerSettings = [
|
||||
{
|
||||
section: "PROFILE",
|
||||
items: [
|
||||
{
|
||||
key: "profile.displayName",
|
||||
label: "Display Name",
|
||||
type: "text",
|
||||
value: "LoneWanderer",
|
||||
description: "The name other players see in Commonwealth Online."
|
||||
},
|
||||
{
|
||||
key: "profile.onlineStatus",
|
||||
label: "Online Status",
|
||||
type: "select",
|
||||
value: "Friends",
|
||||
options: ["Everyone", "Friends", "Nobody"],
|
||||
description: "Who can see when you are online."
|
||||
},
|
||||
{
|
||||
key: "profile.allowFriendJoin",
|
||||
label: "Allow Friend Join",
|
||||
type: "select",
|
||||
value: "Ask First",
|
||||
options: ["Always", "Ask First", "Never"],
|
||||
description: "How friends may join your current session."
|
||||
},
|
||||
{
|
||||
key: "profile.showLocationToFriends",
|
||||
label: "Show Location To Friends",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Share your current cell or region with friends."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
section: "VOICE CHAT",
|
||||
items: [
|
||||
{
|
||||
key: "voice.voiceChat",
|
||||
label: "Voice Chat",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Enable voice chat with other players."
|
||||
},
|
||||
{
|
||||
key: "voice.pushToTalk",
|
||||
label: "Push To Talk",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Require a key hold to transmit voice chat."
|
||||
},
|
||||
{
|
||||
key: "voice.pushToTalkKey",
|
||||
label: "Push To Talk Key",
|
||||
type: "keybind",
|
||||
value: "V",
|
||||
description: "Key used for push-to-talk voice chat."
|
||||
},
|
||||
{
|
||||
key: "voice.voiceChatVolume",
|
||||
label: "Voice Chat Volume",
|
||||
type: "slider",
|
||||
value: 85,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 5,
|
||||
description: "Adjusts incoming voice chat volume."
|
||||
},
|
||||
{
|
||||
key: "voice.mutePlayersByDefault",
|
||||
label: "Mute Players By Default",
|
||||
type: "toggle",
|
||||
value: false,
|
||||
description: "Start new sessions with other players muted."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
section: "MAP & SOCIAL",
|
||||
items: [
|
||||
{
|
||||
key: "map.showPlayerMarkers",
|
||||
label: "Show Player Markers",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Show other connected players on the world map."
|
||||
},
|
||||
{
|
||||
key: "map.showFriendMarkers",
|
||||
label: "Show Friend Markers",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Highlight friends with distinct map markers."
|
||||
},
|
||||
{
|
||||
key: "map.showNameplates",
|
||||
label: "Show Nameplates",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Show player nameplates above nearby remote players."
|
||||
},
|
||||
{
|
||||
key: "map.mapMarkerSize",
|
||||
label: "Map Marker Size",
|
||||
type: "select",
|
||||
value: "Medium",
|
||||
options: ["Small", "Medium", "Large"],
|
||||
description: "Size of player and friend markers on the map."
|
||||
},
|
||||
{
|
||||
key: "map.friendRequests",
|
||||
label: "Friend Requests",
|
||||
type: "select",
|
||||
value: "Everyone",
|
||||
options: ["Everyone", "Friends of Friends", "Nobody"],
|
||||
description: "Who can send you friend requests."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
section: "NETWORK",
|
||||
items: [
|
||||
{
|
||||
key: "network.regionPreference",
|
||||
label: "Region Preference",
|
||||
type: "select",
|
||||
value: "Auto",
|
||||
options: ["Auto", "North America", "Europe", "Asia", "Oceania"],
|
||||
description: "Preferred matchmaking region for public servers."
|
||||
},
|
||||
{
|
||||
key: "network.networkSmoothing",
|
||||
label: "Network Smoothing",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Smooth remote transforms when packets arrive late."
|
||||
},
|
||||
{
|
||||
key: "network.interpolationQuality",
|
||||
label: "Interpolation Quality",
|
||||
type: "select",
|
||||
value: "High",
|
||||
options: ["Low", "Medium", "High"],
|
||||
description: "Smoothness of remote player movement interpolation."
|
||||
},
|
||||
{
|
||||
key: "network.showPing",
|
||||
label: "Show Ping",
|
||||
type: "toggle",
|
||||
value: true,
|
||||
description: "Display your current latency on the HUD."
|
||||
},
|
||||
{
|
||||
key: "network.networkStatsOverlay",
|
||||
label: "Network Stats Overlay",
|
||||
type: "toggle",
|
||||
value: false,
|
||||
description: "Show packet and bandwidth stats for debugging."
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Flat list of all settings for keyboard navigation.
|
||||
var flatSettings = [];
|
||||
multiplayerSettings.forEach(function (section) {
|
||||
section.items.forEach(function (item) {
|
||||
flatSettings.push(item);
|
||||
});
|
||||
});
|
||||
|
||||
// ── DOM refs ───────────────────────────────────────────────────
|
||||
|
||||
var pauseScreen = document.getElementById("pauseScreen");
|
||||
var menu = document.getElementById("menu");
|
||||
var settingsPanel = document.getElementById("settingsPanel");
|
||||
var settingsTabsEl = document.getElementById("settingsTabs");
|
||||
var settingsRowsEl = document.getElementById("settingsRows");
|
||||
var settingsDescriptionEl = document.getElementById("settingsDescription");
|
||||
var gameSettingsPane = document.getElementById("gameSettingsPane");
|
||||
var multiplayerSettingsPane = document.getElementById("multiplayerSettingsPane");
|
||||
var openGameSettingsBtn = document.getElementById("openGameSettingsBtn");
|
||||
var tabGameSettings = document.getElementById("tabGameSettings");
|
||||
var tabMultiplayerSettings = document.getElementById("tabMultiplayerSettings");
|
||||
var pausePromptBar = document.getElementById("pausePromptBar");
|
||||
var settingsPromptBar = document.getElementById("settingsPromptBar");
|
||||
var mapPromptBar = document.getElementById("mapPromptBar");
|
||||
@@ -343,22 +160,21 @@
|
||||
var leftPanel = document.querySelector(".left-panel");
|
||||
var mapWorld = document.getElementById("mapWorld");
|
||||
|
||||
if (!menu || !settingsPanel || !settingsTabsEl || !settingsRowsEl) {
|
||||
if (!menu || !settingsPanel || !window.CO_Settings) {
|
||||
return;
|
||||
}
|
||||
|
||||
var settingsController = null;
|
||||
|
||||
var items = Array.prototype.slice.call(menu.querySelectorAll(".menu-item"));
|
||||
var SETTINGS_INDEX = 4;
|
||||
var TAB_IDS = ["game", "multiplayer"];
|
||||
|
||||
// viewMode: "pause" | "map" | "settings"
|
||||
// settingsFocus: "tabs" | "content"
|
||||
// activeTab: "game" | "multiplayer"
|
||||
var viewMode = "pause";
|
||||
var settingsFocus = "tabs";
|
||||
var activeTab = "multiplayer";
|
||||
var selectedIndex = -1;
|
||||
var settingIndex = 0;
|
||||
var SETTINGS_TRANSITION_MS = 220;
|
||||
var settingsHideFallbackId = 0;
|
||||
var settingsHideOnTransitionEnd = null;
|
||||
|
||||
// ── Pause menu selection ───────────────────────────────────────
|
||||
|
||||
@@ -435,443 +251,91 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ── Settings helpers ───────────────────────────────────────────
|
||||
|
||||
function getCurrentSetting() {
|
||||
return flatSettings[settingIndex] || null;
|
||||
}
|
||||
|
||||
function formatSettingValue(setting) {
|
||||
if (setting.type === "toggle") {
|
||||
return setting.value ? "ON" : "OFF";
|
||||
}
|
||||
if (setting.type === "slider") {
|
||||
return setting.value + "%";
|
||||
}
|
||||
return String(setting.value);
|
||||
}
|
||||
|
||||
function notifySettingChanged(setting) {
|
||||
window.CommonwealthOnlineUI.setMultiplayerSetting(setting.key, setting.value);
|
||||
}
|
||||
|
||||
// ── Prompt bar ────────────────────────────────────────────────
|
||||
|
||||
function updateSettingsPromptBar() {
|
||||
if (!settingsPromptBar) {
|
||||
return;
|
||||
}
|
||||
|
||||
var movePrompt = settingsPromptBar.querySelector('[data-prompt="move"]');
|
||||
var changePrompt = settingsPromptBar.querySelector('[data-prompt="change"]');
|
||||
var selectPrompt = settingsPromptBar.querySelector('[data-prompt="select"]');
|
||||
var tabPrompt = settingsPromptBar.querySelector('[data-prompt="tab"]');
|
||||
|
||||
if (activeTab === "game") {
|
||||
if (movePrompt) {
|
||||
movePrompt.hidden = true;
|
||||
}
|
||||
if (changePrompt) {
|
||||
changePrompt.hidden = false;
|
||||
var changeLabel = changePrompt.querySelector(".prompt__label");
|
||||
var changeGlyph = changePrompt.querySelector(".prompt__glyph");
|
||||
if (changeLabel) {
|
||||
changeLabel.textContent = "TAB";
|
||||
}
|
||||
if (changeGlyph) {
|
||||
changeGlyph.textContent = "←→";
|
||||
}
|
||||
}
|
||||
if (selectPrompt) {
|
||||
var selectLabel = selectPrompt.querySelector(".prompt__label");
|
||||
if (selectLabel) {
|
||||
selectLabel.textContent = "OPEN";
|
||||
}
|
||||
}
|
||||
if (tabPrompt) {
|
||||
tabPrompt.hidden = true;
|
||||
}
|
||||
} else {
|
||||
if (movePrompt) {
|
||||
movePrompt.hidden = false;
|
||||
}
|
||||
if (changePrompt) {
|
||||
changePrompt.hidden = false;
|
||||
var changeLabelMp = changePrompt.querySelector(".prompt__label");
|
||||
var changeGlyphMp = changePrompt.querySelector(".prompt__glyph");
|
||||
if (changeLabelMp) {
|
||||
changeLabelMp.textContent = "CHANGE";
|
||||
}
|
||||
if (changeGlyphMp) {
|
||||
changeGlyphMp.textContent = "←→";
|
||||
}
|
||||
}
|
||||
if (selectPrompt) {
|
||||
var selectLabelMp = selectPrompt.querySelector(".prompt__label");
|
||||
if (selectLabelMp) {
|
||||
selectLabelMp.textContent = "SELECT";
|
||||
}
|
||||
}
|
||||
if (tabPrompt) {
|
||||
tabPrompt.hidden = false;
|
||||
var tabLabel = tabPrompt.querySelector(".prompt__label");
|
||||
var tabGlyph = tabPrompt.querySelector(".prompt__glyph");
|
||||
if (tabLabel) {
|
||||
tabLabel.textContent = "SWITCH FOCUS";
|
||||
}
|
||||
if (tabGlyph) {
|
||||
tabGlyph.textContent = "TAB";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Settings rendering ─────────────────────────────────────────
|
||||
|
||||
function renderTabs() {
|
||||
var tabs = settingsTabsEl.querySelectorAll(".settings-tab");
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
var tab = tabs[i];
|
||||
var tabId = tab.getAttribute("data-tab");
|
||||
var isSelected = tabId === activeTab;
|
||||
tab.classList.toggle("is-selected", isSelected);
|
||||
tab.setAttribute("aria-selected", isSelected ? "true" : "false");
|
||||
tab.tabIndex = isSelected ? 0 : -1;
|
||||
}
|
||||
settingsTabsEl.classList.toggle("is-focus-region", settingsFocus === "tabs");
|
||||
}
|
||||
|
||||
function buildValueMarkup(setting) {
|
||||
if (setting.type === "slider") {
|
||||
var min = setting.min != null ? setting.min : 0;
|
||||
var max = setting.max != null ? setting.max : 100;
|
||||
var fill = ((setting.value - min) / (max - min)) * 100;
|
||||
return (
|
||||
'<span class="settings-slider" aria-hidden="true">' +
|
||||
'<span class="settings-slider__track">' +
|
||||
'<span class="settings-slider__fill" style="width:' + fill + '%"></span>' +
|
||||
'<span class="settings-slider__thumb" style="left:' + fill + '%"></span>' +
|
||||
"</span>" +
|
||||
'<span class="settings-slider__pct">' + setting.value + "%</span>" +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
|
||||
var usesCycler =
|
||||
setting.type === "toggle" ||
|
||||
setting.type === "select";
|
||||
|
||||
if (usesCycler) {
|
||||
return (
|
||||
'<span class="settings-cycler">' +
|
||||
'<span class="settings-cycler__arrow" aria-hidden="true"><</span>' +
|
||||
'<span class="settings-row__value-text"></span>' +
|
||||
'<span class="settings-cycler__arrow" aria-hidden="true">></span>' +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
|
||||
return '<span class="settings-row__value-text"></span>';
|
||||
}
|
||||
|
||||
function renderRows() {
|
||||
settingsRowsEl.innerHTML = "";
|
||||
var flatIndex = 0;
|
||||
|
||||
multiplayerSettings.forEach(function (section) {
|
||||
var sectionEl = document.createElement("div");
|
||||
sectionEl.className = "settings-section";
|
||||
|
||||
var heading = document.createElement("h3");
|
||||
heading.className = "settings-section__heading";
|
||||
heading.textContent = section.section;
|
||||
sectionEl.appendChild(heading);
|
||||
|
||||
section.items.forEach(function (setting) {
|
||||
var index = flatIndex;
|
||||
flatIndex += 1;
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className = "settings-row";
|
||||
button.setAttribute("role", "option");
|
||||
button.setAttribute("data-setting-index", String(index));
|
||||
button.setAttribute("data-setting-key", setting.key);
|
||||
|
||||
if (index === settingIndex) {
|
||||
button.classList.add("is-selected");
|
||||
}
|
||||
if (setting.type === "text" || setting.type === "keybind") {
|
||||
button.classList.add("is-readonly");
|
||||
}
|
||||
|
||||
button.innerHTML =
|
||||
'<span class="settings-row__label"></span>' +
|
||||
'<span class="settings-row__value">' + buildValueMarkup(setting) + "</span>" +
|
||||
'<span class="settings-row__bar" aria-hidden="true"></span>';
|
||||
|
||||
button.querySelector(".settings-row__label").textContent = setting.label;
|
||||
|
||||
var valueText = button.querySelector(".settings-row__value-text");
|
||||
if (valueText) {
|
||||
valueText.textContent = formatSettingValue(setting);
|
||||
}
|
||||
|
||||
button.addEventListener("click", function () {
|
||||
settingIndex = index;
|
||||
settingsFocus = "content";
|
||||
activeTab = "multiplayer";
|
||||
console.log("[CO Settings] Row selected:", setting.key);
|
||||
renderSettings();
|
||||
});
|
||||
|
||||
sectionEl.appendChild(button);
|
||||
});
|
||||
|
||||
settingsRowsEl.appendChild(sectionEl);
|
||||
});
|
||||
|
||||
settingsRowsEl.classList.toggle(
|
||||
"is-focus-region",
|
||||
settingsFocus === "content" && activeTab === "multiplayer"
|
||||
);
|
||||
}
|
||||
|
||||
function renderDescription() {
|
||||
if (!settingsDescriptionEl) {
|
||||
return;
|
||||
}
|
||||
var setting = getCurrentSetting();
|
||||
settingsDescriptionEl.textContent =
|
||||
setting && setting.description ? setting.description : "";
|
||||
}
|
||||
|
||||
function renderPanes() {
|
||||
if (gameSettingsPane) {
|
||||
gameSettingsPane.hidden = activeTab !== "game";
|
||||
gameSettingsPane.classList.toggle(
|
||||
"is-focus-region",
|
||||
settingsFocus === "content" && activeTab === "game"
|
||||
);
|
||||
}
|
||||
if (multiplayerSettingsPane) {
|
||||
multiplayerSettingsPane.hidden = activeTab !== "multiplayer";
|
||||
}
|
||||
if (openGameSettingsBtn) {
|
||||
openGameSettingsBtn.classList.toggle(
|
||||
"is-focused",
|
||||
settingsFocus === "content" && activeTab === "game"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSettings() {
|
||||
renderTabs();
|
||||
renderPanes();
|
||||
renderRows();
|
||||
renderDescription();
|
||||
updateSettingsPromptBar();
|
||||
}
|
||||
|
||||
function setActiveTab(tabId) {
|
||||
if (TAB_IDS.indexOf(tabId) === -1) {
|
||||
return;
|
||||
}
|
||||
activeTab = tabId;
|
||||
console.log("[CO Settings] Tab selected:", activeTab);
|
||||
renderSettings();
|
||||
}
|
||||
|
||||
function moveTab(delta) {
|
||||
var current = TAB_IDS.indexOf(activeTab);
|
||||
if (current < 0) {
|
||||
current = 0;
|
||||
}
|
||||
var next = current + delta;
|
||||
if (next < 0) {
|
||||
next = TAB_IDS.length - 1;
|
||||
} else if (next >= TAB_IDS.length) {
|
||||
next = 0;
|
||||
}
|
||||
setActiveTab(TAB_IDS[next]);
|
||||
}
|
||||
|
||||
function setSettingsFocus(region) {
|
||||
settingsFocus = region;
|
||||
console.log("[CO Settings] Focus:", settingsFocus);
|
||||
renderSettings();
|
||||
}
|
||||
|
||||
// ── Settings value changes ─────────────────────────────────────
|
||||
|
||||
function adjustSetting(delta) {
|
||||
var setting = getCurrentSetting();
|
||||
if (!setting || activeTab !== "multiplayer") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "text") {
|
||||
console.log("[CO Settings] Display name editing not implemented:", setting.key);
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "keybind") {
|
||||
console.log(
|
||||
"[CO Settings] Keybind selected (rebinding not implemented):",
|
||||
setting.key,
|
||||
setting.value
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "toggle") {
|
||||
setting.value = !setting.value;
|
||||
console.log("[CO Settings] Toggle:", setting.key, setting.value);
|
||||
notifySettingChanged(setting);
|
||||
renderSettings();
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "select") {
|
||||
var options = setting.options || [];
|
||||
if (!options.length) {
|
||||
return;
|
||||
}
|
||||
var current = options.indexOf(setting.value);
|
||||
if (current < 0) {
|
||||
current = 0;
|
||||
}
|
||||
var next = current + (delta === 0 ? 1 : delta);
|
||||
if (next < 0) {
|
||||
next = options.length - 1;
|
||||
} else if (next >= options.length) {
|
||||
next = 0;
|
||||
}
|
||||
setting.value = options[next];
|
||||
console.log("[CO Settings] Select:", setting.key, setting.value);
|
||||
notifySettingChanged(setting);
|
||||
renderSettings();
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "slider") {
|
||||
var step = setting.step != null ? setting.step : 5;
|
||||
var min = setting.min != null ? setting.min : 0;
|
||||
var max = setting.max != null ? setting.max : 100;
|
||||
var amount = delta === 0 ? step : delta * step;
|
||||
var nextValue = Math.max(min, Math.min(max, setting.value + amount));
|
||||
if (nextValue === setting.value) {
|
||||
return;
|
||||
}
|
||||
setting.value = nextValue;
|
||||
console.log("[CO Settings] Slider:", setting.key, setting.value);
|
||||
notifySettingChanged(setting);
|
||||
renderSettings();
|
||||
}
|
||||
}
|
||||
|
||||
function activateSetting() {
|
||||
var setting = getCurrentSetting();
|
||||
if (!setting || activeTab !== "multiplayer") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "toggle" || setting.type === "select" || setting.type === "slider") {
|
||||
adjustSetting(setting.type === "toggle" ? 0 : 1);
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "keybind") {
|
||||
console.log(
|
||||
"[CO Settings] Keybind selected (rebinding not implemented):",
|
||||
setting.key,
|
||||
setting.value
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (setting.type === "text") {
|
||||
console.log("[CO Settings] Display name editing not implemented:", setting.key);
|
||||
}
|
||||
}
|
||||
|
||||
function moveSettingRow(delta) {
|
||||
if (!flatSettings.length) {
|
||||
return;
|
||||
}
|
||||
var next = settingIndex + delta;
|
||||
if (next < 0) {
|
||||
next = flatSettings.length - 1;
|
||||
} else if (next >= flatSettings.length) {
|
||||
next = 0;
|
||||
}
|
||||
settingIndex = next;
|
||||
renderSettings();
|
||||
|
||||
var selectedRow = settingsRowsEl.querySelector(
|
||||
'[data-setting-index="' + settingIndex + '"]'
|
||||
);
|
||||
if (selectedRow && typeof selectedRow.scrollIntoView === "function") {
|
||||
selectedRow.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}
|
||||
|
||||
function openVanillaGameSettings() {
|
||||
window.CommonwealthOnlineUI.openGameSettings();
|
||||
}
|
||||
|
||||
// ── Tab / button click handlers ────────────────────────────────
|
||||
|
||||
if (tabGameSettings) {
|
||||
tabGameSettings.addEventListener("click", function () {
|
||||
settingsFocus = "tabs";
|
||||
setActiveTab("game");
|
||||
});
|
||||
}
|
||||
|
||||
if (tabMultiplayerSettings) {
|
||||
tabMultiplayerSettings.addEventListener("click", function () {
|
||||
settingsFocus = "tabs";
|
||||
setActiveTab("multiplayer");
|
||||
});
|
||||
}
|
||||
|
||||
if (openGameSettingsBtn) {
|
||||
openGameSettingsBtn.addEventListener("click", function () {
|
||||
settingsFocus = "content";
|
||||
activeTab = "game";
|
||||
renderSettings();
|
||||
openVanillaGameSettings();
|
||||
});
|
||||
}
|
||||
|
||||
// ── View mode transitions ──────────────────────────────────────
|
||||
|
||||
function cancelSettingsPanelHide() {
|
||||
if (settingsHideFallbackId) {
|
||||
window.clearTimeout(settingsHideFallbackId);
|
||||
settingsHideFallbackId = 0;
|
||||
}
|
||||
if (settingsHideOnTransitionEnd) {
|
||||
settingsPanel.removeEventListener("transitionend", settingsHideOnTransitionEnd);
|
||||
settingsHideOnTransitionEnd = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showSettingsPanelAnimated() {
|
||||
cancelSettingsPanelHide();
|
||||
if (pauseScreen) {
|
||||
pauseScreen.classList.add("is-settings-mode");
|
||||
}
|
||||
settingsPanel.hidden = false;
|
||||
settingsPanel.classList.remove("is-open");
|
||||
void settingsPanel.offsetWidth;
|
||||
settingsPanel.classList.add("is-open");
|
||||
}
|
||||
|
||||
function hideSettingsPanelAnimated(done) {
|
||||
if (settingsPanel.hidden) {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
cancelSettingsPanelHide();
|
||||
settingsPanel.classList.remove("is-open");
|
||||
|
||||
var completed = false;
|
||||
|
||||
function finishHide() {
|
||||
if (completed) {
|
||||
return;
|
||||
}
|
||||
completed = true;
|
||||
cancelSettingsPanelHide();
|
||||
if (viewMode === "settings" || settingsPanel.classList.contains("is-open")) {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (pauseScreen) {
|
||||
pauseScreen.classList.remove("is-settings-mode");
|
||||
}
|
||||
settingsPanel.hidden = true;
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
settingsHideOnTransitionEnd = function (event) {
|
||||
if (event.target !== settingsPanel || event.propertyName !== "opacity") {
|
||||
return;
|
||||
}
|
||||
finishHide();
|
||||
};
|
||||
|
||||
settingsPanel.addEventListener("transitionend", settingsHideOnTransitionEnd);
|
||||
settingsHideFallbackId = window.setTimeout(finishHide, SETTINGS_TRANSITION_MS + 80);
|
||||
}
|
||||
|
||||
function enterSettingsMode() {
|
||||
if (viewMode === "map") {
|
||||
exitMapMode();
|
||||
}
|
||||
|
||||
viewMode = "settings";
|
||||
settingsFocus = "tabs";
|
||||
activeTab = "multiplayer";
|
||||
settingIndex = 0;
|
||||
|
||||
console.log("[CO Pause Menu] Entering settings mode");
|
||||
window.CommonwealthOnlineUI.onOpenView("settings");
|
||||
|
||||
setSelected(SETTINGS_INDEX);
|
||||
|
||||
if (pauseScreen) {
|
||||
pauseScreen.classList.add("is-settings-mode");
|
||||
}
|
||||
settingsPanel.hidden = false;
|
||||
showSettingsPanelAnimated();
|
||||
if (pausePromptBar) {
|
||||
pausePromptBar.hidden = true;
|
||||
}
|
||||
if (settingsPromptBar) {
|
||||
settingsPromptBar.hidden = false;
|
||||
}
|
||||
if (mapPromptBar) {
|
||||
mapPromptBar.hidden = true;
|
||||
}
|
||||
@@ -880,7 +344,7 @@
|
||||
mapWorld.classList.remove("is-interactive");
|
||||
}
|
||||
|
||||
renderSettings();
|
||||
settingsController.show();
|
||||
}
|
||||
|
||||
function exitSettingsMode() {
|
||||
@@ -892,29 +356,35 @@
|
||||
console.log("[CO Pause Menu] Exiting settings mode");
|
||||
window.CommonwealthOnlineUI.onBack();
|
||||
|
||||
if (pauseScreen) {
|
||||
pauseScreen.classList.remove("is-settings-mode");
|
||||
}
|
||||
settingsPanel.hidden = true;
|
||||
if (pausePromptBar) {
|
||||
pausePromptBar.hidden = false;
|
||||
}
|
||||
if (settingsPromptBar) {
|
||||
settingsPromptBar.hidden = true;
|
||||
}
|
||||
settingsController.hide();
|
||||
|
||||
setSelected(SETTINGS_INDEX);
|
||||
hideSettingsPanelAnimated(function () {
|
||||
if (pausePromptBar) {
|
||||
pausePromptBar.hidden = false;
|
||||
}
|
||||
setSelected(SETTINGS_INDEX);
|
||||
});
|
||||
}
|
||||
|
||||
settingsController = window.CO_Settings.create({
|
||||
mount: settingsPanel,
|
||||
promptBar: settingsPromptBar,
|
||||
bridge: window.CommonwealthOnlineUI,
|
||||
layout: "embedded",
|
||||
onBack: function () {
|
||||
exitSettingsMode();
|
||||
}
|
||||
});
|
||||
|
||||
function enterMapMode() {
|
||||
if (viewMode === "settings") {
|
||||
cancelSettingsPanelHide();
|
||||
settingsController.hide();
|
||||
settingsPanel.classList.remove("is-open");
|
||||
settingsPanel.hidden = true;
|
||||
if (pauseScreen) {
|
||||
pauseScreen.classList.remove("is-settings-mode");
|
||||
}
|
||||
if (settingsPromptBar) {
|
||||
settingsPromptBar.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
viewMode = "map";
|
||||
@@ -979,72 +449,6 @@
|
||||
|
||||
// ── Keyboard navigation ────────────────────────────────────────
|
||||
|
||||
function handleSettingsKeydown(event) {
|
||||
switch (event.key) {
|
||||
case "ArrowUp":
|
||||
event.preventDefault();
|
||||
if (settingsFocus === "content" && activeTab === "multiplayer") {
|
||||
moveSettingRow(-1);
|
||||
}
|
||||
break;
|
||||
|
||||
case "ArrowDown":
|
||||
event.preventDefault();
|
||||
if (settingsFocus === "content" && activeTab === "multiplayer") {
|
||||
moveSettingRow(1);
|
||||
}
|
||||
break;
|
||||
|
||||
case "ArrowLeft":
|
||||
event.preventDefault();
|
||||
if (settingsFocus === "tabs") {
|
||||
moveTab(-1);
|
||||
} else if (activeTab === "multiplayer") {
|
||||
adjustSetting(-1);
|
||||
} else {
|
||||
moveTab(-1);
|
||||
}
|
||||
break;
|
||||
|
||||
case "ArrowRight":
|
||||
event.preventDefault();
|
||||
if (settingsFocus === "tabs") {
|
||||
moveTab(1);
|
||||
} else if (activeTab === "multiplayer") {
|
||||
adjustSetting(1);
|
||||
} else {
|
||||
moveTab(1);
|
||||
}
|
||||
break;
|
||||
|
||||
case "Tab":
|
||||
event.preventDefault();
|
||||
setSettingsFocus(settingsFocus === "tabs" ? "content" : "tabs");
|
||||
break;
|
||||
|
||||
case "Enter":
|
||||
case " ":
|
||||
event.preventDefault();
|
||||
if (settingsFocus === "tabs") {
|
||||
setSettingsFocus("content");
|
||||
} else if (activeTab === "game") {
|
||||
openVanillaGameSettings();
|
||||
} else {
|
||||
activateSetting();
|
||||
}
|
||||
break;
|
||||
|
||||
case "Escape":
|
||||
event.preventDefault();
|
||||
console.log("[CO Settings] Back");
|
||||
exitSettingsMode();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function handlePauseKeydown(event) {
|
||||
switch (event.key) {
|
||||
case "ArrowUp":
|
||||
@@ -1079,7 +483,7 @@
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (viewMode === "settings") {
|
||||
handleSettingsKeydown(event);
|
||||
settingsController.handleKeydown(event);
|
||||
return;
|
||||
}
|
||||
if (viewMode === "map") {
|
||||
@@ -1420,6 +824,4 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Open settings by default so the settings prototype is immediately visible.
|
||||
enterSettingsMode();
|
||||
})();
|
||||
|
||||
@@ -375,6 +375,7 @@ body {
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.4),
|
||||
0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
transition: opacity 220ms ease-out, visibility 220ms ease-out;
|
||||
}
|
||||
|
||||
.server-panel__heading {
|
||||
@@ -602,463 +603,8 @@ body {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Settings view (GAME / MULTIPLAYER tabs) ──────────────────── */
|
||||
/*
|
||||
* Pause nav stays on the far left with SETTINGS selected.
|
||||
* A single translucent panel holds two Fallout-style tabs and the
|
||||
* active tab content. Game Settings only explains opening vanilla FO4
|
||||
* settings; Multiplayer Settings is the custom CO options list.
|
||||
*/
|
||||
|
||||
.settings-view {
|
||||
position: absolute;
|
||||
top: calc(114px * var(--co-ui-scale));
|
||||
left: max(calc(320px * var(--co-ui-scale)), calc(28% + 20px * var(--co-ui-scale)));
|
||||
right: calc(32px * var(--co-ui-scale));
|
||||
bottom: calc(52px * var(--co-ui-scale));
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
transition: opacity 180ms ease-out, visibility 180ms ease-out;
|
||||
}
|
||||
|
||||
.settings-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding:
|
||||
calc(16px * var(--co-ui-scale))
|
||||
calc(20px * var(--co-ui-scale))
|
||||
calc(12px * var(--co-ui-scale));
|
||||
background: rgba(6, 12, 8, 0.78);
|
||||
border: 1px solid rgba(201, 168, 74, 0.28);
|
||||
box-shadow:
|
||||
inset 0 0 28px rgba(0, 0, 0, 0.35),
|
||||
0 2px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-panel__heading {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: calc(14px * var(--co-ui-scale));
|
||||
font-size: calc(22px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--co-amber);
|
||||
}
|
||||
|
||||
/* Fallout-style tab row */
|
||||
|
||||
.settings-tabs {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: calc(4px * var(--co-ui-scale));
|
||||
margin-bottom: calc(16px * var(--co-ui-scale));
|
||||
border-bottom: 1px solid rgba(62, 207, 74, 0.22);
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: calc(44px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(10px * var(--co-ui-scale))
|
||||
calc(16px * var(--co-ui-scale));
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
background: rgba(4, 10, 6, 0.35);
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
border-color var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: var(--co-text-pale);
|
||||
background: rgba(62, 207, 74, 0.08);
|
||||
}
|
||||
|
||||
.settings-tab.is-selected {
|
||||
color: var(--co-select-text);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
border-color: rgba(201, 168, 74, 0.55);
|
||||
box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
|
||||
}
|
||||
|
||||
.settings-tabs.is-focus-region .settings-tab.is-selected {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(62, 207, 74, 0.45),
|
||||
0 0 14px rgba(196, 168, 75, 0.28);
|
||||
}
|
||||
|
||||
.settings-tabs.is-focus-region .settings-tab:not(.is-selected) {
|
||||
outline: 1px solid rgba(62, 207, 74, 0.2);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* Tab panes */
|
||||
|
||||
.settings-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.settings-pane[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-pane--game {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding:
|
||||
calc(20px * var(--co-ui-scale))
|
||||
calc(8px * var(--co-ui-scale))
|
||||
calc(8px * var(--co-ui-scale));
|
||||
gap: calc(16px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-pane__heading {
|
||||
font-size: calc(18px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--co-text-pale);
|
||||
}
|
||||
|
||||
.settings-pane__description {
|
||||
max-width: calc(640px * var(--co-ui-scale));
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.5;
|
||||
color: var(--co-text-muted);
|
||||
}
|
||||
|
||||
.settings-open-btn {
|
||||
margin-top: calc(8px * var(--co-ui-scale));
|
||||
min-width: calc(360px * var(--co-ui-scale));
|
||||
min-height: calc(48px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(12px * var(--co-ui-scale))
|
||||
calc(24px * var(--co-ui-scale));
|
||||
border: 1px solid rgba(201, 168, 74, 0.45);
|
||||
background: rgba(8, 16, 10, 0.65);
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(16px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
border-color var(--co-transition),
|
||||
box-shadow var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-open-btn:hover,
|
||||
.settings-open-btn.is-focused {
|
||||
color: var(--co-select-text);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
border-color: rgba(201, 168, 74, 0.7);
|
||||
box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
|
||||
}
|
||||
|
||||
.settings-pane--game.is-focus-region .settings-open-btn {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(62, 207, 74, 0.4),
|
||||
0 0 14px rgba(196, 168, 75, 0.22);
|
||||
}
|
||||
|
||||
.settings-pane__note {
|
||||
max-width: calc(560px * var(--co-ui-scale));
|
||||
font-size: calc(12px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.45;
|
||||
color: var(--co-text-muted);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Multiplayer settings list */
|
||||
|
||||
.settings-pane--multiplayer {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.settings-rows {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(2px * var(--co-ui-scale));
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
padding: calc(2px * var(--co-ui-scale)) 0;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(2px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-section + .settings-section {
|
||||
margin-top: calc(10px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-section__heading {
|
||||
padding:
|
||||
calc(6px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale))
|
||||
calc(4px * var(--co-ui-scale));
|
||||
font-size: calc(11px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--co-amber);
|
||||
border-bottom: 1px solid rgba(62, 207, 74, 0.15);
|
||||
margin-bottom: calc(2px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
|
||||
align-items: center;
|
||||
gap: calc(20px * var(--co-ui-scale));
|
||||
min-height: calc(40px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(8px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale));
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(16px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-row__label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--co-text-pale);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.settings-row__value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: calc(12px * var(--co-ui-scale));
|
||||
min-width: 0;
|
||||
color: var(--co-text-pale);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-row__value-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Selected row: solid amber bar with a thin green leading edge */
|
||||
|
||||
.settings-row__bar {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--co-transition);
|
||||
z-index: 1;
|
||||
box-shadow:
|
||||
inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
|
||||
0 0 12px rgba(196, 168, 75, 0.2);
|
||||
}
|
||||
|
||||
.settings-row:hover:not(.is-selected) {
|
||||
background: rgba(201, 168, 74, 0.08);
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-row__bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-row.is-selected,
|
||||
.settings-row.is-selected .settings-row__label,
|
||||
.settings-row.is-selected .settings-row__value,
|
||||
.settings-row.is-selected .settings-row__value-text,
|
||||
.settings-row.is-selected .settings-cycler__arrow,
|
||||
.settings-row.is-selected .settings-slider__pct {
|
||||
color: var(--co-select-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-rows.is-focus-region .settings-row.is-selected .settings-row__bar {
|
||||
box-shadow:
|
||||
inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
|
||||
0 0 0 1px rgba(62, 207, 74, 0.35),
|
||||
0 0 14px rgba(196, 168, 75, 0.28);
|
||||
}
|
||||
|
||||
.settings-row.is-readonly:not(.is-selected) .settings-row__label,
|
||||
.settings-row.is-readonly:not(.is-selected) .settings-row__value-text {
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
/* Cycler: < value > */
|
||||
|
||||
.settings-cycler {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(10px * var(--co-ui-scale));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.settings-cycler__arrow {
|
||||
flex-shrink: 0;
|
||||
font-size: calc(14px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
color: var(--co-amber-muted);
|
||||
opacity: 0.75;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-cycler__arrow {
|
||||
color: var(--co-select-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.settings-row.is-readonly .settings-cycler__arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Slider control */
|
||||
|
||||
.settings-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(14px * var(--co-ui-scale));
|
||||
width: min(100%, calc(260px * var(--co-ui-scale)));
|
||||
}
|
||||
|
||||
.settings-slider__track {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: calc(2px * var(--co-ui-scale));
|
||||
background: rgba(216, 221, 208, 0.35);
|
||||
}
|
||||
|
||||
.settings-slider__fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(216, 221, 208, 0.85);
|
||||
}
|
||||
|
||||
.settings-slider__thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: calc(4px * var(--co-ui-scale));
|
||||
height: calc(14px * var(--co-ui-scale));
|
||||
background: var(--co-text-pale);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.settings-slider__pct {
|
||||
flex-shrink: 0;
|
||||
min-width: calc(42px * var(--co-ui-scale));
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--co-text-pale);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-slider__track {
|
||||
background: rgba(26, 28, 24, 0.35);
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-slider__fill,
|
||||
.settings-row.is-selected .settings-slider__thumb {
|
||||
background: var(--co-select-text);
|
||||
}
|
||||
|
||||
/* Description footer */
|
||||
|
||||
.settings-description {
|
||||
flex-shrink: 0;
|
||||
margin-top: calc(6px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(12px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale))
|
||||
calc(4px * var(--co-ui-scale));
|
||||
border-top: 1px solid rgba(201, 168, 74, 0.18);
|
||||
min-height: calc(44px * var(--co-ui-scale));
|
||||
font-size: calc(13px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.45;
|
||||
color: var(--co-text-muted);
|
||||
}
|
||||
|
||||
/* Settings prompt bar */
|
||||
|
||||
.prompt-bar--settings {
|
||||
gap: calc(28px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.prompt-bar--settings .prompt[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prompt__glyph--text {
|
||||
min-width: calc(28px * var(--co-ui-scale));
|
||||
height: calc(22px * var(--co-ui-scale));
|
||||
padding: 0 calc(6px * var(--co-ui-scale));
|
||||
border-radius: 2px;
|
||||
font-size: calc(11px * var(--co-ui-scale));
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Settings mode: keep pause nav, dim map more, hide server panel */
|
||||
/* (Settings panel styles live in ../settings/settings.css) */
|
||||
|
||||
.pause-screen.is-settings-mode .left-panel {
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user