From 050569764c9948a7c1e922507ce6685f915493c3 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Tue, 10 Dec 2019 16:14:53 -0800
Subject: [PATCH 01/11] added input boxes.

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

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..86d62bf5 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -12,17 +12,34 @@ class PlayerSubmissionForm extends Component {
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
-
+        
         <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" />
+              <div>The
+                <label htmlFor="adjective"></label>
+                <input name="adjective" placeholder="adjective" />
+              </div>
+              <div>
+              <label htmlFor="noun"></label>
+              <input name="noun" placeholder="noun" />
+            </div>
+            <div>
+              <label htmlFor="adverb"></label>
+              <input name="adverb" placeholder="adverb" />
+            </div>
+            <div>
+              <label htmlFor="verb"></label>
+              <input name="verb" placeholder="verb" />
+            </div>
+            <div>the
+                <label htmlFor="adjective2"></label>
+                <input name="adjective2" placeholder="adjective" />
+              </div>
+              <div>
+              <label htmlFor="noun"></label>
+              <input name="noun" placeholder="noun" />.
+            </div>
 
           </div>
 

From 95e6996a99a3edc61708a09d387249c11714b2fb Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Tue, 10 Dec 2019 21:40:07 -0800
Subject: [PATCH 02/11] Can put unvalidated words into form and pass to Game.

---
 src/components/Game.js                  | 18 ++++-
 src/components/PlayerSubmissionForm.css |  2 +-
 src/components/PlayerSubmissionForm.js  | 94 ++++++++++++++++++++-----
 3 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..77c1e11d 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,22 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentSubmission: '',
+      allSubmissions: [],
+    }
+  }
+
+  addLine = (newLine) => {
+    console.log(newLine)
+    const allPoemUpdate = this.state.allSubmissions;
+    allPoemUpdate.push(newLine);
+
+    this.setState({
+      recentSubmission: newLine,
+      allSubmissions: allPoemUpdate,
+    })
   }
 
   render() {
@@ -34,7 +50,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={this.addLine}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..6d6f98eb 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 86d62bf5..f1dda725 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,10 +1,52 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    }
+  }
+
+  resetState = () => {
+    this.setState({
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+    });
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    // const { adjective, noun, adverb, verb, adjective2, noun2 } = this.state;
+
+    // if (adjective === '' || noun === '' || adverb === '' || verb === '' || adjective2 === '' || noun2 === '') return;
+
+    console.log(event);
+    this.props.addLineCallback(this.state);
+    this.resetState();
   }
 
   render() {
@@ -13,38 +55,52 @@ class PlayerSubmissionForm extends Component {
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
         
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
-              <div>The
-                <label htmlFor="adjective"></label>
-                <input name="adjective" placeholder="adjective" />
-              </div>
-              <div>
-              <label htmlFor="noun"></label>
-              <input name="noun" placeholder="noun" />
+            <div>The
+              <label htmlFor="adjective"></label>
+              <input name="adjective" placeholder="adjective" 
+              onChange={this.onFormChange} value={this.state.adjective} />
             </div>
+
+            <div>
+            <label htmlFor="noun"></label>
+            <input name="noun" placeholder="noun" 
+            onChange={this.onFormChange} value={this.state.noun}
+            />
+            </div>
+
             <div>
               <label htmlFor="adverb"></label>
-              <input name="adverb" placeholder="adverb" />
+              <input name="adverb" placeholder="adverb"
+              onChange={this.onFormChange} value={this.state.adverb}
+              />
             </div>
+
             <div>
               <label htmlFor="verb"></label>
-              <input name="verb" placeholder="verb" />
+              <input name="verb" placeholder="verb" 
+              onChange={this.onFormChange} value={this.state.verb}
+              />
             </div>
+
             <div>the
-                <label htmlFor="adjective2"></label>
-                <input name="adjective2" placeholder="adjective" />
-              </div>
-              <div>
-              <label htmlFor="noun"></label>
-              <input name="noun" placeholder="noun" />.
+              <label htmlFor="adjective2"></label>
+              <input name="adjective2" placeholder="adjective" 
+              onChange={this.onFormChange} value={this.state.adjective2}
+              />
+            </div>
+
+            <div>
+            <label htmlFor="noun2"></label>
+            <input name="noun2" placeholder="noun" />.
             </div>
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input name="submit" type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
         </form>
       </div>
@@ -52,4 +108,8 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+};
+
 export default PlayerSubmissionForm;

From 8a8abc5fffa409aacc810ea6be20e1518ba131b1 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Tue, 10 Dec 2019 22:05:00 -0800
Subject: [PATCH 03/11] Can display recentSubmission.

---
 src/components/Game.js             | 13 +++++++++----
 src/components/RecentSubmission.js |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 77c1e11d..6f2133ca 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -16,12 +16,17 @@ class Game extends Component {
   }
 
   addLine = (newLine) => {
-    console.log(newLine)
+    const makeArray = Object.values(newLine);
+    console.log(makeArray);
+
+    const makeSentence = makeArray.join(" ");
+    console.log(makeSentence);
+
     const allPoemUpdate = this.state.allSubmissions;
-    allPoemUpdate.push(newLine);
+    allPoemUpdate.push(makeSentence);
 
     this.setState({
-      recentSubmission: newLine,
+      recentSubmission: makeSentence,
       allSubmissions: allPoemUpdate,
     })
   }
@@ -48,7 +53,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission newLine={this.state.recentSubmission}/>
 
         <PlayerSubmissionForm addLineCallback={this.addLine}/>
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..29ac3a6e 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.newLine }</p>
     </div>
   );
 }

