diff --git a/public/script/combat.js b/public/script/combat.js
index d057f4a..42c48c8 100644
--- 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 = `
a gagné ! 🎉`;
+ }
+ else {
+ winnerText.textContent = `${name} a gagné ! 🎉`;
+ }
winnerText.style.display = 'block';
}, 1500);
}, 3000);
diff --git a/public/style/combat.css b/public/style/combat.css
index dbf0025..5f34211 100644
--- 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;
}
diff --git a/src/Controller/CombatController.php b/src/Controller/CombatController.php
index d1e1556..eff9d14 100644
--- 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,
]);
}
+
}
diff --git a/templates/combat/index.html.twig b/templates/combat/index.html.twig
index e988d2b..052843a 100644
--- a/templates/combat/index.html.twig
+++ b/templates/combat/index.html.twig
@@ -9,8 +9,8 @@
-
{{ left_emoji }}
-
{{ right_emoji }}
+
+