Alice B. - Earth

src/components/FinalPoem.js

@@ -3,19 +3,30 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+
+  const revealedPoem = 
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      { props.submissions.map((value, i) => {
+        return <p key={i}>{value}</p>
+      })}
+    </section>
+
+  const poemButton = 
+        <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>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  const showPoem = props.isSubmitted ? revealedPoem : poemButton
+    return (
+      <div className="FinalPoem">
+        {showPoem}
       </div>
-    </div>
-  );
+    );
 }
 
 FinalPoem.propTypes = {
@@ -24,4 +35,4 @@ FinalPoem.propTypes = {
   revealPoem: PropTypes.func.isRequired,
 };
 
-export default FinalPoem;
+export default FinalPoem;

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,28 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submissions, setSubmissions] = useState([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);;
+
+  const onSubmitForm = (line) => {
+    const newPoemLine = [...submissions];
+
+    const formatLine = FIELDS.map((field) => {
+      if (field.key) {
+        return line[field.key];
+      } else {
+        return field;
+      }
+    }).join(' ');
+
+    newPoemLine.push(formatLine);
+    setSubmissions(newPoemLine);
+  };
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -22,14 +44,13 @@ const Game = () => {
       <p>Please follow the following format for your poetry submission:</p>
 
       <p className="Game__format-example">
-        { exampleFormat }
+        {exampleFormat}
       </p>
+      {isSubmitted ? null : 
+      [ <RecentSubmission submission={submissions[submissions.length - 1] || ''} />,
+        <PlayerSubmissionForm sendSubmission={onSubmitForm} index={submissions.length + 1} fields={FIELDS} />]}
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+        <FinalPoem submissions={submissions} isSubmitted={isSubmitted} 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', () => {
 
@@ -101,6 +101,7 @@ describe.skip('Game', () => {
 
     describe('Wave 2:  Showing lines of poetry', () => {
 
+      // eslint-disable-next-line jest/expect-expect
       test('you can enter a line of the poem', () => {
         const line = ['big', 'cat', 'abruptly', 'eats', 'tasty', 'dogfood'];
         // Act-Assert

src/components/PlayerSubmissionForm.js

@@ -3,21 +3,64 @@ 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 [inputForm, setInputForm] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  const onFormChange = (e) => {
+    setInputForm({
+      ...inputForm,
+      [e.target.name]: e.target.value
+    })
+  };
 
-      <form className="PlayerSubmissionForm__form" >
+  const onSubmitForm = (e) => {
+    e.preventDefault();
+    props.sendSubmission(inputForm);
+    setInputForm({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+  };
 
+  // const isEmpty = (name) => {
+  //   return name === '';
+  // };
+
+  return (
+    <div className="PlayerSubmissionForm">
+      <h3>Player Submission Form for Player #{props.index}</h3>
+      <form className="PlayerSubmissionForm__form" onSubmit={onSubmitForm} >
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+          {props.fields.map((value, i) => {
+            if (value.key) {
+              return (
+                <input
+                  key={`${i}`}
+                  name={`${value.key}`}
+                  placeholder={`${value.placeholder}`}
+                  onChange={onFormChange}
+                  type='text'
+                  value={inputForm[value.key] || ''}
+                  className={!inputForm[value.key] ? 'PlayerSubmissionFormt__input--invalid ' : ''}
+                />
+              );
+            } else {
+              return value;
+            };
+          })}
 
         </div>
 
@@ -42,3 +85,4 @@ PlayerSubmissionForm.propTypes = {
 }
 
 export default PlayerSubmissionForm;
+

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