From cf75f04b9bb7148868e2cf9e2e7f2e23e221f54c Mon Sep 17 00:00:00 2001
From: Sara Shah Baig <sarashahbaig@gmail.com>
Date: Wed, 11 Dec 2019 17:54:04 -0800
Subject: [PATCH 1/4] final poem mapped

---
 src/components/FinalPoem.js            | 19 ++++--
 src/components/Game.js                 | 92 +++++++++++++++++--------
 src/components/PlayerSubmissionForm.js | 95 ++++++++++++++++++++++----
 src/components/RecentSubmission.js     | 10 +--
 4 files changed, 163 insertions(+), 53 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..b18ee983 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,25 @@
-import React from 'react';
-import './FinalPoem.css';
-
-const FinalPoem = (props) => {
+import React from "react";
+import "./FinalPoem.css";
 
+const FinalPoem = props => {
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {props.finalPoem.map(para => (
+          <p>{para}</p>
+        ))}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input
+          type="button"
+          value="We are finished: Reveal the Poem"
+          className="FinalPoem__reveal-btn"
+        />
       </div>
     </div>
   );
-}
+};
 
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..e119008e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,18 +1,42 @@
-import React, { Component } from 'react';
-import './Game.css';
-import PlayerSubmissionForm from './PlayerSubmissionForm';
-import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
+import React, { Component } from "react";
+import "./Game.css";
+import PlayerSubmissionForm from "./PlayerSubmissionForm";
+import FinalPoem from "./FinalPoem";
+import RecentSubmission from "./RecentSubmission";
 
 class Game extends Component {
-
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerNumber: 1,
+      isFormSubmitted: false,
+      userInputs: ["The", "the"],
+      userSubmission: "",
+      finalPoem: []
+    };
   }
 
