Earth- Ana

src/components/FinalPoem.js

@@ -2,21 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+const FinalPoem = (props) => {
+  if (props.isSubmitted) {
+    return (
+      <div className= "FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>FinalPoem</h3>
+          <h3>Final Poem</h3>
+          {props.submissions.map((submission, i) =>(
+            <p key={i}>{submission}</p>
+          ))
+        }
+        </section>
+      </div>
+    );
+  }
+  else {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+
+        </section>
+
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem}/>
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  }; 
+};
 
 FinalPoem.propTypes = {
   isSubmitted: PropTypes.bool.isRequired,

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

@@ -5,6 +5,14 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  // game component will keep track of the various submissions 
+
+  const [submissions, setSubmissions] = useState ([]); 
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [player, setPlayer] = useState(1); 
+
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +21,23 @@ const Game = () => {
     }
   }).join(' ');
 
+  const addSubmissionInput = (submission) => {
+
+    const newSubmissionFields = [...submissions];
+
+    newSubmissionFields.push(submission)
+
+    setSubmissions(newSubmissionFields)
+
+    setPlayer(player + 1)
+  }
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  };
+
+  const revealLastSubmission = submissions[submissions.length -1]
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,12 +50,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      {(!isSubmitted) && submissions.length > 0 ?  <RecentSubmission submission={revealLastSubmission} />: ''} 
 
-      <FinalPoem />
+      {(!isSubmitted) ? <PlayerSubmissionForm index={player} fields={FIELDS} sendSubmission={addSubmissionInput} /> : ''}
 
+      <FinalPoem  isSubmitted={isSubmitted} submissions={submissions} 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,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.emptyField {
+  background-color: pink;
+}

src/components/PlayerSubmissionForm.js

@@ -3,31 +3,90 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
-
-      <form className="PlayerSubmissionForm__form" >
-
-        <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
-        </div>
-
-        <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-        </div>
-      </form>
-    </div>
-  );
-}
+const PlayerSubmissionForm = (props) => {
+
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: ''
+  });
+
+  const onInputChange =(event) => {
+
+    const {name, value} = event.target; 
+
+    const newFormFieldValues = {
+      ...formFields,
+    }
+
+    newFormFieldValues[name] = value;
+    setFormFields(newFormFieldValues);
+  };
+
+    const onFormSubmit = (event) => {
+      event.preventDefault();
+
+      const poemFields = props.fields.map(field => {
+        const submittedFields = {...formFields};
+        if(field.key) {
+          return submittedFields[field.key];
+        }
+        else {
+          return field
+        }
+      }).join(' ');
+
+      props.sendSubmission(poemFields);
+
+      setFormFields({
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        adj2: '',
+        noun2: '',
+      });
+    } 
+
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{props.index}</h3>
+
+        <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
+
+          <div className="PlayerSubmissionForm__poem-inputs" >
+            {
+              props.fields.map((field, i)=> {
+                if (field.key) {
+                  return (
+                    <input
+                    key={field.key}
+                    name={field.key}
+                    placeholder={field.placeholder}
+                    onChange={onInputChange}
+                    value={formFields[field.key] || ''}
+                    type='text'
+                    className={!formFields[field.key] ? 'emptyField': 'populatedField'}
+                    />)
+                } else {
+                  return field;
+                }
+              })
+            }
+
+          </div>
+          <div className="PlayerSubmissionForm__submit">
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          </div>
+        </form>
+      </div>
+    );
+
+  };
+
 
 PlayerSubmissionForm.propTypes = {
   index: PropTypes.number.isRequired,

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