From 6eaa14da73d7ed1615f966a9ffe1fee981f4e412 Mon Sep 17 00:00:00 2001 From: evanpelle Date: Sat, 12 Oct 2024 09:11:29 -0700 Subject: [PATCH] create usernameinput lit element --- src/client/Client.ts | 65 ++++--------------------- src/client/ClientGame.ts | 1 - src/client/UsernameInput.ts | 96 +++++++++++++++++++++++++++++++++++++ src/client/index.html | 5 +- src/client/styles.css | 60 ----------------------- 5 files changed, 107 insertions(+), 120 deletions(-) create mode 100644 src/client/UsernameInput.ts diff --git a/src/client/Client.ts b/src/client/Client.ts index 5e0c8125e..fd5059a8a 100644 --- a/src/client/Client.ts +++ b/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 { const controller = new AbortController(); @@ -136,7 +107,6 @@ async function getClientIP(timeoutMs: number = 1000): Promise { // 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'); } \ No newline at end of file diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts index 45b07aabc..00bda4717 100644 --- a/src/client/ClientGame.ts +++ b/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"; diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts new file mode 100644 index 000000000..4ce7f82ba --- /dev/null +++ b/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` + + `; + } + + 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'); + } +} \ No newline at end of file diff --git a/src/client/index.html b/src/client/index.html index 6a64c6651..4a6b8605a 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -31,10 +31,7 @@

(v0.6.5)

- - +
diff --git a/src/client/styles.css b/src/client/styles.css index bf17696ca..96d78a3ad 100644 --- a/src/client/styles.css +++ b/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);