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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user