scrabble-game/ui/src/screens/NewGame.svelte

<script lang="ts">
  import { onDestroy, onMount } from 'svelte';
  import Screen from '../components/Screen.svelte';
  import { gateway } from '../lib/gateway';
  import { app, handleError, showToast } from '../lib/app.svelte';
  import { navigate } from '../lib/router.svelte';
  import { t, type MessageKey } from '../lib/i18n/index.svelte';
  import type { AccountRef, Variant } from '../lib/model';

  const variants: { id: Variant; label: MessageKey }[] = [
    { id: 'english', label: 'new.english' },
    { id: 'russian', label: 'new.russian' },
    { id: 'erudit', label: 'new.erudit' },
  ];
  const timeouts = [
    { secs: 300, key: 'time.minutes' as MessageKey, n: 5 },
    { secs: 1800, key: 'time.minutes' as MessageKey, n: 30 },
    { secs: 3600, key: 'time.hours' as MessageKey, n: 1 },
    { secs: 86400, key: 'time.hours' as MessageKey, n: 24 },
  ];

  const guest = $derived(app.profile?.isGuest ?? true);
  let mode = $state<'auto' | 'friends'>('auto');

  // --- auto-match ---
  let searching = $state(false);
  let poll: ReturnType<typeof setInterval> | null = null;

  function stop() {
    if (poll) {
      clearInterval(poll);
      poll = null;
    }
  }

  async function find(v: Variant) {
    searching = true;
    try {
      const r = await gateway.lobbyEnqueue(v);
      if (r.matched && r.game) {
        navigate(`/game/${r.game.id}`);
        return;
      }
      poll = setInterval(async () => {
        try {
          const p = await gateway.lobbyPoll();
          if (p.matched && p.game) {
            stop();
            navigate(`/game/${p.game.id}`);
          }
        } catch (e) {
          handleError(e);
        }
      }, 2500);
    } catch (e) {
      searching = false;
      handleError(e);
    }
  }

  // --- friend game ---
  let friends = $state<AccountRef[]>([]);
  let selected = $state<string[]>([]);
  let inviteVariant = $state<Variant>('english');
  let timeoutSecs = $state(86400);
  let hints = $state(1);

  onMount(async () => {
    if (guest) return;
    try {
      friends = await gateway.friendsList();
    } catch (e) {
      handleError(e);
    }
  });

  function toggle(id: string) {
    selected = selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id];
  }

  async function sendInvite() {
    if (selected.length === 0 || selected.length > 3) return;
    try {
      await gateway.invitationCreate(selected, {
        variant: inviteVariant,
        turnTimeoutSecs: timeoutSecs,
        hintsAllowed: hints > 0,
        hintsPerPlayer: hints,
        dropoutTiles: 'remove',
      });
      showToast(t('new.invited'));
      navigate('/');
    } catch (e) {
      handleError(e);
    }
  }

  onDestroy(stop);
</script>

<Screen title={t('new.title')} back="/">
  <div class="page">
    {#if searching}
      <div class="searching">
        <div class="spinner"></div>
        <p>{t('new.searching')}</p>
        <button class="cancel" onclick={() => { stop(); navigate('/'); }}>{t('common.cancel')}</button>
      </div>
    {:else}
      {#if !guest}
        <div class="seg modes">
          <button class="opt" class:active={mode === 'auto'} onclick={() => (mode = 'auto')}>{t('new.auto')}</button>
          <button class="opt" class:active={mode === 'friends'} onclick={() => (mode = 'friends')}>{t('new.withFriends')}</button>
        </div>
      {/if}

      {#if mode === 'auto'}
        <p class="subtitle">{t('new.subtitle')}</p>
        <div class="variants">
          {#each variants as v (v.id)}
            <button class="variant" onclick={() => find(v.id)}>{t(v.label)}</button>
          {/each}
        </div>
      {:else}
        {#if friends.length === 0}
          <p class="subtitle">{t('new.noFriends')}</p>
        {:else}
          <h3>{t('new.pickFriends')}</h3>
          <div class="friends">
            {#each friends as f (f.accountId)}
              <label class="friend">
                <input type="checkbox" checked={selected.includes(f.accountId)} onchange={() => toggle(f.accountId)} />
                <span>{f.displayName}</span>
              </label>
            {/each}
          </div>

          <h3>{t('new.title')}</h3>
          <div class="seg">
            {#each variants as v (v.id)}
              <button class="opt" class:active={inviteVariant === v.id} onclick={() => (inviteVariant = v.id)}>{t(v.label)}</button>
            {/each}
          </div>

          <h3>{t('new.moveTime')}</h3>
          <div class="seg">
            {#each timeouts as to (to.secs)}
              <button class="opt" class:active={timeoutSecs === to.secs} onclick={() => (timeoutSecs = to.secs)}>
                {t(to.key, { n: to.n })}
              </button>
            {/each}
          </div>

          <h3>{t('new.hintsPerPlayer')}</h3>
          <div class="seg">
            {#each [0, 1, 2] as h (h)}
              <button class="opt" class:active={hints === h} onclick={() => (hints = h)}>{h}</button>
            {/each}
          </div>

          <button class="invite" disabled={selected.length === 0} onclick={sendInvite}>{t('new.invite')}</button>
        {/if}
      {/if}
    {/if}
  </div>
</Screen>

<style>
  .page {
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .subtitle {
    color: var(--text-muted);
    margin: 0;
  }
  h3 {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
  }
  .variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .variant {
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 1.05rem;
    font-weight: 600;
    user-select: none;
  }
  .seg {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modes {
    margin-bottom: 4px;
  }
  .opt {
    flex: 1;
    min-width: 64px;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    user-select: none;
  }
  .opt.active {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
  }
  .friends {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .friend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
  }
  .invite {
    margin-top: 8px;
    padding: 14px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    border-radius: var(--radius);
    font-weight: 600;
  }
  .invite:disabled {
    opacity: 0.5;
  }
  .searching {
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 48px 0;
    color: var(--text-muted);
  }
  .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .cancel {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
</style>