import { LitElement, html } from "lit"; import { customElement, query, state } from "lit/decorators.js"; import { UserSettings } from "../core/game/UserSettings"; import "./components/baseComponents/setting/SettingNumber"; import "./components/baseComponents/setting/SettingSlider"; import "./components/baseComponents/setting/SettingToggle"; @customElement("user-setting") export class UserSettingModal extends LitElement { private userSettings: UserSettings = new UserSettings(); @state() private darkMode: boolean = this.userSettings.darkMode(); @state() private keySequence: string[] = []; @state() private showEasterEggSettings = false; connectedCallback() { super.connectedCallback(); window.addEventListener("keydown", this.handleKeyDown); } @query("o-modal") private modalEl!: HTMLElement & { open: () => void; close: () => void; isModalOpen: boolean; }; createRenderRoot() { return this; } disconnectedCallback() { window.removeEventListener("keydown", this.handleKeyDown); super.disconnectedCallback(); document.body.style.overflow = "auto"; } private handleKeyDown = (e: KeyboardEvent) => { if (!this.modalEl?.isModalOpen || this.showEasterEggSettings) return; const key = e.key.toLowerCase(); const nextSequence = [...this.keySequence, key].slice(-4); this.keySequence = nextSequence; if (nextSequence.join("") === "evan") { this.triggerEasterEgg(); this.keySequence = []; } }; private triggerEasterEgg() { console.log("πŸͺΊ Setting~ unlocked by EVAN combo!"); this.showEasterEggSettings = true; const popup = document.createElement("div"); popup.className = "easter-egg-popup"; popup.textContent = "πŸŽ‰ You found a secret setting!"; document.body.appendChild(popup); setTimeout(() => { popup.remove(); }, 5000); } toggleDarkMode(e: CustomEvent<{ checked: boolean }>) { const enabled = e.detail?.checked; if (typeof enabled !== "boolean") { console.warn("Unexpected toggle event payload", e); return; } this.userSettings.set("settings.darkMode", enabled); if (enabled) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } console.log("πŸŒ™ Dark Mode:", enabled ? "ON" : "OFF"); } private toggleEmojis(e: CustomEvent<{ checked: boolean }>) { const enabled = e.detail?.checked; if (typeof enabled !== "boolean") return; this.userSettings.set("settings.emojis", enabled); console.log("🀑 Emojis:", enabled ? "ON" : "OFF"); } private toggleLeftClickOpensMenu(e: CustomEvent<{ checked: boolean }>) { const enabled = e.detail?.checked; if (typeof enabled !== "boolean") return; this.userSettings.set("settings.leftClickOpensMenu", enabled); console.log("πŸ–±οΈ Left Click Opens Menu:", enabled ? "ON" : "OFF"); this.requestUpdate(); } private sliderAttackRatio(e: CustomEvent<{ value: number }>) { const value = e.detail?.value; if (typeof value === "number") { const ratio = value / 100; localStorage.setItem("settings.attackRatio", ratio.toString()); } else { console.warn("Slider event missing detail.value", e); } } private sliderTroopRatio(e: CustomEvent<{ value: number }>) { const value = e.detail?.value; if (typeof value === "number") { const ratio = value / 100; localStorage.setItem("settings.troopRatio", ratio.toString()); } else { console.warn("Slider event missing detail.value", e); } } render() { return html` `; } public open() { this.modalEl?.open(); } public close() { this.modalEl?.close(); } }