From f5cb73605e8b6f92c0b778ddf36c3d722672d85f Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 17:27:51 -0700
Subject: [PATCH 01/19] scaffolding for Field component

---
 src/components/Field.css |  0
 src/components/Field.js  | 20 ++++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/components/Field.css
 create mode 100644 src/components/Field.js

diff --git a/src/components/Field.css b/src/components/Field.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Field.js b/src/components/Field.js
new file mode 100644
index 00000000..a285461d
--- /dev/null
+++ b/src/components/Field.js
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import './Field.css';
+
+const Field = (props) => {
+  return (
+    <input className="field"
+            placeholder={props.placeholder}
+            type="text"
+            value={props.value}
+            onChange={props.onChangeCallback} />
+  );
+}
+
+Field.propTypes = {
+  placeholder: PropTypes.string.isRequired,
+  value: PropTypes.value,
+  onChangeCallback: PropTypes.func.isRequired,
+};
+
+export default Field;
\ No newline at end of file

From 078cfaa8c0605b24e09ceaebed745ac36b0162c6 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 17:53:17 -0700
Subject: [PATCH 02/19] fields dynamically generate

---
 src/components/Field.js                |  3 ++-
 src/components/Game.js                 |  7 ++++++-
 src/components/PlayerSubmissionForm.js | 28 +++++++++++++++++---------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/Field.js b/src/components/Field.js
