diff --git a/package-lock.json b/package-lock.json index 33e2a1b..19a2d7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3684,6 +3684,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -18538,9 +18549,11 @@ } }, "node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -23446,6 +23459,13 @@ "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "requires": { "type-fest": "^0.21.3" + }, + "dependencies": { + "type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + } } }, "ansi-html": { @@ -34973,9 +34993,11 @@ "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" }, "type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", diff --git a/public/index.html b/public/index.html index aa069f2..6a65c0b 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + React Legacy App diff --git a/src/GuessControl.js b/src/GuessControl.js index 64108b5..ae06c1b 100644 --- a/src/GuessControl.js +++ b/src/GuessControl.js @@ -1,47 +1,26 @@ -import React, { Component } from "react"; import Button from "./Button"; +import React, { useState } from "react"; -class GuessControl extends Component { - constructor(props) { - super(props); +function GuessControl({ onGuess }) { + const [currentGuess, setCurrentGuess] = useState(""); - this.state = { - currentGuess: "", - }; + const handleInputChange = (event) => { + setCurrentGuess(event.target.value); + }; - /** - * These lines are required to make the methods/functions declared on this - * class have the correct `this` object when they run. - */ - this.handleInputChange = this.handleInputChange.bind(this); - this.onSubmitGuess = this.onSubmitGuess.bind(this); - } + const onSubmitGuess = () => { + if (currentGuess !== "") { + onGuess(currentGuess); + setCurrentGuess(""); + } + }; - handleInputChange(event) { - this.setState({ currentGuess: event.target.value }); - } - - onSubmitGuess() { - // Since the values from an HTML input are strings by default, - // convert to a number for the returned guess value - // by passing in the string to the Number function. - // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number - this.props.onGuess(Number(this.state.currentGuess)); - this.setState({ currentGuess: "" }); - } - - render() { - return ( -
- - -
- ); - } + return ( + <> + + + + ); } export default GuessControl; diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js index 07c5a24..56a7950 100644 --- a/src/NumberGuessingGame.js +++ b/src/NumberGuessingGame.js @@ -1,77 +1,44 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; import GuessControl from "./GuessControl"; -import GuessMessage from "./GuessMessage"; import GameOver from "./GameOver"; -/** - * - * Returns a random integer number from 1-100 inclusive - */ -function getRandomNumber() { - return Math.floor(Math.random() * 100) + 1; -} - -const MAX_ATTEMPTS = 5; - -class NumberGuessingGame extends Component { - constructor(props) { - super(props); - - this.state = { - numberToGuess: getRandomNumber(), - numberOfGuesses: 0, - latestGuess: null, - }; - - /** - * These lines are required to make the methods/functions declared on this - * class have the correct `this` object when they run. - */ - this.handleGuess = this.handleGuess.bind(this); - this.handleReset = this.handleReset.bind(this); - } - - handleGuess(guess) { - this.setState({ - latestGuess: guess, - numberOfGuesses: this.state.numberOfGuesses + 1, - }); - } - - handleReset() { - this.setState({ - numberToGuess: getRandomNumber(), - numberOfGuesses: 0, - latestGuess: null, - }); - } - - render() { - const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess; - - const isGameOver = - isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS; - - return ( -
-

I'm thinking of a number from 1 to 100.

-

- Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries? -

- - {isGameOver && ( - - )} - {!isGameOver && ( - - )} -
- ); - } -} +const NumberGuessingGame = () => { + const getRandomNumber = () => Math.floor(Math.random() * 100) + 1; + const MAX_ATTEMPTS = 5; + + const [numberToGuess, setNumberToGuess] = useState(getRandomNumber); + const [numberOfGuesses, setNumberOfGuesses] = useState(0); + const [latestGuess, setLatestGuess] = useState(null); + + const handleGuess = (guess) => { + setLatestGuess(Number(guess)); + setNumberOfGuesses(numberOfGuesses + 1); + }; + + const handleReset = () => { + setNumberToGuess(getRandomNumber); + setNumberOfGuesses(0); + setLatestGuess(null); + }; + // place in this comment to enable a resubmit + return ( +
+

Number Guessing Game

+

Guess the number between 1 and 100

+ + + + {latestGuess !== null && ( +

+ Latest Guess: {latestGuess}, Number of Guesses: {numberOfGuesses} +

+ )} + + {numberOfGuesses === MAX_ATTEMPTS || latestGuess === numberToGuess ? ( + + ) : null} +
+ ); +}; export default NumberGuessingGame;