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
113 lines
2.2 KiB
Svelte
113 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import type { ChatMessage } from '../lib/model';
|
|
import { t } from '../lib/i18n/index.svelte';
|
|
|
|
let {
|
|
messages,
|
|
myId,
|
|
busy,
|
|
onsend,
|
|
onnudge,
|
|
}: {
|
|
messages: ChatMessage[];
|
|
myId: string;
|
|
busy: boolean;
|
|
onsend: (text: string) => void;
|
|
onnudge: () => void;
|
|
} = $props();
|
|
|
|
let text = $state('');
|
|
|
|
function send() {
|
|
const v = text.trim();
|
|
if (!v) return;
|
|
onsend(v);
|
|
text = '';
|
|
}
|
|
</script>
|
|
|
|
<div class="chat">
|
|
<div class="list">
|
|
{#if messages.length === 0}
|
|
<p class="empty">{t('chat.empty')}</p>
|
|
{/if}
|
|
{#each messages as m (m.id)}
|
|
{#if m.kind === 'nudge'}
|
|
<div class="note">{t('chat.nudge')}</div>
|
|
{:else}
|
|
<div class="msg" class:mine={m.senderId === myId}>{m.body}</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
<div class="input">
|
|
<input
|
|
maxlength="60"
|
|
placeholder={t('chat.placeholder')}
|
|
bind:value={text}
|
|
onkeydown={(e) => e.key === 'Enter' && send()}
|
|
/>
|
|
<button onclick={send} disabled={busy}>{t('chat.send')}</button>
|
|
<button class="nudge" onclick={onnudge} disabled={busy}>{t('chat.nudge')}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
height: 56vh;
|
|
}
|
|
.list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 4px;
|
|
}
|
|
.empty {
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
.msg {
|
|
align-self: flex-start;
|
|
max-width: 80%;
|
|
padding: 7px 11px;
|
|
border-radius: 12px;
|
|
background: var(--surface-2);
|
|
}
|
|
.msg.mine {
|
|
align-self: flex-end;
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
}
|
|
.note {
|
|
align-self: center;
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
.input {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.input input {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.input button {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|