* updata validation on public games

src/client/Main.ts

@@ -12,6 +12,8 @@ import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
 import { generateID } from "../core/Util";
 import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
+import {validateUsername} from "../core/validations/username";
+import {PublicLobby} from "./PublicLobby";
 
 class Client {
     private gameStop: () => void
@@ -102,16 +104,10 @@ class Client {
         this.usernameInput.validationError = '';
 
         try {
-            const response = await fetch('/validate-username', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username }),
-            });
+            const { isValid, error } = validateUsername(username);
 
-            const result = await response.json();
-
-            if (!response.ok || !result.success) {
-                this.usernameInput.validationError = result.error || 'Failed to validate username.';
+            if (!isValid) {
+                this.usernameInput.validationError = error || 'Failed to validate username.';
                 return false;
             }
 
@@ -125,11 +121,25 @@ class Client {
 
 
     private async handleJoinLobby(event: CustomEvent) {
-        const lobby = event.detail.lobby
-        consolex.log(`joining lobby ${lobby.id}`)
+        const lobby = event.detail.lobby;
+        consolex.log(`Attempting to join lobby ${lobby.id}`);
+
+        // Validate the username
+        const username = this.usernameInput?.getCurrentUsername();
+        if (!username) {
+            this.usernameInput.validationError = 'Username is required';
+            return;
+        }
+
+        const isValid = await this.validateUsername(username);
+        if (!isValid) {
+            return;
+        }
+
+        // Stop existing game
         if (this.gameStop != null) {
-            consolex.log('joining lobby, stopping existing game')
-            this.gameStop()
+            consolex.log('Stopping existing game before joining a new lobby');
+            this.gameStop();
         }
         this.gameStop = joinLobby(
             {
@@ -144,9 +154,14 @@ class Client {
             },
             () => this.joinModal.close()
         );
+        const publicLobbyElement = document.querySelector('public-lobby') as PublicLobby;
+        publicLobbyElement.highlightLobby();
     }
 
+
     private async handleLeaveLobby(event: CustomEvent) {
+        const publicLobbyElement = document.querySelector('public-lobby') as PublicLobby;
+        publicLobbyElement.highlightLobby();
         if (this.gameStop == null) {
             return
         }

src/client/PublicLobby.ts

@@ -104,9 +104,13 @@ export class PublicLobby extends LitElement {
       </button>
     `;
     }
+    highlightLobby() {
+        this.isLobbyHighlighted = !this.isLobbyHighlighted;
+        this.requestUpdate();
+    }
+
 
     private lobbyClicked(lobby: Lobby) {
-        this.isLobbyHighlighted = !this.isLobbyHighlighted;
         if (this.currLobby == null) {
             this.currLobby = lobby
             this.dispatchEvent(new CustomEvent('join-lobby', {

src/client/UsernameInput.ts

@@ -57,7 +57,7 @@ export class UsernameInput extends LitElement {
           .value=${this.username}
           @input=${this.handleInput}
           placeholder="Enter your username"
-          maxlength="${MAX_USERNAME_LENGTH}"
+          maxlength="123"
         >
         ${this.validationError
             ? html`<div class="error">${this.validationError}</div>`

src/server/Server.ts

@@ -11,7 +11,6 @@ import { Client } from './Client';
 import { GamePhase, GameServer } from './GameServer';
 import { archive } from './Archive';
 import { DiscordBot } from './DiscordBot';
-import {MAX_USERNAME_LENGTH, MIN_USERNAME_LENGTH} from "../core/Util";
 import {validateUsername} from "../core/validations/username";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -121,16 +120,6 @@ app.get('/private_lobby/:id', (req, res) => {
     });
 });
 
-app.post('/validate-username', (req, res) => {
-    const { username } = req.body;
-
-    if (!username || username.length < MIN_USERNAME_LENGTH || username.length > MAX_USERNAME_LENGTH) {
-        return res.status(400).json({ success: false, error: `Username must be between ${MIN_USERNAME_LENGTH} and ${MAX_USERNAME_LENGTH} characters.` });
-    }
-
-    res.json({ success: true, message: 'Username is valid.' });
-});
-
 wss.on('connection', (ws, req) => {
     ws.on('message', (message: string) => {
         try {