+ add random bot names

src/client/Main.ts

@@ -24,6 +24,7 @@ class Client {
 
     initialize(): void {
         this.usernameInput = document.querySelector('username-input') as UsernameInput;
+        const usernameValidation = document.getElementById('username-error');
         if (!this.usernameInput) {
             consolex.warn('Username input element not found');
         }
@@ -39,26 +40,92 @@ class Client {
         document.addEventListener('leave-lobby', this.handleLeaveLobby.bind(this));
         document.addEventListener('single-player', this.handleSinglePlayer.bind(this));
 
-
         const spModal = document.querySelector('single-player-modal') as SinglePlayerModal;
+
         spModal instanceof SinglePlayerModal
-        document.getElementById('single-player').addEventListener('click', () => {
-            spModal.open();
-        })
+
+        document.getElementById('single-player').addEventListener('click', async () => {
+            const username = this.usernameInput?.getCurrentUsername();
+
+            if (!username) {
+                usernameValidation.textContent = 'Username is required';
+                return;
+            }
+
+            const isValid = await this.validateUsername(username);
+            if (isValid) {
+                spModal.open();
+            } else {
+                return;
+            }
+        });
 
         const hostModal = document.querySelector('host-lobby-modal') as HostPrivateLobbyModal;
         hostModal instanceof HostPrivateLobbyModal
-        document.getElementById('host-lobby-button').addEventListener('click', () => {
-            hostModal.open();
-        })
+        document.getElementById('host-lobby-button').addEventListener('click', async () => {
+            const username = this.usernameInput?.getCurrentUsername();
+
+            if (!username) {
+                usernameValidation.textContent = 'Username is required';
+                return;
+            }
+
+            const isValid = await this.validateUsername(username);
+
+            if (isValid) {
+                hostModal.open();
+            } else {
+                return;
+            }
+        });
 
         this.joinModal = document.querySelector('join-private-lobby-modal') as JoinPrivateLobbyModal;
         this.joinModal instanceof JoinPrivateLobbyModal
-        document.getElementById('join-private-lobby-button').addEventListener('click', () => {
-            this.joinModal.open();
-        })
+
+        document.getElementById('join-private-lobby-button').addEventListener('click', async () => {
+            const username = this.usernameInput?.getCurrentUsername();
+
+            if (!username) {
+                usernameValidation.textContent = 'Username is required';
+                return;
+            }
+
+            const isValid = await this.validateUsername(username);
+
+            if (isValid) {
+                this.joinModal.open();
+            }else {
+                return;
+            }
+        });
     }
 
+    private async validateUsername(username: string): Promise<boolean> {
+        this.usernameInput.validationError = '';
+
+        try {
+            const response = await fetch('/validate-username', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username }),
+            });
+
+            const result = await response.json();
+
+            if (!response.ok || !result.success) {
+                this.usernameInput.validationError = result.error || 'Failed to validate username.';
+                return false;
+            }
+
+            return true;
+        } catch (error) {
+            consolex.error('Error validating username:', error);
+            this.usernameInput.validationError = 'An error occurred while validating the username. Please try again.';
+            return false;
+        }
+    }
+
+
     private async handleJoinLobby(event: CustomEvent) {
         const lobby = event.detail.lobby
         consolex.log(`joining lobby ${lobby.id}`)

src/client/UsernameInput.ts

@@ -1,33 +1,44 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {v4 as uuidv4} from 'uuid';
+import {MAX_USERNAME_LENGTH} from "../core/Util";
 
 const usernameKey: string = 'username';
 
 @customElement('username-input')
 export class UsernameInput extends LitElement {
     @state() private username: string = '';
+    @property({ type: String }) validationError: string = '';
 
     static styles = css`
-    input {
-      width: 100%;
-      padding: 0.75rem;
-      background-color: white;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-      font-size: 1rem;
-      line-height: 1.5;
-      color: #111827;
-    }
+        input {
+            width: 100%;
+            padding: 0.75rem;
+            background-color: white;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            font-size: 1rem;
+            line-height: 1.5;
+            color: #111827;
+        }
 
-    input:focus {
-      outline: none;
-      ring: 2px;
-      ring-color: #3b82f6;
-      border-color: #3b82f6;
-    }
-  `;
+        input:focus {
+            outline: none;
+            ring: 2px;
+            ring-color: #3b82f6;
+            border-color: #3b82f6;
+        }
+
+        .error {
+            color: #dc2626;
+            background-color: #fff;
+            padding: 4px;
+            font-size: 0.875rem;
+            border: 1px solid #dc2626;
+            margin-top: 0.5rem;
+        }
+    `;
 
     public getCurrentUsername(): string {
         return this.username;
@@ -36,18 +47,23 @@ export class UsernameInput extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.username = this.getStoredUsername();
-        this.dispatchUsernameEvent()
+        this.dispatchUsernameEvent();
     }
 
     render() {
         return html`
-      <input 
-        type="text" 
-        .value=${this.username}
-        @input=${this.handleInput}
-        placeholder="Enter your username"
-        maxlength="18"
-      >
+      <div>
+        <input 
+          type="text" 
+          .value=${this.username}
+          @input=${this.handleInput}
+          placeholder="Enter your username"
+          maxlength="${MAX_USERNAME_LENGTH}"
+        >
+        ${this.validationError
+            ? html`<div class="error">${this.validationError}</div>`
+            : null}
+      </div>
     `;
     }
 
@@ -55,7 +71,8 @@ export class UsernameInput extends LitElement {
         const input = e.target as HTMLInputElement;
         this.username = input.value.trim();
         this.storeUsername(this.username);
-        this.dispatchUsernameEvent()
+        this.validationError = '';
+        this.dispatchUsernameEvent();
     }
 
     private getStoredUsername(): string {
@@ -74,7 +91,7 @@ export class UsernameInput extends LitElement {
 
     private dispatchUsernameEvent() {
         this.dispatchEvent(new CustomEvent('username-change', {
-            detail: {username: this.username},
+            detail: { username: this.username },
             bubbles: true,
             composed: true
         }));
@@ -93,4 +110,4 @@ export class UsernameInput extends LitElement {
         const threeDigits = decimal % 1000n;
         return threeDigits.toString().padStart(3, '0');
     }
-}
+}

src/client/graphics/NameBoxCalculator.ts

@@ -133,4 +133,4 @@ export function calculateFontSize(rectangle: Rectangle, name: string): number {
     const widthConstrained = rectangle.width / name.length * 2;
     const heightConstrained = rectangle.height / 3;
     return Math.min(widthConstrained, heightConstrained);
-}
+}

src/client/graphics/layers/NameLayer.ts

@@ -227,7 +227,7 @@ export class NameLayer implements Layer {
 
 
         if (myPlayer != null) {
-            const emojis = render.player.outgoingEmojis().filter(e => e.recipient == AllPlayers || e.recipient == myPlayer)
+            const emojis = render.player.outgoingEmojis().filter(e => e.recipient == AllPlayers || e.recipient == myPlayer);
             if (emojis.length > 0) {
                 context.font = `${render.fontSize * 4}px ${this.theme.font()}`;
                 context.fillStyle = this.theme.playerInfoColor(render.player.id()).toHex();
@@ -246,4 +246,4 @@ export class NameLayer implements Layer {
         this.myPlayer = this.game.players().find(p => p.clientID() == this.clientID)
         return this.myPlayer
     }
-}
+}

src/client/index.html

@@ -105,4 +105,4 @@
 	<!-- End Cloudflare Web Analytics -->
 </body>
 
-</html>
+</html>