Seed use bigint

Refactor Sentence

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<GameProps, GameState> {
     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<GameProps, GameState> {
         this.state.playing
         ? <Playing 
             seed={this.state.seed!}
-            objective={this.state.word!} 
+            objective={this.state.sentence!} 
             reset={this.reset}
           />
         : <StartForm start={this.start}/>

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 (
+    <Confetti
+      recycle={false}
+      numberOfPieces={100}
+      tweenDuration={5000}
+      tweenFunction={tweenFunctions.linear}
+      drawShape={context => {
+        context.font = '2rem serif'
+        context.textAlign = "center"
+        context.textBaseline = "middle";
+        context.fillText('💩', 0, 0)
+      }}
+    />  
+  )
+}
+
+export default Lost

src/components/Playing/End/Won.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Confetti from 'react-confetti'
+
+const Won: React.FunctionComponent = ()=> {
+  return (
+    <Confetti
+      recycle={false}
+      numberOfPieces={800}
+      tweenDuration={5000}
+    /> 
+  )
+}
+
+export default Won

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<PlayingProps, PlayingSt
   constructor (props: PlayingProps) {
     super(props)
     this.state = {
-      word: "",
+      sentence: "",
       guesses: [],
       lives: props.objective.length,
       status: 'playing'
@@ -31,14 +30,14 @@ export default class Playing extends React.PureComponent<PlayingProps, PlayingSt
 
   guess = (letter:string) => {
     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<PlayingProps, PlayingSt
   render() {
     let min = 'A'
     let max = 'Z'
-    const nextLetter = this.props.objective[this.state.word.length]
+    const nextLetter = this.props.objective[this.state.sentence.length]
     Object.values(this.state.guesses).forEach(letter => { 
       if (letter < nextLetter && letter > min) {
         min = letter
@@ -65,38 +64,17 @@ export default class Playing extends React.PureComponent<PlayingProps, PlayingSt
 
     return (
     <>
-      {this.state.status === 'won' 
-        ? <Confetti
-          recycle={false}
-          numberOfPieces={800}
-          tweenDuration={5000}
-        /> 
-        : undefined
-      }
-      {this.state.status === 'lost' 
-        ? <Confetti
-          recycle={false}
-          numberOfPieces={100}
-          tweenDuration={5000}
-          tweenFunction={tweenFunctions.linear}
-          drawShape={context => {
-            context.font = '2rem serif'
-            context.textAlign = "center"
-            context.textBaseline = "middle";
-            context.fillText('💩', 0, 0)
-          }}
-        /> 
-        : undefined
-      }
-      <p>Seed: {this.props.seed}</p>
+      {this.state.status === 'won' ? <Won/> : undefined }
+      {this.state.status === 'lost'  ? <Lost />  : undefined}
+      <p>Seed: {this.props.seed.toString()}</p>
       <Alphabet 
         guesses={this.state.guesses}
         min={min}
         max={max}
       />
-      <Word 
+      <Sentence 
         objective={this.props.objective}
-        word={this.state.word}
+        progress={this.state.sentence}
         guess={this.guess}
         status={this.state.status}
       />

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<SentenceProps> = (props: SentenceProps)=> {
+  const words: string[] = props.objective.split(" ")
+  return (
+    <div id="sentence">
+      {Object.values(words).map((word, wordIndex) => 
+        <SentenceWord 
+          word={word} 
+          inputIndex={
+            props.progress.length -
+            words.reduce((accumulator, word, index) => accumulator + (wordIndex > index ? word.length + 1 : 0), 0 as number)  
+          } 
+          playing={props.status === 'playing'}
+          guess={props.guess}
+        />
+      )}
+    </div>
+  )
+}
+
+export default Sentence

src/components/Playing/Sentence/SentenceInput.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface SentenceInputProps {
+  guess: (letter: string) => void
+}
+const SentenceInput: React.FunctionComponent<SentenceInputProps> = (props: SentenceInputProps) => {
+  return (
+    <input 
+      type="text"
+      className='character'
+      value=""
+      maxLength={1}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) =>  props.guess(event.target.value) }
+      autoFocus
+    />
+  )
+}
+export default SentenceInput

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<SentenceWordProps> = (props: SentenceWordProps)=> {
+  const letters = props.word.split("")
+  return (
+    <div className="word">
+      {Object.values(letters).map((letter, letterIndex) => 
+        props.playing && letterIndex === props.inputIndex
+        ? <SentenceInput guess={props.guess}/>
+        : <span key={letterIndex} className='character'>
+            {letterIndex < props.inputIndex 
+              ? letter 
+              : undefined
+            }
+          </span>
+      )}
+    </div>
+  )
+}
+
+export default SentenceWord

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<StartFormProps, Start
   }
 
   submit = () => {
-    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<StartFormProps, Start
       return
     }
     if (/^\d+$/.test(input)) {
-      this.props.start(Number(input), word(Number(input)))
+      this.props.start(BigInt(input), word(BigInt(input)))
       return
     }
     this.setState({error: "Input should either be just letters and spaces or a numeric seed"})