feat(ui): per-kind active-game limit lock on the New Game screen
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 12s
CI / integration (pull_request) Successful in 28s
CI / ui (pull_request) Successful in 1m11s
CI / conformance (pull_request) Successful in 10s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m46s

Carry the caller's per-tier active-game caps and each game's kind on the
wire (Profile.game_limits + GameView.kind, additive FBS + gateway transcode
+ client codec, committed regen). The New Game screen counts the player's
active games per kind from the lobby and locks a capped start: an outline
button with a lock that opens a funnel modal instead of a game -- a sign-in
prompt for a guest, a "finish a current game first" notice for a signed-in
account (native Telegram popup, in-app modal elsewhere). The lock lifts via
the existing profile refetch after a guest->durable upgrade.

Remove the lobby's old at_game_limit New-Game tab disable + notice: the flag
(now the random-kind cap) conflicted with the per-kind lock -- it hid the
screen where the lock lives and wrongly blocked an unfulfilled kind. The New
Game tab is always enabled; the per-kind start lock is the only gate. The
at_game_limit wire field stays (unused by the client) for a later cleanup.

Tests: client lock logic + codec kind/game_limits roundtrip + gateway
transcode encode + native popup builders (unit); a mock e2e for the lock
badge and the modal.
This commit is contained in:
Ilia Denisov
2026-07-10 10:09:45 +02:00
parent e45167041f
commit 3306a016a0
45 changed files with 811 additions and 130 deletions
+70
View File
@@ -0,0 +1,70 @@
<script lang="ts">
import { t } from '../lib/i18n/index.svelte';
import { insideTelegram, telegramDialogsAvailable, telegramShowPopup } from '../lib/telegram';
import { LOGIN_BUTTON_ID, gameLimitGuestPopup, gameLimitDurablePopup } from '../lib/nativedialogs';
import Modal from './Modal.svelte';
// The New-Game screen raises this when the player taps a start whose kind is at its cap. guest
// picks the message: a sign-in funnel (a guest plays more by registering) vs a durable account's
// plain "finish a current game first" notice. onclose dismisses; onlogin routes a guest to sign-in.
let { open, guest, onclose, onlogin }: { open: boolean; guest: boolean; onclose: () => void; onlogin: () => void } = $props();
const title = $derived(guest ? t('new.limitGuestTitle') : t('new.limitDurableTitle'));
const body = $derived(guest ? t('new.limitGuestBody') : t('new.limitDurableBody'));
// Native path: inside the Mini App with native dialogs, present Telegram's own popup instead of
// the in-app modal (evaluated at fire time — the SDK loads after mount). A guest popup's login
// button routes to sign-in; any other dismissal closes. The message here is a plain notice with
// no gesture-gated follow-up, so a native popup is safe (unlike share/clipboard flows).
let shown = false;
$effect(() => {
if (open && !shown && insideTelegram() && telegramDialogsAvailable()) {
shown = true;
const params = guest
? gameLimitGuestPopup(title, body, t('common.cancel'), t('new.limitLogin'))
: gameLimitDurablePopup(title, body, t('common.ok'));
void telegramShowPopup(params).then((id) => (guest && id === LOGIN_BUTTON_ID ? onlogin() : onclose()));
} else if (!open) {
shown = false;
}
});
</script>
{#if open && !(insideTelegram() && telegramDialogsAvailable())}
<Modal {title} onclose={onclose}>
<p class="msg">{body}</p>
<div class="actions">
{#if guest}
<button class="cancel" onclick={onclose}>{t('common.cancel')}</button>
<button class="primary" onclick={onlogin}>{t('new.limitLogin')}</button>
{:else}
<button class="primary" onclick={onclose}>{t('common.ok')}</button>
{/if}
</div>
</Modal>
{/if}
<style>
.msg {
margin: 0 0 16px;
line-height: 1.5;
}
.actions {
display: flex;
gap: 8px;
}
.actions button {
flex: 1;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--accent);
}
.cancel {
background: transparent;
color: var(--accent);
}
.primary {
background: var(--accent);
color: var(--accent-text);
}
</style>