From 773be2840ce811d59d6b9a95b0bb9d5cb218aa07 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 13 Mar 2026 09:31:43 +0100
Subject: [PATCH] Feat: swipe gauche/droite sur Play mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Même logique que les touches fléchées : navigation entre jeux,
aux limites passage à la slide précédente/suivante via slideTo.

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

diff --git a/src/views/Play.svelte b/src/views/Play.svelte
index cd5ed6f..80d3bfc 100644
--- a/src/views/Play.svelte
+++ b/src/views/Play.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
+  import { slideTo } from '@router'
   import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
   import { t } from '@i18n'
 
@@ -87,6 +88,41 @@
     }
   }
 
+  // --- Touch (mobile) ---
+  // Même logique que le clavier : navigation entre jeux en priorité,
+  // aux limites on laisse passer vers la slide précédente/suivante.
+  const TOUCH_THRESHOLD = 50
+  let touchStartX = 0
+
+  function onTouchStart(e) {
+    if (!isActive) return
+    touchStartX = e.touches[0].clientX
+  }
+
+  function onTouchEnd(e) {
+    if (!isActive) return
+    const deltaX = touchStartX - e.changedTouches[0].clientX
+    if (Math.abs(deltaX) < TOUCH_THRESHOLD) return
+
+    if (deltaX > 0) {
+      // Swipe gauche → jeu suivant, ou slide suivante si fin de liste
+      if (currentIndex < games.length - 1) {
+        selectGame(currentIndex + 1)
+      } else {
+        const next = slides.all[slides.activeIndex + 1]
+        if (next) slideTo(next.path)
+      }
+    } else {
+      // Swipe droite → jeu précédent, ou slide précédente si début de liste
+      if (currentIndex > 0) {
+        selectGame(currentIndex - 1)
+      } else {
+        const prev = slides.all[slides.activeIndex - 1]
+        if (prev) slideTo(prev.path)
+      }
+    }
+  }
+
   // Réinitialisation quand on quitte la slide
   $effect(() => {
     if (!isActive) {
@@ -103,8 +139,12 @@
 
   onMount(() => {
     window.addEventListener('keydown', onKeyDown, { capture: true })
+    window.addEventListener('touchstart', onTouchStart, { capture: true, passive: true })
+    window.addEventListener('touchend', onTouchEnd, { capture: true, passive: true })
     return () => {
       window.removeEventListener('keydown', onKeyDown, { capture: true })
+      window.removeEventListener('touchstart', onTouchStart, { capture: true })
+      window.removeEventListener('touchend', onTouchEnd, { capture: true })
       clearTimeout(t1)
       clearTimeout(t2)
       clearTimeout(t3)
@@ -425,7 +465,6 @@
     text-align: center;
   }
 
-  .play-carousel-item.active button img,
   .play-carousel-item.active button :global(picture img) {
     border: 4px solid var(--color-primary);
     border-radius: 25%;
@@ -454,6 +493,13 @@
     .play-carousel {
       grid-area: 14/4 / span 3 / span 13;
     }
+
+    .play-carousel-item :global(img) {
+      width: clamp(70px, 18.41vw, 355px);
+    }
+    .play-carousel-item.active :global(img) {
+      width: clamp(90px, 18.41vw, 355px);
+    }
   }
 
   /* Reduced motion */