From a555c3d748be3303c55f3df95900d60f8ce6a70d Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Tue, 18 Jun 2019 14:17:41 -0700
Subject: [PATCH 1/8] created form and added state to PlayerSubmission

---
 src/components/Game.js                 |  8 +++-
 src/components/PlayerSubmissionForm.js | 55 ++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..f0816c64 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,12 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentSub: '',
+      finalPoem: [],
+      // addPetCallback: this.addPet,
+    };
   }
 
   render() {
@@ -34,7 +40,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm fields={FIELDS} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..a88e909a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,10 +5,55 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      // addPetCallback: this.addPet,
+    };
   }
 
+  handleSubmit = (event) => {
+    event.preventDefault();
+    this.props.addSubmissionCallback({
+      adj1: this.state.adj1,
+      noun1: this.state.noun1,
+      adv: this.state.adv,
+      verb: this.state.verb,
+      adj2: this.state.adj2,
+      noun2: this.state.noun2,
+    });
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+}
+
   render() {
 
+    const formContent = this.props.fields.map( (field, i) => {
+      if (field.key) {
+        return <input
+          key={ i }
+          placeholder={ field.placeholder }
+          value={ this.state[field.key] }
+          type="text"
+          className="PlayerSubmissionForm__input"
+        />;
+      } else {
+        return field;
+      }
+    })
+
+
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
@@ -17,18 +62,12 @@ class PlayerSubmissionForm extends Component {
 
           <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>
+          { formContent }
 
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
+          </div>
         </form>
       </div>
     );

From 91f5702ed684ec2fbe6a91b2821b2029d47be473 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Tue, 18 Jun 2019 15:30:55 -0700
Subject: [PATCH 2/8] added addSubmission callback method and line
 concatenation logic

---
 src/components/FinalPoem.js            |  2 +-
 src/components/Game.js                 | 19 +++++++--
 src/components/PlayerSubmissionForm.js | 58 +++++++++++++++-----------
 src/components/RecentSubmission.js     |  2 +-
 4 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..de29dc3a 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -7,7 +7,7 @@ const FinalPoem = (props) => {
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <p>{ props.poem }</p>
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index f0816c64..a2eddb9a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -16,6 +16,15 @@ class Game extends Component {
     };
   }
 
+  addSubmission = (line) => {
+    const currentPoem = this.state.finalPoem;
+    currentPoem.push(line);
+    this.setState({
+      recentSub: line,
+      finalPoem: currentPoem,
+    })
+  }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -26,6 +35,8 @@ class Game extends Component {
       }
     }).join(" ");
 
+    console.log(this.state.finalPoem);
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -38,11 +49,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm fields={FIELDS} />
+        <RecentSubmission recentLine={this.recentSub}/>
 
-        <FinalPoem />
+        <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/>
+        
+        <FinalPoem poem={this.finalPoem}/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index a88e909a..e880512c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -6,34 +6,40 @@ class PlayerSubmissionForm extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      adj1: '',
-      noun1: '',
-      adv: '',
-      verb: '',
-      adj2: '',
-      noun2: '',
-      // addPetCallback: this.addPet,
-    };
+    const allPoemFields = {};
+    props.fields.forEach((field) => {
+      if (field.key) {
+        allPoemFields[ field.key ] = '';
+      }
+    });
+    this.state = {...allPoemFields, player: 1, addSubmissionCallback: this.addSubmission};
+  }
+
+  onChangeHandler = (value, id) => {
+    this.setState({
+      [id]: value,
+    })
+  }
+
+  increasePlayerCount = (value) => {
+    value += 1;
+    return value;
   }
 
   handleSubmit = (event) => {
     event.preventDefault();
-    this.props.addSubmissionCallback({
-      adj1: this.state.adj1,
-      noun1: this.state.noun1,
-      adv: this.state.adv,
-      verb: this.state.verb,
-      adj2: this.state.adj2,
-      noun2: this.state.noun2,
+    const poemLine = this.props.fields.map((field) => {
+      if (field.key) {
+        return this.state[field.key];
+      } else {
+        return field;
+      }
     });
+
+    this.props.addSubmissionCallback(poemLine.join(" "));
+  
     this.setState({
-      adj1: '',
-      noun1: '',
-      adv: '',
-      verb: '',
-      adj2: '',
-      noun2: '',
+      player: this.increasePlayerCount(this.state.player),
     });
 }
 
@@ -45,20 +51,22 @@ class PlayerSubmissionForm extends Component {
           key={ i }
           placeholder={ field.placeholder }
           value={ this.state[field.key] }
+          onChange={ (event) => { this.onChangeHandler(event.target.value, field.key) } }
           type="text"
           className="PlayerSubmissionForm__input"
+          // className={this.isValidInput(this.state[field.name]) ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"}
         />;
       } else {
         return field;
       }
     })
 
