From 896bec440657efcc047aefa07f48604cc69a8f96 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Wed, 11 Dec 2019 14:59:04 -0800
Subject: [PATCH 1/8] Added to the submission form, Implement submit line

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..90565691 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,10 +8,20 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    // Added by me
+    this.state = { submissions:[] }
   }
+  addLine = (submission) => {
+    const submissions = this.state.submissions;
+    submissions.push(submission);
+    this.setState({ submissions })
+    console.log(this.state.submissions)
+  }
+
 
   render() {
 
+
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -34,7 +44,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..07c8985f 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,105 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    // Added by me
+    this.state = {
+      adjective1: '',
+      noun1: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: ''
+    }
   }
 
+  handleInput = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+ 
+  handleOnSubmit = (event) => {
+    event.preventDefault();
+    this.setState(this.initialState);
+    
+    const submission = `The ${this.state.adjective1} ${this.state.noun1} ${this.state.adverb}
+     ${this.state.verb} ${this.state.adjective2} ${this.state.noun2}.`;
+    this.props.addLineCallback(submission)
+ 
+  this.setState ({
+    adjective1: '',
+    noun1: '',
+    adverb: '',
+    verb: '',
+    adjective2: '',
+    noun2: ''
+  });
+}
+
+  
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleOnSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
+
             }
+            <div>
             <input
-              placeholder="hm..."
-              type="text" />
-
+              // placeholder="hm..."
+              // type="text" />
+              placeholder="adjective"
+              name="adjective1"
+              type="text"
+              value={this.state.adjective1}
+              onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                placeholder="noun"
+                name="noun1"
+                type="text"
+                value={this.state.noun1} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                placeholder="adverb"
+                name="adverb"
+                type="text"
+                value={this.state.adverb} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                placeholder="verb"
+                name="verb"
+                type="text"
+                value={this.state.verb} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                placeholder="adjective"
+                name="adjective2"
+                type="text"
+                value={this.state.adjective2} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                placeholder="noun"
+                name="noun2"
+                type="text"
+                value={this.state.noun2} 
+                onChange={this.handleInput}/>
+            </div>
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From d1278fe96da3542620f117bb1e4419c66fbdbbb7 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Wed, 11 Dec 2019 15:14:10 -0800
Subject: [PATCH 2/8] Submission Form for Player #3

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 90565691..bb1de564 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -44,7 +44,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length}/>
+        <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length + 1}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 07c8985f..6928c6a0 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -44,7 +44,7 @@ class PlayerSubmissionForm extends Component {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.player }</h3>
 
         <form className="PlayerSubmissionForm__form" onSubmit={this.handleOnSubmit}>
 

From b4bb113fc41ca3faf4d80d22e265a8cfe631fdc2 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Wed, 11 Dec 2019 16:07:26 -0800
Subject: [PATCH 3/8] all submissions of poetry lines in the section named
 final poem, each submission in the final poem section on a different line

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

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..c8b5c04d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -7,6 +7,10 @@ const FinalPoem = (props) => {
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
+        {props.submissions.map((submission) => {
+          return <p>{submission}</p>
+        })}
+       
 
       </section>
 
diff --git a/src/components/Game.js b/src/components/Game.js
index bb1de564..7afc8f88 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -21,7 +21,6 @@ class Game extends Component {
 
   render() {
 
-
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -46,7 +45,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length + 1}/>
 
-        <FinalPoem />
+        <FinalPoem submissions={this.state.submissions}/>
 
       </div>
     );

From e2ab06a47a61272ca8ed03a5366c1130d051af76 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Wed, 11 Dec 2019 17:58:57 -0800
Subject: [PATCH 4/8] only see The Most Recent Submission section if there has
 already been at least one submission

---
 src/components/Game.js             | 16 ++++++++++++++--
 src/components/RecentSubmission.js |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 7afc8f88..78b449b7 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,13 +11,25 @@ class Game extends Component {
     // Added by me
     this.state = { submissions:[] }
   }
+
   addLine = (submission) => {
     const submissions = this.state.submissions;
     submissions.push(submission);
     this.setState({ submissions })
-    console.log(this.state.submissions)
+    console.log(submissions)
   }
 
+  renderRecentSubmission = () => {
+    const submissions = this.state.submissions;
+    if (submissions.length === 0) {
+      return null;
+    }
+    return (
+      <RecentSubmission 
+        recentsubmission={submissions[submissions.length - 1]} 
+      />
+    );
+  }
 
   render() {
 
@@ -41,7 +53,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {this.renderRecentSubmission()}
 
         <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length + 1}/>
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..81abf28e 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.recentsubmission }</p>
     </div>
   );
 }

