Leah - Water

src/components/FinalPoem.js

@@ -9,11 +9,22 @@ const FinalPoem = (props) => {
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
-      </section>
+        <div>
+          { props.isSubmitted &&
+            props.submissions.map((submission, index) => {
+              return(
+                <div key={index}> {submission} </div>
+              )
+            })
+          }
+        </div>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      </section>
+      { props.isSubmitted ||
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" onClick={() => {props.revealPoem()}} className="FinalPoem__reveal-btn" />
+        </div>
+      }
     </div>
   );
 }

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,20 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submitCheck, setSubmitCheck] = useState(false);
+
+  const [submittedLines, setSubmittedLines] = useState([]);
+
+  const addSubmittedLine = (submittedLine) => {
+    const newLineList = [...submittedLines, submittedLine];
+
+    setSubmittedLines(newLineList);
+  }
+
+  const revealPoemFunction = () => {
+    setSubmitCheck(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,17 +39,18 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      { submitCheck || !submittedLines.length || <RecentSubmission submission={submittedLines[submittedLines.length-1]}/> }
+      {/* Why undefined for typeof object doesn't work */}
+
+      {/* sendSubmittedLine is name of prop as is fields */}
+      { submitCheck || <PlayerSubmissionForm fields={FIELDS} sendSubmission={addSubmittedLine} index={submittedLines.length + 1}/> }
 
-      <FinalPoem />
+      <FinalPoem isSubmitted={submitCheck} submissions={submittedLines} revealPoem={revealPoemFunction}/>
 
     </div>
   );
 }
 
-
 const FIELDS = [
   'The',
   {

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;
 }
+
+input.entry {
+  background: rgb(197, 232, 197);
+}
+
+input.blank {
+  background: rgb(210, 162, 170);
+}

src/components/PlayerSubmissionForm.js

@@ -3,22 +3,81 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  // event handler
+  const onInputChange = (event) => {
+    // console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+    const newFormFields = {
+      ...formFields,
+    }
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const generateFormSubmission = () => props.fields.map(field => {
+    if (typeof field === 'object') {
+      return formFields[field.key]
+    }
+    return field
+  }).join(' ');
+
+  const onFormSubmit = (event) => {
+    event.preventDefault(); //prevents browser from submitting form
+
+    props.sendSubmission(generateFormSubmission()); // variable for the addSubmittedLine func in Game.js
+
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+  };
+
+  // validation example
+  const entryValid = (entry) => {
+    return entry;
+  }
+
   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
+          {props.fields.map((field, index) => {
+            if (typeof field === 'object') {
+              return(
+                <input
+                  key={index}
+                  name={field.key}
+                  value={formFields[field.key]}
+                  placeholder={field.placeholder}
+                  type="text"
+                  onChange={onInputChange}
+                  className={entryValid(formFields[field.key]) ? 'entry' : 'blank'}  />
+                )
+            } else {
+              return(
+                <div key={index}> {field} </div>
+              )
+            }
           }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+        ) 
+      }
         </div>
 
         <div className="PlayerSubmissionForm__submit">

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'} />);