From 3885b3944293420adb2a631aac58226ae3dae475 Mon Sep 17 00:00:00 2001 From: evanpelle Date: Tue, 15 Oct 2024 17:51:46 -0700 Subject: [PATCH] now get message if join sucessful --- src/client/ClientGame.ts | 3 +- src/client/JoinPrivateLobbyModal.ts | 98 ++++++++++++++++++++++------- src/client/Main.ts | 15 +++-- src/server/GameManager.ts | 5 ++ src/server/Server.ts | 12 +++- webpack.config.js | 2 +- 6 files changed, 106 insertions(+), 29 deletions(-) diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts index 2495f89c2..7a4d754c8 100644 --- a/src/client/ClientGame.ts +++ b/src/client/ClientGame.ts @@ -73,7 +73,7 @@ export class ClientGame { private transport: Transport, ) { } - public join() { + public join(onstart: () => void) { const onconnect = () => { console.log('Connected to game server!'); this.transport.joinGame(this.clientIP, this.turns.length) @@ -81,6 +81,7 @@ export class ClientGame { const onmessage = (message: ServerMessage) => { if (message.type == "start") { console.log("starting game!") + onstart() for (const turn of message.turns) { if (turn.turnNumber < this.turns.length) { continue diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts index 4d81396b4..bc7ee4ea4 100644 --- a/src/client/JoinPrivateLobbyModal.ts +++ b/src/client/JoinPrivateLobbyModal.ts @@ -5,6 +5,7 @@ import {GameMap} from '../core/game/Game'; @customElement('join-private-lobby-modal') export class JoinPrivateLobbyModal extends LitElement { @state() private isModalOpen = false; + @state() private message: string = ''; @query('#lobbyIdInput') private lobbyIdInput!: HTMLInputElement; static styles = css` @@ -74,22 +75,52 @@ export class JoinPrivateLobbyModal extends LitElement { .join-button { margin-top: 10px; } + + .message-area { + margin-top: 10px; + padding: 10px; + border-radius: 4px; + font-size: 14px; + transition: opacity 0.3s ease; + opacity: 0; + height: 0; + overflow: hidden; + } + + .message-area.show { + opacity: 1; + height: auto; + margin-bottom: 10px; + } + + .message-area.error { + background-color: #ffebee; + color: #c62828; + } + + .message-area.success { + background-color: #e8f5e9; + color: #2e7d32; + } `; render() { return html` -
-
- × -

Join Private Lobby

-
- - -
- +
+
+ × +

Join Private Lobby

+
+ +
+
+ ${this.message} +
+
- `; +
+ `; } public open() { @@ -98,6 +129,13 @@ export class JoinPrivateLobbyModal extends LitElement { public close() { this.isModalOpen = false; + this.dispatchEvent(new CustomEvent('leave-lobby', { + detail: {lobby: this.lobbyIdInput.value}, + bubbles: true, + composed: true + })); + this.lobbyIdInput.value = null + } private async pasteFromClipboard() { @@ -111,18 +149,36 @@ export class JoinPrivateLobbyModal extends LitElement { private joinLobby() { const lobbyId = this.lobbyIdInput.value; - // Add your logic here to join the lobby using the lobbyId console.log(`Joining lobby with ID: ${lobbyId}`); - this.dispatchEvent(new CustomEvent('join-lobby', { - detail: { - lobby: {id: lobbyId}, - singlePlayer: false, - map: GameMap.World, - }, - bubbles: true, - composed: true - })) + this.message = 'Checking lobby...'; // Set initial message - this.close(); + fetch(`/lobby/${lobbyId}/exists`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + } + }) + .then(response => response.json()) + .then(data => { + if (data.exists) { + this.message = 'Joined successfully! Waiting for game to start...'; + this.dispatchEvent(new CustomEvent('join-lobby', { + detail: { + lobby: {id: lobbyId}, + singlePlayer: false, + map: GameMap.World, + }, + bubbles: true, + composed: true + })); + } else { + this.message = 'Lobby not found. Please check the ID and try again.'; + } + }) + .catch(error => { + console.error('Error checking lobby existence:', error); + this.message = 'An error occurred. Please try again.'; + }); } + } \ No newline at end of file diff --git a/src/client/Main.ts b/src/client/Main.ts index de2c5a86b..205956428 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -20,7 +20,7 @@ class Client { private usernameInput: UsernameInput | null = null; - + private joinModal: JoinPrivateLobbyModal constructor() { } @@ -49,10 +49,10 @@ class Client { hostModal.open(); }) - const joinModal = document.querySelector('join-private-lobby-modal') as JoinPrivateLobbyModal; - joinModal instanceof JoinPrivateLobbyModal + this.joinModal = document.querySelector('join-private-lobby-modal') as JoinPrivateLobbyModal; + this.joinModal instanceof JoinPrivateLobbyModal document.getElementById('join-private-lobby-button').addEventListener('click', () => { - joinModal.open(); + this.joinModal.open(); }) @@ -75,7 +75,9 @@ class Client { map: event.detail.map, } ); - this.game.join(); + this.game.join(() => { + this.joinModal.close() + }); const g = this.game; window.addEventListener('beforeunload', function (event) { console.log('Browser is closing'); @@ -84,6 +86,9 @@ class Client { } private async handleLeaveLobby(event: CustomEvent) { + if (this.game == null) { + return + } this.game.stop() this.game = null } diff --git a/src/server/GameManager.ts b/src/server/GameManager.ts index ed39b5093..11c89f63c 100644 --- a/src/server/GameManager.ts +++ b/src/server/GameManager.ts @@ -33,6 +33,11 @@ export class GameManager { return id } + hasActiveGame(gameID: GameID): boolean { + const game = this.games.filter(g => g.phase() == GamePhase.Lobby || g.phase() == GamePhase.Active).find(g => g.id == gameID) + return game != null + } + // TODO: stop private games to prevent memory leak. startPrivateGame(gameID: GameID) { const game = this.games.find(g => g.id == gameID) diff --git a/src/server/Server.ts b/src/server/Server.ts index b4b3818d6..86b260d68 100644 --- a/src/server/Server.ts +++ b/src/server/Server.ts @@ -50,9 +50,19 @@ app.post('/start_private_lobby/:id', (req, res) => { app.put('/private_lobby/:id', (req, res) => { - }); +app.get('/lobby/:id/exists', (req, res) => { + const lobbyId = req.params.id; + console.log(`checking lobby ${lobbyId} exists`) + const lobbyExists = gm.hasActiveGame(lobbyId); + + res.json({ + exists: lobbyExists + }); +}); + + app.get('/private_lobby/:id', (req, res) => { res.json({ hi: '5' diff --git a/webpack.config.js b/webpack.config.js index 38c06bdb0..b3802d004 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -95,7 +95,7 @@ export default (env, argv) => { ws: true, }, { - context: ['/lobbies', '/join_game', '/join_lobby', '/private_lobby', '/start_private_lobby'], + context: ['/lobbies', '/join_game', '/join_lobby', '/private_lobby', '/start_private_lobby', '/lobby'], target: 'http://localhost:3000', secure: false, changeOrigin: true,