Switch to Svelte

frontend/src/pages/Join.svelte

@@ -0,0 +1,58 @@
+<script>
+    import { push } from 'svelte-spa-router';
+    import { apiRequest } from '../lib/api';
+    export let params = {};
+    let gameId = params.id;
+    let playerName = '';
+    let error = '';
+    let joining = false;
+
+    // We can extract ?creator=true from $querystring if needed,
+    // though the backend determines creator based on if they are the first player.
+    // For UI purposes, we could show "You are the creator" if we want.
+
+    async function joinGame() {
+        if (!playerName.trim()) return;
+        joining = true;
+        error = '';
+        try {
+            const data = await apiRequest(`/game/${gameId}/join`, 'POST', { name: playerName });
+            push(`/game/${gameId}/player/${data.id}`);
+        } catch (err) {
+            error = err.message;
+            joining = false;
+        }
+    }
+</script>
+
+<div class="welcome-container">
+    <div class="header">
+        <h1>Join Crew</h1>
+    </div>
+
+    <div class="card creation-card">
+        <h2>Enter your Pi-Rat name</h2>
+        <form on:submit|preventDefault={joinGame}>
+            <div class="form-group">
+                <label for="playerName">Your Name</label>
+                <input 
+                    type="text" 
+                    id="playerName" 
+                    bind:value={playerName} 
+                    required 
+                    class="form-control input-large"
+                    autocomplete="off"
+                    autofocus
+                />
+            </div>
+            
+            {#if error}
+                <div class="alert alert-danger">{error}</div>
+            {/if}
+
+            <button type="submit" class="btn btn-primary btn-large btn-block mt-4" disabled={joining}>
+                {joining ? 'Joining...' : 'Join Game'}
+            </button>
+        </form>
+    </div>
+</div>