create usernameinput lit element

src/client/Client.ts

@@ -7,8 +7,11 @@ import favicon from '../../resources/images/Favicon.png';
 import {v4 as uuidv4} from 'uuid';
 
 import './PublicLobby';
+import './UsernameInput';
+
 
 import './styles.css';
+import {UsernameInput} from "./UsernameInput";
 
 
 const usernameKey: string = 'username';
@@ -24,16 +27,16 @@ class Client {
 
     private config: Config
 
+    private usernameInput: UsernameInput | null = null;
+
+
     constructor() {
     }
 
     initialize(): void {
-        const storedUsername = localStorage.getItem(usernameKey)
-        if (storedUsername) {
-            const usernameInput = document.getElementById('username') as HTMLInputElement | null;
-            if (usernameInput) {
-                usernameInput.value = storedUsername
-            }
+        this.usernameInput = document.querySelector('username-input') as UsernameInput;
+        if (!this.usernameInput) {
+            console.warn('Username input element not found');
         }
 
         this.config = getConfig()
@@ -52,7 +55,7 @@ class Client {
         ]);
         console.log(`got ip ${clientIP}`)
         this.game = createClientGame(
-            refreshUsername,
+            (): string => {return this.usernameInput.getCurrentUsername()},
             uuidv4(),
             uuidv4(),
             clientIP,
@@ -69,38 +72,6 @@ class Client {
     }
 }
 
-function refreshUsername(): string {
-    const usernameInput = document.getElementById('username') as HTMLInputElement | null;
-    if (usernameInput == null) {
-        console.warn('username element not found')
-        return "Anon"
-    }
-    if (usernameInput && usernameInput.value.trim()) {
-        const trimmedValue = usernameInput.value.trim();
-        localStorage.setItem(usernameKey, trimmedValue)
-        return trimmedValue
-    } else {
-        const storedUsername = localStorage.getItem(usernameKey);
-        if (storedUsername) {
-            return storedUsername
-        }
-        const newUsername = "Anon" + uuidToThreeDigits()
-        localStorage.setItem(usernameKey, newUsername)
-        return newUsername
-    }
-}
-
-function setupUsernameCallback(callback: (username: string) => void): void {
-    const usernameInput = document.getElementById('username') as HTMLInputElement | null;
-    if (usernameInput) {
-        usernameInput.addEventListener('input', () => {
-            const username = refreshUsername();
-            callback(username);
-        });
-    } else {
-        console.error('Username input element not found');
-    }
-}
 
 async function getClientIP(timeoutMs: number = 1000): Promise<string | null> {
     const controller = new AbortController();
@@ -136,7 +107,6 @@ async function getClientIP(timeoutMs: number = 1000): Promise<string | null> {
 // Initialize the client when the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     new Client().initialize();
-
 });
 
 document.body.style.backgroundImage = `url(${backgroundImage})`;
@@ -147,19 +117,4 @@ function setFavicon(): void {
     link.rel = 'shortcut icon';
     link.href = favicon;
     document.head.appendChild(link);
-}
-
-function uuidToThreeDigits(): string {
-    const uuid = uuidv4()
-    // Remove hyphens and convert to lowercase
-    const cleanUuid = uuid.replace(/-/g, '').toLowerCase();
-
-    // Convert hex string to decimal
-    const decimal = BigInt(`0x${cleanUuid}`);
-
-    // Get last 3 digits
-    const threeDigits = decimal % 1000n;
-
-    // Pad with leading zeros if necessary
-    return threeDigits.toString().padStart(3, '0');
 }

src/client/ClientGame.ts

@@ -13,7 +13,6 @@ import {WinCheckExecution} from "../core/execution/WinCheckExecution";
 import {SendAttackIntentEvent, SendSpawnIntentEvent, Transport} from "./Transport";
 import {createCanvas} from "./graphics/Utils";
 import {DisplayMessageEvent, MessageType} from "./graphics/layers/EventsDisplay";
-import {placeName} from "./graphics/NameBoxCalculator";
 
 
 

src/client/UsernameInput.ts

@@ -0,0 +1,96 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {v4 as uuidv4} from 'uuid';
+
+const usernameKey: string = 'username';
+
+@customElement('username-input')
+export class UsernameInput extends LitElement {
+    @state() private username: 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:focus {
+      outline: none;
+      ring: 2px;
+      ring-color: #3b82f6;
+      border-color: #3b82f6;
+    }
+  `;
+
+    public getCurrentUsername(): string {
+        return this.username;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.username = this.getStoredUsername();
+        this.dispatchUsernameEvent()
+    }
+
+    render() {
+        return html`
+      <input 
+        type="text" 
+        .value=${this.username}
+        @input=${this.handleInput}
+        placeholder="Enter your username"
+        maxlength="18"
+      >
+    `;
+    }
+
+    private handleInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        this.username = input.value.trim();
+        this.storeUsername(this.username);
+        this.dispatchUsernameEvent()
+    }
+
+    private getStoredUsername(): string {
+        const storedUsername = localStorage.getItem(usernameKey);
+        if (storedUsername) {
+            return storedUsername;
+        }
+        return this.generateNewUsername();
+    }
+
+    private storeUsername(username: string) {
+        if (username) {
+            localStorage.setItem(usernameKey, username);
+        }
+    }
+
+    private dispatchUsernameEvent() {
+        this.dispatchEvent(new CustomEvent('username-change', {
+            detail: {username: this.username},
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    private generateNewUsername(): string {
+        const newUsername = "Anon" + this.uuidToThreeDigits();
+        this.storeUsername(newUsername);
+        return newUsername;
+    }
+
+    private uuidToThreeDigits(): string {
+        const uuid = uuidv4();
+        const cleanUuid = uuid.replace(/-/g, '').toLowerCase();
+        const decimal = BigInt(`0x${cleanUuid}`);
+        const threeDigits = decimal % 1000n;
+        return threeDigits.toString().padStart(3, '0');
+    }
+}

src/client/index.html

@@ -31,10 +31,7 @@
 		<h2 class="text-6xl	mb-2">(v0.6.5)</h2>
 		<div class="flex justify-center items-start">
 			<div class="w-full max-w-3xl p-4 space-y-4">
-				<!-- Username input -->
-				<input type="text" id="username" placeholder="Enter your username"
-					class="w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-					maxlength="18">
+				<username-input></username-input>
 				<!-- Button layout -->
 				<div class="flex space-x-4 max-w-xs mx-auto">
 					<!-- Single Player button -->

src/client/styles.css

@@ -94,66 +94,6 @@ h3 {
     display: block;
 }
 
-/* #lobbies-container {
-    display: flex;
-    justify-content: center;
-}
-
-.lobby-button {
-    width: 50%;
-    max-width: 300px;
-    max-height: 300px;
-    height: auto;
-    aspect-ratio: 1 / 1;
-    font-size: 18px;
-    font-weight: bold;
-    border: 3px solid #007bff;
-    background-color: rgba(0, 123, 255, 0.2);
-    color: #ffffff;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    padding: 20px;
-    text-align: center;
-    box-sizing: border-box;
-    margin-bottom: 1em;
-}
-
-.lobby-button:hover {
-    background-color: rgba(0, 123, 255, 0.4);
-    transform: translateY(-5px);
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
-}
-
-.lobby-button.highlighted {
-    background-color: rgba(0, 123, 255, 0.6);
-    transform: translateY(-5px);
-    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);
-    border-color: #ffffff;
-}
-
-.lobby-name {
-    font-size: 24px;
-    margin-bottom: 10px;
-    color: #000000;
-}
-
-.lobby-timer {
-    font-size: 20px;
-    margin-bottom: 10px;
-    color: #000000;
-}
-
-.player-count {
-    font-size: 20px;
-    color: #000000;
-} */
-
 .joining-message {
     font-size: 24px;
     color: rgb(0, 0, 0);