diff --git a/poker-paf/game.css b/poker-paf/game.css index f4eca69..bf30638 100644 --- a/poker-paf/game.css +++ b/poker-paf/game.css @@ -430,55 +430,50 @@ button.btn-back { /* Conteneur principal en overlay */ .win-panel { - /* Positionnement fixe au milieu de l'écran ou du container */ position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); /* Centrage parfait */ - /* Style du panneau */ - width: 400px; - background-color: rgba(20, 20, 20, 0.95); /* Fond sombre opaque */ - border: 3px solid #d4af37; /* Bordure dorée */ - border-radius: 15px; - padding: 25px; + width: 450px; + background: rgba(15, 15, 15, 0.98); + border: 3px solid #d4af37; + border-radius: 20px; + padding: 30px; text-align: center; - box-shadow: 0 0 50px rgba(0, 0, 0, 0.9); - - /* S'assurer qu'il passe devant tout */ - z-index: 9999; -} -/* Titre du panel */ -.win-panel h2 { - color: #ffffff; - font-size: 1.4rem; - margin-bottom: 20px; - font-family: Arial, sans-serif; + z-index: 10000; /* Toujours au-dessus */ + box-shadow: 0 0 50px rgba(0, 0, 0, 1); + animation: scaleUp 0.3s ease-out; +} + +.win-panel h2 { + color: #d4af37; + margin-bottom: 20px; + font-size: 1.6rem; } -/* Zone des boutons */ #winner-buttons-area { display: flex; flex-wrap: wrap; justify-content: center; - gap: 10px; + gap: 12px; } -/* Style des boutons joueurs */ .btn-win { - background: #444; + background: #1a4a31; color: white; border: 1px solid #d4af37; - padding: 8px 15px; - border-radius: 5px; + padding: 10px 20px; + border-radius: 8px; + font-weight: bold; cursor: pointer; - font-size: 0.9rem; transition: all 0.2s; } .btn-win:hover { background: #d4af37; - color: #000; + color: black; + transform: scale(1.1); } /* Bouton Rejouer / Retour Accueil */ @@ -510,16 +505,9 @@ button.btn-back { filter: brightness(1.2); } -/* Petite animation d'entrée */ -@keyframes fadeInScale { - from { - opacity: 0; - transform: translate(-50%, -60%) scale(0.8); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } +@keyframes scaleUp { + from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } + to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* --- ADAPTATION MOBILE --- */ diff --git a/poker-paf/game.php b/poker-paf/game.php index 1142fcd..8d9a82c 100644 --- a/poker-paf/game.php +++ b/poker-paf/game.php @@ -499,39 +499,44 @@ foreach ($players as $p) { // --- FONCTION EN CAS DE VICTOIRE --- function EndGame() { - // 1. On cible le container + // 1. On cherche le container par sa classe const container = document.querySelector('.table-container'); - // 2. On vérifie s'il n'y a pas déjà un panel + if (!container) { + console.error("Conteneur .table-container introuvable"); + return; + } + + // 2. On évite de créer le panel deux fois if (document.querySelector('.win-panel')) return; - const newRow = document.createElement('div'); - newRow.className = 'win-panel'; - - newRow.innerHTML = ` -

La partie est terminée !
Qui a gagné ?

+ const winPanel = document.createElement('div'); + winPanel.className = 'win-panel'; + winPanel.innerHTML = ` +

🏆 La partie est terminée ! 🏆
Qui a gagné ?

`; - container.appendChild(newRow); + container.appendChild(winPanel); - // 3. On ajoute les boutons des joueurs depuis l'objet 'players' global + // 3. Récupération dynamique des noms des joueurs présents à l'écran const area = document.getElementById('winner-buttons-area'); - - // On boucle sur tes joueurs pour créer les boutons - players.forEach(p => { + const playerElements = document.querySelectorAll('.player-slot'); + + playerElements.forEach(slot => { + const id = slot.getAttribute('data-id'); + const name = slot.querySelector('.player-name').textContent.split(': ')[1]; + const btn = document.createElement('button'); btn.className = 'btn-win'; - // On récupère le nom depuis le DOM si players n'est pas à jour - const playerName = document.querySelector(`[data-id="${p.id}"] .player-name`)?.textContent || "Joueur"; - btn.innerText = playerName.replace(/J\d+ : /, ''); // Nettoie le "J1 : " - - btn.onclick = () => declareWinner(p.id); + btn.innerText = name; + btn.onclick = () => declareWinner(id); area.appendChild(btn); }); - // 4. Effet de flou sur la table - document.querySelector('.poker-table').style.filter = 'blur(8px) brightness(0.5)'; + // 4. Effet visuel sur la table + const table = document.querySelector('.poker-table'); + if (table) table.style.filter = 'blur(5px) brightness(0.5)'; } function declareWinner(winnerId) { @@ -546,7 +551,11 @@ foreach ($players as $p) { .then(r => r.json()) .then(data => { if (data.success) { - confetti(); + confetti({ + particleCount: 150, + spread: 70, + origin: { y: 0.6 } + }); // Changer la div "win-panel" pour afficher le gagnant const winPanel = document.querySelector('.win-panel'); if (winPanel) {