Ilia Denisov
453ddc5e94
- plain Svelte 5 + TS + Vite (no SvelteKit); CSS-token design system (Telegram-ready), hash router, IndexedDB session - pure libs: domain model, premium/value maps ported from solver, board replay, placement state machine, i18n en/ru - in-memory mock transport + seed data; pnpm start runs lobby->active game->board with no backend - board: pointer-drag + tap placement, MakeMove (popup / 1s-hold commit), two-state zoom, blank chooser, exchange, hint, word-check, chat - Playwright smoke (mock) green; svelte-check clean; mock bundle ~37 KB gzip
87 lines
2.1 KiB
Svelte
87 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import Header from '../components/Header.svelte';
|
|
import { app, setLocalePref, setReduceMotion, setTheme } from '../lib/app.svelte';
|
|
import { t, type Locale, type MessageKey } from '../lib/i18n/index.svelte';
|
|
import type { ThemePref } from '../lib/theme';
|
|
|
|
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'];
|
|
</script>
|
|
|
|
<Header title={t('settings.title')} back="/" />
|
|
<main class="page">
|
|
<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>
|
|
|
|
<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>
|
|
<label class="row">
|
|
<span>{t('settings.reduceMotion')}</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={app.reduceMotion}
|
|
onchange={(e) => setReduceMotion(e.currentTarget.checked)}
|
|
/>
|
|
</label>
|
|
</section>
|
|
</main>
|
|
|
|
<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);
|
|
}
|
|
.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);
|
|
}
|
|
.opt.active {
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
border-color: var(--accent);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|