oijawFinal product

package.json

@@ -7,7 +7,7 @@
     "eslint": "8.49.0",
     "eslint-config-react-app": "7.0.1",
     "new-component": "5.0.2",
-    "parcel": "2.9.2",
+    "parcel": "^2.11.0",
     "prettier": "2.6.2",
     "process": "0.11.10",
     "react": "18.2.0",
@@ -20,5 +20,8 @@
     "build": "parcel build public/index.html",
     "new-component": "new-component"
   },
-  "browserslist": "> 0.5%, last 2 versions, not dead"
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "devDependencies": {
+    "path-browserify": "^1.0.1"
+  }
 }

src/components/Banner/Banner.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function Banner( {status, children}) {
+  return <div className={`${status} banner`}>
+    {children}
+  </div>;
+}
+
+export default Banner;

src/components/Banner/index.js

@@ -0,0 +1,2 @@
+export * from './Banner';
+export { default } from './Banner';

src/components/Button/Button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { sample } from 'new-component/src/utils';
+import { WORDS } from '../../data';
+
+function Button({gameReset}) {
+  return <div className='reset-block'>
+    <p>Want to play again?</p>
+    <button onClick={() => gameReset(sample(WORDS))}>Restart</button>
+  </div>;
+}
+
+export default Button;

src/components/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+export { default } from './Button';

src/components/Game/Game.js

@@ -2,14 +2,47 @@ import React from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
+import Input from '../input/Input.js'
+import History from '../History/History.js'
+import { NUM_OF_GUESSES_ALLOWED } from '../../constants.js';
+
+import WonBanner from '../WonBanner/WonBanner.js';
+import LostBanner from '../LostBanner/LostBanner.js';
+import Button from '../Button/Button.js'
 
 // Pick a random word on every pageload.
-const answer = sample(WORDS);
 // To make debugging easier, we'll log the solution in the console.
-console.info({ answer });
+
 
 function Game() {
-  return <>Put a game here!</>;
+  const [guesses, setGuesses] = React.useState([]);
+  const [gameStatus, setGameStatus] = React.useState('running');
+  const [answer, setAnswer] = React.useState(sample(WORDS));
+
+  const  gameReset = (newAnswer) => {
+    setAnswer(newAnswer);
+    setGameStatus('running')
+    setGuesses([]);
+  }
+
+  function handleSubmitGuess(tentativeGuess) {
+    const nextGuesses = [...guesses, tentativeGuess];
+    setGuesses(nextGuesses);
+
+    if(tentativeGuess.toUpperCase() === answer) {
+      setGameStatus('won');
+    } else if (nextGuesses.length >= NUM_OF_GUESSES_ALLOWED) {
+      setGameStatus('lost');
+    }
+  }
+
+  return <>
+      <History guesses={guesses} answer={answer}/>
+      <Input handleSubmitGuess={handleSubmitGuess} gameStatus={gameStatus}/>
+      {gameStatus ==='won' && (<WonBanner numOfGuesses={guesses.length} />)}
+      {gameStatus === 'lost' && <LostBanner answer={answer} />}
+      {gameStatus !== 'running' && <Button gameReset={gameReset}/>}
+  </>;
 }
 
 export default Game;

src/components/History/History.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Slots from "../Slots";
+
+import { NUM_OF_GUESSES_ALLOWED } from "../../constants";
+import {range} from '../../utils'
+
+function History({ guesses, answer }) {
+    return(
+
+<div className="guess-results">
+        {range(NUM_OF_GUESSES_ALLOWED).map((num, index) => (
+            <Slots key={index} value={guesses[num]} answer={answer}/>
+        ))}
+</div>
+);
+
+}
+
+export default History;

src/components/History/index.js

@@ -0,0 +1,2 @@
+export * from "./History";
+export { default } from "./History";

src/components/LostBanner/LostBanner.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Banner from '../Banner/Banner';
+
+function LostBanner({answer}) {
+  return (
+    <Banner status="sad">
+      <p>
+        Sorry, the correct answer is <strong>{answer}</strong>.
+      </p>
+    </Banner>
+  )
+}
+
+export default LostBanner;

src/components/LostBanner/index.js

@@ -0,0 +1,2 @@
+export * from './LostBanner';
+export { default } from './LostBanner';

src/components/Slots/Slots.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {range} from'../../utils'
+import { checkGuess } from '../../game-helpers';
+
+
+function Cell({letter, status}) {
+  const className = status ?
+  `cell ${status}` :
+  `celll`;
+  return<span className={className}>{letter}</span>
+}
+
+function Slots({value, answer}) {
+const result = checkGuess(value, answer);
+  return (
+    <p className='guess'>
+      {range(5).map((num) => (
+        <Cell key={num} letter={result? result[num].letter : undefined} status={result? result[num].status : undefined}/>
+      ))}
+    </p>
+  );}
+
+
+export default Slots;

src/components/Slots/index.js

@@ -0,0 +1,2 @@
+export * from './Slots';
+export { default } from './Slots';

src/components/WonBanner/WonBanner.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Banner from '../Banner/Banner';
+
+function WonBanner({numOfGuesses}) {
+  return (
+    <Banner status="happy">
+      <p>
+        <strong>Congratulations!</strong> Got it in{' '}
+        <strong>{numOfGuesses === 1 ? '1 guess' : `${numOfGuesses} guesses`}</strong>.
+      </p>
+    </Banner>
+  )
+}
+
+export default WonBanner;

src/components/WonBanner/index.js

@@ -0,0 +1,2 @@
+export * from './WonBanner';
+export { default } from './WonBanner';

src/components/input/Input.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+function Input({handleSubmitGuess, gameStatus}) {
+  const [tentativeGuess, setTentativeGuess] = React.useState('');
+
+  function handleSubmit(event)  {
+  event.preventDefault();
+  handleSubmitGuess(tentativeGuess);
+  setTentativeGuess('');
+}
+  return (
+  <form className='guess-input-wrapper' onSubmit={handleSubmit}>
+    <label htmlFor='gameInput'>
+      Enter your word:
+    </label>
+    <input
+    disabled={gameStatus  !== 'running'}
+    required
+    id='gameInput'
+    type="text"
+    pattern="[a-zA-Z]{5}"
+    minLength={5}
+    maxLength={5}
+    title='5 letter words'
+    value={tentativeGuess}
+    onChange={(event) => {
+      const nextGuess = event.target.value.toUpperCase();
+      setTentativeGuess(nextGuess)
+    }}
+    >
+    </input>
+  </form>
+  )
+}
+
+export default Input;

src/components/input/index.js

@@ -0,0 +1,2 @@
+export * from "./Input";
+export { default } from "./Input";

src/styles.css

@@ -107,6 +107,34 @@ h1 {
   font-size: 2rem;
 }
 
+.reset-block {
+  position: relative;
+  bottom: 9rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 25rem;
+  height: 8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-gray-700);
+  border-radius: 8px;
+    will-change: transform;
+    animation: slideUp 350ms cubic-bezier(0, 0.72, 0.24, 1.02);
+}
+.reset-block p{
+  font-size: 1.5rem;
+  color: var(--color-gray-100);
+  padding: 12px 0;
+}
+.reset-block button{
+  padding: 8px 16px;
+  font-weight: 500;
+  color: var(--color-gray-900);
+  background-color: var(--color-error);
+  border-radius: 8px;
+}
 /*
   Round the corners for the 4 cells at the very corners of
   the game board