Fix screen-slide direction: by route depth, so back from chat/check slides back
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 12s
CI / ui (pull_request) Successful in 35s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m7s

The 'lobby is back' rule slid the chat/check back-to-the-game forward. Direction is now
computed from route depth (lobby < game < chat/check): shallower = back, deeper = forward.
This commit is contained in:
Ilia Denisov
2026-06-08 23:37:02 +02:00
parent 70110effd9
commit a84e9d8cb7
+16 -2
View File
@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { cubicOut } from 'svelte/easing';
import { app, bootstrap } from './lib/app.svelte';
import { navigate, router } from './lib/router.svelte';
import { navigate, router, type RouteName } from './lib/router.svelte';
import { t } from './lib/i18n/index.svelte';
import { insideTelegram, telegramBackButton } from './lib/telegram';
import Toast from './components/Toast.svelte';
@@ -38,7 +38,21 @@
// lobby slides it in from the right (forward); returning to the lobby slides the
// screen out to the right and reveals the lobby (back). Transitions are local, so
// they do not play on the initial mount, and collapse to nothing under reduce-motion.
const dir = $derived(router.route.name === 'lobby' ? 'back' : 'forward');
// Slide direction by route depth: going deeper (lobby → game → chat/check) slides forward,
// returning to a shallower screen slides back. A plain "lobby is back" rule slid the chat/check
// back-to-the-game the wrong way. dir is read with the previous depth (the effect updates it
// only after the transition has captured its sign).
function routeDepth(name: RouteName): number {
if (name === 'gameChat' || name === 'gameCheck') return 2;
if (name === 'lobby' || name === 'login') return 0;
return 1;
}
const curDepth = $derived(routeDepth(router.route.name));
let prevDepth = $state(routeDepth(router.route.name));
const dir = $derived(curDepth < prevDepth ? 'back' : 'forward');
$effect(() => {
prevDepth = curDepth;
});
const enterSign = $derived(dir === 'forward' ? 1 : -1);
const leaveSign = $derived(dir === 'forward' ? -1 : 1);
const routeKey = $derived(router.route.name + (router.route.params.id ?? ''));