From b4dfc4480e7d50edf4d44ed7d6b23b0d4cd4c781 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 20 Mar 2026 12:14:57 +0100
Subject: [PATCH] =?UTF-8?q?fix(jeu):=20src=20inject=C3=A9=20au=20clic=20(a?=
 =?UTF-8?q?bout:blank=20initial)=20+=20event=20delegation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- jeu.php : iframe démarre sur about:blank, URL stockée dans data-src
- Article.svelte : event delegation sur document (plus de timeout/querySelector)
  → le src de l'iframe est injecté seulement quand l'user clique (évite l'iframe noir)
  → supprime l'ancien $effect avec setTimeout au profit d'une délégation propre

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 site/snippets/blocks/jeu.php |  6 +--
 src/views/Article.svelte     | 76 ++++++++++++++++++++----------------
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/site/snippets/blocks/jeu.php b/site/snippets/blocks/jeu.php
index 0de8e08..46afa05 100644
--- a/site/snippets/blocks/jeu.php
+++ b/site/snippets/blocks/jeu.php
@@ -1,14 +1,12 @@
 <?php if ($block->url()->isNotEmpty()):
   $iframeUrl = preg_replace('/\s+/', '', $block->url()->value());
 ?>
-<div class="iframe-game-container">
+<div class="iframe-game-container" data-src="<?= htmlspecialchars($iframeUrl, ENT_QUOTES, 'UTF-8') ?>">
   <iframe
-    loading="eager"
-    importance="high"
     width="400"
     height="650"
     style="border: none; overflow: hidden; pointer-events: none; display: block; width: 100%;"
-    src="<?= htmlspecialchars($iframeUrl, ENT_QUOTES, 'UTF-8') ?>"
+    src="about:blank"
   ></iframe>
   <div class="iframe-click-overlay" data-state="initial">
     <div class="overlay-content">
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index dca6ec2..6f08290 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -13,40 +13,6 @@
   let copySuccess = $state(false)
   let copyTimer = null
 
-  // Setup click-to-play iframes après le rendu du body HTML
-  $effect(() => {
-    if (!data.body) return
-
-    const timer = setTimeout(() => {
-      document.querySelectorAll('.iframe-game-container').forEach(container => {
-        if (container.dataset.initialized) return
-        container.dataset.initialized = 'true'
-
-        const overlay = container.querySelector('.iframe-click-overlay')
-        const iframe = container.querySelector('iframe')
-        const deactivateBtn = container.querySelector('.iframe-deactivate-btn')
-
-        overlay?.addEventListener('click', () => {
-          if (overlay.getAttribute('data-state') === 'ended') return
-          overlay.style.display = 'none'
-          iframe.style.pointerEvents = 'auto'
-          container.classList.add('game-active')
-          overlay.setAttribute('data-state', 'played')
-        })
-
-        deactivateBtn?.addEventListener('click', (e) => {
-          e.stopPropagation()
-          overlay.style.display = 'flex'
-          overlay.setAttribute('data-state', 'initial')
-          iframe.style.pointerEvents = 'none'
-          container.classList.remove('game-active')
-        })
-      })
-    }, 300)
-
-    return () => clearTimeout(timer)
-  })
-
   // Écoute les messages postMessage depuis l'iframe du jeu
   onMount(() => {
     const handleIframeMessage = (event) => {
@@ -73,6 +39,48 @@
     return () => window.removeEventListener('message', handleIframeMessage)
   })
 
+  // Event delegation sur le body de l'article pour les blocs jeu
+  $effect(() => {
+    if (!data.body) return
+
+    const handleClick = (e) => {
+      // Clic sur l'overlay → lancer le jeu
+      const overlay = e.target.closest('.iframe-click-overlay')
+      if (overlay && overlay.getAttribute('data-state') !== 'ended') {
+        const container = overlay.closest('.iframe-game-container')
+        const iframe = container?.querySelector('iframe')
+        if (!iframe) return
+
+        // Injecter le src seulement au premier clic
+        if (iframe.src === 'about:blank' || !iframe.src) {
+          iframe.src = container.dataset.src
+        }
+        overlay.style.display = 'none'
+        iframe.style.pointerEvents = 'auto'
+        container.classList.add('game-active')
+        overlay.setAttribute('data-state', 'played')
+        return
+      }
+
+      // Clic sur le bouton désactiver
+      const btn = e.target.closest('.iframe-deactivate-btn')
+      if (btn) {
+        e.stopPropagation()
+        const container = btn.closest('.iframe-game-container')
+        const iframe = container?.querySelector('iframe')
+        const ov = container?.querySelector('.iframe-click-overlay')
+        if (!iframe || !ov) return
+        ov.style.display = 'flex'
+        ov.setAttribute('data-state', 'initial')
+        iframe.style.pointerEvents = 'none'
+        container.classList.remove('game-active')
+      }
+    }
+
+    document.addEventListener('click', handleClick)
+    return () => document.removeEventListener('click', handleClick)
+  })
+
   function copyLink() {
     navigator.clipboard.writeText(window.location.href)
     copySuccess = true