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
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:
+16
-2
@@ -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 ?? ''));
|
||||
|
||||
Reference in New Issue
Block a user