mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-22 02:07:43 +00:00
584fa9fb5d
## Description: Added a colors tab in territory patterns modal so players can select their color. Refactored the PrivilegeChecker, removed custom flag checks since we no longer support custom flags. <img width="479" height="345" alt="Screenshot 2025-09-27 at 5 01 17 PM" src="https://github.com/user-attachments/assets/ad96da65-f0eb-4731-a861-e6e5fcb4566a" /> ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: evan
202 lines
5.2 KiB
TypeScript
202 lines
5.2 KiB
TypeScript
import { Cosmetics } from "../CosmeticSchemas";
|
|
import { PlayerPattern } from "../Schemas";
|
|
|
|
const PATTERN_KEY = "territoryPattern";
|
|
|
|
export class UserSettings {
|
|
get(key: string, defaultValue: boolean): boolean {
|
|
const value = localStorage.getItem(key);
|
|
if (!value) return defaultValue;
|
|
|
|
if (value === "true") return true;
|
|
|
|
if (value === "false") return false;
|
|
|
|
return defaultValue;
|
|
}
|
|
|
|
set(key: string, value: boolean) {
|
|
localStorage.setItem(key, value ? "true" : "false");
|
|
}
|
|
|
|
getFloat(key: string, defaultValue: number): number {
|
|
const value = localStorage.getItem(key);
|
|
if (!value) return defaultValue;
|
|
|
|
const floatValue = parseFloat(value);
|
|
if (isNaN(floatValue)) return defaultValue;
|
|
|
|
return floatValue;
|
|
}
|
|
|
|
setFloat(key: string, value: number) {
|
|
localStorage.setItem(key, value.toString());
|
|
}
|
|
|
|
emojis() {
|
|
return this.get("settings.emojis", true);
|
|
}
|
|
|
|
performanceOverlay() {
|
|
return this.get("settings.performanceOverlay", false);
|
|
}
|
|
|
|
alertFrame() {
|
|
return this.get("settings.alertFrame", true);
|
|
}
|
|
|
|
anonymousNames() {
|
|
return this.get("settings.anonymousNames", false);
|
|
}
|
|
|
|
lobbyIdVisibility() {
|
|
return this.get("settings.lobbyIdVisibility", true);
|
|
}
|
|
|
|
fxLayer() {
|
|
return this.get("settings.specialEffects", true);
|
|
}
|
|
|
|
structureSprites() {
|
|
return this.get("settings.structureSprites", true);
|
|
}
|
|
|
|
darkMode() {
|
|
return this.get("settings.darkMode", false);
|
|
}
|
|
|
|
leftClickOpensMenu() {
|
|
return this.get("settings.leftClickOpensMenu", false);
|
|
}
|
|
|
|
territoryPatterns() {
|
|
return this.get("settings.territoryPatterns", true);
|
|
}
|
|
|
|
focusLocked() {
|
|
return false;
|
|
// TODO: renable when performance issues are fixed.
|
|
this.get("settings.focusLocked", true);
|
|
}
|
|
|
|
toggleLeftClickOpenMenu() {
|
|
this.set("settings.leftClickOpensMenu", !this.leftClickOpensMenu());
|
|
}
|
|
|
|
toggleFocusLocked() {
|
|
this.set("settings.focusLocked", !this.focusLocked());
|
|
}
|
|
|
|
toggleEmojis() {
|
|
this.set("settings.emojis", !this.emojis());
|
|
}
|
|
|
|
togglePerformanceOverlay() {
|
|
this.set("settings.performanceOverlay", !this.performanceOverlay());
|
|
}
|
|
|
|
toggleAlertFrame() {
|
|
this.set("settings.alertFrame", !this.alertFrame());
|
|
}
|
|
|
|
toggleRandomName() {
|
|
this.set("settings.anonymousNames", !this.anonymousNames());
|
|
}
|
|
|
|
toggleLobbyIdVisibility() {
|
|
this.set("settings.lobbyIdVisibility", !this.lobbyIdVisibility());
|
|
}
|
|
|
|
toggleFxLayer() {
|
|
this.set("settings.specialEffects", !this.fxLayer());
|
|
}
|
|
|
|
toggleStructureSprites() {
|
|
this.set("settings.structureSprites", !this.structureSprites());
|
|
}
|
|
|
|
toggleTerritoryPatterns() {
|
|
this.set("settings.territoryPatterns", !this.territoryPatterns());
|
|
}
|
|
|
|
toggleDarkMode() {
|
|
this.set("settings.darkMode", !this.darkMode());
|
|
if (this.darkMode()) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}
|
|
|
|
// For development only. Used for testing patterns, set in the console manually.
|
|
getDevOnlyPattern(): PlayerPattern | undefined {
|
|
const data = localStorage.getItem("dev-pattern") ?? undefined;
|
|
if (data === undefined) return undefined;
|
|
return {
|
|
name: "dev-pattern",
|
|
patternData: data,
|
|
colorPalette: {
|
|
name: "dev-color-palette",
|
|
primaryColor: localStorage.getItem("dev-primary") ?? "#ffffff",
|
|
secondaryColor: localStorage.getItem("dev-secondary") ?? "#000000",
|
|
},
|
|
} satisfies PlayerPattern;
|
|
}
|
|
|
|
getSelectedPatternName(cosmetics: Cosmetics | null): PlayerPattern | null {
|
|
if (cosmetics === null) return null;
|
|
let data = localStorage.getItem(PATTERN_KEY) ?? null;
|
|
if (data === null) return null;
|
|
const patternPrefix = "pattern:";
|
|
if (data.startsWith(patternPrefix)) {
|
|
data = data.slice(patternPrefix.length);
|
|
}
|
|
const [patternName, colorPalette] = data.split(":");
|
|
const pattern = cosmetics.patterns[patternName];
|
|
if (pattern === undefined) return null;
|
|
return {
|
|
name: patternName,
|
|
patternData: pattern.pattern,
|
|
colorPalette: cosmetics.colorPalettes?.[colorPalette],
|
|
} satisfies PlayerPattern;
|
|
}
|
|
|
|
setSelectedPatternName(patternName: string | undefined): void {
|
|
if (patternName === undefined) {
|
|
localStorage.removeItem(PATTERN_KEY);
|
|
} else {
|
|
localStorage.setItem(PATTERN_KEY, patternName);
|
|
}
|
|
}
|
|
|
|
getSelectedColor(): string | undefined {
|
|
const data = localStorage.getItem("settings.territoryColor") ?? undefined;
|
|
if (data === undefined) return undefined;
|
|
return data;
|
|
}
|
|
|
|
setSelectedColor(color: string | undefined): void {
|
|
if (color === undefined) {
|
|
localStorage.removeItem("settings.territoryColor");
|
|
} else {
|
|
localStorage.setItem("settings.territoryColor", color);
|
|
}
|
|
}
|
|
|
|
backgroundMusicVolume(): number {
|
|
return this.getFloat("settings.backgroundMusicVolume", 0);
|
|
}
|
|
|
|
setBackgroundMusicVolume(volume: number): void {
|
|
this.setFloat("settings.backgroundMusicVolume", volume);
|
|
}
|
|
|
|
soundEffectsVolume(): number {
|
|
return this.getFloat("settings.soundEffectsVolume", 1);
|
|
}
|
|
|
|
setSoundEffectsVolume(volume: number): void {
|
|
this.setFloat("settings.soundEffectsVolume", volume);
|
|
}
|
|
}
|