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