diff --git a/package-lock.json b/package-lock.json index 46be7b4..2902165 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13678,6 +13678,14 @@ "whatwg-fetch": "^3.4.1" } }, + "react-confetti": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.0.0.tgz", + "integrity": "sha512-gPuMIiJcpRFtyv3LvWKOvXxwbm1X9fyWT3wQsIMmmM7UhW3u84Te/xqfee4c0gicQXli8zCfIDkOlZyrHBk7pw==", + "requires": { + "tween-functions": "^1.2.0" + } + }, "react-dev-utils": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz", @@ -16435,6 +16443,11 @@ "safe-buffer": "^5.0.1" } }, + "tween-functions": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz", + "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8=" + }, "tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", diff --git a/package.json b/package.json index 306404c..f10fc8f 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { "name": "word-guess", - "version": "0.1.0", + "version": "1.0.0", "private": true, "main": "src/index.tsx", + "homepage": "./", "dependencies": { "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.1.2", @@ -12,7 +13,9 @@ "@types/react": "^16.9.56", "@types/react-dom": "^16.9.9", "react": "^17.0.1", + "react-confetti": "^6.0.0", "react-dom": "^17.0.1", + "tween-functions": "^1.2.0", "typescript": "^4.0.5", "web-vitals": "^0.2.4" }, diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..19e23b9 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..8babde0 100644 --- a/public/index.html +++ b/public/index.html @@ -5,39 +5,13 @@ - + - - - React App + Word Guess
- diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 536aa46..07859fe 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -4,7 +4,8 @@ import StartForm from './Start/StartForm' interface GameProps {} interface GameState { - word: string + seed: number | undefined + word: string | undefined playing: boolean guesses: string[] } @@ -12,13 +13,14 @@ export default class Game extends React.PureComponent { constructor (props: GameProps) { super(props) this.state = { - word: "", + seed: undefined, + word: undefined, playing: false, guesses: [], } } - start = (word:string) => this.setState({playing: true, word: word.toUpperCase()}) + start = (seed: number, word:string) => this.setState({playing: true, seed, word}) reset = () => this.setState({word: "", playing: false, guesses: []}) render() { @@ -27,7 +29,8 @@ export default class Game extends React.PureComponent { { this.state.playing ? : diff --git a/src/components/Playing/Lives.tsx b/src/components/Playing/Lives.tsx new file mode 100644 index 0000000..3c1e79d --- /dev/null +++ b/src/components/Playing/Lives.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface LivesProps { + count: number + remaining: number +} +const Lives: React.FunctionComponent = (props: LivesProps) => { + return ( + + { [...Array(props.remaining)].map((e, i) => <>♥ ) } + { [...Array(props.count - props.remaining)].map((e, i) => <>♡ ) } + + ) +} +export default Lives diff --git a/src/components/Playing/Playing.tsx b/src/components/Playing/Playing.tsx index a27e280..c301cb6 100644 --- a/src/components/Playing/Playing.tsx +++ b/src/components/Playing/Playing.tsx @@ -1,15 +1,22 @@ import React from 'react' +import Confetti from 'react-confetti' + import Alphabet from './Alphabet' import Word from './Word' +import Lives from './Lives' + +var tweenFunctions = require('tween-functions') interface PlayingProps { + seed: number objective: string reset: () => void } interface PlayingState { word: string guesses: string[] - count: number + lives: number + status: 'playing' | 'won' | 'lost' } export default class Playing extends React.PureComponent { constructor (props: PlayingProps) { @@ -17,16 +24,29 @@ export default class Playing extends React.PureComponent { letter = letter.toUpperCase() if (this.props.objective[this.state.word.length] === letter) { - this.setState(state => ({...state, word: state.word + letter, guesses: []})) + if (this.state.word + letter === this.props.objective) { + this.setState(state => ({...state, word: state.word + letter, guesses: [], status: 'won'})) + } else { + if (this.props.objective[this.state.word.length + 1] === ' ') { + letter += ' ' + } + this.setState(state => ({...state, word: state.word + letter, guesses: []})) + } } else { - this.setState(state => ({...state, guesses: [...state.guesses, letter], count: state.count + 1})) + if (this.state.lives > 1) { + this.setState(state => ({...state, guesses: [...state.guesses, letter], lives: state.lives - 1})) + } + if (this.state.lives === 1) { + this.setState({lives:0, status: 'lost'}) + } } } @@ -45,17 +65,42 @@ export default class Playing extends React.PureComponent + {this.state.status === 'won' + ? + : undefined + } + {this.state.status === 'lost' + ? { + context.font = '2rem serif' + context.textAlign = "center" + context.textBaseline = "middle"; + context.fillText('💩', 0, 0) + }} + /> + : undefined + } +

Seed: {this.props.seed}

- {this.state.word === this.props.objective + {this.state.status !== 'playing' ?