0

Estoy creando un juego de 'Piedra, Papel o tijera' con React + Zustand para el manejo de estado, ya tengo la logica del juego completa pero en el paso final donde se define al ganador, si el jugador es el ganador el score aumenta por 2, cuando debería incrementar por 1, en concreto la función encargada de esto es 'increasePlayerScore' dentro de la store.

Esta es la store de zustand:

import { create } from "zustand";

export interface GameState {
    currentGameStep: "user-pick" | "computer-thinking" | "game-over";
    playerScore: number;
    computerScore: number;
    playerChoice: string;
    computerChoice: string;
    winner: string;
    setCurrentGameStep: (
        state: "user-pick" | "computer-thinking" | "game-over"
    ) => void;
    increasePlayerScore: () => void;
    increaseComputerScore: () => void;
    setPlayerChoice: (choice: string) => void;
    setComputerChoice: (choice: string) => void;
    setWinner: (winner: string) => void;
}

// Create a store for storing the rock paper scissors game state
export const useGameStore = create<GameState>((set) => ({
    currentGameStep: "user-pick",
    playerScore: 0,
    computerScore: 0,
    playerChoice: "",
    computerChoice: "",
    winner: "",
    setCurrentGameStep: (state) => set({ currentGameStep: state }),
    increasePlayerScore: () => set((state) => ({ playerScore: state.playerScore + 1 })),
    increaseComputerScore: () => set((state) => ({ computerScore: state.computerScore + 1 })),
    setPlayerChoice: (choice) => set({ playerChoice: choice }),
    setComputerChoice: (choice) => set({ computerChoice: choice }),
    setWinner: (winner) => set({ winner: winner }),
}));

Este es el componente donde se decide el ganador:

import { useEffect } from "react";
import { Rock, Scissors, Paper } from "./options/Options";
import { useGameStore } from "../store";
const ThirdStep = () => {

    const playerChoice = useGameStore((state) => state.playerChoice);
    const computerChoice = useGameStore((state) => state.computerChoice);

    const winner = useGameStore((state) => state.winner);
    const setWinner = useGameStore((state) => state.setWinner);
    const increasePlayerScore = useGameStore((state) => state.increasePlayerScore);

    // functions to play again

    const setCurrentGameStep = useGameStore((state) => state.setCurrentGameStep);
    const setPlayerChoice = useGameStore((state) => state.setPlayerChoice);
    const setComputerChoice = useGameStore((state) => state.setComputerChoice);

    const handlePlayAgain = () => {
        setCurrentGameStep('user-pick');
        setPlayerChoice('');
        setComputerChoice('');
    };

    useEffect(() => {

        const defineWinner = () => {

            if (playerChoice === 'rock' && computerChoice === 'scissors') {
                setWinner('player');
                increasePlayerScore();
            }

            if (playerChoice === 'rock' && computerChoice === 'paper') {
                setWinner('computer');
            }

            if (playerChoice === 'paper' && computerChoice === 'rock') {
                setWinner('player');
                increasePlayerScore();
            }

            if (playerChoice === 'paper' && computerChoice === 'scissors') {
                setWinner('computer');
            }

            if (playerChoice === 'scissors' && computerChoice === 'paper') {
                setWinner('player');
                increasePlayerScore();
            }

            if (playerChoice === 'scissors' && computerChoice === 'rock') {
                setWinner('computer');
            }

            if (playerChoice === computerChoice) {
                setWinner('draw');
            }

        };
        defineWinner();
    }
    
    , [computerChoice, playerChoice, setWinner, increasePlayerScore]);

    

    return (
        <div>
            <div className="choices flex justify-between text-white">
                <div className="user flex flex-col justify-between">
                    
                    {playerChoice === 'rock' && <Rock />}

                    {playerChoice === 'paper' && <Paper />}

                    {playerChoice === 'scissors' && <Scissors />}

                    <h3 className="font-semibold">YOU PICKED</h3>
                </div>
                <div className="house flex flex-col justify-between items-end">
                    
                    {computerChoice === 'rock' && <Rock />}

                    {computerChoice === 'paper' && <Paper />}

                    {computerChoice === 'scissors' && <Scissors />}

                    <h3 className="font-semibold">THE HOUSE PICKED</h3>
                </div>
            </div>
            <div className="end-message mt-20">
                <h1 className="text-4xl font-bold text-white">

                    {winner === 'player' && 'YOU WIN'}
                    {winner === 'computer' && 'YOU LOSE'}
                    {winner === 'draw' && 'DRAW'}

                </h1>
                <button onClick={handlePlayAgain} className="mt-10 font-semibold text-sm rounded-md w-44 py-2 text-score bg-white">
                    PLAY AGAIN
                </button>
            </div>
        </div>
    );
};

export default ThirdStep;

La función encargada de definir al ganador está dentro de un useEffect. Curioseando intenté probar eliminando el modo estricto de react en el archivo main.tsx, esto hizo que el score incrementara correctamente.

¿Este comportamiento es normal y para que aumente correctamente el score debo quitar dicho modo ó hay un error en mi código?

1 respuesta 1

0

Siento que hay varias maneras de solucionar tu problema en específico. Voy a tratar de apuntar a todas las cosas que haría yo para debuggear el problema.

Primero vería cuál es la pieza de código que se está ejecutando dos veces. Y en tu código muy probablemente es el useEffect, yo empezaría por remover dependencias del array.

Lo otro podría ser limpiar los choices cada vez que se declara un ganador. En tu store podrías editar la función setWinner:

setWinner: (winner) => set({ winner: winner, playerChoice: '', computerChoice: '' }),

Pongo strings vacíos porque el tipo de cada valor en tu store de Zustand están definidos como string, pero yo las haría string | undefined y declararía los valores undefined de la siguiente manera:

setWinner: (winner) => set({ winner: winner, playerChoice: undefined, computerChoice: undefined }),

Así en tu useEffect podrías poner una condición y ejecutar el defineWinner solamente si los jugadores ya eligieron su opción.

 useEffect(() => {
       // definición de función

        if (playerChoice && computerChoice) {
          defineWinner();
      }
}, [computerChoice, playerChoice, setWinner, increasePlayerScore]);

    

Tu Respuesta

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

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