Axolito/Dojo_Scoreboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout initiale

Browse Source
This commit is contained in:
Axel 2024-10-21 15:31:59 +02:00
parent 4176016b6c
commit 50f8669f13
3 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
score.html Normal file
View File

@ -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>

1
score.txt Normal file
View File

@ -0,0 +1 @@
Joueur A,1,3,Joueur B

1
start_score.bat Normal file
View File

@ -0,0 +1 @@
python -m http.server 8000