diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 6f08290..dca6ec2 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -13,6 +13,40 @@
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) => {
@@ -39,48 +73,6 @@
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