1- import React , { useState } from 'react' ;
1+ import React , { useState , useEffect } from 'react' ;
22import { Input } from 'antd' ;
33import { Button } from 'antd' ;
44import 'antd/es/button/style/index.css' ;
@@ -22,19 +22,27 @@ const App = () => {
2222 "What's Forrest Gump's password?" ,
2323 'Where do programmers like to hangout? The Foo Bar'
2424 ] ;
25+ const INITIAL_GAME_STATE = { victory : false , startTime : null , endTime : null } ;
26+ const [ gameState , setGameState ] = useState ( INITIAL_GAME_STATE ) ;
2527 const [ snippet , setSnippet ] = useState ( 'Lazy! select snippet!' ) ;
2628 const [ userText , setUserText ] = useState ( '' ) ;
2729
2830 const updateUserText = event => {
2931 setUserText ( event . target . value ) ;
30- console . log ( userText ) ;
32+ if ( event . target . value == snippet ) {
33+ setGameState ( { ...gameState , victory : true , endTime : new Date ( ) . getTime ( ) - gameState . startTime } ) ;
34+ }
3135 }
3236
3337 const chooseSnippet = snippetIndex => ( ) => {
34- console . log ( 'setSnippet' , snippetIndex ) ;
3538 setSnippet ( SNIPPETS [ snippetIndex ] ) ;
39+ setGameState ( { ...gameState , startTime : new Date ( ) . getTime ( ) } )
3640 } ;
3741
42+ useEffect ( ( ) => {
43+ if ( gameState . victory ) document . title = 'Victory!' ;
44+ } ) ;
45+ 3846 return (
3947 < div className = "container" >
4048 < h2 > Type something...</ h2 >
@@ -47,6 +55,7 @@ const App = () => {
4755 </ Button >
4856 ) )
4957 }
58+ < p > { gameState . victory ? `Congrats π, You did it at ${ gameState . endTime } : '' } </ p >
5059 </ div >
5160 )
5261}
0 commit comments