From ee048475634bc4f7eb68aa0114af98b5aa772348 Mon Sep 17 00:00:00 2001
From: Bitaman <b.amani.s@gmail.com>
Date: Tue, 18 Jun 2019 16:22:39 -0700
Subject: [PATCH 1/2] added the form and callback function in game

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..2a4c1185 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,22 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [],
+      isSubmitted: false,
+    }
   }
 
+  addSubmission = (newSubmission)=> {
+    console.log(newSubmission)
+    let nextSubmission = this.state.submissions
+    nextSubmission.push(newSubmission)
+    this.setState({
+      submissions: nextSubmission
+    }) 
+    console.log(this.state.submissions)
+
+  }
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -34,7 +48,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm onSubmissionCallback={this.addSubmission} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..14efaa4b 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,29 +5,108 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+      count: 0,
+    }
+  }
+  onInputChange = (event) => {
+    const updatedState = {};
+  
+    const field = event.target.name;
+    const value = event.target.value;
+  
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+  onFormSubmit = (event) => {
+    event.preventDefault();
+  
+    const newSubmission = {
+      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: '',
+      count: this.state.count + 1
+    });
+   
+    this.props.onSubmissionCallback(newSubmission)
+  
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.state.count}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit} >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+            
+            <span>The</span>
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
+              placeholder="adjective"
+              name="adj1"
+              onChange={this.onInputChange}
+              value={this.state.adj1}
+              type="text" />
+              <input
+              placeholder="noun"
+              name="noun1"
+              onChange={this.onInputChange}
+              value={this.state.noun1}
+              type="text" />
+              <input
+              placeholder="adverb"
+              name="adv"
+              onChange={this.onInputChange}
+              value={this.state.adv}
+              type="text" />
+              <input
+              placeholder="verb"
+              name="verb"
+              onChange={this.onInputChange}
+              value={this.state.verb}
+              type="text" />
+              <span>the</span>
+              <input
+              placeholder="adjective"
+              name="adj2"
+              onChange={this.onInputChange}
+              value={this.state.adj2}
+              type="text" />
+              <input
+              placeholder="noun"
+              name="noun2"
+              onChange={this.onInputChange}
+              value={this.state.noun2}
               type="text" />
+              <span>,</span>
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"  />
           </div>
         </form>
       </div>

From b4fb505201263ea36c7298862b312e4240b19cde Mon Sep 17 00:00:00 2001
From: Bitaman <b.amani.s@gmail.com>
Date: Wed, 19 Jun 2019 21:35:01 -0700
Subject: [PATCH 2/2] added event handler to final poem

---
 src/components/FinalPoem.js             | 37 +++++++++++++++++--------
 src/components/Game.js                  | 34 +++++++++++++++++------
 src/components/PlayerSubmissionForm.css |  2 ++
 src/components/PlayerSubmissionForm.js  | 37 ++++++++++++++++---------
 src/components/RecentSubmission.js      |  3 +-
 5 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..208a5561 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,18 +3,31 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const poem = props.submissions.map((line, i) => {
+    return <p key={i}> {line}</p>
+  })
+  const handleClick = () => {
+    console.log("I am clicking")
+    props.poemCallback();
+  }
+  const poemButton =
+    <div className="FinalPoem__reveal-btn-container" >
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={handleClick} />
+    </div>
 
-      </section>
+  const showpoem =
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      <div>{poem}</div>
+      </section>;
+      const content = props.isSubmitted? showpoem : poemButton
 
-      <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">
+      {content}
 
-export default FinalPoem;
+    </div>
+      );
+    }
+    
+    export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 2a4c1185..8d9da5fa 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -11,19 +11,32 @@ class Game extends Component {
     this.state = {
       submissions: [],
       isSubmitted: false,
+      counter: 1,
     }
   }
 
