From ddfcf4de70e3be6e342e9b3c694f586b331eaa77 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 20 Mar 2026 12:08:33 +0100
Subject: [PATCH] =?UTF-8?q?fix(jeu):=20overlay=20fonctionnel=20=E2=80=94?=
 =?UTF-8?q?=20CSS=20complet=20+=20URL=20sanitiz=C3=A9e=20+=20data-state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- jeu.php : supprime les espaces de l'URL (preg_replace), ajoute data-state="initial" sur l'overlay
- Article.svelte : porte le CSS complet depuis l'ancienne app React
  (background opaque, play icon, hover, deactivate btn, game-active state)
- JS : ignore les clics sur overlay ended, remet data-state="initial" au deactivate

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

diff --git a/site/snippets/blocks/jeu.php b/site/snippets/blocks/jeu.php
index fc408ba..0de8e08 100644
--- a/site/snippets/blocks/jeu.php
+++ b/site/snippets/blocks/jeu.php
@@ -1,17 +1,19 @@
-<?php if ($block->url()->isNotEmpty()): ?>
+<?php if ($block->url()->isNotEmpty()):
+  $iframeUrl = preg_replace('/\s+/', '', $block->url()->value());
+?>
 <div class="iframe-game-container">
   <iframe
     loading="eager"
     importance="high"
     width="400"
     height="650"
-    style="border: none; overflow: hidden; pointer-events: none; display: block;"
-    src="<?= $block->url()->html() ?>"
+    style="border: none; overflow: hidden; pointer-events: none; display: block; width: 100%;"
+    src="<?= htmlspecialchars($iframeUrl, ENT_QUOTES, 'UTF-8') ?>"
   ></iframe>
-  <div class="iframe-click-overlay">
+  <div class="iframe-click-overlay" data-state="initial">
     <div class="overlay-content">
       <div class="play-icon">▶</div>
-      <p>Cliquez pour jouer</p>
+      <p class="overlay-message">Cliquez pour jouer</p>
     </div>
   </div>
   <button class="iframe-deactivate-btn" title="Deactivate game (restore scrolling)">✕</button>
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 92ea29d..dca6ec2 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -27,6 +27,7 @@
         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')
@@ -36,6 +37,7 @@
         deactivateBtn?.addEventListener('click', (e) => {
           e.stopPropagation()
           overlay.style.display = 'flex'
+          overlay.setAttribute('data-state', 'initial')
           iframe.style.pointerEvents = 'none'
           container.classList.remove('game-active')
         })
@@ -371,24 +373,129 @@
   /* --- Bloc jeu iframe --- */
   .article-body :global(.iframe-game-container) {
     position: relative;
-    display: inline-block;
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 2rem 0;
+  }
+
+  .article-body :global(.iframe-game-container iframe) {
+    border: none;
+    display: block;
+    width: 100%;
+    transition: filter 0.3s ease;
   }
 
   .article-body :global(.iframe-click-overlay) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    z-index: 10;
     cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(13, 14, 34, 0.90);
+    backdrop-filter: blur(5px);
+  }
+
+  .article-body :global(.iframe-click-overlay[data-state="initial"]) {
+    background: rgba(13, 14, 34, 0.98);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(77, 252, 161, 0.3);
+  }
+
+  .article-body :global(.iframe-click-overlay[data-state="initial"]:hover) {
+    border-color: rgba(77, 252, 161, 0.6);
+  }
+
+  .article-body :global(.iframe-click-overlay[data-state="ended"]) {
+    background: rgba(13, 14, 34, 0.10);
+    backdrop-filter: none;
+    border: 2px solid #4DFCA1;
+    cursor: default;
+  }
+
+  .article-body :global(.overlay-content) {
+    text-align: center;
+    color: white;
+    user-select: none;
+    padding: 20px;
+  }
+
+  .article-body :global(.play-icon) {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #4DFCA1 0%, #04fea0 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px auto;
+    font-size: 24px;
+    color: black;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 4px 15px rgba(77, 252, 161, 0.3);
+  }
+
+  .article-body :global(.iframe-click-overlay[data-state="initial"]:hover .play-icon) {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(77, 252, 161, 0.5);
+  }
+
+  .article-body :global(.overlay-message) {
+    font-family: "Danzza", sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: white;
+  }
+
+  .article-body :global(.iframe-click-overlay[data-state="ended"] .overlay-message) {
+    font-size: 20px;
+    font-weight: 700;
+    color: #4DFCA1;
   }
 
   .article-body :global(.iframe-deactivate-btn) {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: 2px solid #04fea0;
+    border-radius: 50%;
     cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    z-index: 11;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .article-body :global(.iframe-deactivate-btn:hover) {
+    background: #4DFCA1;
+    color: black;
+    transform: scale(1.1);
+  }
+
+  .article-body :global(.iframe-game-container.game-active:hover .iframe-deactivate-btn) {
+    opacity: 1;
+  }
+
+  .article-body :global(.iframe-game-container.game-active) {
+    box-shadow: 0 0 0 2px rgba(77, 252, 161, 0.5);
   }
 
   /* --- Recommandations --- */