Ilia Denisov
1d795e0acf
Tests · UI / test (push) Successful in 17s
Second owner-review pass (iPhone simulator): - Chat (and the modal) are sized in dvh so they shrink above the software keyboard, keeping the start of the conversation on screen instead of pushed off the top. - The profile away window returns to a native <input type="time" step="600"> (the iOS wheel with 10-minute steps) instead of separate dropdowns; the timezone stays a native offset <select>. - A finished game reserves the rack's height (min-height) so the footer no longer collapses when the final rack is empty — no layout jump versus an active game. - New-game "play with friends" is made compact: a searchable, bounded-scroll friend list, the game-type / move-time / hints controls as native selects in one row (labels above), and Send invitation pinned at the bottom — it scales to many friends.
119 lines
2.5 KiB
Svelte
119 lines
2.5 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 class="iconbtn" onclick={send} disabled={busy} aria-label={t('chat.send')}>⬆️</button>
|
|
<button class="iconbtn" onclick={onnudge} disabled={busy} aria-label={t('chat.nudge')}>🛎️</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
/* dvh so the chat shrinks with an open keyboard, keeping the start of the
|
|
conversation on screen instead of pushed above the fold (vh fallback). */
|
|
height: 56vh;
|
|
height: 56dvh;
|
|
}
|
|
.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;
|
|
min-width: 0;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.iconbtn {
|
|
flex: 0 0 auto;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
}
|
|
</style>
|