import { html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators.js"; import { crazyGamesSDK } from "src/client/CrazyGamesSDK"; import { PauseGameIntentEvent } from "src/client/Transport"; import { EventBus } from "../../../core/EventBus"; import { UserSettings } from "../../../core/game/UserSettings"; import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler"; import { translateText } from "../../Utils"; import SoundManager from "../../sound/SoundManager"; import { Layer } from "./Layer"; import structureIcon from "/images/CityIconWhite.svg?url"; import cursorPriceIcon from "/images/CursorPriceIconWhite.svg?url"; import darkModeIcon from "/images/DarkModeIconWhite.svg?url"; import emojiIcon from "/images/EmojiIconWhite.svg?url"; import exitIcon from "/images/ExitIconWhite.svg?url"; import explosionIcon from "/images/ExplosionIconWhite.svg?url"; import mouseIcon from "/images/MouseIconWhite.svg?url"; import ninjaIcon from "/images/NinjaIconWhite.svg?url"; import settingsIcon from "/images/SettingIconWhite.svg?url"; import sirenIcon from "/images/SirenIconWhite.svg?url"; import treeIcon from "/images/TreeIconWhite.svg?url"; import musicIcon from "/images/music.svg?url"; export class ShowSettingsModalEvent { constructor( public readonly isVisible: boolean = true, public readonly shouldPause: boolean = false, public readonly isPaused: boolean = false, ) {} } @customElement("settings-modal") export class SettingsModal extends LitElement implements Layer { public eventBus: EventBus; public userSettings: UserSettings; @state() private isVisible: boolean = false; @state() private alternateView: boolean = false; @query(".modal-overlay") private modalOverlay!: HTMLElement; @property({ type: Boolean }) shouldPause = false; @property({ type: Boolean }) wasPausedWhenOpened = false; init() { SoundManager.setBackgroundMusicVolume( this.userSettings.backgroundMusicVolume(), ); SoundManager.setSoundEffectsVolume(this.userSettings.soundEffectsVolume()); this.eventBus.on(ShowSettingsModalEvent, (event) => { this.isVisible = event.isVisible; this.shouldPause = event.shouldPause; this.wasPausedWhenOpened = event.isPaused; this.pauseGame(true); }); } createRenderRoot() { return this; } connectedCallback() { super.connectedCallback(); window.addEventListener("click", this.handleOutsideClick, true); window.addEventListener("keydown", this.handleKeyDown); } disconnectedCallback() { window.removeEventListener("click", this.handleOutsideClick, true); window.removeEventListener("keydown", this.handleKeyDown); super.disconnectedCallback(); } private handleOutsideClick = (event: MouseEvent) => { if ( this.isVisible && this.modalOverlay && event.target === this.modalOverlay ) { this.closeModal(); } }; private handleKeyDown = (event: KeyboardEvent) => { if (this.isVisible && event.key === "Escape") { this.closeModal(); } }; public openModal() { this.isVisible = true; this.requestUpdate(); } public closeModal() { this.isVisible = false; this.requestUpdate(); this.pauseGame(false); } private pauseGame(pause: boolean) { if (this.shouldPause && !this.wasPausedWhenOpened) { if (pause) { crazyGamesSDK.gameplayStop(); } else { crazyGamesSDK.gameplayStart(); } this.eventBus.emit(new PauseGameIntentEvent(pause)); } } private onTerrainButtonClick() { this.alternateView = !this.alternateView; this.eventBus.emit(new AlternateViewEvent(this.alternateView)); this.requestUpdate(); } private onToggleEmojisButtonClick() { this.userSettings.toggleEmojis(); this.requestUpdate(); } private onToggleStructureSpritesButtonClick() { this.userSettings.toggleStructureSprites(); this.requestUpdate(); } private onToggleSpecialEffectsButtonClick() { this.userSettings.toggleFxLayer(); this.requestUpdate(); } private onToggleAlertFrameButtonClick() { this.userSettings.toggleAlertFrame(); this.requestUpdate(); } private onToggleDarkModeButtonClick() { this.userSettings.toggleDarkMode(); this.eventBus.emit(new RefreshGraphicsEvent()); this.requestUpdate(); } private onToggleRandomNameModeButtonClick() { this.userSettings.toggleRandomName(); this.requestUpdate(); } private onToggleLeftClickOpensMenu() { this.userSettings.toggleLeftClickOpenMenu(); this.requestUpdate(); } private onToggleCursorCostLabelButtonClick() { this.userSettings.toggleCursorCostLabel(); this.requestUpdate(); } private onTogglePerformanceOverlayButtonClick() { this.userSettings.togglePerformanceOverlay(); this.requestUpdate(); } private onExitButtonClick() { // redirect to the home page window.location.href = "/"; } private onVolumeChange(event: Event) { const volume = parseFloat((event.target as HTMLInputElement).value) / 100; this.userSettings.setBackgroundMusicVolume(volume); SoundManager.setBackgroundMusicVolume(volume); this.requestUpdate(); } private onSoundEffectsVolumeChange(event: Event) { const volume = parseFloat((event.target as HTMLInputElement).value) / 100; this.userSettings.setSoundEffectsVolume(volume); SoundManager.setSoundEffectsVolume(volume); this.requestUpdate(); } render() { if (!this.isVisible) { return null; } return html`
e.preventDefault()} >
settings

${translateText("user_setting.tab_basic")}

musicIcon
${translateText("user_setting.background_music_volume")}
${Math.round(this.userSettings.backgroundMusicVolume() * 100)}%
soundEffectsIcon
${translateText("user_setting.sound_effects_volume")}
${Math.round(this.userSettings.soundEffectsVolume() * 100)}%
`; } }