feat: switch to using Input OTP from shadcn-svelte for join code entry

Author: imdevarsh

Dockerfile

@@ -3,7 +3,7 @@
 FROM oven/bun:1-debian AS base
 WORKDIR /usr/src/app
 
-# For Coolify healthchecks
+# for Coolify healthchecks
 RUN apt-get update && apt-get install -y curl \
   && rm -rf /var/lib/apt/lists/*
 

src/lib/components/ui/input-otp/index.ts

@@ -0,0 +1,15 @@
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
+
+export {
+  Root,
+  Group,
+  Slot,
+  Separator,
+  Root as InputOTP,
+  Group as InputOTPGroup,
+  Slot as InputOTPSlot,
+  Separator as InputOTPSeparator
+};

src/lib/components/ui/input-otp/input-otp-group.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="input-otp-group" class={cn("flex items-center", className)} {...restProps}>
+  {@render children?.()}
+</div>

src/lib/components/ui/input-otp/input-otp-separator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "$lib/utils.js";
+  import DotIcon from "@lucide/svelte/icons/dot";
+
+  let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <DotIcon />
+  {/if}
+</div>

src/lib/components/ui/input-otp/input-otp-slot.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { PinInput as InputOTPPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), cell, class: className, ...restProps }: InputOTPPrimitive.CellProps = $props();
+</script>
+
+<InputOTPPrimitive.Cell
+  {cell}
+  bind:ref
+  data-slot="input-otp-slot"
+  class={cn(
+    "border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm outline-none transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+    cell.isActive &&
+      "border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
+    className
+  )}
+  {...restProps}
+>
+  {cell.char}
+  {#if cell.hasFakeCaret}
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+    </div>
+  {/if}
+</InputOTPPrimitive.Cell>

src/lib/components/ui/input-otp/input-otp.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { PinInput as InputOTPPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value = $bindable(""),
+    ...restProps
+  }: InputOTPPrimitive.RootProps = $props();
+</script>
+
+<InputOTPPrimitive.Root
+  bind:ref
+  bind:value
+  data-slot="input-otp"
+  class={cn("has-disabled:opacity-50 flex items-center gap-2 [&_input]:disabled:cursor-not-allowed", className)}
+  {...restProps}
+/>

src/routes/(mathex)/mathex/app/play/+page.svelte

@@ -1,45 +1,34 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Header } from "$lib/components/ui/header";
+  import * as InputOTP from "$lib/components/ui/input-otp";
   import MoveLeft from "@lucide/svelte/icons/move-left";
   import { toast } from "svelte-sonner";
+  import { REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
 
   import { goto } from "$app/navigation";
 
   import { io, type Socket } from "socket.io-client";
   import type { RoomCreateClientToServerEvents, RoomCreateServerToClientEvents } from "$lib/mathex/schemas";
   const socket: Socket<RoomCreateServerToClientEvents, RoomCreateClientToServerEvents> = io("/rooms");
 
-  let code: string[] = $state(Array.from({ length: 8 }).map(() => ""));
+  let code: string = $state("");
   let lastCode: string = "";
-  async function checkLetter(i: number) {
-    code[i] = code[i].trim();
-    if (code[i].length > 1) {
-      let rest = code[i].split("").slice(1).join("");
-      code[i] = code[i][0].toUpperCase();
-      if (code[i + 1] !== undefined) {
-        code[i + 1] += rest;
-        document.getElementById("code-input" + (i + 1))?.focus();
-        checkLetter(i + 1);
-      }
-    } else {
-      code[i] = code[i].toUpperCase();
-    }
-
-    const codeStr = code.join("");
-    if (codeStr.length === 8 && lastCode !== codeStr) {
-      lastCode = codeStr;
+  async function setCode(newCode: string) {
+    code = newCode.toUpperCase();
+    if (code.length === 8 && lastCode !== code) {
+      lastCode = code;
       toast.promise(
         new Promise<void>(async (resolve, reject) => {
-          if (await socket.emitWithAck("checkRoom", codeStr)) {
+          if (await socket.emitWithAck("checkRoom", code)) {
             resolve();
           } else reject();
         }),
         {
           loading: "Loading...",
           success() {
             socket.disconnect();
-            goto("/mathex/app/play/" + codeStr);
+            goto("/mathex/app/play/" + code);
             return "Going to room...";
           },
           error: "That room does not exist! Try typing the room ID again."
@@ -52,21 +41,20 @@
 <div class="flex flex-col h-full w-full justify-center items-center">
   <Header size="h1">Join Room</Header>
   <div class="flex gap-1 mt-2">
-    {#each code as letter, i}
-      <!-- svelte-ignore a11y_autofocus -->
-      <input
-        type="text"
-        id="code-input{i}"
-        class="w-12 h-12 bg-gray-100 block rounded-sm text-slate-900 text-xl text-center"
-        autofocus={i === 0}
-        bind:value={code[i]}
-        onkeydown={async (e) => {
-          const prevEl = document.getElementById("code-input" + (i - 1));
-          if (prevEl && letter === "" && e.key === "Backspace") prevEl.focus();
-        }}
-        oninput={() => checkLetter(i)}
-      />
-    {/each}
+    <InputOTP.Root
+      maxlength={8}
+      spellcheck="false"
+      pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+      bind:value={() => code, setCode}
+    >
+      {#snippet children({ cells })}
+        {#each cells as cell (cell)}
+          <InputOTP.Group>
+            <InputOTP.Slot class="bg-gray-100 text-slate-900" {cell} />
+          </InputOTP.Group>
+        {/each}
+      {/snippet}
+    </InputOTP.Root>
   </div>
   <Button variant="link" class="text-white" href="/mathex/app"><MoveLeft class="mr-1" /> Back to home</Button>
 </div>