Rachael of the mighty water class

src/components/FinalPoem.js

@@ -4,21 +4,42 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const showFinalPoem = () => {
+    if (props.isSubmitted) {
+      return (
+      <div>
+          {
+            props.submissions.map((line, index) => {
+              return (
+                <p key={index}>
+                  {line}
+                </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>
-
+        { showFinalPoem() }
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
     </div>
   );
 }
 
 FinalPoem.propTypes = {
+
   isSubmitted: PropTypes.bool.isRequired,
   submissions: PropTypes.arrayOf(PropTypes.string).isRequired,
   revealPoem: PropTypes.func.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,7 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [currentPlayer, setcurrentPlayer] = useState(1)
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +14,46 @@ const Game = () => {
     }
   }).join(' ');
 
+
+
+  const [poemLines, setPoemLines] = useState([]);
+  const [isSubmitted, setisSubmitted] = useState(false);
+
+
+  const setPlayer = (updatedPlayer) => {
+    updatedPlayer = updatedPlayer += 1
+    setcurrentPlayer(updatedPlayer)
+  }
+
+
+  const addPoemLine = (line) => {
+    // const newLine = [...lines];
+
+    const formatLines = FIELDS.map((field) => {
+      if (field.key) {
+        return line[field.key];
+      } else {
+        return field;
+      }
+    }).join(' ');  
+
+    setPoemLines([...poemLines, formatLines])
+
+    setcurrentPlayer(setPlayer);
+
+
+
+  };
+  const revealPoem = () => {
+    setisSubmitted(true);
+  }
+
+  let mostRecentSubmission = poemLines[poemLines.length - 1];
+
+
+
+
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +66,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission isSubmitted={isSubmitted} submission={mostRecentSubmission}  />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm fields={FIELDS} sendSubmission={addPoemLine} index={currentPlayer} isSubmitted={isSubmitted} />
 
-      <FinalPoem />
+      <FinalPoem isSubmitted={isSubmitted} submissions={poemLines} 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.js

@@ -3,33 +3,118 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+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) => {
+  console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+  // Duplicate formFields into new object
+  const newFormFields = {
+    ...formFields,
+  }
+
+
+  newFormFields[event.target.name] = event.target.value;
+  setFormFields(newFormFields);
+}
+
+const onFormSubmit = event => {
+  event.preventDefault();
 
-      <form className="PlayerSubmissionForm__form" >
+  props.sendSubmission(formFields);
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+  });
+
+};
 
+const fieldValid = () => {
+  if (props.key != null)
+  return true
+}
+
+const gameComplete = () => {
+  if (!props.isSubmitted) {
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{ props.index }</h3>
+
+        <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
-            placeholder="hm..."
-            type="text" />
-
-        </div>
-
-        <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-        </div>
-      </form>
+              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={fieldValid() "" ? "PlayerSubmissionFormt__input--invalid" }
+
+                    />
+                  )
+                } else {
+                  return(
+                    <div key={ index }>
+                      { field }
+                    </div>
+                  )
+                }
+              })
+            }
+
+
+          </div>
+
+          <div className="PlayerSubmissionForm__submit">
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          </div>
+        </form>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <h3>
+          All done!
+        </h3>
+      </div>
+    )
+  }
+
+}
+  return (
+    <div>
+      {gameComplete()}
     </div>
-  );
+  )
+
 }
 
 PlayerSubmissionForm.propTypes = {
+  isSubmitted: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
   sendSubmission: PropTypes.func.isRequired,
   fields: PropTypes.arrayOf(PropTypes.oneOfType([

src/components/RecentSubmission.js

@@ -3,16 +3,23 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  if (!props.isSubmitted) {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
+  } else {
+    return (
+      null
+    )
+  }
 }
 
 RecentSubmission.propTypes = {
   submission: PropTypes.string.isRequired,
+  isSubmitted: PropTypes.bool.isRequired
 };
 
 export default RecentSubmission;

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