63 lines
2.0 KiB
Svelte
63 lines
2.0 KiB
Svelte
<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 name</h2>
|
|
<p class="info-text" style="margin-bottom: 1rem;">
|
|
This is <strong>your</strong> name as a player, not your Pi-Rat's. Your Pi-Rat will be known
|
|
by their smell (e.g. "Recruit Gunpowder") until they earn a proper Name in play.
|
|
</p>
|
|
<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>
|