IHateSymfony

composer.lock

@@ -9201,7 +9201,7 @@
     ],
     "aliases": [],
     "minimum-stability": "stable",
-    "stability-flags": [],
+    "stability-flags": {},
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
@@ -9209,6 +9209,6 @@
         "ext-ctype": "*",
         "ext-iconv": "*"
     },
-    "platform-dev": [],
+    "platform-dev": {},
     "plugin-api-version": "2.6.0"
 }

public/script/combat.js

@@ -37,11 +37,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
             const loser = loserSide === 'left' ? left : right;
             loser.classList.add('loser-fly-up');
-            const wing = document.createElement('div');
-            wing.classList.add('wing');
-            wing.textContent = '🪽';
-            loser.appendChild(wing);
-
             const winner = winnerSide === 'left' ? left : right;
             winner.classList.add('winner-center', 'winner-crown');
 

public/script/reproduction.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const left = document.querySelector('.left-emoji');
+    const right = document.querySelector('.right-emoji');
+    const winnerText = document.getElementById('winner-text');
+
+    const winnerSide = window.winnerSide;
+    const loserSide = window.loserSide;
+
+    function insertEmojiOrImage(el) {
+        const value = el.dataset.content;
+        if (/^https?:\/\//.test(value)) {
+            const img = document.createElement('img');
+            img.src = value;
+            img.className = 'emoji-img';
+            el.appendChild(img);
+        } else {
+            el.textContent = value;
+        }
+    }
+
+    insertEmojiOrImage(left);
+    insertEmojiOrImage(right);
+
+    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;
+            //check if name is an image URL or an emoji
+            if (/^https?:\/\//.test(name)) {
+                winnerText.innerHTML = `<img src="${name}" style="width:64px">a gagné ! 🎉`;
+            }
+            else {
+                winnerText.textContent = `${name} a gagné ! 🎉`;
+            }
+            winnerText.style.display = 'block';
+        }, 1500);
+    }, 3000);
+});

public/style/combat.css

@@ -100,22 +100,6 @@ body {
 	position: absolute;
 }
 
-.wing {
-	font-size: 2rem;
-	margin-top: -1.5rem;
-	animation: wingFlap 3s infinite;
-}
-
-@keyframes wingFlap {
-	0%,
-	100% {
-		transform: rotate(0deg);
-	}
-	50% {
-		transform: rotate(15deg);
-	}
-}
-
 @keyframes moveToCenter {
 	to {
 		left: 50%;

public/style/reproduction.css

@@ -0,0 +1,87 @@
+body {
+	margin: 0;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background-image: url("../media/champ_amour.webp");
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	overflow: hidden;
+	font-family: Arial, sans-serif;
+}
+
+.field {
+	position: relative;
+	width: 400px;
+	height: 150px;
+}
+
+.emoji {
+	position: absolute;
+	top: 50%;
+	font-size: 5rem;
+	transform: translate(-50%, -50%);
+}
+
+.emoji-img {
+	width: 5rem;
+	height: 5rem;
+	object-fit: contain;
+}
+
+.left-emoji {
+	left: -100px;
+}
+
+.right-emoji {
+	left: 500px;
+}
+
+@keyframes slideInLeft {
+	to {
+		left: 200px;
+	}
+}
+
+@keyframes slideInRight {
+	to {
+		left: 200px;
+	}
+}
+
+.slide-in-left {
+	animation: slideInLeft 3s forwards;
+}
+
+.slide-in-right {
+	animation: slideInRight 3s forwards;
+}
+
+.fight-animation {
+	animation: fightShake 0.5s 3;
+}
+
+@keyframes Fade {
+	to {
+		opacity: 0;
+	}
+}
+
+.fadingAnimation {
+	animation: Fade 3s forwards;
+}
+
+
+@keyframes moveToCenter {
+	to {
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
+.loving-animation {
+	animation: moveToCenter 1s forwards;
+}

src/Controller/ReproductionController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ReproductionController extends AbstractController
+{
+    #[Route('/reproduction', name: 'app_reproduction')]
+    public function index(): Response
+    {
+        $leftEmoji = '🐶'; // Emoji de gauche
+        $rightEmoji = '🐱'; // Emoji de droite
+        
+        return $this->render('reproduction/index.html.twig', [
+            'left_emoji' => $leftEmoji,
+            'right_emoji' => $rightEmoji,
+        ]);
+    }
+}

templates/reproduction/index.html.twig

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