diff --git a/site/snippets/blocks/jeu.php b/site/snippets/blocks/jeu.php index c9f316e..0de8e08 100644 --- a/site/snippets/blocks/jeu.php +++ b/site/snippets/blocks/jeu.php @@ -1,11 +1,13 @@ url()->isNotEmpty()): $iframeUrl = preg_replace('/\s+/', '', $block->url()->value()); ?> -
+
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