BelsethUwU
1 week ago
parent
1bb4c71528
commit
36893c8bc8
|
After Width: | Height: | Size: 2.1 MiB |
@ -0,0 +1,38 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const left = document.querySelector('.left-emoji');
|
||||
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;
|
||||
|
||||
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 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');
|
||||
|
||||
winnerText.textContent = `${winner.textContent.trim()} a gagné ! 🎉`;
|
||||
winnerText.style.display = 'block';
|
||||
}, 1500);
|
||||
}, 3000);
|
||||
});
|
||||
@ -0,0 +1,133 @@
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url("../media/boxing_ring.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.arena {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
font-size: 5rem;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.left-emoji {
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.right-emoji {
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
to {
|
||||
left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
to {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation: slideInLeft 3s forwards;
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation: slideInRight 3s forwards;
|
||||
}
|
||||
|
||||
@keyframes fightShake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, -50%) translateX(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: translate(-50%, -50%) translateX(-15px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: translate(-50%, -50%) translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.fight-animation {
|
||||
animation: fightShake 0.5s 3;
|
||||
}
|
||||
|
||||
@keyframes flyUpFade {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, calc(-150px - 50%));
|
||||
}
|
||||
}
|
||||
|
||||
.loser-fly-up {
|
||||
animation: flyUpFade 3s forwards;
|
||||
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%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.winner-center {
|
||||
animation: moveToCenter 1s forwards;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
font-size: 6rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.winner-crown::after {
|
||||
content: "👑";
|
||||
position: absolute;
|
||||
top: -1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#winner-text {
|
||||
margin-top: 1rem;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<?php
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
class CombatController extends AbstractController
|
||||
{
|
||||
// Route designed for testing purposes
|
||||
#[Route('/combat', name: 'app_combat')]
|
||||
public function index(): Response
|
||||
{
|
||||
|
||||
$leftEmoji = '🐱';
|
||||
$rightEmoji = '🐶';
|
||||
$winner = 'left'; // or 'right'
|
||||
$loser = ($winner === 'left') ? 'right' : 'left';
|
||||
|
||||
return $this->render('combat/index.html.twig', [
|
||||
'left_emoji' => $leftEmoji,
|
||||
'right_emoji' => $rightEmoji,
|
||||
'winner' => $winner,
|
||||
'loser' => $loser,
|
||||
]);
|
||||
}
|
||||
|
||||
#[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
|
||||
{
|
||||
$loser = ($winner === 'left') ? 'right' : 'left';
|
||||
|
||||
return $this->render('combat/index.html.twig', [
|
||||
'left_emoji' => $leftEmoji,
|
||||
'right_emoji' => $rightEmoji,
|
||||
'winner' => $winner,
|
||||
'loser' => $loser,
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Emoji Fight</title>
|
||||
<link rel="stylesheet" href="style/combat.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="arena">
|
||||
<div class="emoji left-emoji">{{ left_emoji }}</div>
|
||||
<div class="emoji right-emoji">{{ right_emoji }}</div>
|
||||
</div>
|
||||
|
||||
<div id="winner-text"></div>
|
||||
|
||||
<script>
|
||||
window.winnerSide = '{{ winner }}';
|
||||
window.loserSide = '{{ loser }}';
|
||||
</script>
|
||||
<script src="script/combat.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue