scrabble-game/ui/src/Landing.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { applyTheme } from './lib/theme';
  import { i18n, localeFrom, setLocale, t, type Locale } from './lib/i18n/index.svelte';
  import { loadPrefs, savePrefs, type Prefs } from './lib/session';
  import { aboutContent } from './lib/aboutContent';
  import { telegramChannelLink } from './lib/landing';

  // Standalone landing page (Stage 17), the public entry at "/" (the game SPA lives at /app/ and
  // /telegram/). It reuses the app's theme/i18n/prefs leaf modules — not the app store — so it
  // stays light. Theme is EPHEMERAL here (no auto, no persistence): it starts from the system
  // scheme and the icon toggles light<->dark in memory. Language IS persisted (synced with the app).

  let theme = $state<'light' | 'dark'>('light');
  let langOpen = $state(false);
  let prefs: Partial<Prefs> = {};

  const about = $derived(aboutContent(i18n.locale, 24)); // 24h = the auto-match move clock
  const tgLink = $derived(telegramChannelLink(i18n.locale));
  const locales: { code: Locale; label: string }[] = [
    { code: 'en', label: '🇬🇧 English' },
    { code: 'ru', label: '🇷🇺 Русский' },
  ];

  function systemTheme(): 'light' | 'dark' {
    return typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  onMount(async () => {
    prefs = await loadPrefs();
    theme = systemTheme();
    applyTheme(theme);
    setLocale(prefs.locale ?? localeFrom(typeof navigator !== 'undefined' ? navigator.language : 'en'));
  });

  function toggleTheme(): void {
    theme = theme === 'light' ? 'dark' : 'light';
    applyTheme(theme); // ephemeral — deliberately not persisted
  }

  function chooseLocale(lc: Locale): void {
    setLocale(lc);
    langOpen = false;
    // Persist the language only, keeping the app's other prefs (notably its own persisted theme).
    void savePrefs({
      theme: prefs.theme ?? 'auto',
      locale: lc,
      reduceMotion: prefs.reduceMotion ?? false,
      boardLabels: prefs.boardLabels ?? 'beginner',
      boardLines: prefs.boardLines ?? false,
    });
    prefs = { ...prefs, locale: lc };
  }
</script>

<main class="landing">
  <header class="bar">
    <div class="lang">
      <button class="icon" aria-label="Language" aria-expanded={langOpen} onclick={() => (langOpen = !langOpen)}>🌐</button>
      {#if langOpen}
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button class="backdrop" onclick={() => (langOpen = false)}></button>
        <div class="menu" role="menu">
          {#each locales as l (l.code)}
            <button role="menuitem" class:on={i18n.locale === l.code} onclick={() => chooseLocale(l.code)}>{l.label}</button>
          {/each}
        </div>
      {/if}
    </div>
    <button class="icon" aria-label="Theme" onclick={toggleTheme}>{theme === 'light' ? '☼' : '☾'}</button>
  </header>

  <section class="hero">
    <h1>{about.title}</h1>
    <p class="tagline">{t('landing.tagline')}</p>
    {#if tgLink}
      <a class="tg" href={tgLink} target="_blank" rel="noopener noreferrer" aria-label={t('landing.playTelegram')}>
        <img src="telegram-logo.svg" alt="" width="64" height="64" />
      </a>
    {/if}
  </section>

  <section class="info">
    <p class="rules">
      <a href={about.rulesUrl} target="_blank" rel="noopener noreferrer">{about.rulesPrefix}{about.rulesLink}</a>
    </p>
    <div class="cols">
      <div class="col">
        <h2>{about.randomTitle}</h2>
        <p class="respect">❗️ {about.randomRespect}</p>
        <ul>
          {#each about.random as r (r)}<li>{r}</li>{/each}
        </ul>
      </div>
      <div class="col">
        <h2>{about.friendsTitle}</h2>
        <ul>
          {#each about.friends as f (f)}<li>{f}</li>{/each}
        </ul>
      </div>
    </div>
  </section>

  <footer class="ft">{t('about.version', { v: __APP_VERSION__ })}</footer>
</main>

<style>
  .landing {
    min-height: 100%;
    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px var(--pad) 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: var(--text);
  }
  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lang {
    position: relative;
  }
  .icon {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: none;
    border: none;
  }
  .menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 9;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-width: 150px;
    overflow: hidden;
  }
  .menu button {
    text-align: left;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text);
    white-space: nowrap;
  }
  .menu button:hover {
    background: var(--surface-2);
  }
  .menu button.on {
    color: var(--accent);
    font-weight: 600;
  }
  .hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 8px;
  }
  .hero h1 {
    margin: 0;
    font-size: 2.4rem;
    letter-spacing: 0.5px;
  }
  .tagline {
    margin: 0 auto;
    max-width: 30ch;
    color: var(--text-muted);
    font-size: 1.05rem;
  }
  /* The Telegram entry is just the bigger logo (no button chrome, no caption); the link
     keeps an aria-label for assistive tech (Stage 17). */
  .tg {
    align-self: center;
    display: inline-flex;
    margin-top: 8px;
    border-radius: 50%;
  }
  .tg img {
    display: block;
    transition: transform 0.12s ease;
  }
  .tg:hover img {
    transform: scale(1.06);
  }
  .info {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 18px var(--pad);
  }
  .rules {
    margin: 0 0 14px;
    text-align: center;
  }
  .rules a {
    color: var(--accent);
  }
  .cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }
  .col h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
  }
  .respect {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .col ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .ft {
    margin-top: auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
  }
</style>