Water - India

src/components/FinalPoem.js

@@ -3,17 +3,38 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const showIfSubmitted = () => {
+    if (props.isSubmitted) {
+      return (
+        <div>
+          {
+            props.submissions.map((submission, index) => {
+              return (
+                <p key={index}>
+                  {submission}
+                </p>
+              );
+            })
+          }
+        </div>
+      )
+    } else {
+      return (
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ () => { props.revealPoem() } }/>
+        </div>
+      )
+    }
+  }
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <div>
+          {showIfSubmitted()}
+        </div>
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" 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

@@ -5,6 +5,30 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  let playerNum = 1
+
+  const [poemLines, setPoemLines] = useState([])
+  const [currentPlayer, setCurrentPlayer] = useState(playerNum)
+  const [isSubmitted, setSubmissionStatus] = useState(false)
+
+  const setPlayer = (updatedPlayer) => {
+    updatedPlayer = updatedPlayer += 1;
+    setCurrentPlayer(updatedPlayer);
+  };
+
+  const sendSubmission = (newPoemLine) => {
+    const formatLine = FIELDS.map((field) => {
+      if (field.key) {
+        return newPoemLine[field.key];
+      } else {
+        return field;
+      }
+    }).join(' ');
+
+    setPoemLines([...poemLines, formatLine]);
+    setCurrentPlayer(setPlayer);
+  };
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +37,10 @@ const Game = () => {
     }
   }).join(' ');
 
+  const revealPoem = () => {
+    setSubmissionStatus(true);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +53,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      { isSubmitted || poemLines.length < 1 ? '': <RecentSubmission submission={poemLines.length > 0 ? poemLines[poemLines.length - 1] : '' } /> }
 
-      <FinalPoem />
+      { isSubmitted ? '': <PlayerSubmissionForm fields={FIELDS} index={currentPlayer} sendSubmission={sendSubmission} /> }
+
+      <FinalPoem isSubmitted={isSubmitted} submissions={poemLines} revealPoem={revealPoem}/>
 
     </div>
   );
@@ -66,4 +94,4 @@ const FIELDS = [
   '.',
 ];
 
-export default Game;
+export default Game;

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

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -3,22 +3,60 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const setDefault = () => {
+    let defaultFields = {};
+    props.fields.forEach((field) => {
+      if (field.key) {
+        defaultFields[field.key] = '';
+      }
+    });
+    return defaultFields;
+  }
+
+  const [formFields, setFormFields] = useState(setDefault());
+
+  const onInputChange = (event) => {
+    const newFormFields = {...formFields};
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    props.sendSubmission(formFields);
+    setFormFields(setDefault());
+  }
+
   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={onSubmit}>
 
         <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}
+                    value={formFields[field.key]}
+                    name={field.key}
+                    placeholder={field.placeholder}
+                    onChange={onInputChange}
+                    className={formFields[field.key] ? '' : 'PlayerSubmissionForm__input--invalid'}
+                  />
+                )
+              } else {
+                return (
+                  <div key={index}>
+                    {field}
+                  </div>
+                )
+              }
+            })
           }
-          <input
-            placeholder="hm..."
-            type="text" />
-
         </div>
 
         <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -6,9 +6,9 @@ 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>
-  );
+  )
 }
 
 RecentSubmission.propTypes = {

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