index a285461d..abc95754 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './Field.css';
+import PropTypes from 'prop-types';
 
 const Field = (props) => {
   return (
@@ -13,7 +14,7 @@ const Field = (props) => {
 
 Field.propTypes = {
   placeholder: PropTypes.string.isRequired,
-  value: PropTypes.value,
+  value: PropTypes.string,
   onChangeCallback: PropTypes.func.isRequired,
 };
 
diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..61434bb7 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -6,6 +6,7 @@ import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
   const exampleFormat = FIELDS.map((field) => {
+    // return field.key ? field.placeholder : field
     if (field.key) {
       return field.placeholder;
     } else {
@@ -13,6 +14,10 @@ const Game = () => {
     }
   }).join(" ");
 
+  const handleChange = () => {
+
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -27,7 +32,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange}/>
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..06a2703a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,7 +1,21 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import Field from './Field.js';
+
+const generateSubmissionFields = (fields, onChangeCallback) => {
+
+  const submissionFields = fields.map(field => field.key ? <Field
+    placeholder={field.placeholder}
+    value={field.value}
+    onChangeCallback={field.onChangeCallback}  /> : <span>{field}</span> )
+
+  return submissionFields;
+}
+
+const PlayerSubmissionForm = ({ fields, onChangeCallback}) => {
+  console.log(fields);
+  const submissionFields = generateSubmissionFields(fields, onChangeCallback);
 
-const PlayerSubmissionForm = () => {
   return (
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{  }</h3>
@@ -9,14 +23,7 @@ const PlayerSubmissionForm = () => {
       <form className="PlayerSubmissionForm__form" >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+          {submissionFields}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -28,4 +35,7 @@ const PlayerSubmissionForm = () => {
 }
 
 
+
 export default PlayerSubmissionForm;
+
+

From 3cae55a07451d5ef7296582b9e7b26e33cacef0a Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 21:03:38 -0700
Subject: [PATCH 03/19] input boxes are pink when invalid

---
 src/components/PlayerSubmissionForm.css | 5 +++--
 src/components/PlayerSubmissionForm.js  | 8 +++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..e6af8af4 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -31,8 +31,9 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
-  background-color: #FFE9E9;
+.PlayerSubmissionForm__input--invalid {
+  /* background-color: #FFE9E9; */
+  background-color: #f7ada3;
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 06a2703a..81038aec 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,14 +5,16 @@ import Field from './Field.js';
 const generateSubmissionFields = (fields, onChangeCallback) => {
 
   const submissionFields = fields.map(field => field.key ? <Field
+    key={field.key}
+    id={field.key} //explicit prop for storing keys since Field component can't pass back key prop
     placeholder={field.placeholder}
     value={field.value}
-    onChangeCallback={field.onChangeCallback}  /> : <span>{field}</span> )
+    onChangeCallback={onChangeCallback}  /> : <span>{field}</span> )
 
   return submissionFields;
 }
 
-const PlayerSubmissionForm = ({ fields, onChangeCallback}) => {
+const PlayerSubmissionForm = ({ fields, onChangeCallback, onSubmitCallback}) => {
   console.log(fields);
   const submissionFields = generateSubmissionFields(fields, onChangeCallback);
 
@@ -20,7 +22,7 @@ const PlayerSubmissionForm = ({ fields, onChangeCallback}) => {
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{  }</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onSubmitCallback} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
           {submissionFields}

From 4b4abf598afd052af715641a573bc481f3ffbdff Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 21:04:10 -0700
Subject: [PATCH 04/19] input fields detect changes

---
 src/components/Field.js |  3 +-
 src/components/Game.js  | 85 +++++++++++++++++++++++------------------
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/components/Field.js b/src/components/Field.js
index abc95754..632f9138 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 
 const Field = (props) => {
   return (
-    <input className="field"
+    <input className={`PlayerSubmissionForm__input${props.isValid ? "" : "--invalid"}`}
+            id={props.id}
             placeholder={props.placeholder}
             type="text"
             value={props.value}
diff --git a/src/components/Game.js b/src/components/Game.js
index 61434bb7..c0f610ee 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -4,18 +4,58 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+const FIELDS = [
+  // "The",
+  {
+    key: 'adj1',
+    placeholder: 'adjective',
+  },
+  {
+    key: 'noun1',
+    placeholder: 'noun',
+  },
+  {
+    key: 'adv',
+    placeholder: 'adverb',
+  },
+  {
+    key: 'verb',
+    placeholder: 'verb',
+  },
+  // "the",
+  {
+    key: 'adj2',
+    placeholder: 'adjective',
+  },
+  {
+    key: 'noun2',
+    placeholder: 'noun',
+  },
+  // ".",
+];
+
+
+const submissionFormat = () => {
+  const submissionKeys = {};
+  for (let field of FIELDS) {
+    if (field.key) submissionKeys[field.key] = "test";
+  }
+  return submissionKeys;
+}
+
 const Game = () => {
+  const [playerSubmission, setPlayerSubmission] = useState(submissionFormat());
+  const [poem, setPoem] = useState({});
+
   const exampleFormat = FIELDS.map((field) => {
-    // return field.key ? field.placeholder : field
-    if (field.key) {
-      return field.placeholder;
-    } else {
-      return field;
-    }
+    return field.key ? field.placeholder : field
   }).join(" ");
 
-  const handleChange = () => {
-
+  const handleChange = (event) => {
+    let updatedFields = {...playerSubmission};
+    console.log(`Changing ${event.target.id} to ${event.target.value}`);
+    updatedFields[event.target.id] = event.target.value;
+    setPlayerSubmission(updatedFields);
   }
 
   return (
@@ -41,34 +81,5 @@ const Game = () => {
 }
 
 
-const FIELDS = [
-  "The",
-  {
-    key: 'adj1',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun1',
-    placeholder: 'noun',
-  },
-  {
-    key: 'adv',
-    placeholder: 'adverb',
-  },
-  {
-    key: 'verb',
-    placeholder: 'verb',
-  },
-  "the",
-  {
-    key: 'adj2',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun2',
-    placeholder: 'noun',
-  },
-  ".",
-];
 
 export default Game;

From 7db0bb192d63e288f56d171ea61040cc5453b3da Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 21:54:11 -0700
Subject: [PATCH 05/19] console logs player submission

---
 src/components/Game.js             | 30 +++++++++++++++++++++++-------
 src/components/RecentSubmission.js |  4 ++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index c0f610ee..29f59ea7 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,7 +5,7 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const FIELDS = [
-  // "The",
+  "The",
   {
     key: 'adj1',
     placeholder: 'adjective',
@@ -22,7 +22,7 @@ const FIELDS = [
     key: 'verb',
     placeholder: 'verb',
   },
-  // "the",
+  "the",
   {
     key: 'adj2',
     placeholder: 'adjective',
@@ -31,21 +31,22 @@ const FIELDS = [
     key: 'noun2',
     placeholder: 'noun',
   },
-  // ".",
+  ".",
 ];
 
 
 const submissionFormat = () => {
   const submissionKeys = {};
   for (let field of FIELDS) {
-    if (field.key) submissionKeys[field.key] = "test";
+    if (field.key) submissionKeys[field.key] = "";
   }
+  console.log(JSON.stringify(submissionKeys))
   return submissionKeys;
 }
 
 const Game = () => {
   const [playerSubmission, setPlayerSubmission] = useState(submissionFormat());
-  const [poem, setPoem] = useState({});
+  const [poem, setPoem] = useState([]);
 
   const exampleFormat = FIELDS.map((field) => {
     return field.key ? field.placeholder : field
@@ -58,6 +59,21 @@ const Game = () => {
     setPlayerSubmission(updatedFields);
   }
 
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const submissionString = () => {
+      let submissionString = "";
+      for (let field in playerSubmission) {
+        submissionString += `${playerSubmission[field]} `;
+      }
+      return submissionString;
+    };
+    console.log(`Player wrote: ${submissionString()}`);
+    let updatedPoem = [...poem]; 
+    updatedPoem.push(submissionString);
+  }
+
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -70,9 +86,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      {poem.length > 0 ? <RecentSubmission poem={poem[poem.length-1]}/> : null }
 
-      <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange}/>
+      <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
 
       <FinalPoem />
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..738a0f84 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({line}) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{line}</p>
     </div>
   );
 }

From 1f4898ed6c25978c35947984c99f5c0ab9f3d4c5 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 22:15:27 -0700
Subject: [PATCH 06/19] state saves submitted lines and prints it

---
 src/components/Game.js             | 14 +++++++-------
 src/components/RecentSubmission.js |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 29f59ea7..31b1ffbb 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -61,19 +61,19 @@ const Game = () => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    const submissionString = () => {
+    const submissionToString = () => {
       let submissionString = "";
-      for (let field in playerSubmission) {
-        submissionString += `${playerSubmission[field]} `;
+      for (let field of FIELDS) {
+        field.key ? submissionString += ` ${(playerSubmission[field.key])}` : submissionString += ` ${field}`;
       }
       return submissionString;
     };
-    console.log(`Player wrote: ${submissionString()}`);
+    console.log(`Player wrote: ${submissionToString()}`);
     let updatedPoem = [...poem]; 
-    updatedPoem.push(submissionString);
+    updatedPoem.push(submissionToString());
+    setPoem(updatedPoem);
   }
 
-
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -86,7 +86,7 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      {poem.length > 0 ? <RecentSubmission poem={poem[poem.length-1]}/> : null }
+      {poem.length > 0 ? <RecentSubmission line={poem[poem.length-1].trim()}/> : null }
 
       <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 738a0f84..d21fac2a 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import './RecentSubmission.css';
 
-const RecentSubmission = ({line}) => {
+const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{line}</p>
+      <p className="RecentSubmission__submission">{props.line}</p>
     </div>
   );
 }

From 9f220ae7e966247bb3d4ce5ecbd112e71f0f20d8 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Wed, 22 Apr 2020 23:25:40 -0700
Subject: [PATCH 07/19] reveal the poem functionality working

---
 src/components/FinalPoem.js        | 11 ++++++-----
 src/components/Game.js             | 12 ++++++++----
 src/components/RecentSubmission.js |  4 ++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..f1264470 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({status, poem, onButtonClickCallback}) => {
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      { status ? <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
-      </section>
+        {poem.map(line => <p>{line}</p>)}
+      </section> : null }
+      
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        { status ? null : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClickCallback} /> }
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 31b1ffbb..064272ee 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -47,6 +47,7 @@ const submissionFormat = () => {
 const Game = () => {
   const [playerSubmission, setPlayerSubmission] = useState(submissionFormat());
   const [poem, setPoem] = useState([]);
+  const [submitted, setSubmitted] = useState(false);
 
   const exampleFormat = FIELDS.map((field) => {
     return field.key ? field.placeholder : field
@@ -54,7 +55,6 @@ const Game = () => {
 
   const handleChange = (event) => {
     let updatedFields = {...playerSubmission};
-    console.log(`Changing ${event.target.id} to ${event.target.value}`);
     updatedFields[event.target.id] = event.target.value;
     setPlayerSubmission(updatedFields);
   }
@@ -66,14 +66,18 @@ const Game = () => {
       for (let field of FIELDS) {
         field.key ? submissionString += ` ${(playerSubmission[field.key])}` : submissionString += ` ${field}`;
       }
-      return submissionString;
+      return submissionString.trim();
     };
-    console.log(`Player wrote: ${submissionToString()}`);
     let updatedPoem = [...poem]; 
     updatedPoem.push(submissionToString());
     setPoem(updatedPoem);
   }
 
+  const handleReveal = (event) => {
+    console.log("done!");
+    setSubmitted(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -90,7 +94,7 @@ const Game = () => {
 
       <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
 
-      <FinalPoem />
+      <FinalPoem status={submitted} poem={poem} onButtonClickCallback={handleReveal} />
 
     </div>
   );
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index d21fac2a..738a0f84 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({line}) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{props.line}</p>
+      <p className="RecentSubmission__submission">{line}</p>
     </div>
   );
 }

From b2e0af253c5c5f87d0b9b331603a721fbf93b0c3 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 00:18:59 -0700
Subject: [PATCH 08/19] fixed unique keys bug

---
 src/components/Game.js                 | 1 +
 src/components/PlayerSubmissionForm.js | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 064272ee..784fb2d6 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -56,6 +56,7 @@ const Game = () => {
   const handleChange = (event) => {
     let updatedFields = {...playerSubmission};
     updatedFields[event.target.id] = event.target.value;
+    console.log(`Saving ${event.target.id} value ${event.target.value}:: ${updatedFields[event.target.id]}`)
     setPlayerSubmission(updatedFields);
   }
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 81038aec..5af7f3b3 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,12 +4,12 @@ import Field from './Field.js';
 
 const generateSubmissionFields = (fields, onChangeCallback) => {
 
-  const submissionFields = fields.map(field => field.key ? <Field
+  const submissionFields = fields.map((field, index) => field.key ? <Field
     key={field.key}
     id={field.key} //explicit prop for storing keys since Field component can't pass back key prop
     placeholder={field.placeholder}
     value={field.value}
-    onChangeCallback={onChangeCallback}  /> : <span>{field}</span> )
+    onChangeCallback={onChangeCallback}  /> : <span key={index}>{field}</span> )
 
   return submissionFields;
 }

From ebe9a9e0b889c1af46e508c7106db13da4353e2d Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 00:42:54 -0700
Subject: [PATCH 09/19] fields update color

---
 src/components/Field.js                 |  2 +-
 src/components/Game.js                  |  6 ++++--
 src/components/PlayerSubmissionForm.css |  1 -
 src/components/PlayerSubmissionForm.js  | 11 +++++------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Field.js b/src/components/Field.js
index 632f9138..c2908dea 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const Field = (props) => {
   return (
-    <input className={`PlayerSubmissionForm__input${props.isValid ? "" : "--invalid"}`}
+    <input className={`PlayerSubmissionForm__input${props.value.length > 0 ? "" : "--invalid"}`}
             id={props.id}
             placeholder={props.placeholder}
             type="text"
diff --git a/src/components/Game.js b/src/components/Game.js
index 784fb2d6..ded5be64 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -40,7 +40,7 @@ const submissionFormat = () => {
   for (let field of FIELDS) {
     if (field.key) submissionKeys[field.key] = "";
   }
-  console.log(JSON.stringify(submissionKeys))
+  console.log(`Generated keys: ${submissionKeys}`)
   return submissionKeys;
 }
 
@@ -55,9 +55,11 @@ const Game = () => {
 
   const handleChange = (event) => {
     let updatedFields = {...playerSubmission};
+    console.log(`Previous value: ${playerSubmission[event.target.id]}, new: ${event.target.value}`)
     updatedFields[event.target.id] = event.target.value;
     console.log(`Saving ${event.target.id} value ${event.target.value}:: ${updatedFields[event.target.id]}`)
     setPlayerSubmission(updatedFields);
+    console.log(`updated: ${updatedFields}`)
   }
 
   const handleSubmit = (event) => {
@@ -93,7 +95,7 @@ const Game = () => {
 
       {poem.length > 0 ? <RecentSubmission line={poem[poem.length-1].trim()}/> : null }
 
-      <PlayerSubmissionForm fields={FIELDS} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
+      <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
 
       <FinalPoem status={submitted} poem={poem} onButtonClickCallback={handleReveal} />
 
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index e6af8af4..155ca1cd 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -32,7 +32,6 @@
 }
 
 .PlayerSubmissionForm__input--invalid {
-  /* background-color: #FFE9E9; */
   background-color: #f7ada3;
 }
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 5af7f3b3..e5a24495 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,21 +2,20 @@ import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 import Field from './Field.js';
 
-const generateSubmissionFields = (fields, onChangeCallback) => {
-
+const generateSubmissionFields = (fields, current, onChangeCallback) => {
   const submissionFields = fields.map((field, index) => field.key ? <Field
     key={field.key}
     id={field.key} //explicit prop for storing keys since Field component can't pass back key prop
     placeholder={field.placeholder}
-    value={field.value}
-    onChangeCallback={onChangeCallback}  /> : <span key={index}>{field}</span> )
+    value={current[field.key]}
+    onChangeCallback={onChangeCallback}  /> : <span key={index}>{field}</span> );
 
   return submissionFields;
 }
 
-const PlayerSubmissionForm = ({ fields, onChangeCallback, onSubmitCallback}) => {
+const PlayerSubmissionForm = ({ fields, current, onChangeCallback, onSubmitCallback}) => {
   console.log(fields);
-  const submissionFields = generateSubmissionFields(fields, onChangeCallback);
+  const submissionFields = generateSubmissionFields(fields, current, onChangeCallback);
 
   return (
     <div className="PlayerSubmissionForm">

From 5eb322454252678a8a76db1433a28e533790f5f8 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 00:44:00 -0700
Subject: [PATCH 10/19] removed unused states

---
 src/components/Field.js                | 12 ++++++------
 src/components/PlayerSubmissionForm.js |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Field.js b/src/components/Field.js
index c2908dea..5ba8f319 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -1,15 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './Field.css';
 import PropTypes from 'prop-types';
 
 const Field = (props) => {
   return (
     <input className={`PlayerSubmissionForm__input${props.value.length > 0 ? "" : "--invalid"}`}
-            id={props.id}
-            placeholder={props.placeholder}
-            type="text"
-            value={props.value}
-            onChange={props.onChangeCallback} />
+      id={props.id}
+      placeholder={props.placeholder}
+      type="text"
+      value={props.value}
+      onChange={props.onChangeCallback} />
   );
 }
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index e5a24495..01444dd5 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './PlayerSubmissionForm.css';
 import Field from './Field.js';
 

From f35ee9c76c98954529de2ca7c146b692caf75d28 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 00:51:13 -0700
Subject: [PATCH 11/19] added PropTypes

---
 src/components/Field.js                | 13 +++++++------
 src/components/FinalPoem.js            |  9 ++++++++-
 src/components/Game.js                 |  5 -----
 src/components/PlayerSubmissionForm.js |  8 ++++++++
 src/components/RecentSubmission.js     |  5 +++++
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/Field.js b/src/components/Field.js
index 5ba8f319..1659c659 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -2,18 +2,19 @@ import React from 'react';
 import './Field.css';
 import PropTypes from 'prop-types';
 
-const Field = (props) => {
+const Field = ({id, placeholder, value, onChangeCallback}) => {
   return (
-    <input className={`PlayerSubmissionForm__input${props.value.length > 0 ? "" : "--invalid"}`}
-      id={props.id}
-      placeholder={props.placeholder}
+    <input className={`PlayerSubmissionForm__input${value.length > 0 ? "" : "--invalid"}`}
+      id={id}
+      placeholder={placeholder}
       type="text"
-      value={props.value}
-      onChange={props.onChangeCallback} />
+      value={value}
+      onChange={onChangeCallback} />
   );
 }
 
 Field.propTypes = {
+  id: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string,
   onChangeCallback: PropTypes.func.isRequired,
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index f1264470..6b1d5329 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = ({status, poem, onButtonClickCallback}) => {
 
@@ -10,7 +11,6 @@ const FinalPoem = ({status, poem, onButtonClickCallback}) => {
         {poem.map(line => <p>{line}</p>)}
       </section> : null }
       
-
       <div className="FinalPoem__reveal-btn-container">
         { status ? null : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClickCallback} /> }
       </div>
@@ -18,4 +18,11 @@ const FinalPoem = ({status, poem, onButtonClickCallback}) => {
   );
 }
 
+FinalPoem.propTypes = {
+  status: PropTypes.bool.isRequired,
+  poem: PropTypes.array.isRequired,
+  onButtonClickCallback: PropTypes.func.isRequired,
+};
+
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index ded5be64..7443202c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -55,11 +55,8 @@ const Game = () => {
 
   const handleChange = (event) => {
     let updatedFields = {...playerSubmission};
-    console.log(`Previous value: ${playerSubmission[event.target.id]}, new: ${event.target.value}`)
     updatedFields[event.target.id] = event.target.value;
-    console.log(`Saving ${event.target.id} value ${event.target.value}:: ${updatedFields[event.target.id]}`)
     setPlayerSubmission(updatedFields);
-    console.log(`updated: ${updatedFields}`)
   }
 
   const handleSubmit = (event) => {
@@ -77,7 +74,6 @@ const Game = () => {
   }
 
   const handleReveal = (event) => {
-    console.log("done!");
     setSubmitted(true);
   }
 
@@ -104,5 +100,4 @@ const Game = () => {
 }
 
 
-
 export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 01444dd5..9abe5943 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './PlayerSubmissionForm.css';
 import Field from './Field.js';
+import PropTypes from 'prop-types';
 
 const generateSubmissionFields = (fields, current, onChangeCallback) => {
   const submissionFields = fields.map((field, index) => field.key ? <Field
@@ -35,6 +36,13 @@ const PlayerSubmissionForm = ({ fields, current, onChangeCallback, onSubmitCallb
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  current: PropTypes.object.isRequired,
+  onChangeCallback: PropTypes.func.isRequired,
+  onSubmitCallback: PropTypes.func.isRequired,
+};
+
 
 
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 738a0f84..41bc3aa3 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 = ({line}) => {
   return (
@@ -10,4 +11,8 @@ const RecentSubmission = ({line}) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  line: PropTypes.string.isRequired,
+};
+
 export default RecentSubmission;

From 26de5630c24ff52d0fa44347287016029d571e0a Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 01:16:18 -0700
Subject: [PATCH 12/19] separated static data into json file for poem format
 flexibility

---
 src/components/FinalPoem.js     |  2 +-
 src/components/Game.js          | 38 ++++++---------------------------
 src/components/data/fields.json | 29 +++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 32 deletions(-)
 create mode 100644 src/components/data/fields.json

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 6b1d5329..a7ad3b47 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -8,7 +8,7 @@ const FinalPoem = ({status, poem, onButtonClickCallback}) => {
     <div className="FinalPoem">
       { status ? <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        {poem.map(line => <p>{line}</p>)}
+        {poem.map((line, index) => <p key="index">{line}</p>)}
       </section> : null }
       
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 7443202c..7cd4962c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -3,44 +3,17 @@ import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
+import poemFormat from './data/fields.json';
 
-const FIELDS = [
-  "The",
-  {
-    key: 'adj1',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun1',
-    placeholder: 'noun',
-  },
-  {
-    key: 'adv',
-    placeholder: 'adverb',
-  },
-  {
-    key: 'verb',
-    placeholder: 'verb',
-  },
-  "the",
-  {
-    key: 'adj2',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun2',
-    placeholder: 'noun',
-  },
-  ".",
-];
-
+const FIELDS = poemFormat;
 
+//Establish the format of user data that gets stored
+//We are only tracking poem fields that take user input
 const submissionFormat = () => {
   const submissionKeys = {};
   for (let field of FIELDS) {
     if (field.key) submissionKeys[field.key] = "";
   }
-  console.log(`Generated keys: ${submissionKeys}`)
   return submissionKeys;
 }
 
@@ -49,16 +22,19 @@ const Game = () => {
   const [poem, setPoem] = useState([]);
   const [submitted, setSubmitted] = useState(false);
 
+  //pretty-print the format of a poem sentence
   const exampleFormat = FIELDS.map((field) => {
     return field.key ? field.placeholder : field
   }).join(" ");
 
+  //callback function to handle changes on text input fields
   const handleChange = (event) => {
     let updatedFields = {...playerSubmission};
     updatedFields[event.target.id] = event.target.value;
     setPlayerSubmission(updatedFields);
   }
 
+  //callback function to store user's submitted poem sentence
   const handleSubmit = (event) => {
     event.preventDefault();
     const submissionToString = () => {
diff --git a/src/components/data/fields.json b/src/components/data/fields.json
new file mode 100644
index 00000000..0085843b
--- /dev/null
+++ b/src/components/data/fields.json
@@ -0,0 +1,29 @@
+[
+  "The",
+  {
+     "key":"adj1",
+     "placeholder":"adjective"
+  },
+  {
+     "key":"noun1",
+     "placeholder":"noun"
+  },
+  {
+     "key":"adv",
+     "placeholder":"adverb"
+  },
+  {
+     "key":"verb",
+     "placeholder":"verb"
+  },
+  "the",
+  {
+     "key":"adj2",
+     "placeholder":"adjective"
+  },
+  {
+     "key":"noun2",
+     "placeholder":"noun"
+  },
+  "."
+]
\ No newline at end of file

From 4999d6b6bfb6a15ab1ade4b62de794592b3afb10 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 01:55:23 -0700
Subject: [PATCH 13/19] prompts for player number

---
 src/components/Game.js                 | 13 ++++++++-----
 src/components/PlayerSubmissionForm.js |  5 +++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 7cd4962c..c16a29b6 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -22,6 +22,8 @@ const Game = () => {
   const [poem, setPoem] = useState([]);
   const [submitted, setSubmitted] = useState(false);
 
+  let subBool = false;
+
   //pretty-print the format of a poem sentence
   const exampleFormat = FIELDS.map((field) => {
     return field.key ? field.placeholder : field
@@ -37,6 +39,7 @@ const Game = () => {
   //callback function to store user's submitted poem sentence
   const handleSubmit = (event) => {
     event.preventDefault();
+    
     const submissionToString = () => {
       let submissionString = "";
       for (let field of FIELDS) {
@@ -44,6 +47,7 @@ const Game = () => {
       }
       return submissionString.trim();
     };
+
     let updatedPoem = [...poem]; 
     updatedPoem.push(submissionToString());
     setPoem(updatedPoem);
@@ -51,6 +55,7 @@ const Game = () => {
 
   const handleReveal = (event) => {
     setSubmitted(true);
+    subBool = true;
   }
 
   return (
@@ -65,11 +70,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      {poem.length > 0 ? <RecentSubmission line={poem[poem.length-1].trim()}/> : null }
-
-      <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/>
-
-      <FinalPoem status={submitted} poem={poem} onButtonClickCallback={handleReveal} />
+      {poem.length > 0 && !submitted ? <RecentSubmission line={poem[poem.length-1]}/> : null }
+      { submitted ? null : <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} count={poem.length+1} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/> }
+      <FinalPoem status={submitted} poem={poem} onButtonClickCallback={handleReveal} />  
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 9abe5943..ae9baf04 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -14,13 +14,13 @@ const generateSubmissionFields = (fields, current, onChangeCallback) => {
   return submissionFields;
 }
 
-const PlayerSubmissionForm = ({ fields, current, onChangeCallback, onSubmitCallback}) => {
+const PlayerSubmissionForm = ({ fields, current, count, onChangeCallback, onSubmitCallback}) => {
   console.log(fields);
   const submissionFields = generateSubmissionFields(fields, current, onChangeCallback);
 
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{count}</h3>
 
       <form className="PlayerSubmissionForm__form" onSubmit={onSubmitCallback} >
 
@@ -39,6 +39,7 @@ const PlayerSubmissionForm = ({ fields, current, onChangeCallback, onSubmitCallb
 PlayerSubmissionForm.propTypes = {
   fields: PropTypes.array.isRequired,
   current: PropTypes.object.isRequired,
+  count: PropTypes.number.isRequired,
   onChangeCallback: PropTypes.func.isRequired,
   onSubmitCallback: PropTypes.func.isRequired,
 };

From 038c1801e4688f4f92820bc3569da7753a315161 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 01:55:44 -0700
Subject: [PATCH 14/19] fixed duplicate key bug

---
 src/components/FinalPoem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index a7ad3b47..a5465287 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -8,7 +8,7 @@ const FinalPoem = ({status, poem, onButtonClickCallback}) => {
     <div className="FinalPoem">
       { status ? <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        {poem.map((line, index) => <p key="index">{line}</p>)}
+        {poem.map((line, index) => <p key={index}>{line}</p>)}
       </section> : null }
       
       <div className="FinalPoem__reveal-btn-container">

From a6a187415771eb61bb60db30d6aee23f0f051c2b Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 01:57:46 -0700
Subject: [PATCH 15/19] fields reset after submission

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

diff --git a/src/components/Game.js b/src/components/Game.js
index c16a29b6..750d5fe4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -51,11 +51,11 @@ const Game = () => {
     let updatedPoem = [...poem]; 
     updatedPoem.push(submissionToString());
     setPoem(updatedPoem);
+    setPlayerSubmission(submissionFormat());
   }
 
   const handleReveal = (event) => {
     setSubmitted(true);
-    subBool = true;
   }
 
   return (

From 443d3e3bbef5428be2e707a5c8032d1c2bfa0f0c Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 02:06:00 -0700
Subject: [PATCH 16/19] code cleanup of spacing and variable names

---
 src/components/Game.js                 | 12 +++++-------
 src/components/PlayerSubmissionForm.js |  1 -
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 750d5fe4..e341d778 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -20,9 +20,7 @@ const submissionFormat = () => {
 const Game = () => {
   const [playerSubmission, setPlayerSubmission] = useState(submissionFormat());
   const [poem, setPoem] = useState([]);
-  const [submitted, setSubmitted] = useState(false);
-
-  let subBool = false;
+  const [isRevealed, setIsRevealed] = useState(false);
 
   //pretty-print the format of a poem sentence
   const exampleFormat = FIELDS.map((field) => {
@@ -55,7 +53,7 @@ const Game = () => {
   }
 
   const handleReveal = (event) => {
-    setSubmitted(true);
+    setIsRevealed(true);
   }
 
   return (
@@ -70,9 +68,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      {poem.length > 0 && !submitted ? <RecentSubmission line={poem[poem.length-1]}/> : null }
-      { submitted ? null : <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} count={poem.length+1} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/> }
-      <FinalPoem status={submitted} poem={poem} onButtonClickCallback={handleReveal} />  
+      {poem.length > 0 && !isRevealed ? <RecentSubmission line={poem[poem.length-1]}/> : null }
+      { isRevealed ? null : <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} count={poem.length+1} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/> }
+      <FinalPoem status={isRevealed} poem={poem} onButtonClickCallback={handleReveal} />  
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ae9baf04..2ef5acec 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -15,7 +15,6 @@ const generateSubmissionFields = (fields, current, onChangeCallback) => {
 }
 
 const PlayerSubmissionForm = ({ fields, current, count, onChangeCallback, onSubmitCallback}) => {
-  console.log(fields);
   const submissionFields = generateSubmissionFields(fields, current, onChangeCallback);
 
   return (

From 5b9cb3a74cb2c7b771d21466a1c898ee4f360c9c Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 02:25:31 -0700
Subject: [PATCH 17/19] variable names cleanup

---
 src/components/Game.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e341d778..4b88317e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -9,7 +9,7 @@ const FIELDS = poemFormat;
 
 //Establish the format of user data that gets stored
 //We are only tracking poem fields that take user input
-const submissionFormat = () => {
+const submissionTemplate = () => {
   const submissionKeys = {};
   for (let field of FIELDS) {
     if (field.key) submissionKeys[field.key] = "";
@@ -18,7 +18,7 @@ const submissionFormat = () => {
 }
 
 const Game = () => {
-  const [playerSubmission, setPlayerSubmission] = useState(submissionFormat());
+  const [playerSubmission, setPlayerSubmission] = useState(submissionTemplate());
   const [poem, setPoem] = useState([]);
   const [isRevealed, setIsRevealed] = useState(false);
 
@@ -38,7 +38,8 @@ const Game = () => {
   const handleSubmit = (event) => {
     event.preventDefault();
     
-    const submissionToString = () => {
+    //returns the user's inputs in string format
+    const submittedLine = () => {
       let submissionString = "";
       for (let field of FIELDS) {
         field.key ? submissionString += ` ${(playerSubmission[field.key])}` : submissionString += ` ${field}`;
@@ -47,9 +48,9 @@ const Game = () => {
     };
 
     let updatedPoem = [...poem]; 
-    updatedPoem.push(submissionToString());
+    updatedPoem.push(submittedLine());
     setPoem(updatedPoem);
-    setPlayerSubmission(submissionFormat());
+    setPlayerSubmission(submissionTemplate());
   }
 
   const handleReveal = (event) => {

From 923eeaeee2916f004ba2048b64214aee35ff08a2 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 02:28:37 -0700
Subject: [PATCH 18/19] ok last vanity commit on variable names I promise

---
 src/components/FinalPoem.js | 8 ++++----
 src/components/Game.js      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index a5465287..1ef567be 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,24 +2,24 @@ import React from 'react';
 import './FinalPoem.css';
 import PropTypes from 'prop-types';
 
-const FinalPoem = ({status, poem, onButtonClickCallback}) => {
+const FinalPoem = ({isRevealed, poem, onButtonClickCallback}) => {
 
   return (
     <div className="FinalPoem">
-      { status ? <section className="FinalPoem__poem">
+      { isRevealed ? <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
         {poem.map((line, index) => <p key={index}>{line}</p>)}
       </section> : null }
       
       <div className="FinalPoem__reveal-btn-container">
-        { status ? null : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClickCallback} /> }
+        { isRevealed ? null : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClickCallback} /> }
       </div>
     </div>
   );
 }
 
 FinalPoem.propTypes = {
-  status: PropTypes.bool.isRequired,
+  isRevealed: PropTypes.bool.isRequired,
   poem: PropTypes.array.isRequired,
   onButtonClickCallback: PropTypes.func.isRequired,
 };
diff --git a/src/components/Game.js b/src/components/Game.js
index 4b88317e..d9ab4152 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -71,7 +71,7 @@ const Game = () => {
 
       {poem.length > 0 && !isRevealed ? <RecentSubmission line={poem[poem.length-1]}/> : null }
       { isRevealed ? null : <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} count={poem.length+1} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/> }
-      <FinalPoem status={isRevealed} poem={poem} onButtonClickCallback={handleReveal} />  
+      <FinalPoem isRevealed={isRevealed} poem={poem} onButtonClickCallback={handleReveal} />  
 
     </div>
   );

From a7ded0cc22562b68c4d34023a03f7c53257e4d83 Mon Sep 17 00:00:00 2001
From: Angela <angethuy@gmail.com>
Date: Thu, 23 Apr 2020 02:49:03 -0700
Subject: [PATCH 19/19] Delete Field.css

unnecessary component file thanks to BEM
---
 src/components/Field.css | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/components/Field.css

diff --git a/src/components/Field.css b/src/components/Field.css
deleted file mode 100644
index e69de29b..00000000