From 58de35ad8a57ed3e02011aadda229de500a3ff73 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Thu, 4 Jan 2024 11:47:25 -0500
Subject: [PATCH] TextInput element

---
 .../src/components/Chatbox.svelte             | 17 +++-----
 .../src/components/ui/TextInput.svelte        | 40 +++++++++++++++++++
 starkingdoms-client/src/pages/Home.svelte     | 11 ++---
 3 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 starkingdoms-client/src/components/ui/TextInput.svelte

diff --git a/starkingdoms-client/src/components/Chatbox.svelte b/starkingdoms-client/src/components/Chatbox.svelte
index baaf2a3aec067c3e51fbff0b135a2741002dfd1d..2c43a28bf4f30b1b31bded91305ea510098ac44e 100644
--- a/starkingdoms-client/src/components/Chatbox.svelte
+++ b/starkingdoms-client/src/components/Chatbox.svelte
@@ -4,6 +4,7 @@
   import { sendPacket } from "../hub.ts";
   import { global } from "../globals.js";
   import { afterUpdate } from "svelte";
+  import TextInput from "./ui/TextInput.svelte";
 
   interface Message {
     classname: string;
@@ -12,15 +13,11 @@
 
   let messages: Message[] = [];
   let chatbox: HTMLDivElement | null;
-  let chatentry;
+  let value = "";
 
   export function addMessage(classname: string, message: string) {
     messages.push({ classname: classname, message: message });
     messages = messages; // Trigger Svelte reactivity
-
-    if (messages.length > 128) {
-      delete messages[0];
-    }
   }
 
   afterUpdate(() => {
@@ -31,14 +28,12 @@
 
   function onkeydown(e: KeyboardEvent) {
     if (e.key === "Enter") {
-      let value = chatentry!.value;
-
       if (value.startsWith(".msg")) {
         let args = value.split(" ");
         if (args.length < 3) {
           addMessage("server-error", "Command error");
 
-          chatentry!.value = "";
+          value = "";
           return;
         }
         let target = args[1];
@@ -63,7 +58,7 @@
         };
         sendPacket(global.client!, chat_packet);
       }
-      chatentry!.value = "";
+      value = "";
     }
   }
 </script>
@@ -74,8 +69,8 @@
       <p class="message {message.classname}">{message.message}</p>
     {/each}
   </div>
-  <input
-    bind:this={chatentry}
+  <TextInput
+    bind:value
     on:keydown={onkeydown}
     placeholder="Enter message or command here..."
     class="chat-box"
diff --git a/starkingdoms-client/src/components/ui/TextInput.svelte b/starkingdoms-client/src/components/ui/TextInput.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d2d3bdf0df4e96056aa6016f14f6c190f42930a3
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/TextInput.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id: string = "";
+  export let disabled = false;
+  export let style = "";
+  export let required = false;
+  export let autocomplete = "";
+  export let value = "";
+  export let placeholder = "";
+</script>
+
+<input
+  bind:value
+  type="text"
+  {id}
+  class="txt {clazz}"
+  {disabled}
+  on:click
+  on:focus
+  on:input
+  on:change
+  on:keydown
+  on:keyup
+  {style}
+  {required}
+  {autocomplete}
+  {placeholder} />
+
+<style lang="scss">
+  .txt {
+    appearance: none;
+    background: transparent;
+    color: var(--text);
+    padding: 0.675em 1em;
+    border: 1px solid var(--links);
+    border-radius: 0.25rem;
+    cursor: text;
+  }
+</style>
diff --git a/starkingdoms-client/src/pages/Home.svelte b/starkingdoms-client/src/pages/Home.svelte
index 58ed506c0e32de3b046c82b61603c9459966fc3d..85b9af2574022159eb4b7ea45df37384c4fe56a2 100644
--- a/starkingdoms-client/src/pages/Home.svelte
+++ b/starkingdoms-client/src/pages/Home.svelte
@@ -8,6 +8,7 @@
   import WarningIcon from "../icons/WarningIcon.svelte";
   import Popup from "../components/ui/Popup.svelte";
   import Button from "../components/ui/Button.svelte";
+  import TextInput from "../components/ui/TextInput.svelte";
 
   let config = DEFAULT_CONFIG;
   // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
@@ -33,10 +34,10 @@
 
   const is_development = window.localStorage.getItem("stk-mode") === "debug";
 
-  let nonprod_warning;
+  let nonprod_warning: HTMLSpanElement;
 
-  let server;
-  let username;
+  let server = "";
+  let username = "";
 
   function playGame() {
     window.location.href = `/play/?srv=${server}&username=${username}`;
@@ -59,9 +60,9 @@
 
   <form id="join-fm" class="form" on:submit|preventDefault={playGame}>
     <label for="username" class="label">Username</label>
-    <input
+    <TextInput
+      style="width: 100%; max-width: 100%;"
       bind:value={username}
-      class="textentry"
       id="username"
       required
       autocomplete="off" />