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?