Implements the use of custom emoji

1 week ago · 44309c2b9b
parent 36893c8bc8
commit 44309c2b9b
4 changed files with 55 additions and 4 deletions
--- a/public/script/combat.js
+++ b/public/script/combat.js
@ -3,10 +3,24 @@ document.addEventListener('DOMContentLoaded', () => {
    const right = document.querySelector('.right-emoji');
    const winnerText = document.getElementById('winner-text');

-    // These variables will be injected by Twig in the template as data attributes or global variables
    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');

@ -31,7 +45,14 @@ document.addEventListener('DOMContentLoaded', () => {
            const winner = winnerSide === 'left' ? left : right;
            winner.classList.add('winner-center', 'winner-crown');

-            winnerText.textContent = `${winner.textContent.trim()} a gagné ! 🎉`;
+            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);
--- a/public/style/combat.css
+++ b/public/style/combat.css
@ -26,6 +26,21 @@ body {
 	transform: translate(-50%, -50%);
 }

+.emoji-img {
+	width: 5rem;
+	height: 5rem;
+	object-fit: contain;
+}
+
+.winner-center .emoji-img {
+	width: 6rem;
+	height: 6rem;
+}
+
+.loser-fly-up .emoji-img {
+	opacity: 0.6;
+}
+
 .left-emoji {
 	left: -100px;
 }
--- a/src/Controller/CombatController.php
+++ b/src/Controller/CombatController.php
@ -26,11 +26,25 @@ class CombatController extends AbstractController
        ]);
    }

+    private function isEmoji(string $str): bool {
+        $emojiRegex = '/^\X$/u';
+        return preg_match($emojiRegex, $str) === 1 && mb_strlen($str, 'UTF-8') === 1;
+    }
+
    #[Route('/combat-{leftEmoji}-{rightEmoji}-{winner}', name: 'app_combat_with_params', requirements: ['leftEmoji' => '.+', 'rightEmoji' => '.+'])]
    public function combatWithParams(string $leftEmoji, string $rightEmoji, string $winner): Response
    // Example : /combat-🐱-🐶-left
+    // or /combat-🐌_☀%EF%B8%8F-🐌_☀%EF%B8%8F-left
    {
        $loser = ($winner === 'left') ? 'right' : 'left';
+        // Validate emoji
+        
+        if (!$this->isEmoji($leftEmoji)) {
+            $leftEmoji = 'https://emojik.vercel.app/s/' . $leftEmoji;
+        }
+        if (!$this->isEmoji($rightEmoji)) {
+            $rightEmoji = 'https://emojik.vercel.app/s/' . $rightEmoji;
+        }

        return $this->render('combat/index.html.twig', [
            'left_emoji' => $leftEmoji,
@ -39,4 +53,5 @@ class CombatController extends AbstractController
            'loser' => $loser,
        ]);
    }
+
 }
--- a/templates/combat/index.html.twig
+++ b/templates/combat/index.html.twig
@ -9,8 +9,8 @@
 <body>

 <div class="arena">
-  <div class="emoji left-emoji">{{ left_emoji }}</div>
-  <div class="emoji right-emoji">{{ right_emoji }}</div>
+<div class="emoji left-emoji" data-content="{{ left_emoji }}"></div>
+<div class="emoji right-emoji" data-content="{{ right_emoji }}"></div>
 </div>

 <div id="winner-text"></div>