From 4709fc31c5958ef72af8bf69f7e87f88079d3697 Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Mon, 9 Jun 2025 04:30:45 +0200
Subject: [PATCH] Fix: Hide username validation error in-game (#1110)

## Description:

Empty username results in error box "Username must be at least 8
characters long.".

You can't open single player or private lobby modals, but you can still
join a public lobby. Your player name will then be "xxx".

The error box isn't hidden in-game however. This fixes it.

BEFORE

![Before
1](https://github.com/user-attachments/assets/8233749f-e625-41d6-8aef-f42e033c7c63)

![Before
2](https://github.com/user-attachments/assets/26a21669-1a86-4d1d-9f2c-1b208a503c4c)

AFTER


![After](https://github.com/user-attachments/assets/14a05491-cf05-46eb-ab8e-9847cd7cf094)

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33
---
 src/client/Main.ts          | 3 +++
 src/client/UsernameInput.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/client/Main.ts b/src/client/Main.ts
index 4138224df..9e5c6dfc1 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -290,6 +290,9 @@ class Client {
       () => {
         console.log("Closing modals");
         document.getElementById("settings-button")?.classList.add("hidden");
+        document
+          .getElementById("username-validation-error")
+          ?.classList.add("hidden");
         [
           "single-player-modal",
           "host-lobby-modal",
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index c0cd900c9..3b3c24b7d 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -47,6 +47,7 @@ export class UsernameInput extends LitElement {
       />
       ${this.validationError
         ? html`<div
+            id="username-validation-error"
             class="absolute z-10 w-full mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
           >
             ${this.validationError}