Reproduction, La DA es ter

public/script/reproduction.js

@@ -1,10 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
     const left = document.querySelector('.left-emoji');
     const right = document.querySelector('.right-emoji');
-    const winnerText = document.getElementById('winner-text');
+    const childText = document.getElementById('child-text');
+    const heartGif = document.getElementById('heart-gif');
 
-    const winnerSide = window.winnerSide;
-    const loserSide = window.loserSide;
 
     function insertEmojiOrImage(el) {
         const value = el.dataset.content;
@@ -24,31 +23,30 @@ document.addEventListener('DOMContentLoaded', () => {
     left.classList.add('slide-in-left');
     right.classList.add('slide-in-right');
 
-    setTimeout(() => {
-        left.style.left = '100px';
-        right.style.left = '300px';
-
-        left.classList.add('fight-animation');
-        right.classList.add('fight-animation');
-
-        setTimeout(() => {
-            left.classList.remove('fight-animation');
-            right.classList.remove('fight-animation');
-
-            const loser = loserSide === 'left' ? left : right;
-            loser.classList.add('loser-fly-up');
-            const winner = winnerSide === 'left' ? left : right;
-            winner.classList.add('winner-center', 'winner-crown');
 
-            let name = winner.dataset.content;
+    setTimeout(() => {
-            //check if name is an image URL or an emoji
+        
-            if (/^https?:\/\//.test(name)) {
+
-                winnerText.innerHTML = `<img src="${name}" style="width:64px">a gagné ! 🎉`;
+            if (/^https?:\/\//.test(child_emoji)) {
-            }
+                emojiHtml = `
-            else {
+                    <div class="emoji-glow-img">
-                winnerText.textContent = `${name} a gagné ! 🎉`;
+                        <img src="${child_emoji}" style="width:64px; height:64px">
+                    </div>`;
+            } else {
+                emojiHtml = `
+                    <span class="emoji-glow-text" data-emoji="${child_emoji}">${child_emoji}</span>`;
             }
-            winnerText.style.display = 'block';
+
-        }, 1500);
+            childText.innerHTML = `
+                <div class="emoji-wrapper">
+                    ${emojiHtml}
+                    
+                </div>`;
+            childText.classList.add('growing-animation');
+            childText.style.display = 'block';
+            heartGif.style.display = 'block';
+            heartGif.classList.add('fade-in');
+
+  
     }, 3000);
 });

public/style/reproduction.css

@@ -43,12 +43,14 @@ body {
 @keyframes slideInLeft {
 	to {
 		left: 200px;
+		opacity:0;
 	}
 }
 
 @keyframes slideInRight {
 	to {
 		left: 200px;
+		opacity:0;
 	}
 }
 
@@ -60,9 +62,6 @@ body {
 	animation: slideInRight 3s forwards;
 }
 
-.fight-animation {
-	animation: fightShake 0.5s 3;
-}
 
 @keyframes Fade {
 	to {
@@ -70,18 +69,86 @@ body {
 	}
 }
 
-.fadingAnimation {
+.fading-animation {
 	animation: Fade 3s forwards;
 }
 
 
-@keyframes moveToCenter {
+@keyframes growing {
 	to {
-		left: 50%;
+		transform: scale(5);
-		transform: translate(-50%, -50%);
 	}
 }
 
-.loving-animation {
+.growing-animation {
-	animation: moveToCenter 1s forwards;
+	animation: growing 5s forwards;
+}
+
+#child-text {
+	  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	flex-direction: column;
+}
+
+.emoji-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.emoji-glow-text {
+  position: relative;
+  display: inline-block;
+  font-size: 5rem;
 }
+
+.emoji-glow-text::before {
+  content: attr(data-emoji);
+  position: absolute;
+  top: 0;
+  left: 0;
+  filter: blur(1px) brightness(10);
+  opacity: 0.9;
+  z-index: -1;
+}
+
+.emoji-glow-img {
+  position: relative;
+  display: inline-block;
+}
+
+.emoji-glow-img::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  filter: blur(1px) brightness(10);
+  opacity: 0.9;
+  z-index: -1;
+}
+
+.birth-text{
+	font-size: 2rem;
+  	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  	margin-top: 20px;
+}
+
+#heart-gif{
+	position: absolute;
+	display:none;
+	background-image: url("../media/hearts.gif");
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 30vw;
+	height: 50vh;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	z-index: -1;
+}

src/Controller/ReproductionController.php

@@ -13,10 +13,13 @@ class ReproductionController extends AbstractController
     {
         $leftEmoji = '🐶'; // Emoji de gauche
         $rightEmoji = '🐱'; // Emoji de droite
-        
+        $childEmoji = 'https://emojik.vercel.app/s/%F0%9F%90%88_%F0%9F%90%95'; // Emoji enfant
+        // $childEmoji = '🐱';
+
         return $this->render('reproduction/index.html.twig', [
             'left_emoji' => $leftEmoji,
             'right_emoji' => $rightEmoji,
+            'child_emoji' => $childEmoji
         ]);
     }
 }

templates/reproduction/index.html.twig

@@ -1,22 +1,24 @@
-<!DOCTYPE html>
+    <!DOCTYPE html>
-<html lang="en">
+    <html lang="en">
-<head>
+    <head>
-<meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Emoji Reproduction</title>
+    <title>Emoji Reproduction</title>
-<link rel="stylesheet" href="style/reproduction.css" />
+    <link rel="stylesheet" href="style/reproduction.css" />
-</head>
+    </head>
-<body>
+    <body>
 
-<div class="field">
+    <div class="field">
-<div class="emoji left-emoji" data-content="{{ left_emoji }}"></div>
+    <div class="emoji left-emoji" data-content="{{ left_emoji }}"></div>
-<div class="emoji right-emoji" data-content="{{ right_emoji }}"></div>
+    <div class="emoji right-emoji" data-content="{{ right_emoji }}"></div>
-</div>
+    </div>
+    <div id="child-text"></div>
+    <div id="heart-gif"></div>
+    <script>
+        child_emoji = "{{child_emoji}}"
+    </script>
 
-<div id="child-text"></div>
+    <script src="script/reproduction.js"></script>
 
-
+    </body>
-<script src="script/reproduction.js"></script>
+    </html>
-
-</body>
-</html>