From 48ae8cad331372d1c86254657f4029c158c8b4ef Mon Sep 17 00:00:00 2001 From: Readixyee Date: Thu, 6 Mar 2025 17:34:12 +0100 Subject: [PATCH 1/4] showing modal when the game is loading --- src/client/Main.ts | 9 ++ src/client/graphics/GameRenderer.ts | 8 ++ .../graphics/layers/gameStartingModal.ts | 106 ++++++++++++++++++ src/client/index.html | 1 + 4 files changed, 124 insertions(+) create mode 100644 src/client/graphics/layers/gameStartingModal.ts diff --git a/src/client/Main.ts b/src/client/Main.ts index bde02549a..1ce87a7dd 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -7,6 +7,7 @@ import { UsernameInput } from "./UsernameInput"; import { SinglePlayerModal } from "./SinglePlayerModal"; import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal"; import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal"; +import { GameStartingModal } from "./graphics/layers/gameStartingModal"; import { generateID } from "../core/Util"; import { generateCryptoRandomUUID } from "./Utils"; import { consolex } from "../core/Consolex"; @@ -160,6 +161,14 @@ class Client { () => { this.joinModal.close(); this.publicLobby.stop(); + + // show when the game loads + const startingModal = document.querySelector( + "game-starting-modal", + ) as GameStartingModal; + startingModal instanceof GameStartingModal; + startingModal.show(); + if (gameType != GameType.Singleplayer) { window.history.pushState({}, "", `/join/${lobby.gameID}`); sessionStorage.setItem("inLobby", "true"); diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index e9263f095..388cd43bd 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -25,6 +25,7 @@ import { SpawnTimer } from "./layers/SpawnTimer"; import { OptionsMenu } from "./layers/OptionsMenu"; import { TopBar } from "./layers/TopBar"; import { PlayerPanel } from "./layers/PlayerPanel"; +import { GameStartingModal } from "./layers/gameStartingModal"; export function createRenderer( canvas: HTMLCanvasElement, @@ -36,6 +37,13 @@ export function createRenderer( const uiState = { attackRatio: 20 }; + //hide when the game renders + const startingModal = document.querySelector( + "game-starting-modal", + ) as GameStartingModal; + startingModal instanceof GameStartingModal; + startingModal.hide(); + // TODO maybe append this to dcoument instead of querying for them? const emojiTable = document.querySelector("emoji-table") as EmojiTable; if (!emojiTable || !(emojiTable instanceof EmojiTable)) { diff --git a/src/client/graphics/layers/gameStartingModal.ts b/src/client/graphics/layers/gameStartingModal.ts new file mode 100644 index 000000000..4b7dae464 --- /dev/null +++ b/src/client/graphics/layers/gameStartingModal.ts @@ -0,0 +1,106 @@ +import { LitElement, html, css } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("game-starting-modal") +export class GameStartingModal extends LitElement { + @state() + isVisible = false; + + static styles = css` + .modal { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(30, 30, 30, 0.7); + padding: 25px; + border-radius: 10px; + z-index: 9999; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + color: white; + width: 300px; + text-align: center; + transition: + opacity 0.3s ease-in-out, + visibility 0.3s ease-in-out; + } + + .modal.visible { + display: block; + animation: fadeIn 0.3s ease-out; + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translate(-50%, -48%); + } + to { + opacity: 1; + transform: translate(-50%, -50%); + } + } + + .modal h2 { + margin-bottom: 15px; + font-size: 22px; + color: white; + } + + .modal p { + margin-bottom: 20px; + background-color: rgba(0, 0, 0, 0.3); + padding: 10px; + border-radius: 5px; + } + + .button-container { + display: flex; + justify-content: center; + gap: 10px; + } + + .modal button { + padding: 12px; + font-size: 16px; + cursor: pointer; + background: rgba(255, 100, 100, 0.7); + color: white; + border: none; + border-radius: 5px; + transition: + background-color 0.2s ease, + transform 0.1s ease; + } + + .modal button:hover { + background: rgba(255, 100, 100, 0.9); + transform: translateY(-1px); + } + + .modal button:active { + transform: translateY(1px); + } + `; + + render() { + return html` +
+

Game is Starting...

+

Preparing for the lobby to start. Please wait.

+
+ `; + } + + show() { + this.isVisible = true; + this.requestUpdate(); + } + + hide() { + this.isVisible = false; + this.requestUpdate(); + } +} diff --git a/src/client/index.html b/src/client/index.html index 8f6a05b2b..98402d90c 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -246,6 +246,7 @@ + From cfc9676acbee74ab263bcbc14440e6fbbb583684 Mon Sep 17 00:00:00 2001 From: Readixyee Date: Thu, 6 Mar 2025 18:24:36 +0100 Subject: [PATCH 2/4] location change --- src/client/Main.ts | 2 +- src/client/{graphics/layers => }/gameStartingModal.ts | 0 src/client/graphics/GameRenderer.ts | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/client/{graphics/layers => }/gameStartingModal.ts (100%) diff --git a/src/client/Main.ts b/src/client/Main.ts index 1ce87a7dd..cddb95288 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -7,7 +7,7 @@ import { UsernameInput } from "./UsernameInput"; import { SinglePlayerModal } from "./SinglePlayerModal"; import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal"; import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal"; -import { GameStartingModal } from "./graphics/layers/gameStartingModal"; +import { GameStartingModal } from "./gameStartingModal"; import { generateID } from "../core/Util"; import { generateCryptoRandomUUID } from "./Utils"; import { consolex } from "../core/Consolex"; diff --git a/src/client/graphics/layers/gameStartingModal.ts b/src/client/gameStartingModal.ts similarity index 100% rename from src/client/graphics/layers/gameStartingModal.ts rename to src/client/gameStartingModal.ts diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index 388cd43bd..fd4090314 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -25,7 +25,7 @@ import { SpawnTimer } from "./layers/SpawnTimer"; import { OptionsMenu } from "./layers/OptionsMenu"; import { TopBar } from "./layers/TopBar"; import { PlayerPanel } from "./layers/PlayerPanel"; -import { GameStartingModal } from "./layers/gameStartingModal"; +import { GameStartingModal } from "../gameStartingModal"; export function createRenderer( canvas: HTMLCanvasElement, From 44de3516e87f5d8d6cabeca1e446e02d2ccae1cf Mon Sep 17 00:00:00 2001 From: Maeght Loan <37497007+loan-mgt@users.noreply.github.com> Date: Thu, 6 Mar 2025 20:13:25 +0000 Subject: [PATCH 3/4] fix: laptop pinch-zoom --- src/client/InputHandler.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts index 302f7e49c..281b751a7 100644 --- a/src/client/InputHandler.ts +++ b/src/client/InputHandler.ts @@ -110,12 +110,17 @@ export class InputHandler { initialize() { this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e)); window.addEventListener("pointerup", (e) => this.onPointerUp(e)); - this.canvas.addEventListener("wheel", (e) => this.onScroll(e), { - passive: false, - }); - this.canvas.addEventListener("wheel", (e) => this.onShiftScroll(e), { - passive: false, - }); + this.canvas.addEventListener( + "wheel", + (e) => { + this.onScroll(e); + this.onShiftScroll(e); + e.preventDefault(); + }, + { + passive: false, + }, + ); window.addEventListener("pointermove", this.onPointerMove.bind(this)); this.canvas.addEventListener("contextmenu", (e: MouseEvent) => { this.onContextMenu(e); @@ -305,7 +310,8 @@ export class InputHandler { private onScroll(event: WheelEvent) { if (!event.shiftKey) { - this.eventBus.emit(new ZoomEvent(event.x, event.y, event.deltaY)); + const ratio = event.ctrlKey ? 10 : 1; // Compensate pinch-zoom low sensitivity + this.eventBus.emit(new ZoomEvent(event.x, event.y, event.deltaY * ratio)); } } From e926fb5cd5653be5df8c00059fa1296c1f8a7900 Mon Sep 17 00:00:00 2001 From: Maeght Loan <37497007+loan-mgt@users.noreply.github.com> Date: Thu, 6 Mar 2025 21:41:56 +0000 Subject: [PATCH 4/4] handle edge case MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no accessibilité --- src/client/InputHandler.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts index 281b751a7..da42f3a77 100644 --- a/src/client/InputHandler.ts +++ b/src/client/InputHandler.ts @@ -200,6 +200,8 @@ export class InputHandler { "Digit1", "Digit2", "KeyC", + "ControlLeft", + "ControlRight", ].includes(e.code) ) { this.activeKeys.add(e.code); @@ -250,6 +252,8 @@ export class InputHandler { "Digit1", "Digit2", "KeyC", + "ControlLeft", + "ControlRight", ].includes(e.code) ) { this.activeKeys.delete(e.code); @@ -310,7 +314,10 @@ export class InputHandler { private onScroll(event: WheelEvent) { if (!event.shiftKey) { - const ratio = event.ctrlKey ? 10 : 1; // Compensate pinch-zoom low sensitivity + const realCtrl = + this.activeKeys.has("ControlLeft") || + this.activeKeys.has("ControlRight"); + const ratio = event.ctrlKey && !realCtrl ? 10 : 1; // Compensate pinch-zoom low sensitivity this.eventBus.emit(new ZoomEvent(event.x, event.y, event.deltaY * ratio)); } }