From 3d452fae24e0bf24f1e3d7b8defcd30bbb519133 Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Wed, 11 Dec 2019 08:43:12 -0800
Subject: [PATCH 1/6] built form html for playersubmissions

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..40bf2c7e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,27 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recent: '',
+      playSubmissions: [],
+      inProgress: true
+    }
+  }
+
+  addLine = (formText) => {
+    
+    const newSubs = this.state.playSubmissions
+    newSubs.push(formText)
+    this.setState({
+      playSubmissions: newSubs,
+      recent: formText
+    })
+
   }
 
+
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -34,7 +53,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={formText => this.addLine(formText)}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..8d5021cb 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,27 +5,62 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      input1: "",
+      input2: "",
+      input3: "",
+      input4: "",
+      input5: "",
+      input6: "",
+      valid: false,
+      player: 1
+    }
+  }
+
+
+  onInputChange = (event) => {
+    const updatedState = {};
+  
+    const field = event.target.name;
+    const value = event.target.value;
+  
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  addLineCallback = (event) => {
+    event.preventDefault();
+    const formText = "The" + this.state.input1 + this.state.input2 + this.state.input3 + this.state.input4 + "the" + this.state.input5 + this.state.input6 + "."
+    this.props.addLineCallback(formText);
+    this.setState({ 
+      input1: "",
+      input2: "",
+      input3: "",
+      input4: "",
+      input5: "",
+      input6: "",})
+    this.setState({player: this.state.player + 1})
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.state.player  }</h3>
 
+        <form className="PlayerSubmissionForm__form" onSubmit={this.addLineCallback} >
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            The
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="adjective" name="input1" onChange={this.onInputChange} value={this.state.input1}/>
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="noun" name="input2" onChange={this.onInputChange} value={this.state.input2}/>
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="adverb" name="input3" onChange={this.onInputChange} value={this.state.input3}/>
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="verb" name="input4" onChange={this.onInputChange} value={this.state.input4}/>
+            the
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="adjective" name="input5" onChange={this.onInputChange} value={this.state.input5}/>
+            <input className={this.state.valid ? "" : "PlayerSubmissionFormt__input--invalid" } placeholder="noun" name="input6" onChange={this.onInputChange} value={this.state.input6}/>
+            .
           </div>
-
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>

From 47deaaa8a2f520823266f032a698909bdd1db416 Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Wed, 11 Dec 2019 08:45:17 -0800
Subject: [PATCH 2/6] finished form callback and add line function for game

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 40bf2c7e..8ca40936 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -51,7 +51,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission text={this.state.recent}/>
 
         <PlayerSubmissionForm addLineCallback={formText => this.addLine(formText)}/>
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..8b048c3b 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.text }</p>
     </div>
   );
 }

From 732c58088335461c986123ca4f2707c46829a332 Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Wed, 11 Dec 2019 08:48:14 -0800
Subject: [PATCH 3/6] fixed form and added recent submission

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

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 8d5021cb..31109c17 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -31,7 +31,7 @@ class PlayerSubmissionForm extends Component {
 
   addLineCallback = (event) => {
     event.preventDefault();
-    const formText = "The" + this.state.input1 + this.state.input2 + this.state.input3 + this.state.input4 + "the" + this.state.input5 + this.state.input6 + "."
+    const formText = "The" + " " + this.state.input1 + " " + this.state.input2 + " " + this.state.input3 + " " + this.state.input4 + " " + "the" + " " + this.state.input5 + " " + this.state.input6 + "."
     this.props.addLineCallback(formText);
     this.setState({ 
       input1: "",

From cc05000da464c4d901c5852005543834b4e7f5fb Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Wed, 11 Dec 2019 10:38:41 -0800
Subject: [PATCH 4/6] added conditional logic for recent sumbission

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 8ca40936..62644275 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -39,6 +39,12 @@ class Game extends Component {
       }
     }).join(" ");
 
+    let recentSub = ""
+
+    if (this.state.recent != "" && this.state.inProgress === true) {
+      recentSub = <RecentSubmission text={this.state.recent}/>
+    }
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -51,9 +57,9 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission text={this.state.recent}/>
+        {recentSub}
 
-        <PlayerSubmissionForm addLineCallback={formText => this.addLine(formText)}/>
+        
 
         <FinalPoem />
 

From eb1d8bed55c8bc8815649011765c52748523f961 Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Wed, 11 Dec 2019 11:22:16 -0800
Subject: [PATCH 5/6] fixed conditional display for recent submission

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 62644275..8c04837c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -39,11 +39,6 @@ class Game extends Component {
       }
     }).join(" ");
 
-    let recentSub = ""
-
-    if (this.state.recent != "" && this.state.inProgress === true) {
-      recentSub = <RecentSubmission text={this.state.recent}/>
-    }
 
     return (
       <div className="Game">
@@ -57,11 +52,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        {recentSub}
+        {this.state.inProgress && this.state.recent ? <RecentSubmission text={this.state.recent}/> : ""}
 
-        
+        {this.state.inProgress ? <PlayerSubmissionForm addLineCallback={formText => this.addLine(formText)}/> : ""}
 
-        <FinalPoem />
+        {this.state.inProgress ?  <FinalPoem /> : <FinalPoem text={this.state.playSubmissions}/>}
 
       </div>
     );

From fbc22a9f2a4b58836331bfb5520ada6e33dd9f02 Mon Sep 17 00:00:00 2001
From: Kristy Hisaw <kristy.hisaw@gmail.com>
Date: Fri, 13 Dec 2019 09:19:33 -0800
Subject: [PATCH 6/6] finished and fixed issue with submit button not working

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

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..9ab77bb4 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,17 +2,31 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const { inProgress, finishGameCallback, text} = props;
+  let display = undefined
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
+  const poem = text.map((sub) => {
+    return <p>{ sub }</p>;
+  });
 
+  if (inProgress) {
+    display =
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <input onClick={finishGameCallback} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      </div>
+  } else {
+    display = 
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {poem}
+        </section>
       </div>
+  }
+
+  return (
+    <div className="FinalPoem">
+     {display}
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index 8c04837c..41949b50 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -27,7 +27,9 @@ class Game extends Component {
 
   }
 
-
+  finishGame = () => {
+    this.setState({inProgress: false})
+  }
 
   render() {
 
@@ -56,7 +58,7 @@ class Game extends Component {
 
         {this.state.inProgress ? <PlayerSubmissionForm addLineCallback={formText => this.addLine(formText)}/> : ""}
 
-        {this.state.inProgress ?  <FinalPoem /> : <FinalPoem text={this.state.playSubmissions}/>}
+        <FinalPoem inProgress={this.state.inProgress} finishGameCallback={this.finishGame} text={this.state.playSubmissions}/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 31109c17..82c1538f 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -47,7 +47,7 @@ class PlayerSubmissionForm extends Component {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{this.state.player  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.player  }</h3>
 
         <form className="PlayerSubmissionForm__form" onSubmit={this.addLineCallback} >
           <div className="PlayerSubmissionForm__poem-inputs">