From 4b98dc5442eac486090c7020cba7d76abc30cf56 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 16:21:06 -0700
Subject: [PATCH 01/11] Form displays for player to submit words for poem

---
 src/components/FinalPoem.js            |  6 ++-
 src/components/Game.js                 | 17 +++++++-
 src/components/PlayerSubmissionForm.js | 59 ++++++++++++++++++++------
 src/components/RecentSubmission.js     |  2 +-
 4 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..62f11633 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,8 +3,12 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const onDisplayPoem = (event) => {
+    event.preventDefault();
+  };
+
   return (
-    <div className="FinalPoem">
+    <div className="FinalPoem" onSubmit={onDisplayPoem}>
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..fd8a2baf 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,10 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  const [currentField, setCurrentField] = useState('');
+  const [allFields, setAllFields] = useState([]);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +17,15 @@ const Game = () => {
     }
   }).join(" ");
 
+  const showSubmittedField = (field) => {
+    
+    const newField = Object.values(field).join('');
+    setCurrentField(newField);
+
+    const newFieldList = [...allFields];
+    newFieldList.push(newField);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,9 +38,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission field={currentField}/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm onCallbackField={showSubmittedField}/>
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..7b5de5f7 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,22 +1,57 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+//import PropTypes from 'prop-types';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const PlayerSubmissionForm = (props) => {
 
-      <form className="PlayerSubmissionForm__form" >
+  const [field, setField] = useState({
+    adjective: '',
+    noun: '', 
+    adverb: '', 
+    verb: '', 
+    adjective1: '',
+    noun1: '',
+  });
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  const [player, nextPlayer] = useState(1);
+
+  const onInput = (event) => {
+    const newPoem = {
+      ...field,
+    }
+    newPoem[event.target.name]  = event.target.value;
+    setField(newPoem);
+  }
+
+  const onSubmitField= (event) => {
+    event.preventDefault();
+
+    props.onCallbackField(field);
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+    setField({
+      adjective: '',
+      noun: '', 
+      adverb: '', 
+      verb: '', 
+      adjective1: '',
+      noun1: '',
+    });
+    nextPlayer(player + 1);
+  }
 
+  return (
+    <div className="PlayerSubmissionForm" onSubmit={onSubmitField}>
+      <h3>Player Submission Form for Player #{ player }</h3>
+
+      <form className="PlayerSubmissionForm__form">
+
+        <div className="PlayerSubmissionForm__poem-inputs">
+          The <input name='adjective'placeholder="adjective" type="text" value={field.adjective} onChange={onInput}/>
+          <input name='noun' placeholder="noun" type="text" value={field.noun} onChange={onInput}/>
+          <input name='adverb' placeholder="adverb" type="text" value={field.adverb} onChange={onInput}/>
+          <input name='verb' placeholder="verb" type="text" value={field.verb} onChange={onInput}/> the 
+          <input name='adjective1' placeholder="adjective" type="text" value={field.adjective1} onChange={onInput}/>
+          <input name='noun1' placeholder="noun" type="text" value={field.noun1} onChange={onInput}/>
         </div>
 
         <div className="PlayerSubmissionForm__submit">
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..3cda29cf 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.field }</p>
     </div>
   );
 }

From 89067e030635d63400d1b1ecc941d311fc5c06c2 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 17:05:25 -0700
Subject: [PATCH 02/11] Player's field submission renders after click

