Estoy haciendo un juego simple para un proyecto personal practicando con alpineJS, y estoy teniendo problemas para actualizar el progreso de la barra a medida que van haciendo click, se actualiza pero luego de recargar la pagina y me gustaria evitar eso, logrando que cada vez que se haga click en el boton se actualice la barra. Todavia me faltaria mejorar su estilo pero aca les dejo el codigo:
<html>
<head>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>The Clicker Game</title>
</head>
<body class="background">
<header class="navbar">
<h1 class="title" x-data="{ message: 'The Clicker Game' }" x-text="message"></h1>
</header>
<main>
<div x-data="musicPlayer">
<div class="cardMusic" x-show="showCard">
<p class="text">Do you want to play background music?</p>
<button @click="playMusic" class="buttonMusic"><span>Yes</span></button>
<button @click="hideCard" class="buttonMusic"><span>No</span></button>
</div>
<audio id="backgroundMusic" src="mp3/click_game_lofi.mp3" loop hidden></audio>
</div>
<div class="container_1" x-data="progressBar()">
<!-- Progress bar container -->
<div class="progress-container">
<!-- Progress bar -->
<div x-bind:style="{ width: progress + '%' }" class="progress-bar">
<!-- Mostrar el número de clics dentro de la barra de progreso -->
<span class="progress-text" x-text="count + '/1000'"></span>
</div>
</div>
</div>
<div class="container_2" x-data="clickerGame()">
<button class="btn-class-name" x-on:click="increment()">
<span class="back"></span>
<span class="front"></span>
</button>
<span class="counter custom-border-text" x-text="count"></span>
</div>
</main>
<script>
function clickerGame() {
return {
count: parseInt(localStorage.getItem('count') || 0),
increment() {
this.count++;
localStorage.setItem('count', this.count);
this.updateProgress();
},
updateProgress() {
this.$refs.progressBar.updateProgress(this.count);
}
}
}
function progressBar() {
return {
progress: parseInt(localStorage.getItem('progress') || 0),
count: parseInt(localStorage.getItem('count') || 0),
updateProgress(count) {
let maxCount = 1000;
this.progress = Math.min(100, (count / maxCount) * 100);
this.count = count;
localStorage.setItem('progress', this.progress);
}
}
}
function musicPlayer() {
return {
showCard: true,
playMusic() {
document.getElementById('backgroundMusic').play();
this.showCard = false;
},
hideCard() {
this.showCard = false;
}
}
}
</script>
</body>
</html>
No se si alguien tendra una solucion, sugerencia o alguna forma de poder lograr lo que estoy buscando. Desde ya aprecio cualquier tipo de ayuda. :D
Aca les dejo el codigo del estilo por si lo necesitan:
.progress-container {
background-color: #e0e0e0;
width: 100%;
height: 30px;
border-radius: 10px;
margin-top: 20px;
position: relative;
}
.progress-bar {
height: 100%;
background-color: #4caf50;
border-radius: 10px;
transition: width 0.3s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.progress-text {
position: absolute;
width: 100%;
text-align: center;
font-size: 14px;
z-index: 1;
color: #333;
}