-
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.player }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleSubmit}>
+        {/* {validForm ? this.handleSubmit : console.log('please enter all form data')}> */}
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..21d7239e 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.recentLine }</p>
     </div>
   );
 }

From dc2a4c0c2e8759e4ee1690dbdf6e06784e760ed7 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Tue, 18 Jun 2019 15:45:06 -0700
Subject: [PATCH 3/8] added logic to display recentSubmission

---
 src/components/Game.js                 | 10 +++++++---
 src/components/PlayerSubmissionForm.js |  6 ++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index a2eddb9a..3626b628 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,17 +10,21 @@ class Game extends Component {
     super(props);
 
     this.state = {
-      recentSub: '',
       finalPoem: [],
       // addPetCallback: this.addPet,
     };
   }
 
+  recentSubmission = (poem) => {
+    const poemLength = poem.length - 1
+    const lastLine = poem[poemLength]
+    return lastLine
+  }
+
   addSubmission = (line) => {
     const currentPoem = this.state.finalPoem;
     currentPoem.push(line);
     this.setState({
-      recentSub: line,
       finalPoem: currentPoem,
     })
   }
@@ -49,7 +53,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission recentLine={this.recentSub}/>
+        <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/>
 
         <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/>
         
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index e880512c..85dad4c1 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -39,6 +39,12 @@ class PlayerSubmissionForm extends Component {
     this.props.addSubmissionCallback(poemLine.join(" "));
   
     this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
       player: this.increasePlayerCount(this.state.player),
     });
 }

From 1f4f71ae211748eb4680e1a73f355281c4c41bb3 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Tue, 18 Jun 2019 16:01:36 -0700
Subject: [PATCH 4/8] displayed finalPoem to players

---
 src/components/Game.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 3626b628..ecf13fbf 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,7 +11,6 @@ class Game extends Component {
 
     this.state = {
       finalPoem: [],
-      // addPetCallback: this.addPet,
     };
   }
 
@@ -39,8 +38,6 @@ class Game extends Component {
       }
     }).join(" ");
 
-    console.log(this.state.finalPoem);
-
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -57,7 +54,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/>
         
-        <FinalPoem poem={this.finalPoem}/>
+        <FinalPoem poem={this.state.finalPoem}/>
 
       </div>
     );

From 49c0c19b179f320f8f5df54287f4607750758aae Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Wed, 19 Jun 2019 15:55:50 -0700
Subject: [PATCH 5/8] added logic to display or hide final poem and submit
 button

---
 src/components/FinalPoem.js | 30 ++++++++++++++++++++++--------
 src/components/Game.js      | 16 ++++++++++++++--
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index de29dc3a..597b4056 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,16 +3,30 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-        <p>{ props.poem }</p>
-      </section>
+  const tonyStanza = props.poem.map( (line, i) => {
+    return <p key={i}>{line}</p>
+  });
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  const poemInfo =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      { tonyStanza }
+    </section>
+  
+  const submitPoemButton =
+    <div className="FinalPoem__reveal-btn-container" onClick={props.finalPoemCallback}>
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn"/>
+    </div>
+    
+  const displayPoemContent =
+      <div>
+        { props.isFinal ? poemInfo : '' }
+        { props.isFinal ? '' : submitPoemButton }
       </div>