---
 src/components/FinalPoem.js |  7 ++++---
 src/components/Game.js      | 33 +++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 62f11633..cc89b4e6 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -5,15 +5,16 @@ const FinalPoem = (props) => {
 
   const onDisplayPoem = (event) => {
     event.preventDefault();
+    props.setDisplay(true);
   };
 
   return (
-    <div className="FinalPoem" onSubmit={onDisplayPoem}>
+    <div className="FinalPoem" onClick={onDisplayPoem}>
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <p>{ props.displayPoem }/</p>
       </section>
-
+      
       <div className="FinalPoem__reveal-btn-container">
         <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
diff --git a/src/components/Game.js b/src/components/Game.js
index fd8a2baf..1d10e876 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,7 @@ const Game = () => {
 
   const [currentField, setCurrentField] = useState('');
   const [allFields, setAllFields] = useState([]);
+  const [display, setDisplay] = useState(false);
 
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
@@ -24,30 +25,34 @@ const Game = () => {
 
     const newFieldList = [...allFields];
     newFieldList.push(newField);
+    setAllFields(newFieldList);
   }
 
-  return (
-    <div className="Game">
-      <h2>Game</h2>
+  let poem = '';
 
-      <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>
+  if (display === true) {
+    poem = allFields.join('');
+  }
+
+    return (
+      <div className="Game">
+        <h2>Game</h2>
 
-      <p>Please follow the following format for your poetry submission:</p>
+        <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 className="Game__format-example">
-        { exampleFormat }
-      </p>
+        <p>Please follow the following format for your poetry submission:</p>
 
-      <RecentSubmission field={currentField}/>
+        <p className="Game__format-example">{ exampleFormat }</p>
 
-      <PlayerSubmissionForm onCallbackField={showSubmittedField}/>
+        <RecentSubmission field={ currentField }/>
 
-      <FinalPoem />
+        <PlayerSubmissionForm onCallbackField={ showSubmittedField }/>
 
-    </div>
-  );
-}
+        <FinalPoem setAllFields={ setDisplay } poemLines={ poem }/>
 
+      </div>
+    );
+};
 
 const FIELDS = [
   "The",

From 05b249497106ce97adcf439fa569d538224dbb87 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 19:00:15 -0700
Subject: [PATCH 03/11] Final poem renders for all players

---
 src/components/FinalPoem.js            |  4 ++--
 src/components/Game.js                 | 28 +++++++++++++++++++++-----
 src/components/PlayerSubmissionForm.js | 22 +++++++++++---------
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index cc89b4e6..124e1bcf 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -5,14 +5,14 @@ const FinalPoem = (props) => {
 
   const onDisplayPoem = (event) => {
     event.preventDefault();
-    props.setDisplay(true);
+    props.setAllFields(true);
   };
 
   return (
     <div className="FinalPoem" onClick={onDisplayPoem}>
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        <p>{ props.displayPoem }/</p>
+        {props.poemLines}
       </section>
       
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 1d10e876..58a09515 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,7 +8,7 @@ const Game = () => {
 
   const [currentField, setCurrentField] = useState('');
   const [allFields, setAllFields] = useState([]);
-  const [display, setDisplay] = useState(false);
+  const [displayPoem, setDisplayPoem] = useState(false);
 
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
@@ -30,9 +30,9 @@ const Game = () => {
 
   let poem = '';
 
-  if (display === true) {
+  if (displayPoem === true) {
     poem = allFields.join('');
-  }
+  
 
     return (
       <div className="Game">
@@ -46,12 +46,30 @@ const Game = () => {
 
         <RecentSubmission field={ currentField }/>
 
+        <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
+
+      </div>
+    );
+  };
+
+  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 field={ currentField }/>
+
         <PlayerSubmissionForm onCallbackField={ showSubmittedField }/>
 
-        <FinalPoem setAllFields={ setDisplay } poemLines={ poem }/>
+        <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
 
       </div>
-    );
+  );
 };
 
 const FIELDS = [
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 7b5de5f7..d61a61a1 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,7 +4,7 @@ import './PlayerSubmissionForm.css';
 
 const PlayerSubmissionForm = (props) => {
 
-  const [field, setField] = useState({
+  const [field, setField] = useState ({
     adjective: '',
     noun: '', 
     adverb: '', 
@@ -37,21 +37,25 @@ const PlayerSubmissionForm = (props) => {
       noun1: '',
     });
     nextPlayer(player + 1);
-  }
+  };
+
+  const isEmpty = (name) => {
+    return name === '';
+  };
 
   return (
-    <div className="PlayerSubmissionForm" onSubmit={onSubmitField}>
+    <div className="PlayerSubmissionForm" onSubmit={ onSubmitField }>
       <h3>Player Submission Form for Player #{ player }</h3>
 
       <form className="PlayerSubmissionForm__form">
 
         <div className="PlayerSubmissionForm__poem-inputs">
-          The <input name='adjective'placeholder="adjective" type="text" value={field.adjective} onChange={onInput}/>
-          <input name='noun' placeholder="noun" type="text" value={field.noun} onChange={onInput}/>
-          <input name='adverb' placeholder="adverb" type="text" value={field.adverb} onChange={onInput}/>
-          <input name='verb' placeholder="verb" type="text" value={field.verb} onChange={onInput}/> the 
-          <input name='adjective1' placeholder="adjective" type="text" value={field.adjective1} onChange={onInput}/>
-          <input name='noun1' placeholder="noun" type="text" value={field.noun1} onChange={onInput}/>
+          The <input name='adjective'placeholder="adjective" type="text" value={field.adjective} onChange={onInput} className={isEmpty(field.adjective) ? "empty" : "filled"}/>
+          <input name='noun' placeholder="noun" type="text" value={field.noun} onChange={onInput} className={isEmpty(field.noun) ? "empty" : "filled"}/>
+          <input name='adverb' placeholder="adverb" type="text" value={field.adverb} onChange={onInput} className={isEmpty(field.adverb) ? "empty" : "filled"}/>
+          <input name='verb' placeholder="verb" type="text" value={field.verb} onChange={onInput} className={isEmpty(field.verb) ? "empty" : "filled"}/> the 
+          <input name='adjective1' placeholder="adjective" type="text" value={field.adjective1} onChange={onInput} className={isEmpty(field.adjective1) ? "empty" : "filled"}/>
+          <input name='noun1' placeholder="noun" type="text" value={field.noun1} onChange={onInput} className={isEmpty(field.noun1) ? "empty" : "filled"}/>
         </div>
 
         <div className="PlayerSubmissionForm__submit">

From 6bed73d515b3fff2fec34abda9ee0153da7fa7fd Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 19:05:53 -0700
Subject: [PATCH 04/11] Added color to submit button and empty fields

---
 src/components/PlayerSubmissionForm.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..03271d2a 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -25,6 +25,7 @@
   border: 2px black solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
+  background-color: cadetblue;
 }
 
 .PlayerSubmissionForm__submit-btn:hover {
@@ -38,3 +39,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+input.empty {
+  background-color: #FFE9E9;
+}
\ No newline at end of file

From 0a656d7be6a2cb8d947024f1f3eb800d59a90bf4 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 20:46:05 -0700
Subject: [PATCH 05/11] poem displays in different lines

---
 src/components/FinalPoem.js            | 17 +++++++--
 src/components/Game.js                 | 30 +++++++--------
 src/components/PlayerSubmissionForm.js | 52 ++++++++++++++++----------
 src/components/RecentSubmission.js     |  2 +-
 4 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 124e1bcf..86a09c54 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -6,17 +6,28 @@ const FinalPoem = (props) => {
   const onDisplayPoem = (event) => {
     event.preventDefault();
     props.setAllFields(true);
-  };
+  }
 
   return (
     <div className="FinalPoem" onClick={onDisplayPoem}>
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        {props.poemLines}
+
+        {props.poemLines.map((line, i) => {
+          return(
+            <div key={`${i}`}>
+              <p>{line}</p>
+            </div>
+          );
+        })}
       </section>
       
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input 
+          type="button" 
+          value="We are finished: Reveal the Poem" 
+          className="FinalPoem__reveal-btn" 
+        />
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 58a09515..d92d02b4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -18,9 +18,9 @@ const Game = () => {
     }
   }).join(" ");
 
-  const showSubmittedField = (field) => {
+  const showSubmittedField = (fieldInput) => {
     
-    const newField = Object.values(field).join('');
+    const newField = Object.values(fieldInput).join(' ');
     setCurrentField(newField);
 
     const newFieldList = [...allFields];
@@ -28,10 +28,10 @@ const Game = () => {
     setAllFields(newFieldList);
   }
 
-  let poem = '';
+  let poem = [];
 
   if (displayPoem === true) {
-    poem = allFields.join('');
+    poem = allFields;
   
 
     return (
@@ -44,33 +44,33 @@ const Game = () => {
 
         <p className="Game__format-example">{ exampleFormat }</p>
 
-        <RecentSubmission field={ currentField }/>
+        <RecentSubmission fieldInput={ currentField }/>
 
         <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
 
       </div>
     );
-  };
+  }
 
   return (
     <div className="Game">
-        <h2>Game</h2>
+      <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>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>Please follow the following format for your poetry submission:</p>
 
-        <p className="Game__format-example">{ exampleFormat }</p>
+      <p className="Game__format-example">{ exampleFormat }</p>
 
-        <RecentSubmission field={ currentField }/>
+      <RecentSubmission fieldInput={ currentField }/>
 
-        <PlayerSubmissionForm onCallbackField={ showSubmittedField }/>
+      <PlayerSubmissionForm onCallbackField={ showSubmittedField } fields={FIELDS}/>
 
-        <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
+      <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
 
-      </div>
+    </div>
   );
-};
+}
 
 const FIELDS = [
   "The",
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index d61a61a1..686545e4 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
-//import PropTypes from 'prop-types';
 
 const PlayerSubmissionForm = (props) => {
 
-  const [field, setField] = useState ({
+  const [fieldInput, setFieldInput] = useState ({
     adjective: '',
     noun: '', 
     adverb: '', 
@@ -16,50 +15,63 @@ const PlayerSubmissionForm = (props) => {
   const [player, nextPlayer] = useState(1);
 
   const onInput = (event) => {
-    const newPoem = {
-      ...field,
-    }
-    newPoem[event.target.name]  = event.target.value;
-    setField(newPoem);
+    const newField = {
+      ...fieldInput,
+    };
+    newField[event.target.name]  = event.target.value;
+    setFieldInput(newField);
   }
 
   const onSubmitField= (event) => {
     event.preventDefault();
 
-    props.onCallbackField(field);
+    props.onCallbackField(fieldInput);
 
-    setField({
+    setFieldInput({
       adjective: '',
       noun: '', 
       adverb: '', 
       verb: '', 
       adjective1: '',
       noun1: '',
-    });
+    })
+
     nextPlayer(player + 1);
-  };
+  }
 
   const isEmpty = (name) => {
     return name === '';
-  };
+  }
 
   return (
     <div className="PlayerSubmissionForm" onSubmit={ onSubmitField }>
-      <h3>Player Submission Form for Player #{ player }</h3>
+      <h3>Player Submission Form for Player #{player}</h3>
 
       <form className="PlayerSubmissionForm__form">
 
         <div className="PlayerSubmissionForm__poem-inputs">
-          The <input name='adjective'placeholder="adjective" type="text" value={field.adjective} onChange={onInput} className={isEmpty(field.adjective) ? "empty" : "filled"}/>
-          <input name='noun' placeholder="noun" type="text" value={field.noun} onChange={onInput} className={isEmpty(field.noun) ? "empty" : "filled"}/>
-          <input name='adverb' placeholder="adverb" type="text" value={field.adverb} onChange={onInput} className={isEmpty(field.adverb) ? "empty" : "filled"}/>
-          <input name='verb' placeholder="verb" type="text" value={field.verb} onChange={onInput} className={isEmpty(field.verb) ? "empty" : "filled"}/> the 
-          <input name='adjective1' placeholder="adjective" type="text" value={field.adjective1} onChange={onInput} className={isEmpty(field.adjective1) ? "empty" : "filled"}/>
-          <input name='noun1' placeholder="noun" type="text" value={field.noun1} onChange={onInput} className={isEmpty(field.noun1) ? "empty" : "filled"}/>
+          
+          {props.fields.map((field, i) => {
+            if (field.key) {
+              return (
+                <input 
+                  key={`${i}`}
+                  name={`${field.key}`}
+                  placeholder={`${field.placeholder}`} 
+                  type="text" 
+                  value={fieldInput[`${field.key}`]} 
+                  onChange={onInput} 
+                  className={isEmpty(fieldInput[`${field.key}`]) ? "empty" : "filled"}
+                />
+              );
+              }else{
+                return field;
+              }
+          })}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"/>
         </div>
       </form>
     </div>
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 3cda29cf..b6b25fce 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{ props.field }</p>
+      <p className="RecentSubmission__submission">{ props.fieldInput }</p>
     </div>
   );
 }

From 7f229f1709d32166c879bcd34c5057950034aa06 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 21:21:58 -0700
Subject: [PATCH 06/11] Fixed bug - empty fields now all have color

---
 src/components/PlayerSubmissionForm.js | 30 +++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 686545e4..ed0fcc13 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,12 +4,12 @@ import './PlayerSubmissionForm.css';
 const PlayerSubmissionForm = (props) => {
 
   const [fieldInput, setFieldInput] = useState ({
-    adjective: '',
-    noun: '', 
-    adverb: '', 
+    adj1: '',
+    noun1: '', 
+    adv: '', 
     verb: '', 
-    adjective1: '',
-    noun1: '',
+    adj2: '',
+    noun2: '',
   });
 
   const [player, nextPlayer] = useState(1);
@@ -17,7 +17,7 @@ const PlayerSubmissionForm = (props) => {
   const onInput = (event) => {
     const newField = {
       ...fieldInput,
-    };
+    }
     newField[event.target.name]  = event.target.value;
     setFieldInput(newField);
   }
@@ -28,12 +28,12 @@ const PlayerSubmissionForm = (props) => {
     props.onCallbackField(fieldInput);
 
     setFieldInput({
-      adjective: '',
-      noun: '', 
-      adverb: '', 
+      adj1: '',
+      noun1: '', 
+      adv: '', 
       verb: '', 
-      adjective1: '',
-      noun1: '',
+      adj2: '',
+      noun2: '',
     })
 
     nextPlayer(player + 1);
@@ -59,14 +59,14 @@ const PlayerSubmissionForm = (props) => {
                   name={`${field.key}`}
                   placeholder={`${field.placeholder}`} 
                   type="text" 
-                  value={fieldInput[`${field.key}`]} 
+                  value={fieldInput[`${field.key}`]}
                   onChange={onInput} 
                   className={isEmpty(fieldInput[`${field.key}`]) ? "empty" : "filled"}
                 />
               );
-              }else{
-                return field;
-              }
+          }else{
+            return field;
+          }
           })}
         </div>
 

From 0a1dff32a577a4e8674c212396c0806824e59307 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Tue, 21 Apr 2020 22:10:08 -0700
Subject: [PATCH 07/11] Added prop-types

---
 src/components/FinalPoem.js            |  7 ++++++-
 src/components/Game.js                 | 13 ++++++++-----
 src/components/PlayerSubmissionForm.js |  8 +++++++-
 src/components/RecentSubmission.js     |  5 +++++
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 86a09c54..792192d7 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
   const onDisplayPoem = (event) => {
     event.preventDefault();
-    props.setAllFields(true);
+    props.setFieldsPoem(true);
   }
 
   return (
@@ -32,5 +33,9 @@ const FinalPoem = (props) => {
     </div>
   );
 }
+FinalPoem.propTypes = {
+  poemLines: PropTypes.array,
+  setFieldsPoem: PropTypes.func
+};
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index d92d02b4..e0345826 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -33,7 +33,6 @@ const Game = () => {
   if (displayPoem === true) {
     poem = allFields;
   
-
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -42,11 +41,13 @@ const Game = () => {
 
         <p>Please follow the following format for your poetry submission:</p>
 
-        <p className="Game__format-example">{ exampleFormat }</p>
+        <p className="Game__format-example">
+          { exampleFormat }
+        </p>
 
         <RecentSubmission fieldInput={ currentField }/>
 
-        <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
+        <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
 
       </div>
     );
@@ -60,13 +61,15 @@ const Game = () => {
 
       <p>Please follow the following format for your poetry submission:</p>
 
-      <p className="Game__format-example">{ exampleFormat }</p>
+      <p className="Game__format-example">
+        { exampleFormat }
+      </p>
 
       <RecentSubmission fieldInput={ currentField }/>
 
       <PlayerSubmissionForm onCallbackField={ showSubmittedField } fields={FIELDS}/>
 
-      <FinalPoem setAllFields={ setDisplayPoem } poemLines={ poem }/>
+      <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ed0fcc13..90947857 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 const PlayerSubmissionForm = (props) => {
 
@@ -34,7 +35,7 @@ const PlayerSubmissionForm = (props) => {
       verb: '', 
       adj2: '',
       noun2: '',
-    })
+    });
 
     nextPlayer(player + 1);
   }
@@ -78,5 +79,10 @@ const PlayerSubmissionForm = (props) => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.object.isRequired,
+  onCallbackField: PropTypes.func.isRequired,
+};
+
 
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index b6b25fce..ef5a6b13 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   return (
@@ -10,4 +11,8 @@ const RecentSubmission = (props) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  fieldInput: PropTypes.string
+};
+
 export default RecentSubmission;

From cde7e73e198bb2796b3ca2e9e6a8d75639ae3503 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Wed, 22 Apr 2020 14:31:23 -0700
Subject: [PATCH 08/11] cleanup -typo fixed

---
 src/components/PlayerSubmissionForm.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 90947857..93e26ffd 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -16,9 +16,11 @@ const PlayerSubmissionForm = (props) => {
   const [player, nextPlayer] = useState(1);
 
   const onInput = (event) => {
+
     const newField = {
       ...fieldInput,
     }
+
     newField[event.target.name]  = event.target.value;
     setFieldInput(newField);
   }
@@ -65,9 +67,9 @@ const PlayerSubmissionForm = (props) => {
                   className={isEmpty(fieldInput[`${field.key}`]) ? "empty" : "filled"}
                 />
               );
-          }else{
-            return field;
-          }
+            }else{
+              return field;
+            }
           })}
         </div>
 

From 53587ae2c02a2461422337f93bddf4cbaa0b801d Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Wed, 22 Apr 2020 15:22:39 -0700
Subject: [PATCH 09/11] Proptype in playersubform updated

---
 src/components/FinalPoem.js            | 18 +++++++++++++++++-
 src/components/PlayerSubmissionForm.js |  2 +-
 src/components/RecentSubmission.js     | 15 ++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 792192d7..22193fed 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -9,6 +9,22 @@ const FinalPoem = (props) => {
     props.setFieldsPoem(true);
   }
 
+  function formatFields(fieldInput){
+    let fullPoem = '';
+    fieldInput = fieldInput.split(" ");
+  
+    for(let i =0; i < fieldInput.length; i++){
+      if(i === 0){
+        fullPoem += ("The " + fieldInput[i]);
+      }else if(i === 3){
+        fullPoem += (" " + fieldInput[i] + " the "); 
+      }else{
+        fullPoem += (" " + fieldInput[i]);
+      }
+    }
+    return fullPoem;
+  }
+
   return (
     <div className="FinalPoem" onClick={onDisplayPoem}>
       <section className="FinalPoem__poem">
@@ -17,7 +33,7 @@ const FinalPoem = (props) => {
         {props.poemLines.map((line, i) => {
           return(
             <div key={`${i}`}>
-              <p>{line}</p>
+              <p>{formatFields(line)}</p>
             </div>
           );
         })}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 93e26ffd..70df9021 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -82,7 +82,7 @@ const PlayerSubmissionForm = (props) => {
 }
 
 PlayerSubmissionForm.propTypes = {
-  fields: PropTypes.object.isRequired,
+  fields: PropTypes.array.isRequired,
   onCallbackField: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index ef5a6b13..877ad339 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -3,10 +3,23 @@ import './RecentSubmission.css';
 import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
+  const fieldInput = props.fieldInput.split(" ");
+  let fullPoem = '';
+    if(props.fieldInput.length !== 0){
+    for(let i =0; i < fieldInput.length; i++){
+      if(i ===0){
+        fullPoem += ("The " + fieldInput[i]);
+      }else if(i === 3){
+        fullPoem += (" " + fieldInput[i] + " the "); 
+      }else{
+        fullPoem += (" " + fieldInput[i]);
+      }
+    }
+  }
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{ props.fieldInput }</p>
+      <p className="RecentSubmission__submission">{fullPoem}</p>
     </div>
   );
 }

From 63af34e5ad77a7177cba3c274a4b0af680f6034d Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Wed, 22 Apr 2020 15:45:34 -0700
Subject: [PATCH 10/11] Final poem rendered without previous submission

---
 src/components/Game.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e0345826..e3bbdef8 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -45,7 +45,8 @@ const Game = () => {
           { exampleFormat }
         </p>
 
-        <RecentSubmission fieldInput={ currentField }/>
+        
+        {/* <RecentSubmission fieldInput={ currentField }/> <--- shows last submitted line by user*/}
 
         <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
 

From db1a9f861f2c36d7b22b27755ad25d1b8d936c65 Mon Sep 17 00:00:00 2001
From: denisseai <msdenisseanaya@gmail.com>
Date: Wed, 22 Apr 2020 17:20:27 -0700
Subject: [PATCH 11/11] Added semi-colons

---
 src/components/FinalPoem.js            | 14 +++++++-------
 src/components/Game.js                 |  9 ++++++---
 src/components/PlayerSubmissionForm.js | 14 ++++++++------
 src/components/RecentSubmission.js     | 12 ++++++++----
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 22193fed..0938ef5f 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -7,22 +7,22 @@ const FinalPoem = (props) => {
   const onDisplayPoem = (event) => {
     event.preventDefault();
     props.setFieldsPoem(true);
-  }
-
+  };
+  // Display message format like demo
   function formatFields(fieldInput){
     let fullPoem = '';
     fieldInput = fieldInput.split(" ");
   
-    for(let i =0; i < fieldInput.length; i++){
+    for(let i = 0; i < fieldInput.length; i++){
       if(i === 0){
         fullPoem += ("The " + fieldInput[i]);
       }else if(i === 3){
         fullPoem += (" " + fieldInput[i] + " the "); 
       }else{
-        fullPoem += (" " + fieldInput[i]);
-      }
-    }
-    return fullPoem;
+        fullPoem += (" " + fieldInput[i] );
+      };
+    };
+    return (fullPoem + ".");
   }
 
   return (
diff --git a/src/components/Game.js b/src/components/Game.js
index e3bbdef8..6876f158 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,6 +10,7 @@ const Game = () => {
   const [allFields, setAllFields] = useState([]);
   const [displayPoem, setDisplayPoem] = useState(false);
 
+  // Provided code
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -18,6 +19,7 @@ const Game = () => {
     }
   }).join(" ");
 
+  // Gets field input and renders all the fields together
   const showSubmittedField = (fieldInput) => {
     
     const newField = Object.values(fieldInput).join(' ');
@@ -26,8 +28,9 @@ const Game = () => {
     const newFieldList = [...allFields];
     newFieldList.push(newField);
     setAllFields(newFieldList);
-  }
+  };
 
+  // Array to hold field input
   let poem = [];
 
   if (displayPoem === true) {
@@ -68,14 +71,14 @@ const Game = () => {
 
       <RecentSubmission fieldInput={ currentField }/>
 
-      <PlayerSubmissionForm onCallbackField={ showSubmittedField } fields={FIELDS}/>
+      <PlayerSubmissionForm onCallbackField={ showSubmittedField } fields={ FIELDS }/>
 
       <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
 
     </div>
   );
 }
-
+// Part for making this dynamic later use
 const FIELDS = [
   "The",
   {
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 70df9021..4ace9492 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -16,15 +16,16 @@ const PlayerSubmissionForm = (props) => {
   const [player, nextPlayer] = useState(1);
 
   const onInput = (event) => {
-
+    // Get all field inputs
     const newField = {
       ...fieldInput,
-    }
+    };
 
     newField[event.target.name]  = event.target.value;
     setFieldInput(newField);
-  }
+  };
 
+  // Gets and sends field's input to Game.js and resets current input
   const onSubmitField= (event) => {
     event.preventDefault();
 
@@ -39,12 +40,13 @@ const PlayerSubmissionForm = (props) => {
       noun2: '',
     });
 
+    // Move to next player
     nextPlayer(player + 1);
-  }
+  };
 
   const isEmpty = (name) => {
     return name === '';
-  }
+  };
 
   return (
     <div className="PlayerSubmissionForm" onSubmit={ onSubmitField }>
@@ -69,7 +71,7 @@ const PlayerSubmissionForm = (props) => {
               );
             }else{
               return field;
-            }
+            };
           })}
         </div>
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 877ad339..74ffcd2a 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,8 +2,11 @@ import React from 'react';
 import './RecentSubmission.css';
 import PropTypes from 'prop-types';
 
+// To add "the" to match demo Resource: R. Quin :) zoom call
 const RecentSubmission = (props) => {
+
   const fieldInput = props.fieldInput.split(" ");
+  
   let fullPoem = '';
     if(props.fieldInput.length !== 0){
     for(let i =0; i < fieldInput.length; i++){
@@ -13,16 +16,17 @@ const RecentSubmission = (props) => {
         fullPoem += (" " + fieldInput[i] + " the "); 
       }else{
         fullPoem += (" " + fieldInput[i]);
-      }
-    }
-  }
+      };
+    };
+  };
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
       <p className="RecentSubmission__submission">{fullPoem}</p>
     </div>
   );
-}
+};
 
 RecentSubmission.propTypes = {
   fieldInput: PropTypes.string