diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 07859fe..d5cab2c 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -4,8 +4,8 @@ import StartForm from './Start/StartForm' interface GameProps {} interface GameState { - seed: number | undefined - word: string | undefined + seed: bigint | undefined + sentence: string | undefined playing: boolean guesses: string[] } @@ -14,14 +14,14 @@ export default class Game extends React.PureComponent { super(props) this.state = { seed: undefined, - word: undefined, + sentence: undefined, playing: false, guesses: [], } } - start = (seed: number, word:string) => this.setState({playing: true, seed, word}) - reset = () => this.setState({word: "", playing: false, guesses: []}) + start = (seed: bigint, word:string) => this.setState({playing: true, seed, sentence: word}) + reset = () => this.setState({sentence: "", playing: false, guesses: []}) render() { return ( @@ -30,7 +30,7 @@ export default class Game extends React.PureComponent { this.state.playing ? : diff --git a/src/components/Playing/Alphabet.tsx b/src/components/Playing/Alphabet/Alphabet.tsx similarity index 100% rename from src/components/Playing/Alphabet.tsx rename to src/components/Playing/Alphabet/Alphabet.tsx diff --git a/src/components/Playing/Letter.tsx b/src/components/Playing/Alphabet/Letter.tsx similarity index 100% rename from src/components/Playing/Letter.tsx rename to src/components/Playing/Alphabet/Letter.tsx diff --git a/src/components/Playing/End/Lost.tsx b/src/components/Playing/End/Lost.tsx new file mode 100644 index 0000000..fee53ba --- /dev/null +++ b/src/components/Playing/End/Lost.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import Confetti from 'react-confetti' + +var tweenFunctions = require('tween-functions') + +const Lost: React.FunctionComponent = ()=> { + return ( + { + context.font = '2rem serif' + context.textAlign = "center" + context.textBaseline = "middle"; + context.fillText('💩', 0, 0) + }} + /> + ) +} + +export default Lost diff --git a/src/components/Playing/End/Won.tsx b/src/components/Playing/End/Won.tsx new file mode 100644 index 0000000..227333e --- /dev/null +++ b/src/components/Playing/End/Won.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import Confetti from 'react-confetti' + +const Won: React.FunctionComponent = ()=> { + return ( + + ) +} + +export default Won diff --git a/src/components/Playing/Playing.tsx b/src/components/Playing/Playing.tsx index c301cb6..a1775dc 100644 --- a/src/components/Playing/Playing.tsx +++ b/src/components/Playing/Playing.tsx @@ -1,19 +1,18 @@ import React from 'react' -import Confetti from 'react-confetti' -import Alphabet from './Alphabet' -import Word from './Word' +import Won from './End/Won' +import Lost from './End/Lost' +import Alphabet from './Alphabet/Alphabet' +import Sentence from './Sentence/Sentence' import Lives from './Lives' -var tweenFunctions = require('tween-functions') - interface PlayingProps { - seed: number + seed: bigint objective: string reset: () => void } interface PlayingState { - word: string + sentence: string guesses: string[] lives: number status: 'playing' | 'won' | 'lost' @@ -22,7 +21,7 @@ export default class Playing extends React.PureComponent { letter = letter.toUpperCase() - if (this.props.objective[this.state.word.length] === letter) { - if (this.state.word + letter === this.props.objective) { - this.setState(state => ({...state, word: state.word + letter, guesses: [], status: 'won'})) + if (this.props.objective[this.state.sentence.length] === letter) { + if (this.state.sentence + letter === this.props.objective) { + this.setState(state => ({...state, sentence: state.sentence + letter, guesses: [], status: 'won'})) } else { - if (this.props.objective[this.state.word.length + 1] === ' ') { + if (this.props.objective[this.state.sentence.length + 1] === ' ') { letter += ' ' } - this.setState(state => ({...state, word: state.word + letter, guesses: []})) + this.setState(state => ({...state, sentence: state.sentence + letter, guesses: []})) } } else { if (this.state.lives > 1) { @@ -53,7 +52,7 @@ export default class Playing extends React.PureComponent { if (letter < nextLetter && letter > min) { min = letter @@ -65,38 +64,17 @@ 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.status === 'won' ? : undefined } + {this.state.status === 'lost' ? : undefined} +

Seed: {this.props.seed.toString()}

- diff --git a/src/components/Playing/Sentence/Sentence.tsx b/src/components/Playing/Sentence/Sentence.tsx new file mode 100644 index 0000000..1df92b3 --- /dev/null +++ b/src/components/Playing/Sentence/Sentence.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +import SentenceWord from './SentenceWord' + +interface SentenceProps { + objective: string + progress: string + status: 'playing' | 'won' | 'lost' + guess: (letter: string) => void +} +const Sentence: React.FunctionComponent = (props: SentenceProps)=> { + const words: string[] = props.objective.split(" ") + return ( +
+ {Object.values(words).map((word, wordIndex) => + accumulator + (wordIndex > index ? word.length + 1 : 0), 0 as number) + } + playing={props.status === 'playing'} + guess={props.guess} + /> + )} +
+ ) +} + +export default Sentence diff --git a/src/components/Playing/Sentence/SentenceInput.tsx b/src/components/Playing/Sentence/SentenceInput.tsx new file mode 100644 index 0000000..ff2ac35 --- /dev/null +++ b/src/components/Playing/Sentence/SentenceInput.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +interface SentenceInputProps { + guess: (letter: string) => void +} +const SentenceInput: React.FunctionComponent = (props: SentenceInputProps) => { + return ( + ) => props.guess(event.target.value) } + autoFocus + /> + ) +} +export default SentenceInput diff --git a/src/components/Playing/Sentence/SentenceWord.tsx b/src/components/Playing/Sentence/SentenceWord.tsx new file mode 100644 index 0000000..6fd9591 --- /dev/null +++ b/src/components/Playing/Sentence/SentenceWord.tsx @@ -0,0 +1,29 @@ +import React from 'react' + +import SentenceInput from './SentenceInput' + +interface SentenceWordProps { + word: string + inputIndex: number + playing: boolean + guess: (letter: string) => void +} +const SentenceWord: React.FunctionComponent = (props: SentenceWordProps)=> { + const letters = props.word.split("") + return ( +
+ {Object.values(letters).map((letter, letterIndex) => + props.playing && letterIndex === props.inputIndex + ? + : + {letterIndex < props.inputIndex + ? letter + : undefined + } + + )} +
+ ) +} + +export default SentenceWord diff --git a/src/components/Playing/Word.tsx b/src/components/Playing/Word.tsx deleted file mode 100644 index f2fffea..0000000 --- a/src/components/Playing/Word.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' - -interface WordProps { - objective: string - word: string - guess: (letter: string)=> void - status: 'playing' | 'won' | 'lost' -} -const Word: React.FunctionComponent = (props: WordProps)=> { - return ( -
- {Object.values(props.word.split("")).map((letter, index) => - - {letter} - - )} - {props.status === 'playing' - ? ) => props.guess(event.target.value) } - autoFocus - /> - : undefined } - { props.word.length < props.objective.length ? - Array.from({length: props.objective.length - props.word.length - (props.status === 'playing' ? 1 : 0)}, (_, index) => - - ) :undefined } -
- ) -} - -export default Word diff --git a/src/components/Start/StartForm.tsx b/src/components/Start/StartForm.tsx index 6f83906..6396094 100644 --- a/src/components/Start/StartForm.tsx +++ b/src/components/Start/StartForm.tsx @@ -2,27 +2,24 @@ import React from 'react' import WordInput from './WordInput' import StartGameButton from './StartGameButton' -const BASE = 28 +const BASE: bigint = 28n -function seed(word: string) { - let seed = 0 +function seed(word: string): bigint { + let seed: bigint = 0n Object.values(word.split("")).forEach(letter => { - if (letter === " ") { - seed += 0 - } else { - seed += letter.charCodeAt(0) - 65 + 1 + if (letter !== " ") { + seed += BigInt(letter.charCodeAt(0)) - 65n + 1n } seed *= BASE }) return seed } -function word(seed: number) { +function word(seed: bigint): string { let word: string = "" while (seed > BASE) { seed /= BASE - seed = Math.floor(seed) - const letter: number = seed % BASE + const letter: number = Number(seed % BASE) if (letter === 0) { word += ' ' } else { @@ -33,7 +30,7 @@ function word(seed: number) { } interface StartFormProps { - start: (seed: number, word: string) => void + start: (seed: bigint, word: string) => void } interface StartFormState { word: string @@ -49,7 +46,7 @@ export default class StartForm extends React.PureComponent { - const input = this.state.word.toUpperCase() + const input: string = this.state.word.toUpperCase() if (!input || !input.trim()) { this.setState({error: "Input required"}) return @@ -59,7 +56,7 @@ export default class StartForm extends React.PureComponent