From 34635f798208052a4be353200e4bdc0489c05cb3 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 10 Mar 2026 09:18:44 +0100
Subject: [PATCH] =?UTF-8?q?Fix:=20navigation=20clavier=20Play=20=E2=80=94?=
 =?UTF-8?q?=20capture=20phase=20+=20stopImmediatePropagation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Handler enregistré en { capture: true } → s'exécute avant App.svelte
- stopImmediatePropagation quand navigation interne (pas aux limites)
  → empêche App de changer de slide en même temps
- Aux limites : aucune interception → App gère naturellement la slide adjacente
- Supprimé : slideTo import, prevSlidePath/nextSlidePath (inutiles)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/Play.svelte | 32 +++++++++++++-------------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/views/Play.svelte b/src/views/Play.svelte
index dea585e..bb0d57e 100644
--- a/src/views/Play.svelte
+++ b/src/views/Play.svelte
@@ -1,16 +1,13 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
-  import { slideTo } from '@router'
   import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
 
   let { data } = $props()
 
   // --- Derived ---
-  const isActive      = $derived(slides.active?.id === 'jouer')
-  const games         = $derived(data?.games ?? [])
-  const prevSlidePath = $derived(slides.all[slides.activeIndex - 1]?.path ?? null)
-  const nextSlidePath = $derived(slides.all[slides.activeIndex + 1]?.path ?? null)
+  const isActive = $derived(slides.active?.id === 'jouer')
+  const games    = $derived(data?.games ?? [])
 
   // --- State ---
   let currentIndex   = $state(0)
@@ -73,22 +70,19 @@
   }
 
   // --- Clavier ---
+  // Enregistré en capture pour s'exécuter avant le handler global de App.svelte.
+  // Si la navigation reste dans Play (pas aux limites), on bloque App via
+  // stopImmediatePropagation. Aux limites, on ne fait rien : App navigue normalement.
   function onKeyDown(e) {
     if (!isActive) return
-    if (e.key === 'ArrowRight') {
+    if (e.key === 'ArrowRight' && currentIndex < games.length - 1) {
+      e.stopImmediatePropagation()
       e.preventDefault()
-      if (currentIndex < games.length - 1) {
-        selectGame(currentIndex + 1)
-      } else if (nextSlidePath) {
-        slideTo(nextSlidePath)
-      }
-    } else if (e.key === 'ArrowLeft') {
+      selectGame(currentIndex + 1)
+    } else if (e.key === 'ArrowLeft' && currentIndex > 0) {
+      e.stopImmediatePropagation()
       e.preventDefault()
-      if (currentIndex > 0) {
-        selectGame(currentIndex - 1)
-      } else if (prevSlidePath) {
-        slideTo(prevSlidePath)
-      }
+      selectGame(currentIndex - 1)
     }
   }
 
@@ -107,9 +101,9 @@
   })
 
   onMount(() => {
-    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keydown', onKeyDown, { capture: true })
     return () => {
-      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keydown', onKeyDown, { capture: true })
       clearTimeout(t1)
       clearTimeout(t2)
       clearTimeout(t3)