-  render() {
+  handleRecentSubmission = userInputs => {
+    console.log(userInputs);
+
+    let { adj1, noun1, adv, verb, adj2, noun2 } = userInputs;
+    let sentence = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`;
+
+    let finalPoem = this.state.finalPoem;
+    finalPoem.push(sentence);
+    // userInputs.forEach(data => console.log(data));
+
+    this.setState({
+      isFormSubmitted: true,
+      playerNumber: this.state.playerNumber + 1,
+      userSubmission: sentence,
+      finalPoem: finalPoem
+    });
+  };
 
-    const exampleFormat = FIELDS.map((field) => {
+  render() {
+    const exampleFormat = FIELDS.map(field => {
       if (field.key) {
         return field.placeholder;
       } else {
@@ -20,24 +44,34 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const userSubmission = this.state.userSubmission;
+
     return (
       <div className="Game">
         <h2>Game</h2>
 
-        <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
+        <p>
+          Each player should take turns filling out and submitting the form
+          below. Each turn should be done individually and <em>in secret!</em>{" "}
+          Take inspiration from the revealed recent submission. When all players
+          are finished, click the final button on the bottom to reveal the
+          entire poem.
+        </p>
 
         <p>Please follow the following format for your poetry submission:</p>
 
-        <p className="Game__format-example">
-          { exampleFormat }
-        </p>
-
-        <RecentSubmission />
+        <p className="Game__format-example">{exampleFormat}</p>
 
-        <PlayerSubmissionForm />
+        {this.state.isFormSubmitted && (
+          <RecentSubmission submission={this.state.userSubmission} />
+        )}
 
-        <FinalPoem />
+        <PlayerSubmissionForm
+          playerNumber={this.state.playerNumber}
+          handleRecentSubmission={this.handleRecentSubmission}
+        />
 
+        <FinalPoem finalPoem={this.state.finalPoem} />
       </div>
     );
   }
@@ -46,31 +80,31 @@ class Game extends Component {
 const FIELDS = [
   "The",
   {
-    key: 'adj1',
-    placeholder: 'adjective',
+    key: "adj1",
+    placeholder: "adjective"
   },
   {
-    key: 'noun1',
-    placeholder: 'noun',
+    key: "noun1",
+    placeholder: "noun"
   },
   {
-    key: 'adv',
-    placeholder: 'adverb',
+    key: "adv",
+    placeholder: "adverb"
   },
   {
-    key: 'verb',
-    placeholder: 'verb',
+    key: "verb",
+    placeholder: "verb"
   },
   "the",
   {
-    key: 'adj2',
-    placeholder: 'adjective',
+    key: "adj2",
+    placeholder: "adjective"
   },
   {
-    key: 'noun2',
-    placeholder: 'noun',
+    key: "noun2",
+    placeholder: "noun"
   },
-  ".",
+  "."
 ];
 
 export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..32106a46 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,33 +1,104 @@
-import React, { Component } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { Component } from "react";
+import "./PlayerSubmissionForm.css";
 
 class PlayerSubmissionForm extends Component {
-
   constructor(props) {
     super(props);
+
+    // 
+    this.state = {
+      // playerNumber: 1,
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: ""
+    };
   }
 
-  render() {
+  handleSubmit = e => {
+    e.preventDefault();
+    // this.setState({
+    //
+    // });
+    this.props.handleRecentSubmission(this.state);
+  };
+
+  handleChange = event => {
+    let name = event.target.name;
+    let value = event.target.value;
+    // console.log(name, value);
+    this.setState({
+      [name]: value
+    });
+  };
 
+  render() {
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
-
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</h3>
+        <h1>{this.props.propTest}</h1>
+        <form
+          className="PlayerSubmissionForm__form"
+          onSubmit={this.handleSubmit}
+        >
           <div className="PlayerSubmissionForm__poem-inputs">
-
             {
               // Put your form inputs here... We've put in one below as an example
             }
             <input
-              placeholder="hm..."
-              type="text" />
+              placeholder="adjective"
+              type="text"
+              name="adj1"
+              value={this.state.adj1}
+              onChange={this.handleChange}
+            />
+            <input
+              placeholder="noun"
+              type="text"
+              name="noun1"
+              value={this.state.noun1}
+              onChange={this.handleChange}
+            />
 
+            <input
+              placeholder="adverb"
+              type="text"
+              name="adv"
+              value={this.state.adv}
+              onChange={this.handleChange}
+            />
+            <input
+              placeholder="verb"
+              type="text"
+              name="verb"
+              value={this.state.verb}
+              onChange={this.handleChange}
+            />
+            <input
+              placeholder="adjective"
+              type="text"
+              name="adj2"
+              value={this.state.adj2}
+              onChange={this.handleChange}
+            />
+
+            <input
+              placeholder="noun"
+              type="text"
+              name="noun2"
+              value={this.state.noun2}
+              onChange={this.handleChange}
+            />
           </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..79c5128f 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import './RecentSubmission.css';
+import React from "react";
+import "./RecentSubmission.css";
 
-const RecentSubmission = (props) => {
+const RecentSubmission = props => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.submission}</p>
     </div>
   );
-}
+};  
 
 export default RecentSubmission;

From 0e73b01766574d4c5ec450216544988590f67d04 Mon Sep 17 00:00:00 2001
From: Sara Shah Baig <sarashahbaig@gmail.com>
Date: Wed, 11 Dec 2019 21:20:41 -0800
Subject: [PATCH 2/4] final poem code updated so it can view each line in a
 different line or paragrap

---
 src/components/FinalPoem.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b18ee983..ccfd3086 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,18 +4,21 @@ import "./FinalPoem.css";
 const FinalPoem = props => {
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-        {props.finalPoem.map(para => (
-          <p>{para}</p>
-        ))}
-      </section>
+      {props.shouldShowFinalPoem && (
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {props.finalPoem.map(para => (
+            <p>{para}</p>
+          ))}
+        </section>
+      )}
 
       <div className="FinalPoem__reveal-btn-container">
         <input
           type="button"
           value="We are finished: Reveal the Poem"
           className="FinalPoem__reveal-btn"
+          onClick={props.showFinalPoem}
         />
       </div>
     </div>

From 3cbdc4d3b10306c078690badcaf6b24fd5611c43 Mon Sep 17 00:00:00 2001
From: Sara Shah Baig <sarashahbaig@gmail.com>
Date: Wed, 11 Dec 2019 21:21:39 -0800
Subject: [PATCH 3/4] shouldShowFinalPoem added to show final poem

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e119008e..d94373a0 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,7 +13,8 @@ class Game extends Component {
       isFormSubmitted: false,
       userInputs: ["The", "the"],
       userSubmission: "",
-      finalPoem: []
+      finalPoem: [],
+      shouldShowFinalPoem: false
     };
   }
 
@@ -35,6 +36,12 @@ class Game extends Component {
     });
   };
 
+  showFinalPoem = () => {
+    this.setState({
+      shouldShowFinalPoem: true
+    });
+  };
+
   render() {
     const exampleFormat = FIELDS.map(field => {
       if (field.key) {
@@ -71,7 +78,11 @@ class Game extends Component {
           handleRecentSubmission={this.handleRecentSubmission}
         />
 
-        <FinalPoem finalPoem={this.state.finalPoem} />
+        <FinalPoem
+          shouldShowFinalPoem={this.state.shouldShowFinalPoem}
+          showFinalPoem={this.showFinalPoem}
+          finalPoem={this.state.finalPoem}
+        />
       </div>
     );
   }

From 6b5f083c3d5f72dabf0d2d993c14484d5a4f4a6c Mon Sep 17 00:00:00 2001
From: Sara Shah Baig <sarashahbaig@gmail.com>
Date: Thu, 12 Dec 2019 20:04:29 -0800
Subject: [PATCH 4/4]  light pink when they are blank

---
 src/components/PlayerSubmissionForm.css |  2 +-
 src/components/PlayerSubmissionForm.js  | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 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 32106a46..6c1c0e97 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,7 +5,7 @@ class PlayerSubmissionForm extends Component {
   constructor(props) {
     super(props);
 
-    // 
+    //
     this.state = {
       // playerNumber: 1,
       adj1: "",
@@ -22,7 +22,14 @@ class PlayerSubmissionForm extends Component {
     // this.setState({
     //
     // });
+
     this.props.handleRecentSubmission(this.state);
+    const keys = Object.keys(this.state);
+    keys.map(key => {
+      this.setState({
+        [key]: ""
+      });
+    });
   };
 
   handleChange = event => {
@@ -47,7 +54,9 @@ class PlayerSubmissionForm extends Component {
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            <span>The </span>
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="adjective"
               type="text"
               name="adj1"
@@ -55,6 +64,7 @@ class PlayerSubmissionForm extends Component {
               onChange={this.handleChange}
             />
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="noun"
               type="text"
               name="noun1"
@@ -63,6 +73,7 @@ class PlayerSubmissionForm extends Component {
             />
 
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="adverb"
               type="text"
               name="adv"
@@ -70,13 +81,16 @@ class PlayerSubmissionForm extends Component {
               onChange={this.handleChange}
             />
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="verb"
               type="text"
               name="verb"
               value={this.state.verb}
               onChange={this.handleChange}
             />
+            <span>the </span>
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="adjective"
               type="text"
               name="adj2"
@@ -85,6 +99,7 @@ class PlayerSubmissionForm extends Component {
             />
 
             <input
+              className="PlayerSubmissionForm__input--invalid"
               placeholder="noun"
               type="text"
               name="noun2"
@@ -95,6 +110,7 @@ class PlayerSubmissionForm extends Component {
 
           <div className="PlayerSubmissionForm__submit">
             <input
+              className="PlayerSubmissionForm__input--invalid"
               type="submit"
               value="Submit Line"
               className="PlayerSubmissionForm__submit-btn"