From 96ad22bb60dcf20a45353a5d76e8d6b2a6b1ea65 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Wed, 11 Dec 2019 12:45:08 -0800
Subject: [PATCH 04/11] Input boxes are pink when invalid and white when valid.

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

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index f1dda725..352d762a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -49,6 +49,11 @@ class PlayerSubmissionForm extends Component {
     this.resetState();
   }
 
+  fieldValid = (field) => {
+    // const fieldName = this.state[field]
+    return this.state[field].match(/.+/);
+  }
+
   render() {
 
     return (
@@ -60,14 +65,16 @@ class PlayerSubmissionForm extends Component {
           <div className="PlayerSubmissionForm__poem-inputs">
             <div>The
               <label htmlFor="adjective"></label>
-              <input name="adjective" placeholder="adjective" 
-              onChange={this.onFormChange} value={this.state.adjective} />
+              <input name="adjective" placeholder="adjective" onChange={this.onFormChange} 
+              value={this.state.adjective} className={this.fieldValid("adjective") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              />
             </div>
 
             <div>
             <label htmlFor="noun"></label>
             <input name="noun" placeholder="noun" 
             onChange={this.onFormChange} value={this.state.noun}
+            className={this.fieldValid("noun") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
             />
             </div>
 
@@ -75,6 +82,7 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="adverb"></label>
               <input name="adverb" placeholder="adverb"
               onChange={this.onFormChange} value={this.state.adverb}
+              className={this.fieldValid("adverb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -82,6 +90,7 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="verb"></label>
               <input name="verb" placeholder="verb" 
               onChange={this.onFormChange} value={this.state.verb}
+              className={this.fieldValid("verb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -89,12 +98,16 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="adjective2"></label>
               <input name="adjective2" placeholder="adjective" 
               onChange={this.onFormChange} value={this.state.adjective2}
+              className={this.fieldValid("adjective2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
             <div>
             <label htmlFor="noun2"></label>
-            <input name="noun2" placeholder="noun" />.
+            <input name="noun2" placeholder="noun" 
+            onChange={this.onFormChange} value={this.state.noun2}
+            className={this.fieldValid("noun2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+            />.
             </div>
 
           </div>

From 7a32d0907be71f658ae89565bec9ed0a0f6ae287 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Wed, 11 Dec 2019 14:52:06 -0800
Subject: [PATCH 05/11] Will not submit if fields are empty. Code is VERBOSE.
 Waaah...

---
 src/components/PlayerSubmissionForm.js | 58 +++++++++++++++++++-------
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 352d762a..f224b653 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -15,9 +15,31 @@ class PlayerSubmissionForm extends Component {
       verb: '',
       adjective2: '',
       noun2: '',
+      count: 1,
     }
+
+    this.validators = {
+      adjective: /.+/,
+      noun: /.+/,
+      adverb: /.+/,
+      verb: /.+/,
+      adjective2: /.+/,
+      noun2: /.+/,
+    };
   }
 
+  validate = (fieldName) => {
+    const value = this.state[fieldName];
+    const validation = this.validators[fieldName];
+
+    if (value.match(validation)) {
+      return true;
+    }
+
+    return false;
+  }
+
+
   resetState = () => {
     this.setState({
       adjective: '',
@@ -26,10 +48,12 @@ class PlayerSubmissionForm extends Component {
       verb: '',
       adjective2: '',
       noun2: '',
+      count: this.state.count + 1
     });
   }
 
   onFormChange = (event) => {
+
     const field = event.target.name;
     const value = event.target.value;
 
@@ -40,25 +64,31 @@ class PlayerSubmissionForm extends Component {
 
   onSubmit = (event) => {
     event.preventDefault();
-    // const { adjective, noun, adverb, verb, adjective2, noun2 } = this.state;
 
-    // if (adjective === '' || noun === '' || adverb === '' || verb === '' || adjective2 === '' || noun2 === '') return;
+    let allValid = true;
+
+    Object.keys(this.validators).forEach((key) => {
+      if (!this.state[key].match(this.validators[key])) {
+        allValid = false;
+      }
+    });
+   
+    if (!allValid) {
+      return;
+    }
 
+    
     console.log(event);
+
     this.props.addLineCallback(this.state);
     this.resetState();
   }
 
-  fieldValid = (field) => {
-    // const fieldName = this.state[field]
-    return this.state[field].match(/.+/);
-  }
-
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.count }</h3>
         
         <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
@@ -66,7 +96,7 @@ class PlayerSubmissionForm extends Component {
             <div>The
               <label htmlFor="adjective"></label>
               <input name="adjective" placeholder="adjective" onChange={this.onFormChange} 
-              value={this.state.adjective} className={this.fieldValid("adjective") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              value={this.state.adjective} className={this.validate("adjective") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -74,7 +104,7 @@ class PlayerSubmissionForm extends Component {
             <label htmlFor="noun"></label>
             <input name="noun" placeholder="noun" 
             onChange={this.onFormChange} value={this.state.noun}
-            className={this.fieldValid("noun") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+            className={this.validate("noun") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
             />
             </div>
 
@@ -82,7 +112,7 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="adverb"></label>
               <input name="adverb" placeholder="adverb"
               onChange={this.onFormChange} value={this.state.adverb}
-              className={this.fieldValid("adverb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              className={this.validate("adverb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -90,7 +120,7 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="verb"></label>
               <input name="verb" placeholder="verb" 
               onChange={this.onFormChange} value={this.state.verb}
-              className={this.fieldValid("verb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              className={this.validate("verb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -98,7 +128,7 @@ class PlayerSubmissionForm extends Component {
               <label htmlFor="adjective2"></label>
               <input name="adjective2" placeholder="adjective" 
               onChange={this.onFormChange} value={this.state.adjective2}
-              className={this.fieldValid("adjective2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              className={this.validate("adjective2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
               />
             </div>
 
@@ -106,7 +136,7 @@ class PlayerSubmissionForm extends Component {
             <label htmlFor="noun2"></label>
             <input name="noun2" placeholder="noun" 
             onChange={this.onFormChange} value={this.state.noun2}
-            className={this.fieldValid("noun2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+            className={this.validate("noun2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
             />.
             </div>
 

From 116bb53eff1b320d51ab7de43ca5f9c507cb5407 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Wed, 11 Dec 2019 15:16:44 -0800
Subject: [PATCH 06/11] Refactored Game to include two 'the's in the poem line.

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 6f2133ca..9c659a3c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -16,11 +16,7 @@ class Game extends Component {
   }
 
   addLine = (newLine) => {
-    const makeArray = Object.values(newLine);
-    console.log(makeArray);
-
-    const makeSentence = makeArray.join(" ");
-    console.log(makeSentence);
+    const makeSentence = `The ${newLine.adjective} ${newLine.noun} ${newLine.adverb} ${newLine.verb} the ${newLine.adjective2} ${newLine.noun2}.`
 
     const allPoemUpdate = this.state.allSubmissions;
     allPoemUpdate.push(makeSentence);
@@ -29,6 +25,8 @@ class Game extends Component {
       recentSubmission: makeSentence,
       allSubmissions: allPoemUpdate,
     })
+
+    console.log(this.state.allSubmissions)
   }
 
   render() {

From 55daf1b4e93b27b47c67db4f3d41a05bd09d2ebf Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Wed, 11 Dec 2019 21:40:53 -0800
Subject: [PATCH 07/11] Will display full poem upon button click.

---
 src/components/FinalPoem.js | 13 ++++++++++---
 src/components/Game.js      | 15 +++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..6d7a016d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,27 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => {
+
+const fullPoem = () => {
+  if (showPoem === true) {
+    return allLines.map(line => <p>{line}</p>)
+  };
+} 
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {fullPoem()}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
     </div>
   );
 }
 
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 9c659a3c..c602048f 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -12,23 +12,29 @@ class Game extends Component {
     this.state = {
       recentSubmission: '',
       allSubmissions: [],
+      showPoem: false,
     }
   }
 
   addLine = (newLine) => {
     const makeSentence = `The ${newLine.adjective} ${newLine.noun} ${newLine.adverb} ${newLine.verb} the ${newLine.adjective2} ${newLine.noun2}.`
 
-    const allPoemUpdate = this.state.allSubmissions;
-    allPoemUpdate.push(makeSentence);
+    this.state.allSubmissions.push(makeSentence);
 
     this.setState({
       recentSubmission: makeSentence,
-      allSubmissions: allPoemUpdate,
+      allSubmissions: this.state.allSubmissions,
     })
 
     console.log(this.state.allSubmissions)
   }
 
+ onClickShowPoem = () => {
+    this.setState({
+      showPoem: true,
+    });
+  }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -55,8 +61,9 @@ class Game extends Component {
 
         <PlayerSubmissionForm addLineCallback={this.addLine}/>
 
-        <FinalPoem />
+        <FinalPoem allLines={this.state.allSubmissions} showPoem={this.state.showPoem} onClickShowPoemCallback={this.onClickShowPoem}/>
 
+        {/* onClickShowPoemCallback={this.onClickShowPoem} */}
       </div>
     );
   }

From 239a5bddc01f024198dd78d105716cabe1d4632e Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Thu, 12 Dec 2019 16:50:09 -0800
Subject: [PATCH 08/11] Shows recent submission only when there is one. Hides
 form when Show Poem button clicked.

---
 src/components/FinalPoem.js |  1 -
 src/components/Game.js      | 21 ++++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 6d7a016d..768de155 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -8,7 +8,6 @@ const fullPoem = () => {
     return allLines.map(line => <p>{line}</p>)
   };
 } 
-
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
diff --git a/src/components/Game.js b/src/components/Game.js
index c602048f..0ae497f4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -36,6 +36,19 @@ class Game extends Component {
   }
 
   render() {
+    const showPoem = this.state.showPoem;
+    const recentSubmission = this.state.allSubmissions
+    
+    let recentSub;
+    let form;
+
+    if (!showPoem) {
+      form = <PlayerSubmissionForm addLineCallback={this.addLine}/>
+      };
+
+    if (this.state.allSubmissions.length > 0 && !showPoem) {
+      recentSub = <RecentSubmission newLine={recentSubmission.slice(-1)[0]}/> 
+      }
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -46,6 +59,7 @@ class Game extends Component {
     }).join(" ");
 
     return (
+
       <div className="Game">
         <h2>Game</h2>
 
@@ -56,14 +70,11 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        {recentSub}
 
-        <RecentSubmission newLine={this.state.recentSubmission}/>
-
-        <PlayerSubmissionForm addLineCallback={this.addLine}/>
+        {form}
 
         <FinalPoem allLines={this.state.allSubmissions} showPoem={this.state.showPoem} onClickShowPoemCallback={this.onClickShowPoem}/>
-
-        {/* onClickShowPoemCallback={this.onClickShowPoem} */}
       </div>
     );
   }

From 139d389f7aa29b68a4ad8837e627bcbbbc105d9b Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Thu, 12 Dec 2019 20:52:46 -0800
Subject: [PATCH 09/11] Finished button disappears upon displaying full poem.

---
 src/components/FinalPoem.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 768de155..d2d88aeb 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,10 +4,22 @@ import './FinalPoem.css';
 const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => {
 
 const fullPoem = () => {
-  if (showPoem === true) {
+  if (showPoem) {
     return allLines.map(line => <p>{line}</p>)
   };
 } 
+
+const button = () => (
+  <div>
+  { !showPoem && (
+    <div className="FinalPoem__reveal-btn-container">
+    <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  </div>
+    )
+  }
+  </div>
+);
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
@@ -15,9 +27,10 @@ const fullPoem = () => {
         {fullPoem()}
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
+      {button()}
+      {/* <div className="FinalPoem__reveal-btn-container">
         <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      </div> */}
     </div>
   );
 }

From 48d19410be990c337c4b716f827845d2fbdefcb0 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Thu, 12 Dec 2019 21:58:55 -0800
Subject: [PATCH 10/11] Refactored to use ternaries.

---
 src/components/FinalPoem.js            | 38 +++++++++-----------------
 src/components/Game.js                 | 17 ++----------
 src/components/PlayerSubmissionForm.js |  4 +--
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d2d88aeb..6748fdac 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,36 +3,24 @@ import './FinalPoem.css';
 
 const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => {
 
-const fullPoem = () => {
-  if (showPoem) {
-    return allLines.map(line => <p>{line}</p>)
-  };
-} 
 
-const button = () => (
-  <div>
-  { !showPoem && (
-    <div className="FinalPoem__reveal-btn-container">
-    <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-  </div>
-    )
-  }
-  </div>
+const fullPoem = () => (
+    allLines.map(line => <p>{line}</p>)
 );
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-        {fullPoem()}
-      </section>
-
-      {button()}
-      {/* <div className="FinalPoem__reveal-btn-container">
-        <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div> */}
-    </div>
-  );
+      { showPoem ? 
+      (<section className="FinalPoem__poem">
+        <h3>Final Poem</h3> 
+       {fullPoem()}
+      </section>) : 
+      (<div className="FinalPoem__reveal-btn-container">
+      <input onClick={() => { onClickShowPoemCallback() }} 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 0ae497f4..17f05333 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -37,18 +37,6 @@ class Game extends Component {
 
   render() {
     const showPoem = this.state.showPoem;
-    const recentSubmission = this.state.allSubmissions
-    
-    let recentSub;
-    let form;
-
-    if (!showPoem) {
-      form = <PlayerSubmissionForm addLineCallback={this.addLine}/>
-      };
-
-    if (this.state.allSubmissions.length > 0 && !showPoem) {
-      recentSub = <RecentSubmission newLine={recentSubmission.slice(-1)[0]}/> 
-      }
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -70,9 +58,10 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
-        {recentSub}
 
-        {form}
+        { (this.state.allSubmissions.length > 0 && !showPoem) ? <RecentSubmission newLine={this.state.recentSubmission}/> : ''}
+
+        { (!showPoem ? <PlayerSubmissionForm addLineCallback={this.addLine}/> : '') }
 
         <FinalPoem allLines={this.state.allSubmissions} showPoem={this.state.showPoem} onClickShowPoemCallback={this.onClickShowPoem}/>
       </div>
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index f224b653..be78bc1b 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -93,7 +93,7 @@ class PlayerSubmissionForm extends Component {
         <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
-            <div>The
+            <div>{"The "}
               <label htmlFor="adjective"></label>
               <input name="adjective" placeholder="adjective" onChange={this.onFormChange} 
               value={this.state.adjective} className={this.validate("adjective") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
@@ -124,7 +124,7 @@ class PlayerSubmissionForm extends Component {
               />
             </div>
 
-            <div>the
+            <div>{"the "}
               <label htmlFor="adjective2"></label>
               <input name="adjective2" placeholder="adjective" 
               onChange={this.onFormChange} value={this.state.adjective2}

From 7ee6d15c5fbe098e9bd5160a67e6de85b27050d0 Mon Sep 17 00:00:00 2001
From: Hallie <idhallie@gmail.com>
Date: Thu, 12 Dec 2019 22:14:56 -0800
Subject: [PATCH 11/11] Added prop types.

---
 src/components/FinalPoem.js            | 19 ++++++++++++-------
 src/components/Game.js                 |  5 +++++
 src/components/PlayerSubmissionForm.js |  3 ---
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 6748fdac..644ae5a9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,12 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types'
 import './FinalPoem.css';
 
 const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => {
 
-
-const fullPoem = () => (
-    allLines.map(line => <p>{line}</p>)
-);
+  const fullPoem = () => (
+      allLines.map(line => <p>{line}</p>)
+  );
 
   return (
     <div className="FinalPoem">
@@ -17,11 +17,16 @@ const fullPoem = () => (
       </section>) : 
       (<div className="FinalPoem__reveal-btn-container">
       <input onClick={() => { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-    </div>)
-}
-</div>
+      </div>)
+      }
+    </div>
   )
 }
 
+FinalPoem.propTypes = {
+  allLines: PropTypes.array.isRequired,
+  showPoem: PropTypes.bool.isRequired, 
+  onClickShowPoemCallback: PropTypes.func.isRequired,
+}
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 17f05333..5f6796a1 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types'
 import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
@@ -99,4 +100,8 @@ const FIELDS = [
   ".",
 ];
 
+Game.propTypes = {
+  newLine: PropTypes.object.isRequired,
+}
+
 export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index be78bc1b..e2388019 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -64,7 +64,6 @@ class PlayerSubmissionForm extends Component {
 
   onSubmit = (event) => {
     event.preventDefault();
-
     let allValid = true;
 
     Object.keys(this.validators).forEach((key) => {
@@ -76,8 +75,6 @@ class PlayerSubmissionForm extends Component {
     if (!allValid) {
       return;
     }
-
-    
     console.log(event);
 
     this.props.addLineCallback(this.state);