Stylize win panel

2026-03-03 19:50:59 +01:00
parent e292a90ab0
commit 6fdd5e88ee
2 changed files with 105 additions and 1 deletions
@@ -424,4 +424,106 @@ button.btn-back {
    .player-slot {
        width: 85px;
    }
+}
+
+/* --- PANEL DE VICTOIRE --- */
+
+/* Conteneur principal en overlay */
+.win-panel {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 500px;
+    background: rgba(18, 18, 18, 0.95); /* Fond sombre semi-transparent */
+    border: 5px solid #d4af37; /* Bordure dorée */
+    border-radius: 20px;
+    padding: 30px;
+    text-align: center;
+    z-index: 1000; /* Par-dessus tout */
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.4);
+    animation: fadeInScale 0.4s ease-out;
+}
+
+/* Titre du panel */
+.win-panel h2 {
+    color: #d4af37;
+    font-size: 1.8rem;
+    margin-bottom: 25px;
+    text-transform: uppercase;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+/* Boutons de sélection des joueurs (Qui a gagné ?) */
+.btn-win {
+    display: inline-block;
+    width: 80%;
+    margin: 8px 0;
+    padding: 12px;
+    background: linear-gradient(135deg, #1a4a31 0%, #0e5d32 100%);
+    color: white;
+    border: 2px solid #d4af37;
+    border-radius: 10px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-win:hover {
+    transform: scale(1.05);
+    background: #d4af37;
+    color: #1a4a31;
+}
+
+/* Bouton Rejouer / Retour Accueil */
+.btn-replay, .btn-back {
+    margin: 15px 5px;
+    padding: 12px 25px;
+    border-radius: 30px;
+    border: none;
+    font-weight: bold;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: transform 0.2s;
+}
+
+.btn-replay {
+    background: linear-gradient(135deg, #d4af37 0%, #f9e27d 100%);
+    color: #3e2723;
+    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
+}
+
+.btn-back {
+    background: #3e2723;
+    color: #d4af37;
+    border: 1px solid #d4af37;
+}
+
+.btn-replay:hover, .btn-back:hover {
+    transform: translateY(-3px);
+    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);
+    }
+}
+
+/* --- ADAPTATION MOBILE --- */
+@media (max-width: 600px) {
+    .win-panel {
+        padding: 20px;
+        width: 95%;
+    }
+    .win-panel h2 {
+        font-size: 1.3rem;
+    }
 }
@@ -62,6 +62,7 @@ foreach ($players as $p) {
    <title>Poker PAF - Table N°<?php echo $game_id; ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' type='text/css' href='game.css'>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
 </head>
 <body>
    <div class="game-container">
@@ -515,6 +516,7 @@ foreach ($players as $p) {
        `;
        
        // 4. On l'ajoute au conteneur
+        document.querySelector('.poker-table').style.filter = 'blur(5px) grayscale(50%)';
        container.appendChild(newRow);

    }
@@ -531,7 +533,7 @@ foreach ($players as $p) {
        .then(r => r.json())
        .then(data => {
            if (data.success) {
-                alert(data.winner_name + " gagne la partie et remporte " + data.amount_won + " 🪙 !");
+                confetti();
                // Changer la div "win-panel" pour afficher le gagnant
                const winPanel = document.querySelector('.win-panel');
                if (winPanel) {