Files
OpenFrontIO/src/core/game/UserSettings.ts
T
DevelopingTom bb24f18285 Add new FX layer and a nuke animation (#807)
## Description:

Changes:
- Added an AnimatedSprite class to handle spritesheets
- New FX layer, displaying cosmectics effects
- New Nuke FX: an animated sprite explosion, and a shockwave effect
- New "Special effects" setting, toggle to deactivate the FX layer for
lower-end hardware / personal taste


#### Note that the animation is a placeholder. It should be replaced
when a better looking one is available.

- Nuke:


https://github.com/user-attachments/assets/6eff1d0d-5081-47ad-932f-2bfcda72cb3c


- Mirv:


https://github.com/user-attachments/assets/3bc891b4-449c-4acb-8e24-e237b423c2a9


- SAM are also using the same Nuke animation. To be improved with a
custom FX:


https://github.com/user-attachments/assets/d65addce-5890-42c2-81e0-3eaa79ed87f3

## Performances:

Excellent since it's not manipulating the underlying imagedata directly.
Profiling during a MIRV with 100's of animations:

![image](https://github.com/user-attachments/assets/3477c963-d10f-493b-bcb1-93b7990d3edb)



### New settings:

- main menu:


![image](https://github.com/user-attachments/assets/5b1127bb-3b89-4c06-b519-fb173301d9fd)

- In game:


![image](https://github.com/user-attachments/assets/ba899253-a7cf-4d1c-8801-da41d2b1536b)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

IngloriousTom
2025-05-18 12:43:12 -07:00

71 lines
1.5 KiB
TypeScript

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");
}
emojis() {
return this.get("settings.emojis", true);
}
anonymousNames() {
return this.get("settings.anonymousNames", false);
}
fxLayer() {
return this.get("settings.specialEffects", true);
}
darkMode() {
return this.get("settings.darkMode", false);
}
leftClickOpensMenu() {
return this.get("settings.leftClickOpensMenu", false);
}
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());
}
toggleRandomName() {
this.set("settings.anonymousNames", !this.anonymousNames());
}
toggleFxLayer() {
this.set("settings.specialEffects", !this.fxLayer());
}
toggleDarkMode() {
this.set("settings.darkMode", !this.darkMode());
if (this.darkMode()) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
}