Seeding. Confetti. Logo

j-m · Nov 15, 2020 · 39b492f · 39b492f
1 parent 08a31a3
commit 39b492f
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git a/public/index.html b/public/index.html
@@ -5,39 +5,13 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description"  content="A variation of hangman"/>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Word Guess</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/components/Game.tsx b/src/components/Game.tsx
@@ -4,21 +4,23 @@ import StartForm from './Start/StartForm'
 
 interface GameProps {}
 interface GameState {
-  word: string
+  seed: number | undefined
+  word: string | undefined
   playing: boolean
   guesses: string[]
 }
 export default class Game extends React.PureComponent<GameProps, GameState> {
   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<GameProps, GameState> {
       {
         this.state.playing
         ? <Playing 
-            objective={this.state.word} 
+            seed={this.state.seed!}
+            objective={this.state.word!} 
             reset={this.reset}
           />
         : <StartForm start={this.start}/>

diff --git a/src/components/Playing/Lives.tsx b/src/components/Playing/Lives.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface LivesProps {
+  count: number
+  remaining: number
+}
+const Lives: React.FunctionComponent<LivesProps> = (props: LivesProps) => {
+  return (
+    <span id="lives">
+    { [...Array(props.remaining)].map((e, i) => <>♥</> ) }
+    { [...Array(props.count - props.remaining)].map((e, i) => <>♡</> ) }
+    </span>
+  )
+}
+export default Lives
diff --git a/src/components/Playing/Playing.tsx b/src/components/Playing/Playing.tsx
@@ -1,32 +1,52 @@
 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<PlayingProps, PlayingState> {
   constructor (props: PlayingProps) {
     super(props)
     this.state = {
       word: "",
       guesses: [],
-      count:0,
+      lives: props.objective.length,
+      status: 'playing'
     }
   }
 
   guess = (letter:string) => {
     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<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>
       <Alphabet 
         guesses={this.state.guesses}
         min={min}
         max={max}
       />
       <Word 
+        objective={this.props.objective}
         word={this.state.word}
         guess={this.guess}
-        length={this.props.objective.length}
+        status={this.state.status}
       />
-      {this.state.word === this.props.objective 
+      {this.state.status !== 'playing'
         ? <button 
             onClick={this.props.reset}
             autoFocus
@@ -64,9 +109,10 @@ export default class Playing extends React.PureComponent<PlayingProps, PlayingSt
           </button>
         : undefined
       }
-      <>
-      Guesses: {this.state.count}
-      </>
+      <Lives 
+        count={this.props.objective.length} 
+        remaining={this.state.lives}
+      />
     </>
     )
   }

diff --git a/src/components/Playing/Word.tsx b/src/components/Playing/Word.tsx
@@ -1,39 +1,39 @@
 import React from 'react'
 
 interface WordProps {
+  objective: string
   word: string
   guess: (letter: string)=> void
-  length: number
+  status: 'playing' | 'won' | 'lost'
 }
 const Word: React.FunctionComponent<WordProps> = (props: WordProps)=> {
   return (
     <div id="word">
       {Object.values(props.word.split("")).map((letter, index) => 
         <span 
           key={`letter_${index}`}
-          className='character'
+          className={`character ${letter === ' ' ? 'space' : ''}`}
          >
           {letter}
         </span>
       )}
-      {props.word.length < props.length 
-      ? <>
-        <input 
+      {props.status === 'playing'
+      ? <input 
           type="text"
           className='character'
           value=""
           maxLength={1}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>  props.guess(event.target.value) }
           autoFocus
         />
-        {Array.from({length: props.length - props.word.length - 1 }, (_, k) => 
-          <span 
-            key={`blank_${k}`}
-            className='character'
-          />
-        )}
-      </>
-      : undefined}
+      : undefined }
+      { props.word.length < props.objective.length ? 
+      Array.from({length: props.objective.length - props.word.length - (props.status === 'playing' ? 1 : 0)}, (_, index) => 
+        <span 
+          key={`blank_${index}`}
+          className={`character ${props.objective[index + props.word.length + 1 ] === ' ' ? 'space' : ''}`}
+        />
+      ) :undefined  }
     </div>
   )
 }