Ilia Denisov
6636d7c309
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m20s
A one-time coachmark overlay walks a new player through the lobby and their first game board: a light dimmed layer draws one tail-pointed hint bubble at a time, advancing on a tap anywhere and removing itself for good after the last hint. Two independent series (lobby: settings/stats/new game; game: header/pass-exchange/hints/shuffle/rack), gated by a per-device persisted flag and marked done only after the last hint, so an interrupted run replays from the start. A deep-link into Settings -> Friends still triggers the lobby series on the first trip back to the lobby. Targets carry a data-coach attribute, so one positioning engine anchors the bubble in both portrait and landscape, re-measuring each frame until the geometry settles (route slide, hidden-banner reflow, fonts). The promo banner hides while the overlay is up (app.coachActive); a hidden DebugPanel "Reset visited" control replays the walk-through. Off by default in the mock build so the Playwright smoke is unaffected; ?coach forces it on for the dedicated e2e. Pure geometry (step lists, nextVisibleStep, placeBubble) in lib/coachmark.ts (unit-tested); Coachmark.svelte renders. Docs: FUNCTIONAL(+ru) onboarding story, UI_DESIGN coachmark section.
101 lines
3.4 KiB
Svelte
101 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
// Hidden on-device debug panel, opened by tapping the header title ten times (Header.svelte) and
|
|
// closed by tapping anywhere except the Share control. It shows a privacy-safe client diagnostic
|
|
// snapshot (no secrets, no initData values, no IP) and shares it through the OS share sheet (or a
|
|
// clipboard copy on desktop) — a support aid for reproducing client-specific issues, e.g. the
|
|
// Telegram Android presentation quirks. Drawn from the top, just under the app header.
|
|
import { app, closeDebug, resetOnboarding } from '../lib/app.svelte';
|
|
import { connection } from '../lib/connection.svelte';
|
|
import { shareText } from '../lib/share';
|
|
import { telegramChromeDiag } from '../lib/telegram';
|
|
|
|
const report = [
|
|
`app: ${__APP_VERSION__}`,
|
|
`locale: ${app.locale} theme: ${app.theme} reduceMotion: ${app.reduceMotion}`,
|
|
`online: ${connection.online} streamAlive: ${app.streamAlive}`,
|
|
`userId: ${app.session?.userId ?? '—'} guest: ${app.profile?.isGuest ?? '—'}`,
|
|
telegramChromeDiag(),
|
|
].join('\n');
|
|
|
|
let label = $state('Share');
|
|
async function share(e: MouseEvent): Promise<void> {
|
|
e.stopPropagation(); // a tap on Share shares; it must not also close the panel
|
|
const r = await shareText(report, `Scrabble debug ${__APP_VERSION__}`);
|
|
if (r === 'copied') {
|
|
label = 'Copied';
|
|
setTimeout(() => (label = 'Share'), 1500);
|
|
}
|
|
}
|
|
|
|
// Clear the first-run coachmark "seen" flags so the onboarding replays on the next launch — a
|
|
// manual re-test aid. Stops the click from also closing the panel, like the Share control.
|
|
let resetLabel = $state('Reset visited');
|
|
function resetVisited(e: MouseEvent): void {
|
|
e.stopPropagation();
|
|
resetOnboarding();
|
|
resetLabel = 'Cleared — relaunch';
|
|
setTimeout(() => (resetLabel = 'Reset visited'), 1800);
|
|
}
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="overlay" onclick={closeDebug}>
|
|
<div class="actions">
|
|
<button class="share" onclick={share}>{label}</button>
|
|
<button class="reset" onclick={resetVisited}>{resetLabel}</button>
|
|
</div>
|
|
<pre class="body">{report}</pre>
|
|
</div>
|
|
|
|
<style>
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
/* Drawn from the top; the content clears the app header (~56px + the device safe-area). */
|
|
padding: calc(var(--tg-safe-top, 0px) + 56px) 12px 16px;
|
|
background: rgba(0, 0, 0, 0.82);
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
.actions {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.share {
|
|
flex: 0 0 auto;
|
|
padding: 7px 16px;
|
|
border: 1px solid var(--accent);
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.95rem;
|
|
}
|
|
/* Secondary (outline) styling so it reads as a utility next to the primary Share action. */
|
|
.reset {
|
|
flex: 0 0 auto;
|
|
padding: 7px 16px;
|
|
border: 1px solid var(--accent);
|
|
background: transparent;
|
|
color: var(--accent);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.95rem;
|
|
}
|
|
.body {
|
|
margin: 0;
|
|
width: 100%;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
color: #d6e6ff;
|
|
}
|
|
</style>
|