Water - Sophia

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  flex: .8;
+  flex: .6;
 }
 
 .App__header {

src/components/FinalPoem.css

@@ -7,13 +7,15 @@
   flex: 0.8;
 
   padding: 1rem;
+  border-radius: 30px;
+  background-color: rgb(75, 211, 211);
   border: 2px black solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
 }
 
 .FinalPoem__reveal-btn:hover {
-  background-color: tomato;
+  background-color: pink;
 }
 
 .FinalPoem__poem {

src/components/FinalPoem.js

@@ -3,25 +3,37 @@ 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" />
+  if (props.isSubmitted) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          { props.submissions.map((value, index) => {
+            return <p key={ index }>{ value }</p>
+          })}
+        </section>
       </div>
-    </div>
-  );
-}
+    );
+  } else {
+    return (
+      <div className="FinalPoem">
+        <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>
+    );
+  }
+};
 
 FinalPoem.propTypes = {
   isSubmitted: PropTypes.bool.isRequired,
   submissions: PropTypes.arrayOf(PropTypes.string).isRequired,
   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.css

@@ -1,4 +1,4 @@
 .Game__format-example {
   text-align: center;
-  font-style: italic;
+  font-style: bold;
 }

src/components/Game.js

@@ -4,38 +4,6 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
-const Game = () => {
-  const exampleFormat = FIELDS.map((field) => {
-    if (field.key) {
-      return field.placeholder;
-    } else {
-      return field;
-    }
-  }).join(' ');
-
-  return (
-    <div className="Game">
-      <h2>Game</h2>
-
-      <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
-
-      <p>Please follow the following format for your poetry submission:</p>
-
-      <p className="Game__format-example">
-        { exampleFormat }
-      </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
-
-    </div>
-  );
-}
-
-
 const FIELDS = [
   'The',
   {
@@ -66,4 +34,48 @@ const FIELDS = [
   '.',
 ];
 
-export default Game;
+const Game = () => {
+  const [poemList, setPoemsList] = useState([]);
+  const [index, setIndex] = useState(1);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const exampleFormat = FIELDS.map((field) => {
+    if (field.key) {
+      return field.placeholder;
+    } else {
+      return field;
+    }
+  }).join('');
+
+  const addPoem = (newPoem) => {
+    setIndex(index + 1);
+    setPoemsList([...poemList, newPoem]);
+  };
+
+  const revealPoem = (e) => {
+    e.preventDefault();
+    setIsSubmitted(true);
+  };
+
+  return (
+    <div className="Game">
+      <h2>Game</h2>
+
+      <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
+
+      <p>Please follow the following format for your poetry submission:</p>
+
+      <p className="Game__format-example">
+        { exampleFormat }
+      </p>
+
+      <RecentSubmission submission={!isSubmitted && poemList.length !== 0 ? poemList[poemList.length - 1] : ''}/>
+
+      <PlayerSubmissionForm fields={FIELDS} sendSubmission={addPoem} index={index} isSubmitted={isSubmitted}/>
+
+      <FinalPoem submissions={poemList} isSubmitted={isSubmitted} revealPoem={revealPoem}/>
+    </div>
+  );
+}
+
+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

@@ -9,7 +9,7 @@
 .PlayerSubmissionForm__poem-inputs {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: space-evenly;
 }
 
 .PlayerSubmissionForm__submit {
@@ -20,15 +20,16 @@
 .PlayerSubmissionForm__submit-btn {
   flex: 0.5;
   margin: 2rem;
-
+  border-radius: 30px;
   padding: 0.5rem;
+  background-color: rgb(75, 211, 211);
   border: 2px black solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
 }
 
 .PlayerSubmissionForm__submit-btn:hover {
-  background-color: tomato;
+  background-color: pink;
 }
 
 .PlayerSubmissionFormt__input--invalid {

src/components/PlayerSubmissionForm.js

@@ -3,21 +3,70 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const emptyValues = {};
+  props.fields.forEach(field => {
+    if (field.key) {
+      emptyValues[field.key] = '';
+    }
+  });
+
+  const [formFields, setFormFields] = useState(emptyValues);
+
+  const onInputChange = (event) => {
+    const newFormFields = {
+      ...formFields,
+    }
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const poem = props.fields.map((field) => {
+      if (field.key) {
+        return formFields[field.key];
+      } else {
+        return field;
+      }
+    }).join(' ');
+    props.sendSubmission(poem);
+
+    setFormFields(emptyValues);
+  };
+
+  const inputValidation = (field) => {
+    return field !== '';
+  }
+
+
+
+  const inputComponents = props.fields.map((field, i) => {
+    if (field.key) {
+      return <input key={i}
+        placeholder={field.placeholder}
+        type="text"
+        value={formFields[field.key]}
+        name={field.key}
+        onChange={onInputChange}
+        className={inputValidation(formFields[field.key]) ? 'PlayerSubmissionForm__poem-inputs' : 'PlayerSubmissionFormt__input--invalid'}
+      />;
+    } else {
+      return field;
+    }
+  });
+if (!props.isSubmitted) {
   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
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+          { inputComponents }
 
         </div>
 
@@ -26,7 +75,10 @@ const PlayerSubmissionForm = () => {
         </div>
       </form>
     </div>
-  );
+  )
+  } else {
+  return ('')
+  }
 }
 
 PlayerSubmissionForm.propTypes = {
@@ -41,4 +93,4 @@ PlayerSubmissionForm.propTypes = {
   ])).isRequired,
 }
 
-export default PlayerSubmissionForm;
+export default PlayerSubmissionForm;

src/components/RecentSubmission.css

@@ -4,5 +4,6 @@
 
 .RecentSubmission__submission {
   text-align: center;
-  line-height: 3rem;
+  line-height: 4rem;
+  background-color: pink;
 }

src/components/RecentSubmission.js

@@ -3,12 +3,17 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
+  if (props.submission !== '') {
   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 = {

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