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

<script lang="ts">
  import {
    app,
    setBoardLabels,
    setLocalePref,
    setReduceMotion,
    setTheme,
    setZoomBoard,
  } from '../lib/app.svelte';
  import { t, type Locale, type MessageKey } from '../lib/i18n/index.svelte';
  import type { ThemePref } from '../lib/theme';
  import type { BoardLabelMode } from '../lib/boardlabels';
  import { insideTelegram } from '../lib/telegram';
  import InstallApp from '../components/InstallApp.svelte';

  // The board-zoom toggle only makes sense on a touch device (the desktop / landscape layouts fit
  // the whole board and never auto-zoom), so it is shown only for a coarse pointer.
  const coarsePointer = typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches;

  const themes: ThemePref[] = ['auto', 'light', 'dark'];
  const themeLabel: Record<ThemePref, MessageKey> = {
    auto: 'settings.themeAuto',
    light: 'settings.themeLight',
    dark: 'settings.themeDark',
  };
  const locales: Locale[] = ['en', 'ru'];
  const labelModes: BoardLabelMode[] = ['beginner', 'classic', 'none'];
  const labelModeKey: Record<BoardLabelMode, MessageKey> = {
    beginner: 'settings.labelsBeginner',
    classic: 'settings.labelsClassic',
    none: 'settings.labelsNone',
  };

</script>

<div class="page">
  {#if !insideTelegram()}
    <section>
      <h3>{t('settings.theme')}</h3>
      <div class="seg">
        {#each themes as th (th)}
          <button class="opt" class:active={app.theme === th} onclick={() => setTheme(th)}>
            {t(themeLabel[th])}
          </button>
        {/each}
      </div>
    </section>
  {/if}

  <section>
    <h3>{t('settings.language')}</h3>
    <div class="seg">
      {#each locales as lc (lc)}
        <button class="opt" class:active={app.locale === lc} onclick={() => setLocalePref(lc)}>
          {t(lc === 'en' ? 'lang.en' : 'lang.ru')}
        </button>
      {/each}
    </div>
  </section>

  <section>
    <h3>{t('settings.boardStyle')}</h3>
    <div class="sub">{t('settings.boardLabels')}</div>
    <div class="seg">
      {#each labelModes as lm (lm)}
        <button class="opt" class:active={app.boardLabels === lm} onclick={() => setBoardLabels(lm)}>
          {t(labelModeKey[lm])}
        </button>
      {/each}
    </div>
  </section>

  <section>
    <label class="row">
      <span>{t('settings.reduceMotion')}</span>
      <input
        type="checkbox"
        checked={app.reduceMotion}
        onchange={(e) => setReduceMotion(e.currentTarget.checked)}
      />
    </label>
    {#if coarsePointer}
      <label class="row">
        <span>{t('settings.zoomBoard')}</span>
        <input
          type="checkbox"
          checked={app.zoomBoard}
          onchange={(e) => setZoomBoard(e.currentTarget.checked)}
        />
      </label>
    {/if}
  </section>

  <!-- Web-only install call-to-action at the bottom of Settings (renders nothing unless the app
       is installable here — see components/InstallApp.svelte / lib/pwa). -->
  <InstallApp />
</div>

<style>
  .page {
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  .sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .seg {
    display: flex;
    gap: 8px;
  }
  .opt {
    flex: 1;
    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);
  }
  .opt:disabled {
    opacity: 0.55;
    cursor: default;
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>