0

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;
} 

1 respuesta 1

0

Para que Alpine pueda convertir el data-binding de tu elemento en un objeto reactivo (usando proxies) tienes que usar Alpine('data', ...). Por ejemplo, donde dice:

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);
        }
    }
}

debiera ser:

document.addEventListener('alpine:init', () => {

  Alpine.data('progressBar', () => ({

    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);
    }

  }));
});

Nótese que lo estoy envolviendo todo en un listener para el evento alpine:init, cosa que ese data se interprete una vez que Alpine esté disponible en el espacio global, cosa que no ocurre de inmediado por el defer del script de Alpine.

Lamentablemente para tu ejemplo concreto no puedo mostrarlo funcionando, porque los snippets de Stack Overflow no permiten interactuar con el local storage.

Bonus Track: Me parece que el tutorial que has seguido para construir tu demo se basaba en Alpine 2.0, versión en la que sí era común usar funciones vanilla para los databinding.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.