alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-23 11:28:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added player name opacity control to SettingsModal with a slider input

Browse Source
This commit is contained in:
bijx
2026-03-17 02:00:11 -04:00
parent 73a0122539
commit 100c30a703
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/SettingsModal.ts
+38
View File
@@ -187,6 +187,12 @@ export class SettingsModal extends LitElement implements Layer {
this.requestUpdate();
}
private onPlayerNameOpacityChange(event: Event) {
const opacity = parseFloat((event.target as HTMLInputElement).value);
this.userSettings.setPlayerNameOpacity(opacity);
this.requestUpdate();
}
render() {
if (!this.isVisible) {
return null;
@@ -453,6 +459,38 @@ export class SettingsModal extends LitElement implements Layer {
</div>
</button>
<div
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
>
<img
src=${settingsIcon}
alt="nameOpacity"
width="20"
height="20"
/>
<div class="flex-1">
<div class="font-medium">
${translateText("user_setting.player_name_opacity_label")}
</div>
<div class="text-sm text-slate-400">
${translateText("user_setting.player_name_opacity_desc")}
</div>
<input
type="range"
min="0"
max="100"
.value=${this.userSettings.playerNameOpacity()}
@input=${this.onPlayerNameOpacityChange}
class="w-full border border-slate-500 rounded-lg"
/>
</div>
<div class="text-sm text-slate-400">
${this.userSettings.playerNameOpacity() === 0
? translateText("user_setting.hidden")
: `${this.userSettings.playerNameOpacity()}%`}
</div>
</div>
<button
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
@click="${this.onToggleLeftClickOpensMenu}"