Continue Playing option

package.json

@@ -1,6 +1,6 @@
 {
   "name": "word-guess",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": true,
   "main": "src/index.tsx",
   "homepage": "./",

src/components/Game.tsx

@@ -5,23 +5,21 @@ import StartForm from './Start/StartForm'
 interface GameProps {}
 interface GameState {
   seed: bigint | undefined
-  sentence: string | undefined
+  objective: string | undefined
   playing: boolean
-  guesses: string[]
 }
 export default class Game extends React.PureComponent<GameProps, GameState> {
   constructor (props: GameProps) {
     super(props)
     this.state = {
       seed: undefined,
-      sentence: undefined,
+      objective: undefined,
       playing: false,
-      guesses: [],
     }
   }
 
-  start = (seed: bigint, word:string) => this.setState({playing: true, seed, sentence: word})
-  reset = () => this.setState({sentence: "", playing: false, guesses: []})
+  start = (seed: bigint, word:string) => this.setState({seed, objective: word, playing: true})
+  reset = () => this.setState({seed: undefined, objective: undefined, playing: false})
 
   render() {
     return (
@@ -30,7 +28,8 @@ export default class Game extends React.PureComponent<GameProps, GameState> {
         this.state.playing
         ? <Playing 
             seed={this.state.seed!}
-            objective={this.state.sentence!} 
+            objective={this.state.objective!} 
+            lives={this.state.objective!.length}
             reset={this.reset}
           />
         : <StartForm start={this.start}/>

src/components/Playing/Playing.tsx

@@ -6,24 +6,27 @@ import Alphabet from './Alphabet/Alphabet'
 import Sentence from './Sentence/Sentence'
 import Lives from './Lives'
 
+type Status = 'playing' | 'won' | 'lost' | 'overtime'
+
 interface PlayingProps {
   seed: bigint
   objective: string
+  lives: number
   reset: () => void
 }
 interface PlayingState {
   sentence: string
-  guesses: string[]
-  lives: number
-  status: 'playing' | 'won' | 'lost'
+  guessed: string[]
+  guesses: number
+  status: Status
 }
 export default class Playing extends React.PureComponent<PlayingProps, PlayingState> {
   constructor (props: PlayingProps) {
     super(props)
     this.state = {
       sentence: "",
-      guesses: [],
-      lives: props.objective.length,
+      guessed: [],
+      guesses: 0,
       status: 'playing'
     }
   }
@@ -32,28 +35,31 @@ export default class Playing extends React.PureComponent<PlayingProps, PlayingSt
     letter = letter.toUpperCase()
     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'}))
+        this.setState(state => ({...state, sentence: state.sentence + letter, guessed: [], status: 'won'}))
       } else {
         if (this.props.objective[this.state.sentence.length + 1] === ' ') {
           letter += ' '
         }
-        this.setState(state => ({...state, sentence: state.sentence + letter, guesses: []}))
+        this.setState(state => ({...state, sentence: state.sentence + letter, guessed: []}))
       }
     } else {
-      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'})
+      if (this.props.lives - this.state.guesses === 1) {
+        this.setState(state => ({...state, status: 'lost', guesses: state.guesses + 1}))
+      } else {
+        this.setState(state => ({...state, guessed: [...state.guessed, letter], guesses: state.guesses + 1}))
       }
     }
   }
 
+  continue = () => {
+    this.setState({status: 'overtime'})
+  }
+
   render() {
     let min = 'A'
     let max = 'Z'
     const nextLetter = this.props.objective[this.state.sentence.length]
-    Object.values(this.state.guesses).forEach(letter => { 
+    Object.values(this.state.guessed).forEach(letter => { 
       if (letter < nextLetter && letter > min) {
         min = letter
       }
@@ -68,29 +74,40 @@ export default class Playing extends React.PureComponent<PlayingProps, PlayingSt
       {this.state.status === 'lost'  ? <Lost />  : undefined}
       <p>Seed: {this.props.seed.toString()}</p>
       <Alphabet 
-        guesses={this.state.guesses}
+        guesses={this.state.guessed}
         min={min}
         max={max}
       />
       <Sentence 
         objective={this.props.objective}
         progress={this.state.sentence}
         guess={this.guess}
-        status={this.state.status}
+        showInput={this.state.status === 'playing' || this.state.status === 'overtime' }
       />
       {this.state.status !== 'playing'
-        ? <button 
-            onClick={this.props.reset}
-            autoFocus
-          >
-            Play Again
-          </button>
+        ? <span>
+            <button 
+              onClick={this.continue}
+            >
+              Continue Playing
+            </button>
+            <button 
+              onClick={this.props.reset}
+              autoFocus
+            >
+              Play New Game
+            </button>
+          </span>
         : undefined
       }
-      <Lives 
-        count={this.props.objective.length} 
-        remaining={this.state.lives}
-      />
+      {this.state.status === 'overtime' ||  this.state.guesses > this.props.lives
+      ? <p>Guesses: {this.state.guesses} (+{this.state.guesses - this.props.lives})</p> 
+      : <Lives 
+          count={this.props.objective.length} 
+          remaining={this.props.lives - this.state.guesses}
+        />
+      }
+
     </>
     )
   }

src/components/Playing/Sentence/Sentence.tsx

@@ -5,7 +5,7 @@ import SentenceWord from './SentenceWord'
 interface SentenceProps {
   objective: string
   progress: string
-  status: 'playing' | 'won' | 'lost'
+  showInput: boolean
   guess: (letter: string) => void
 }
 const Sentence: React.FunctionComponent<SentenceProps> = (props: SentenceProps)=> {
@@ -19,7 +19,7 @@ const Sentence: React.FunctionComponent<SentenceProps> = (props: SentenceProps)=
             props.progress.length -
             words.reduce((accumulator, word, index) => accumulator + (wordIndex > index ? word.length + 1 : 0), 0 as number)  
           } 
-          playing={props.status === 'playing'}
+          showInput={props.showInput}
           guess={props.guess}
         />
       )}

src/components/Playing/Sentence/SentenceWord.tsx

@@ -5,15 +5,15 @@ import SentenceInput from './SentenceInput'
 interface SentenceWordProps {
   word: string
   inputIndex: number
-  playing: boolean
+  showInput: 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
+        props.showInput && letterIndex === props.inputIndex
         ? <SentenceInput guess={props.guess}/>
         : <span key={letterIndex} className='character'>
             {letterIndex < props.inputIndex