From 94748dd54791a37d6536f128ab7ea56bcc18585d Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Thu, 12 Dec 2019 13:58:31 -0800
Subject: [PATCH 5/8] button to click to finalize our poem and reveal the
 entire final poem, hide the Player Submission Form after the final poem has
 been revealed

---
 src/components/FinalPoem.js            | 26 ++++++++++++--------------
 src/components/Game.js                 | 15 ++++++++++++---
 src/components/PlayerSubmissionForm.js |  5 ++++-
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index c8b5c04d..e06fc166 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,23 +2,21 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
+  if (props.render === true){
+    return <div className="FinalPoem">
       <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-        {props.submissions.map((submission) => {
-          return <p>{submission}</p>
-        })}
-       
-
+        <h3>Final Poem </h3>
+          {props.submissions.map((submission) => {
+            return <p>{submission}</p>
+          })}
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
     </div>
-  );
+  }
+  return (
+    <div className="FinalPoem__reveal-btn-container">
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.finalPoemCallback} />
+    </div>
+  )
 }
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 78b449b7..c8d8577e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -9,7 +9,10 @@ class Game extends Component {
   constructor(props) {
     super(props);
     // Added by me
-    this.state = { submissions:[] }
+    this.state = {
+      submissions:[], 
+      finalPoem: false
+    }
   }
 
   addLine = (submission) => {
@@ -19,6 +22,12 @@ class Game extends Component {
     console.log(submissions)
   }
 
+  finalPoemRender = () => {
+    this.setState({
+      finalPoem: true
+    });
+  }
+
   renderRecentSubmission = () => {
     const submissions = this.state.submissions;
     if (submissions.length === 0) {
@@ -55,9 +64,9 @@ class Game extends Component {
 
         {this.renderRecentSubmission()}
 
-        <PlayerSubmissionForm addLineCallback={this.addLine} player={this.state.submissions.length + 1}/>
+        <PlayerSubmissionForm addLineCallback={this.addLine} render={this.state.finalPoem} player={this.state.submissions.length + 1}/>
 
-        <FinalPoem submissions={this.state.submissions}/>
+        <FinalPoem submissions={this.state.submissions} render={this.state.finalPoem} finalPoemCallback={this.finalPoemRender}/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 6928c6a0..25ed08cd 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -41,7 +41,9 @@ class PlayerSubmissionForm extends Component {
   
 
   render() {
-
+    if (this.props.render === true) {
+      return <div></div>
+    }
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{this.props.player }</h3>
@@ -115,4 +117,5 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+
 export default PlayerSubmissionForm;

From 03b34620658c9bb7ecaa7296b96aa1b3ffa0e949 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Thu, 12 Dec 2019 15:39:17 -0800
Subject: [PATCH 6/8] added light pink when text inputs are blank

---
 src/components/PlayerSubmissionForm.css |  4 ++--
 src/components/PlayerSubmissionForm.js  | 28 ++++++++++++++++---------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..bb566357 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -31,10 +31,10 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
-}
+}
\ No newline at end of file
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 25ed08cd..b3d25432 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,7 +5,6 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
-    // Added by me
     this.state = {
       adjective1: '',
       noun1: '',
@@ -38,7 +37,12 @@ class PlayerSubmissionForm extends Component {
   });
 }
 
-  
+  isInputInvalid = (input) => {
+    if (input === ""){
+      return "PlayerSubmissionForm__input--invalid"
+    }
+  }    
+
 
   render() {
     if (this.props.render === true) {
@@ -57,17 +61,17 @@ class PlayerSubmissionForm extends Component {
 
             }
             <div>
-            <input
-              // placeholder="hm..."
-              // type="text" />
-              placeholder="adjective"
-              name="adjective1"
-              type="text"
-              value={this.state.adjective1}
-              onChange={this.handleInput}/>
+              <input
+                className = { this.isInputInvalid(this.state.adjective1) }
+                placeholder="adjective"
+                name="adjective1"
+                type="text"
+                value={this.state.adjective1}
+                onChange={this.handleInput}/>
             </div>
             <div>
               <input
+                className={this.isInputInvalid(this.state.noun1)}
                 placeholder="noun"
                 name="noun1"
                 type="text"
@@ -76,6 +80,7 @@ class PlayerSubmissionForm extends Component {
             </div>
             <div>
               <input
+                className={this.isInputInvalid(this.state.adverb)}
                 placeholder="adverb"
                 name="adverb"
                 type="text"
@@ -84,6 +89,7 @@ class PlayerSubmissionForm extends Component {
             </div>
             <div>
               <input
+                className={this.isInputInvalid(this.state.verb)}
                 placeholder="verb"
                 name="verb"
                 type="text"
@@ -92,6 +98,7 @@ class PlayerSubmissionForm extends Component {
             </div>
             <div>
               <input
+                className={this.isInputInvalid(this.state.adjective2)}
                 placeholder="adjective"
                 name="adjective2"
                 type="text"
@@ -100,6 +107,7 @@ class PlayerSubmissionForm extends Component {
             </div>
             <div>
               <input
+                className={this.isInputInvalid(this.state.noun1)}
                 placeholder="noun"
                 name="noun2"
                 type="text"

From a0c37d98b964489ac25a4de121b5f2fce8ff9558 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Thu, 12 Dec 2019 19:08:59 -0800
Subject: [PATCH 7/8] clean up

---
 src/components/FinalPoem.js            | 9 +++++----
 src/components/Game.js                 | 1 -
 src/components/PlayerSubmissionForm.js | 1 -
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index e06fc166..439b11c9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,7 +3,7 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
   if (props.render === true){
-    return <div className="FinalPoem">
+    return <div>
       <section className="FinalPoem__poem">
         <h3>Final Poem </h3>
           {props.submissions.map((submission) => {
@@ -13,9 +13,10 @@ const FinalPoem = (props) => {
     </div>
   }
   return (
-    <div className="FinalPoem__reveal-btn-container">
-      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.finalPoemCallback} />
-    </div>
+      <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.finalPoemCallback}/>
+      </div>
+
   )
 }
 
diff --git a/src/components/Game.js b/src/components/Game.js
index c8d8577e..77776d9a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,7 +8,6 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
-    // Added by me
     this.state = {
       submissions:[], 
       finalPoem: false
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index b3d25432..3a5fdea7 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -43,7 +43,6 @@ class PlayerSubmissionForm extends Component {
     }
   }    
 
-
   render() {
     if (this.props.render === true) {
       return <div></div>

From 4f01abfa1e89dd3288dbbc859d5487dbf031fba5 Mon Sep 17 00:00:00 2001
From: Yasmin <yasmin312002@hotmail.com>
Date: Fri, 13 Dec 2019 08:09:52 -0800
Subject: [PATCH 8/8] fixed the last text input to be light pink when it is
 blank

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 77776d9a..6beee2d9 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -62,6 +62,7 @@ class Game extends Component {
         </p>
 
         {this.renderRecentSubmission()}
+        
 
         <PlayerSubmissionForm addLineCallback={this.addLine} render={this.state.finalPoem} player={this.state.submissions.length + 1}/>
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 3a5fdea7..4e336374 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -106,7 +106,7 @@ class PlayerSubmissionForm extends Component {
             </div>
             <div>
               <input
-                className={this.isInputInvalid(this.state.noun1)}
+                className={this.isInputInvalid(this.state.noun2)}
                 placeholder="noun"
                 name="noun2"
                 type="text"
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 81abf28e..0e1d3192 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -6,6 +6,7 @@ const RecentSubmission = (props) => {
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
       <p className="RecentSubmission__submission">{ props.recentsubmission }</p>
+      
     </div>
   );
 }