andrew
8acdb4f555
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.
557 lines
16 KiB
JavaScript
557 lines
16 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
var TAB_IDS = ["game", "multiplayer"];
|
|
|
|
function deepCloneSettingsData(source) {
|
|
return JSON.parse(JSON.stringify(source || []));
|
|
}
|
|
|
|
function flattenSettings(sections) {
|
|
var flat = [];
|
|
sections.forEach(function (section) {
|
|
section.items.forEach(function (item) {
|
|
flat.push(item);
|
|
});
|
|
});
|
|
return flat;
|
|
}
|
|
|
|
function buildMarkup(options) {
|
|
var showHeading = options.showHeading !== false;
|
|
var gameTabLabel = options.gameTabLabel || "FALLOUT 4";
|
|
var multiplayerTabLabel = options.multiplayerTabLabel || "MULTIPLAYER";
|
|
|
|
return (
|
|
'<div class="co-settings' +
|
|
(options.layout === "standalone" ? " co-settings--standalone" : "") +
|
|
'">' +
|
|
'<div class="settings-panel">' +
|
|
(showHeading
|
|
? '<h1 class="settings-panel__heading">SETTINGS</h1>'
|
|
: "") +
|
|
'<div class="settings-tabs" data-co-settings-tabs role="tablist" aria-label="Settings tabs">' +
|
|
'<button type="button" class="settings-tab" role="tab" data-tab="game" aria-selected="false" aria-controls="gameSettingsPane">' +
|
|
gameTabLabel +
|
|
"</button>" +
|
|
'<button type="button" class="settings-tab is-selected" role="tab" data-tab="multiplayer" aria-selected="true" aria-controls="multiplayerSettingsPane">' +
|
|
multiplayerTabLabel +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="settings-pane-stack">' +
|
|
'<div class="settings-pane settings-pane--game" data-co-settings-pane="game" role="tabpanel" 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" data-co-settings-open-game>' +
|
|
"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" data-co-settings-pane="multiplayer" role="tabpanel">' +
|
|
'<div class="settings-rows" data-co-settings-rows aria-label="Multiplayer setting options" role="listbox"></div>' +
|
|
'<p class="settings-description" data-co-settings-description></p>' +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>"
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Reusable Commonwealth Online settings UI.
|
|
*
|
|
* Usage (pause menu, main menu, etc.):
|
|
*
|
|
* var settings = CO_Settings.create({
|
|
* mount: document.getElementById("settingsMount"),
|
|
* promptBar: document.getElementById("settingsPromptBar"), // optional
|
|
* bridge: window.CommonwealthOnlineUI,
|
|
* onBack: function () { ... },
|
|
* layout: "embedded", // or "standalone"
|
|
* });
|
|
* settings.show();
|
|
*/
|
|
function create(options) {
|
|
if (!options || !options.mount) {
|
|
throw new Error("CO_Settings.create requires a mount element");
|
|
}
|
|
|
|
var mountEl = options.mount;
|
|
var promptBarEl = options.promptBar || null;
|
|
var bridge = options.bridge || {};
|
|
var onBack = typeof options.onBack === "function" ? options.onBack : function () {};
|
|
var layout = options.layout || "embedded";
|
|
var showHeading = options.showHeading !== false;
|
|
|
|
var multiplayerSettings = deepCloneSettingsData(
|
|
options.settingsData || window.CO_SettingsData
|
|
);
|
|
var flatSettings = flattenSettings(multiplayerSettings);
|
|
|
|
var visible = false;
|
|
var settingsFocus = "tabs";
|
|
var activeTab = options.defaultTab || "multiplayer";
|
|
var settingIndex = 0;
|
|
|
|
mountEl.innerHTML = buildMarkup({
|
|
layout: layout,
|
|
showHeading: showHeading,
|
|
gameTabLabel: options.gameTabLabel,
|
|
multiplayerTabLabel: options.multiplayerTabLabel
|
|
});
|
|
|
|
var rootEl = mountEl.querySelector(".co-settings");
|
|
var settingsTabsEl = mountEl.querySelector("[data-co-settings-tabs]");
|
|
var settingsRowsEl = mountEl.querySelector("[data-co-settings-rows]");
|
|
var settingsDescriptionEl = mountEl.querySelector("[data-co-settings-description]");
|
|
var gameSettingsPane = mountEl.querySelector('[data-co-settings-pane="game"]');
|
|
var multiplayerSettingsPane = mountEl.querySelector('[data-co-settings-pane="multiplayer"]');
|
|
var openGameSettingsBtn = mountEl.querySelector("[data-co-settings-open-game]");
|
|
var tabButtons = settingsTabsEl
|
|
? Array.prototype.slice.call(settingsTabsEl.querySelectorAll(".settings-tab"))
|
|
: [];
|
|
|
|
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) {
|
|
if (typeof bridge.setMultiplayerSetting === "function") {
|
|
bridge.setMultiplayerSetting(setting.key, setting.value);
|
|
}
|
|
}
|
|
|
|
function renderTabs() {
|
|
if (!settingsTabsEl) {
|
|
return;
|
|
}
|
|
|
|
tabButtons.forEach(function (tab) {
|
|
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() {
|
|
if (!settingsRowsEl) {
|
|
return;
|
|
}
|
|
|
|
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";
|
|
render();
|
|
});
|
|
|
|
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 render() {
|
|
renderTabs();
|
|
renderPanes();
|
|
renderRows();
|
|
renderDescription();
|
|
}
|
|
|
|
function setActiveTab(tabId) {
|
|
if (TAB_IDS.indexOf(tabId) === -1) {
|
|
return;
|
|
}
|
|
activeTab = tabId;
|
|
render();
|
|
}
|
|
|
|
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;
|
|
render();
|
|
}
|
|
|
|
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;
|
|
notifySettingChanged(setting);
|
|
render();
|
|
return;
|
|
}
|
|
|
|
if (setting.type === "select") {
|
|
var optionsList = setting.options || [];
|
|
if (!optionsList.length) {
|
|
return;
|
|
}
|
|
var current = optionsList.indexOf(setting.value);
|
|
if (current < 0) {
|
|
current = 0;
|
|
}
|
|
var next = current + (delta === 0 ? 1 : delta);
|
|
if (next < 0) {
|
|
next = optionsList.length - 1;
|
|
} else if (next >= optionsList.length) {
|
|
next = 0;
|
|
}
|
|
setting.value = optionsList[next];
|
|
notifySettingChanged(setting);
|
|
render();
|
|
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;
|
|
notifySettingChanged(setting);
|
|
render();
|
|
}
|
|
}
|
|
|
|
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;
|
|
render();
|
|
|
|
if (settingsRowsEl) {
|
|
var selectedRow = settingsRowsEl.querySelector(
|
|
'[data-setting-index="' + settingIndex + '"]'
|
|
);
|
|
if (selectedRow && typeof selectedRow.scrollIntoView === "function") {
|
|
selectedRow.scrollIntoView({ block: "nearest" });
|
|
}
|
|
}
|
|
}
|
|
|
|
function openVanillaGameSettings() {
|
|
if (typeof bridge.openGameSettings === "function") {
|
|
bridge.openGameSettings();
|
|
}
|
|
}
|
|
|
|
tabButtons.forEach(function (tab) {
|
|
tab.addEventListener("click", function () {
|
|
settingsFocus = "tabs";
|
|
setActiveTab(tab.getAttribute("data-tab"));
|
|
});
|
|
});
|
|
|
|
if (openGameSettingsBtn) {
|
|
openGameSettingsBtn.addEventListener("click", function () {
|
|
settingsFocus = "content";
|
|
activeTab = "game";
|
|
render();
|
|
openVanillaGameSettings();
|
|
});
|
|
}
|
|
|
|
function show() {
|
|
visible = true;
|
|
settingsFocus = "tabs";
|
|
activeTab = options.defaultTab || "multiplayer";
|
|
settingIndex = 0;
|
|
if (promptBarEl) {
|
|
promptBarEl.hidden = false;
|
|
}
|
|
render();
|
|
}
|
|
|
|
function hide() {
|
|
visible = false;
|
|
if (promptBarEl) {
|
|
promptBarEl.hidden = true;
|
|
}
|
|
}
|
|
|
|
function handleKeydown(event) {
|
|
if (!visible) {
|
|
return false;
|
|
}
|
|
|
|
switch (event.key) {
|
|
case "ArrowUp":
|
|
event.preventDefault();
|
|
if (settingsFocus === "content" && activeTab === "multiplayer") {
|
|
moveSettingRow(-1);
|
|
}
|
|
return true;
|
|
|
|
case "ArrowDown":
|
|
event.preventDefault();
|
|
if (settingsFocus === "content" && activeTab === "multiplayer") {
|
|
moveSettingRow(1);
|
|
}
|
|
return true;
|
|
|
|
case "ArrowLeft":
|
|
event.preventDefault();
|
|
if (settingsFocus === "tabs") {
|
|
moveTab(-1);
|
|
} else if (activeTab === "multiplayer") {
|
|
adjustSetting(-1);
|
|
} else {
|
|
moveTab(-1);
|
|
}
|
|
return true;
|
|
|
|
case "ArrowRight":
|
|
event.preventDefault();
|
|
if (settingsFocus === "tabs") {
|
|
moveTab(1);
|
|
} else if (activeTab === "multiplayer") {
|
|
adjustSetting(1);
|
|
} else {
|
|
moveTab(1);
|
|
}
|
|
return true;
|
|
|
|
case "Tab":
|
|
event.preventDefault();
|
|
setSettingsFocus(settingsFocus === "tabs" ? "content" : "tabs");
|
|
return true;
|
|
|
|
case "Enter":
|
|
case " ":
|
|
event.preventDefault();
|
|
if (settingsFocus === "tabs") {
|
|
setSettingsFocus("content");
|
|
} else if (activeTab === "game") {
|
|
openVanillaGameSettings();
|
|
} else {
|
|
activateSetting();
|
|
}
|
|
return true;
|
|
|
|
case "Escape":
|
|
event.preventDefault();
|
|
hide();
|
|
onBack();
|
|
return true;
|
|
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function destroy() {
|
|
hide();
|
|
mountEl.innerHTML = "";
|
|
}
|
|
|
|
return {
|
|
show: show,
|
|
hide: hide,
|
|
isVisible: function () {
|
|
return visible;
|
|
},
|
|
handleKeydown: handleKeydown,
|
|
render: render,
|
|
destroy: destroy,
|
|
getSettingsData: function () {
|
|
return multiplayerSettings;
|
|
}
|
|
};
|
|
}
|
|
|
|
window.CO_Settings = {
|
|
create: create
|
|
};
|
|
})();
|