+
+  return (
+    <div className="FinalPoem">
+      { displayPoemContent }
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index ecf13fbf..ac3e0c43 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,6 +11,7 @@ class Game extends Component {
 
     this.state = {
       finalPoem: [],
+      isFinal: false,
     };
   }
 
@@ -28,6 +29,13 @@ class Game extends Component {
     })
   }
 
+  displayFinalPoem = (event) => {
+    event.preventDefault();
+    this.setState({
+      isFinal: true,
+    })
+  }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -38,6 +46,8 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isSubmitted ? <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/> : '';
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -50,11 +60,13 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/>
+        { displaySubmission }
 
         <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/>
+
+        <FinalPoem poem={ this.state.finalPoem } finalPoemCallback={this.displayFinalPoem} isFinal={this.state.isFinal}/>
         
-        <FinalPoem poem={this.state.finalPoem}/>
+        {/* <FinalPoem poem={this.state.finalPoem} finalPoemCallback={this.displayFinalPoem}/> */}
 
       </div>
     );

From 2fead371a3a30cbf7d4e59bfcf8ae9e6ae2fddcf Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Wed, 19 Jun 2019 16:07:10 -0700
Subject: [PATCH 6/8] hid recentSubmission on final poem 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 ac3e0c43..f5ae797d 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -46,7 +46,7 @@ class Game extends Component {
       }
     }).join(" ");
 
-    const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isSubmitted ? <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/> : '';
+    const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isFinal ? <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/> : '';
 
     return (
       <div className="Game">

From adeed8a217e4aad8a9727fc59af8bdb2a0e1d6c8 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Wed, 19 Jun 2019 16:19:12 -0700
Subject: [PATCH 7/8] added logic to hide submission form on final poem
 submission

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

diff --git a/src/components/Game.js b/src/components/Game.js
index f5ae797d..507f87c3 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -48,6 +48,8 @@ class Game extends Component {
 
     const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isFinal ? <RecentSubmission recentLine={this.recentSubmission(this.state.finalPoem)}/> : '';
 
+    const displaySubmissionForm = !this.state.isFinal ? <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/> : '';
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -62,12 +64,10 @@ class Game extends Component {
 
         { displaySubmission }
 
-        <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.addSubmission}/>
+        { displaySubmissionForm }
 
         <FinalPoem poem={ this.state.finalPoem } finalPoemCallback={this.displayFinalPoem} isFinal={this.state.isFinal}/>
         
-        {/* <FinalPoem poem={this.state.finalPoem} finalPoemCallback={this.displayFinalPoem}/> */}
-
       </div>
     );
   }

From d0795647a1ab0d4262be0e07ab924b73dd93a50d Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Wed, 19 Jun 2019 16:34:26 -0700
Subject: [PATCH 8/8] added logic to validate form input fields dynamically

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

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 85dad4c1..e3e0a5d2 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -26,6 +26,10 @@ class PlayerSubmissionForm extends Component {
     return value;
   }
 
+  isValid = (field) => {
+    return field.length > 0 ? true : false;
+  }
+
   handleSubmit = (event) => {
     event.preventDefault();
     const poemLine = this.props.fields.map((field) => {
@@ -59,8 +63,7 @@ class PlayerSubmissionForm extends Component {
           value={ this.state[field.key] }
           onChange={ (event) => { this.onChangeHandler(event.target.value, field.key) } }
           type="text"
-          className="PlayerSubmissionForm__input"
-          // className={this.isValidInput(this.state[field.name]) ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"}
+          className={this.isValid(this.state[field.key]) ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"}
         />;
       } else {
         return field;
@@ -72,7 +75,6 @@ class PlayerSubmissionForm extends Component {
         <h3>Player Submission Form for Player #{ this.state.player }</h3>
 
         <form className="PlayerSubmissionForm__form" onSubmit={this.handleSubmit}>
-        {/* {validForm ? this.handleSubmit : console.log('please enter all form data')}> */}
 
           <div className="PlayerSubmissionForm__poem-inputs">