feat(ui): lobby invitation card redesign + new-game tweaks

- Lobby friend-invitation card: icon-only checkmark/cross actions stacked in a
  min-width right column; the middle column (From <name> + flag + variant rules,
  like New Game) grows and wraps. The cross now opens a decline-confirmation modal
  (mirroring the in-game resign confirm) instead of declining on first tap.
- New Game with a friend: a lone offered variant is pre-selected and its picker
  disabled (nothing else to choose); relabel 'Тип игры' -> 'Вариант' and
  'Подсказок на игрока' -> 'Подсказки'.
- Quick game: pin the Start button to the bottom of the screen, mirroring the
  friend-game Send-invitation button.
This commit is contained in:
Ilia Denisov
2026-06-22 09:11:36 +02:00
parent 48b06f4594
commit 8a06fbc3c7
4 changed files with 101 additions and 27 deletions
+12 -3
View File
@@ -67,9 +67,12 @@
let friends = $state<AccountRef[]>([]);
let selected = $state<string[]>([]);
let friendFilter = $state('');
// No default game type yet — the player must pick one (a smarter default from play
// history / language would be a future refinement). '' renders the disabled placeholder option.
// A lone offered variant is pre-selected and its picker disabled (nothing else to choose);
// with several, the player picks. '' renders the disabled placeholder option.
let inviteVariant = $state<Variant | ''>('');
$effect(() => {
if (variants.length === 1 && !inviteVariant) inviteVariant = variants[0].id;
});
let timeoutSecs = $state(86400);
let hints = $state(1);
@@ -152,6 +155,7 @@
<input type="checkbox" bind:checked={multipleWords} />
</label>
{/if}
<div class="grow"></div>
<p class="movelimit">{opponent === 'ai' ? t('new.aiInactiveLimit') : t('new.moveLimit', { n: AUTO_MATCH_HOURS })}</p>
{#if opponent === 'random'}<p class="searchhint">{t('new.searchHint')}</p>{/if}
<button
@@ -179,7 +183,7 @@
<div class="settings-row">
<label class="field">
<span>{t('new.gameType')}</span>
<select bind:value={inviteVariant} class:placeholder={!inviteVariant}>
<select bind:value={inviteVariant} class:placeholder={!inviteVariant} disabled={variants.length === 1}>
<option value="" disabled></option>
{#each variants as v (v.id)}<option value={v.id}>{t(v.label)}</option>{/each}
</select>
@@ -387,6 +391,11 @@
color: var(--text-muted);
margin: 0;
}
/* Pushes the auto-match start cluster (move-limit hint + Start button) to the bottom,
mirroring the friend-game invite button pinned by the .fg scroll area. */
.grow {
flex: 1;
}
.invite {
flex: 0 0 auto;
padding: 14px;