From 50f8669f133530b5e7691e31c4a528d66215a30e Mon Sep 17 00:00:00 2001
From: Axel <axel.brua.19@gmail.com>
Date: Mon, 21 Oct 2024 15:31:59 +0200
Subject: [PATCH] Ajout initiale

---
 score.html      | 130 ++++++++++++++++++++++++++++++++++++++++++++++++
 score.txt       |   1 +
 start_score.bat |   1 +
 3 files changed, 132 insertions(+)
 create mode 100644 score.html
 create mode 100644 score.txt
 create mode 100644 start_score.bat
diff --git a/score.html b/score.html
new file mode 100644
index 0000000..2b9563c
--- /dev/null
+++ b/score.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scoreboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            color: white;
+            background: transparent;
+            text-align: center;
+        }
+        .scoreboard {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 10px;
+            background-color: rgba(35, 35, 35, 1);
+            
+            border-top-left-radius: 0px;
+            border-top-right-radius: 0px;
+            border-bottom-left-radius: 30px;
+            border-bottom-right-radius: 30px;
+
+            width: 50%;
+            margin: auto;
+
+            box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.7);
+        }
+        .player {
+            font-size: 1.5em;
+            flex: 1;
+        }
+        .score {
+            font-size: 2em;
+            background-color: rgb(66, 66, 255);
+
+            padding-top: 5px;
+            padding-bottom: 5px;
+            padding-left: 20px;
+            padding-right: 20px;
+
+            border-radius: 20px;
+
+            /*width: 30px;
+            height: 30px;*/
+
+            transition: transform 0.5s ease, color 0.5s ease;
+        }
+        @keyframes pop {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+
+        .separator {
+            background-color: rgb(66, 66, 255);
+            width: 5px;
+            height: 2em;
+
+        }
+
+    
+        /* Animation pour faire "pop" le score */
+        .score.change {
+            transform: scale(1.8);
+            color: #FFD700; /* Change temporairement la couleur */
+        }
+    </style>
+    
+</head>
+<body>
+    <div class="scoreboard">
+        <div class="score" id="score1">0</div>
+        <div class="player" id="player1">Joueur 1</div>
+
+        <div class="separator"></div>
+        
+        <div class="player" id="player2">Joueur 2</div>
+        <div class="score" id="score2">0</div>
+    </div>
+
+    <script>
+
+        let previousScore1 = null;
+        let previousScore2 = null;
+
+        setInterval(() => {
+            fetch('score.txt?rand=' + Math.random())
+                .then(response => response.text())
+                .then(data => {
+                    const [player1, score1, score2, player2] = data.split(',');
+                    updateScoreboard(player1, score1, score2, player2);
+                });
+        }, 1000);
+
+        function updateScoreboard(player1, score1, score2, player2) {
+            // Met à jour les noms des joueurs
+            document.getElementById('player1').textContent = player1;
+            document.getElementById('player2').textContent = player2;
+
+            // Met à jour les scores et applique une animation si le score a changé
+            const score1Element = document.getElementById('score1');
+            const score2Element = document.getElementById('score2');
+
+            if (score1 !== previousScore1) {
+                animateScoreChange(score1Element, score1);
+                previousScore1 = score1;
+            }
+            if (score2 !== previousScore2) {
+                animateScoreChange(score2Element, score2);
+                previousScore2 = score2;
+            }
+        }
+
+        function animateScoreChange(element, newScore) {
+            element.textContent = newScore;
+            element.classList.add('change');
+            
+            // Enlever l'animation après un délai pour qu'elle puisse se reproduire
+            setTimeout(() => {
+                element.classList.remove('change');
+            }, 500); // Durée en millisecondes correspondant à l'animation CSS
+        }
+
+
+    </script>
+</body>
+</html>
diff --git a/score.txt b/score.txt
new file mode 100644
index 0000000..7a6b2ae
--- /dev/null
+++ b/score.txt
@@ -0,0 +1 @@
+Joueur A,1,3,Joueur B
\ No newline at end of file
diff --git a/start_score.bat b/start_score.bat
new file mode 100644
index 0000000..69a4f71
--- /dev/null
+++ b/start_score.bat
@@ -0,0 +1 @@
+python -m http.server 8000
