3 files changed, 52 insertions(+), 16 deletions(-)

M starkingdoms-client/src/components/Chatbox.svelte
A starkingdoms-client/src/components/ui/TextInput.svelte
M starkingdoms-client/src/pages/Home.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"

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

@@ 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" />