Delayed lobby start (#4184)

Resolves #4169

## Description:

Adds a delayed lobby start option.
Utilizes the same system as for public lobbies.
The default for the option is for lobbies to take 3 seconds to start,
however this can easily be changed.

The current setting is controlled through an enable-disable slider,
however there are multiple other options for how to control this.
For example we could do a slider, an input field, a dropdown etc. And i
dont necessarily know if the currently implemented option is the best.

Furhtermore im not sure if i have used the language file completely
correctly. There is now a duplicate field for both private and public
lobby. However there is not category shared between the two. So i
decided to reuse the field from public for private games, as this
simplified the code a bit.

**Host video**

https://github.com/user-attachments/assets/6f3db6e4-7323-4fad-8544-efb8cef4d969

**Non-host video**

https://github.com/user-attachments/assets/ee02a072-1f42-4dde-a5d9-120fda862eb7

## 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


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

src/client/components/InputCard.ts

@@ -0,0 +1,57 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { translateText } from "../Utils";
+import { CARD_LABEL_CLASS, cardClass, INPUT_CLASS } from "./InputCardStyles";
+
+@customElement("input-card")
+export class InputCard extends LitElement {
+  @property({ attribute: false }) labelKey = "";
+  @property({ attribute: false }) inputId?: string;
+  @property({ attribute: false }) inputType = "number";
+  @property({ attribute: false }) inputMin?: number | string;
+  @property({ attribute: false }) inputMax?: number | string;
+  @property({ attribute: false }) inputStep?: number | string;
+  @property({ attribute: false }) inputValue?: number | string;
+  @property({ attribute: false }) inputAriaLabel?: string;
+  @property({ attribute: false }) inputPlaceholder?: string;
+  @property({ attribute: false }) onInput?: (e: Event) => void;
+  @property({ attribute: false }) onChange?: (e: Event) => void;
+  @property({ attribute: false }) onKeyDown?: (e: KeyboardEvent) => void;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+      <div class="${cardClass(true)}">
+        <div
+          class="w-full h-full p-3 flex flex-col items-center justify-between gap-2"
+        >
+          <div class="h-[30px] my-1"></div>
+
+          <span class="${CARD_LABEL_CLASS} text-center text-white">
+            ${translateText(this.labelKey)}
+          </span>
+        </div>
+
+        <div class="absolute left-3 right-3 top-1/2 -translate-y-1/2 z-10">
+          <input
+            type=${this.inputType}
+            id=${this.inputId ?? nothing}
+            min=${this.inputMin ?? nothing}
+            max=${this.inputMax ?? nothing}
+            step=${this.inputStep ?? nothing}
+            .value=${String(this.inputValue ?? "")}
+            class=${INPUT_CLASS}
+            aria-label=${this.inputAriaLabel ?? nothing}
+            placeholder=${this.inputPlaceholder ?? nothing}
+            @input=${this.onInput}
+            @change=${this.onChange}
+            @keydown=${this.onKeyDown}
+          />
+        </div>
+      </div>
+    `;
+  }
+}