Aimee 👾 - Fire 🔥

src/components/FinalPoem.js

@@ -4,18 +4,31 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
+  const onSubmission = (event) => {
+    event.preventDefault();
+    props.revealPoem();
+  }
+
+  if (props.isSubmitted) { 
+    return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+          {props.submissions.map((submission, i) => (
+            <p key={i}>The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.adj2} {submission.noun2} .</p>
+            ))}
       </section>
-
+    </div>
+  )}
+  else { return (
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input 
+        onClick={onSubmission}
+        type="button" 
+        value="We are finished: Reveal the Poem" 
+        className="FinalPoem__reveal-btn" />
       </div>
-    </div>
-  );
+  )}
 }
 
 FinalPoem.propTypes = {

src/components/FinalPoem.test.js

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import FinalPoem from './FinalPoem';
 
-describe.skip('FinalPoem', () => {
+describe('FinalPoem', () => {
   describe('before the poem is finished', () => {
     test('it renders with a button when isSubmitted is false', () => {
       // Act

src/components/Game.js

@@ -13,6 +13,25 @@ const Game = () => {
     }
   }).join(' ');
 
+  const[currentPlayer, setCurrentPlayer] = useState(1);
+  const[playerSubmission, setPlayerSubmission] = useState([]);
+  const[isSubmitted, setIsSubmitted] = useState(false);
+
+  const addPlayerSubmission = (submission) => {
+    const poem = [...playerSubmission];
+    poem.push(submission);
+    setPlayerSubmission(poem);
+    setCurrentPlayer(currentPlayer + 1);
+  }
+
+  const mostRecentSubmission = playerSubmission.map((words) => {
+    return `The ${words.adjective1} ${words.noun1} ${words.adverb} ${words.verb} the ${words.adjective2} ${words.noun2} .`
+  })
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -24,12 +43,23 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
+
+    {!isSubmitted && 
+      <RecentSubmission
+      submission={mostRecentSubmission[mostRecentSubmission.length - 1]} />
+    }
+
+    {!isSubmitted && 
+      <PlayerSubmissionForm
+      sendSubmission={addPlayerSubmission}
+      index={currentPlayer}
+      fields={FIELDS} /> 
+    }
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      <FinalPoem
+      isSubmitted={isSubmitted}
+      submissions={playerSubmission}
+      revealPoem={revealPoem} />
 
     </div>
   );

src/components/Game.test.js

@@ -37,7 +37,7 @@ const FIELDS = [
 
 const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
 
-describe.skip('Game', () => {
+describe('Game', () => {
 
   describe('Wave 1:  Rendering Game', () => {
 

src/components/PlayerSubmissionForm.css

@@ -38,3 +38,11 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.blankInput {
+  background-color: pink;
+}
+
+.typedInput {
+  background-color: whitesmoke;
+}

src/components/PlayerSubmissionForm.js

@@ -3,26 +3,101 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const initState = {
+    adjective1: '',
+    noun1: '',
+    adverb: '',
+    verb: '',
+    adjective2: '',
+    noun2: ''
+  };
+
+  const [poemLine, setPoemLine] = useState(initState);
+
+  const onPoemInputChange = (event) => {
+    const newLine = {
+      ...poemLine,
+    };
+
+    newLine[event.target.name] = [event.target.value]
+    setPoemLine(newLine);
+  }
+
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    props.sendSubmission(poemLine);
+
+    setPoemLine(initState);
+  }
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.index}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form 
+      className="PlayerSubmissionForm__form"
+      onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+        <input
+            name='adjective1'
+            placeholder="adjective1"
+            value={poemLine.adjective1}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.adjective1 === '' ? 'blankInput' : 'typedInput'} />
+
+          <input
+            name='noun1'
+            placeholder="noun1"
+            value={poemLine.noun1}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.noun1 === '' ? 'blankInput' : 'typedInput'}/>
+
+          <input
+            name='adverb'
+            placeholder="adverb1"
+            value={poemLine.adverb}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.adverb === '' ? 'blankInput' : 'typedInput'} />
+
+          <input
+            name='verb'
+            placeholder="verb1"
+            value={poemLine.verb}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.verb === '' ? 'blankInput' : 'typedInput'} />
+
+          <input
+            name='adjective2'
+            placeholder="adjective2"
+            value={poemLine.adjective2}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.adjective2 === '' ? 'blankInput' : 'typedInput'} />
+
           <input
-            placeholder="hm..."
-            type="text" />
+            name='noun2'
+            placeholder="noun2"
+            value={poemLine.noun2}
+            type="text"
+            onChange={onPoemInputChange}
+            className={poemLine.noun2 === '' ? 'blankInput' : 'typedInput'} />
 
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input 
+          type="submit" 
+          value="Submit Line" 
+          className="PlayerSubmissionForm__submit-btn" />
         </div>
       </form>
     </div>

src/components/RecentSubmission.js

@@ -6,7 +6,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.submission}</p>
     </div>
   );
 }

src/components/RecentSubmission.test.js

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import RecentSubmission from './RecentSubmission';
 
 
-describe.skip('Wave 2:  RecentSubmission', () => {
+describe('Wave 2:  RecentSubmission', () => {
   test('It renders with a submission and shows the text', () => {
     // Act
     render(<RecentSubmission submission={'This is a submission'} />);