From a84e9d8cb712c1dd71c9a78e9bc135c6943156b5 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Mon, 8 Jun 2026 23:37:02 +0200
Subject: [PATCH] Fix screen-slide direction: by route depth, so back from
 chat/check slides back

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.
---
 ui/src/App.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index a1279d3..a811c03 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -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 ?? ''));