Fix: navigation clavier Play — capture phase + stopImmediatePropagation
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s

- 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>
This commit is contained in:
isUnknown 2026-03-10 09:18:44 +01:00
parent fdab621b48
commit 34635f7982

View file

@ -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)