Ilia Denisov
38be7fea96
- Screen.svelte shell: nav bar grows, ad+content+tabbar pinned bottom (mobile feel) - AdBanner.svelte + banner.ts rotator (params, mock long/short, linkify); Header CSS chevron + grow; Menu (bigger CSS hamburger); TabBar + HoldConfirm shared components; user-select:none - Lobby: hide-empty sections, tab order New/Tournaments/Stats, place-based result badges (result.ts) - Settings: Board style > Labels (beginner/classic/none) + prefs plumbing (boardlabels.ts); i18n keys + ru mirror
124 lines
2.9 KiB
Svelte
124 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy } from 'svelte';
|
|
import Screen from '../components/Screen.svelte';
|
|
import { gateway } from '../lib/gateway';
|
|
import { handleError } from '../lib/app.svelte';
|
|
import { navigate } from '../lib/router.svelte';
|
|
import { t, type MessageKey } from '../lib/i18n/index.svelte';
|
|
import type { 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' },
|
|
];
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
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}
|
|
<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>
|
|
{/if}
|
|
</div>
|
|
</Screen>
|
|
|
|
<style>
|
|
.page {
|
|
padding: var(--pad);
|
|
}
|
|
.subtitle {
|
|
color: var(--text-muted);
|
|
}
|
|
.variants {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
.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;
|
|
}
|
|
.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>
|