Something went wrong. Try again.
First challenge from Josh Comeau's course The Joy of React.
react game
Something went wrong. Try again.
1.3 kB · 43 lines
JavaScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344import { useState } from "react";import GuessInput from "../GuessInput/GuessInput";import GuessResults from "../GuessResults/GuessResults";import { sample } from "../../utils";import { WORDS } from "../../data";import { NUM_OF_GUESSES_ALLOWED } from "../../constants";import WinBanner from "../WinBanner/WinBanner";import LostBanner from "../LostBanner/LostBanner";
// Pick a random word on every pageload.const answer = sample(WORDS);// To make debugging easier, we'll log the solution in the console.console.info({ answer });
function Game() { const [guesses, setGuesses] = useState([]); const [gameStatus, setGameStatus] = useState("in-progress");
function handleSubmittedGuess(inProgressGuess) { const nextGuesses = [...guesses, inProgressGuess]; setGuesses(nextGuesses);
if (inProgressGuess === answer) { setGameStatus("won"); } else if (nextGuesses.length >= NUM_OF_GUESSES_ALLOWED) { setGameStatus("lost"); } }
return ( <> <GuessResults guesses={guesses} answer={answer} /> <GuessInput handleSubmittedGuess={handleSubmittedGuess} gameStatus={gameStatus} /> {gameStatus === "won" && <WinBanner numOfGuesses={guesses.length} />} {gameStatus === "lost" && <LostBanner answer={answer} />} </> );}
export default Game;