-  addSubmission = (newSubmission)=> {
-    console.log(newSubmission)
+  addSubmission = (newSentence)=> {
+    console.log(newSentence)
     let nextSubmission = this.state.submissions
-    nextSubmission.push(newSubmission)
+    nextSubmission.push(newSentence)
     this.setState({
-      submissions: nextSubmission
+      submissions: nextSubmission,
+      counter: this.state.counter + 1
     }) 
     console.log(this.state.submissions)
 
   }
+  setSubmitted=()=> {
+    this.setState({
+      isSubmitted: true,
+      counter: 1,
+    })
+  }
+  
+
+
+
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -33,6 +46,9 @@ class Game extends Component {
         return field;
       }
     }).join(" ");
+    const playersubmissionform = this.state.isSubmitted? '' : <PlayerSubmissionForm onSubmissionCallback={this.addSubmission} Counter={this.state.counter}/>
+    const recentsubmission = this.state.isSubmitted? '' : <RecentSubmission recentSubmission= {this.state.submissions[this.state.submissions.length - 1]}  />
+
 
     return (
       <div className="Game">
@@ -45,12 +61,12 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        {recentsubmission}
+        {playersubmissionform}
+        
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm onSubmissionCallback={this.addSubmission} />
-
-        <FinalPoem />
+        <FinalPoem  poemCallback={this.setSubmitted} submissions={this.state.submissions} isSubmitted={this.state.isSubmitted} />
+        
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..22dab04b 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -35,6 +35,8 @@
   background-color: #FFE9E9;
 }
 
+
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 14efaa4b..e2cff9dc 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -12,14 +12,15 @@ class PlayerSubmissionForm extends Component {
       verb: '',
       adj2: '',
       noun2: '',
-      count: 0,
     }
   }
+
   onInputChange = (event) => {
     const updatedState = {};
   
     const field = event.target.name;
     const value = event.target.value;
+    
   
     updatedState[field] = value;
     this.setState(updatedState);
@@ -27,14 +28,16 @@ class PlayerSubmissionForm extends Component {
   onFormSubmit = (event) => {
     event.preventDefault();
   
-    const newSubmission = {
-      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 newSubmission = {
+    //   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 newSentence = "The " + this.state.adj1 + " " + this.state.noun1 + " " + this.state.adv + " " + this.state.verb + " the " + this.state.adj2 + " " + this.state.noun2
+    console.log(newSentence)
     
     
   
@@ -45,18 +48,20 @@ class PlayerSubmissionForm extends Component {
       verb: '',
       adj2: '',
       noun2: '',
-      count: this.state.count + 1
     });
    
-    this.props.onSubmissionCallback(newSubmission)
+    this.props.onSubmissionCallback(newSentence)
   
   }
+  
+  
 
   render() {
-
+    // let classname = "PlayerSubmissionFormt__input--invalid"
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{this.state.count}</h3>
+
+        <h3>Player Submission Form for Player #{this.props.Counter}</h3>
 
         <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit} >
 
@@ -66,24 +71,28 @@ class PlayerSubmissionForm extends Component {
 
             <input
               placeholder="adjective"
+              className="PlayerSubmissionFormt__input--invalid"
               name="adj1"
               onChange={this.onInputChange}
               value={this.state.adj1}
               type="text" />
               <input
               placeholder="noun"
+              className="PlayerSubmissionFormt__input--invalid"
               name="noun1"
               onChange={this.onInputChange}
               value={this.state.noun1}
               type="text" />
               <input
               placeholder="adverb"
+              className="PlayerSubmissionFormt__input--invalid"
               name="adv"
               onChange={this.onInputChange}
               value={this.state.adv}
               type="text" />
               <input
               placeholder="verb"
+              className="PlayerSubmissionFormt__input--invalid"
               name="verb"
               onChange={this.onInputChange}
               value={this.state.verb}
@@ -91,12 +100,14 @@ class PlayerSubmissionForm extends Component {
               <span>the</span>
               <input
               placeholder="adjective"
+              className="PlayerSubmissionFormt__input--invalid"
               name="adj2"
               onChange={this.onInputChange}
               value={this.state.adj2}
               type="text" />
               <input
               placeholder="noun"
+              className="PlayerSubmissionFormt__input--invalid"
               name="noun2"
               onChange={this.onInputChange}
               value={this.state.noun2}
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..efaff7d1 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,10 +2,11 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  console.log(props)
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.recentSubmission}</p>
     </div>
   );
 }