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/src/GuessControl.js b/src/GuessControl.js index 64108b5..ba23af6 100644 --- a/src/GuessControl.js +++ b/src/GuessControl.js @@ -1,47 +1,69 @@ -import React, { Component } from "react"; +// import React, { Component } from "react"; +import React, { useState } from "react"; import Button from "./Button"; -class GuessControl extends Component { - constructor(props) { - super(props); - - this.state = { - currentGuess: "", - }; - - /** - * 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); - } - - 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 ( -
- - -
- ); - } +function GuessControl({ onGuess }) { + const [currentGuess, setCurrentGuess] = useState(""); + + // class GuessControl extends Component { + // constructor(props) { + // super(props); + + // this.state = { + // currentGuess: "", + // }; + const onSubmitGuess = () => { + onGuess(Number(currentGuess)); + setCurrentGuess(""); + }; + + /** + * 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 handleInputChange = (event) => { + setCurrentGuess(event.target.value); + }; + + + // 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..10a4e1e 100644 --- a/src/NumberGuessingGame.js +++ b/src/NumberGuessingGame.js @@ -1,77 +1,117 @@ -import React, { Component } from "react"; +import React, { Component, 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); +const NumberGuessingGame = () => { + const [numberToGuess, setNumberToGuess] = useState(getRandomNumber()); + const [latestGuess, setLatestGuess] = useState(null); + const [numberOfGuesses, setNumberOfGuesses] = useState(0); - 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); + function getRandomNumber() { + return Math.floor(Math.random() * 100) + 1; } - handleGuess(guess) { - this.setState({ - latestGuess: guess, - numberOfGuesses: this.state.numberOfGuesses + 1, - }); - } - handleReset() { - this.setState({ - numberToGuess: getRandomNumber(), - numberOfGuesses: 0, - latestGuess: null, - }); + const MAX_ATTEMPTS = 5; + + const isCorrectGuess = latestGuess === numberToGuess; + const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS; + + function handleGuess(guess) { + + (Number(guess)); + setNumberOfGuesses(numberOfGuesses + 1); } - 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 && ( - - )} -
- ); + function handleReset() { + + setNumberToGuess(getRandomNumber()); + setNumberOfGuesses(0); + setLatestGuess(null); + } + + + 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 && ( + + )} +
+ ); } +// } +// } + export default NumberGuessingGame; + + + + + +/** + * + * Returns a random integer number from 1-100 inclusive + */ +// function getRandomNumber() { +// return Math.floor(Math.random() * 100) + 1; +// } + +// const MAX_ATTEMPTS = 5; + +// const isCorrectGuess = latestGuess === numberToGuess; +// const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS; +// const handleGuess = (guess) => { +// setLatestGuess(Number(guess)); +// setNumberOfGuesses(numberOfGuesses + 1); +// }; +// 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); +// } + +// function handleGuess (guess) { +// setLatestGuess (guess); +// setnumberOfGuesses (numberOfGuesses + 1); +// } + + // function getRandomNumber() { + // return + // Math.floor(Math.random() * 100) + 1; + // } + + // render() { + // const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess; + + // const isGameOver = + // isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS; + +