From eda672f06a24523af0f237089cdb647862cf1c82 Mon Sep 17 00:00:00 2001
From: Amal Hassan-Ali <amalh.a97@gmail.com>
Date: Wed, 11 Dec 2019 14:44:08 -0800
Subject: [PATCH 1/3] added form and state to playerSubmissionForm

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..5a07f665 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -34,7 +34,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..5f93f54c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,9 +5,47 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+  let  fieldState = {}
+  
+  this.props.fields.forEach((field) => {
+    if(field.key) {
+    fieldState[field.key] = ""
+    }
+
+  })
+    this.state = fieldState 
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+  
+    const field = event.target.name;
+    const value = event.target.value;
+  
+    updatedState[field] = value;
+    this.setState(updatedState);
   }
 
+
   render() {
+    console.log(this.state)
+    const playerForm = this.props.fields.map((field, i) => {
+      if(field.key) {
+        return(<input
+          key={i}
+          placeholder={field.placeholder}
+          name={field.key}
+          value={this.state[field.key]}
+          onChange={this.onInputChange}
+          type="text" />
+
+        )
+
+      }else{
+        return field
+      }
+
+    })
 
     return (
       <div className="PlayerSubmissionForm">
@@ -17,12 +55,34 @@ class PlayerSubmissionForm extends Component {
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
+            {playerForm
               // Put your form inputs here... We've put in one below as an example
+             
+             
+ 
             }
+            {/* <p> The </p>
+             <input
+              placeholder="adjective"
+              name="adjective1"
+              type="text" />
+              <input
+              placeholder="noun"
+              type="text" />
+            <input
+              placeholder="adverb"
+              type="text" />
+              
+                <input
+              placeholder="verb"
+              type="text" />
+              <p> the </p>
             <input
-              placeholder="hm..."
+              placeholder="adjective"
               type="text" />
+              <input
+              placeholder="noun"
+              type="text" /> */}
 
           </div>
 

From 997608c6f49367ba72fa42facf4c5527d235ac52 Mon Sep 17 00:00:00 2001
From: Amal Hassan-Ali <amalh.a97@gmail.com>
Date: Sun, 15 Dec 2019 17:51:49 -0800
Subject: [PATCH 2/3] finished add line feature, added recent submission
 feature, added final poem feature, and hid certain features with conditionals

---
 src/components/FinalPoem.js            | 45 +++++++++++++---
 src/components/Game.js                 | 44 +++++++++++++--
 src/components/PlayerSubmissionForm.js | 74 +++++++++++++-------------
 src/components/RecentSubmission.js     |  2 +-
 4 files changed, 119 insertions(+), 46 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..8c8cd7da 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,18 +3,51 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const finishedPoem = props.poem.map((line) => {
   return (
-    <div className="FinalPoem">
+  <p> {line}</p>
+  )
+  })
+
+  if(props.poemStatus){
+    return( 
+      <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+      
+      {finishedPoem}
+      
       </section>
+    </div>
+
+    )
+  }else{
+    return(
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+    <div className="FinalPoem__reveal-btn-container">
+
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn FinalPoem__reveal-btn:hover" onClick={() => { props.showPoemCallback()} }/>
     </div>
-  );
+    )}
+  
+  
+// console.log(props.poem)
+
+//   return (
+//     <div className="FinalPoem">
+//       <section className="FinalPoem__poem">
+//         <h3>Final Poem</h3>
+      
+//       {finishedPoem}
+      
+//       </section>
+
+//       <div className="FinalPoem__reveal-btn-container">
+
+//         <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn FinalPoem__reveal-btn:hover" />
+//       </div>
+//     </div>
+//   );
 }
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 5a07f665..2b1ad8ac 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,9 +8,46 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    
+    this.state = {
+      recentLine: "",
+      submissions: [],
+      poemFinished: false,
+      playerNum: 1
+    }
+  }
+
+  showPoem = () => {
+    
+    this.setState({
+      poemFinished: true
+    }
+    )
+    console.log(this.state)
+
+  }
+
+  addLine = (words) => {
+    
+   
+    const wordArray = Object.values(words)
+    const line = `The ${wordArray[0]} ${wordArray[1]} ${wordArray[2]} ${wordArray[3]} the ${wordArray[4]} ${wordArray[5]}.`
+    
+    this.setState({
+      recentLine: line, 
+      playerNum: this.state.playerNum + 1
+    })
+    this.state.submissions.push(line)
+
   }
 
   render() {
+    let recentSubmission = ""
+    if (this.state.submissions.length >= 1 && !this.state.poemFinished){
+      recentSubmission = <RecentSubmission recentSubmission={this.state.recentLine} />
+    }
+   
+  
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -32,11 +69,12 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        
+        {recentSubmission}
 
-        <PlayerSubmissionForm fields={FIELDS} />
+    { this.state.poemFinished ? "" : <PlayerSubmissionForm fields={FIELDS} addLineCallback={this.addLine} playerNum={this.state.playerNum} /> }
 
-        <FinalPoem />
+        <FinalPoem poem={this.state.submissions} poemStatus={this.state.poemFinished} showPoemCallback={this.showPoem} />
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 5f93f54c..ee9e68c5 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,19 +2,25 @@ import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
-
-  constructor(props) {
-    super(props);
+fieldState = () => {
   let  fieldState = {}
-  
   this.props.fields.forEach((field) => {
     if(field.key) {
     fieldState[field.key] = ""
     }
 
   })
-    this.state = fieldState 
+  return fieldState
+}
+
+  constructor(props) {
+    super(props);
+ 
+ 
+    this.state = this.fieldState()
   }
+ 
+
 
   onInputChange = (event) => {
     const updatedState = {};
@@ -26,8 +32,30 @@ class PlayerSubmissionForm extends Component {
     this.setState(updatedState);
   }
 
+  checkSubmission = () => {
+    let check = true 
+    this.props.fields.forEach((field) => {
+      if (field === ""){
+        check = false 
+      }
+    
+    })
+    return check 
+  }
+  onSubmit = (event) => {
+    event.preventDefault();
+    if (this.checkSubmission()) {
+      this.props.addLineCallback(this.state)
+    }
+
+      this.setState(this.fieldState());
+
+    }
+  
+
 
   render() {
+    
     console.log(this.state)
     const playerForm = this.props.fields.map((field, i) => {
       if(field.key) {
@@ -49,45 +77,19 @@ class PlayerSubmissionForm extends Component {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.playerNum}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {playerForm
-              // Put your form inputs here... We've put in one below as an example
-             
-             
- 
-            }
-            {/* <p> The </p>
-             <input
-              placeholder="adjective"
-              name="adjective1"
-              type="text" />
-              <input
-              placeholder="noun"
-              type="text" />
-            <input
-              placeholder="adverb"
-              type="text" />
-              
-                <input
-              placeholder="verb"
-              type="text" />
-              <p> the </p>
-            <input
-              placeholder="adjective"
-              type="text" />
-              <input
-              placeholder="noun"
-              type="text" /> */}
+            {playerForm}
+           
 
           </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>
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..ec67c8d9 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 7507849a897f14d3c7aeb2a5202eadc5db91be04 Mon Sep 17 00:00:00 2001
From: Amal Hassan-Ali <amalh.a97@gmail.com>
Date: Sun, 15 Dec 2019 17:53:47 -0800
Subject: [PATCH 3/3] deleted comment

---
 src/components/FinalPoem.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 8c8cd7da..01b8ef8d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -30,24 +30,7 @@ const FinalPoem = (props) => {
     </div>
     )}
   
-  
-// console.log(props.poem)
-
-//   return (
-//     <div className="FinalPoem">
-//       <section className="FinalPoem__poem">
-//         <h3>Final Poem</h3>
-      
-//       {finishedPoem}
-      
-//       </section>
-
-//       <div className="FinalPoem__reveal-btn-container">
 
-//         <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn FinalPoem__reveal-btn:hover" />
-//       </div>
-//     </div>
-//   );
 }
 
 export default FinalPoem;