From 1783619f1833ac9752821ff7d234cebc75f8e5ea Mon Sep 17 00:00:00 2001
From: brilatimer <brihiramine@gmail.com>
Date: Wed, 11 Dec 2019 16:53:16 -0800
Subject: [PATCH 1/4] wave 0 + 1: passing first input state to game,
 implementing full sentence input

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

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..9e32d4d4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,17 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerInputs: [], // This will be an array of arrays
+    };
+  }
+
+  addPlayerInputWordsArray = (inputWordsArray) => {
+    this.setState((state, props) => ({
+      playerInputs: [...state.playerInputs, inputWordsArray]
+    }));
+    console.log(inputWordsArray);
   }
 
   render() {
@@ -34,7 +45,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..90105720 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,6 +5,26 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      [0]: "", // Initialize value for each input to empty string
+      [1]: "",
+      [2]: "",
+      [3]: "",
+      [4]: "",
+      [5]: "",
+    };
+  }
+
+  textInputChange(event, inputId) {
+    this.setState({[inputId]: event.target.value});
+  }
+
+  sendPlayerInputWordsArray = (e) => {
+    e.preventDefault();
+    console.log(this.state[0]);
+    console.log(this.state[1]);
+    //this.props.addPlayerInputWordsArray([this.state[0]])
   }
 
   render() {
@@ -13,16 +33,47 @@ class PlayerSubmissionForm extends Component {
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
-
+        <form className="PlayerSubmissionForm__form" 
+            onSubmit={ this.sendPlayerInputWordsArray }
+            >
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            The
+            <input
+              placeholder="adjective"
+              type="text"
+              onChange={(event) => {this.textInputChange(event, 0) }}
+              />
+
+            <input
+              placeholder="noun"
+              type="text"
+              />
+
+            <input
+              placeholder="adverb"
+              type="text"
+              />
+              
+              <input
+              placeholder="verb"
+              type="text"
+              />
+
+          the
+            <input
+              placeholder="adjective"
+              type="text"
+              />
+
             <input
-              placeholder="hm..."
-              type="text" />
+              placeholder="noun"
+              type="text"
+             />
+            .
 
           </div>
 

From e81d0fd3ebdc3f99f95e3395627b547dfc489a3b Mon Sep 17 00:00:00 2001
From: brilatimer <brihiramine@gmail.com>
Date: Thu, 12 Dec 2019 13:10:34 -0800
Subject: [PATCH 2/4] wave 1 complete: poem entry appearing appropriately

---
 src/components/Game.js                 |  2 +-
 src/components/PlayerSubmissionForm.js | 12 +++++++++---
 src/components/RecentSubmission.js     | 27 +++++++++++++++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 9e32d4d4..ae2fd431 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -43,7 +43,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmissionWordsArray={this.state.playerInputs.slice(-1).pop()}  />
 
         <PlayerSubmissionForm addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 90105720..1ebda364 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -22,9 +22,10 @@ class PlayerSubmissionForm extends Component {
 
   sendPlayerInputWordsArray = (e) => {
     e.preventDefault();
-    console.log(this.state[0]);
-    console.log(this.state[1]);
-    //this.props.addPlayerInputWordsArray([this.state[0]])
+    // console.log(this.state[0]);
+    // console.log(this.state[1]);
+    const inputWords = [this.state[0], this.state[1], this.state[2], this.state[3], this.state[4], this.state[5]];
+    this.props.addPlayerInputWordsArray(inputWords);
   }
 
   render() {
@@ -51,27 +52,32 @@ class PlayerSubmissionForm extends Component {
             <input
               placeholder="noun"
               type="text"
+              onChange={(event) => {this.textInputChange(event, 1) }}
               />
 
             <input
               placeholder="adverb"
               type="text"
+              onChange={(event) => {this.textInputChange(event, 2) }}
               />
               
               <input
               placeholder="verb"
               type="text"
+              onChange={(event) => {this.textInputChange(event, 3) }}
               />
 
           the
             <input
               placeholder="adjective"
               type="text"
+              onChange={(event) => {this.textInputChange(event, 4) }}
               />
 
             <input
               placeholder="noun"
               type="text"
+              onChange={(event) => {this.textInputChange(event, 5) }}
              />
             .
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..8d6625e5 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,11 +1,36 @@
 import React from 'react';
 import './RecentSubmission.css';
 
+
+function showLine(props) {
+  if (props.recentSubmissionWordsArray) {
+    return (
+      <div>
+      The&nbsp;
+        {props.recentSubmissionWordsArray[0]}&nbsp;
+        {props.recentSubmissionWordsArray[1]}&nbsp;
+        {props.recentSubmissionWordsArray[2]}&nbsp;
+        {props.recentSubmissionWordsArray[3]} the&nbsp;
+        {props.recentSubmissionWordsArray[4]}&nbsp;
+        {props.recentSubmissionWordsArray[5]}
+        .
+        {/*magical spaces: https://stackoverflow.com/questions/46656476/rendering-empty-space-in-react */}
+        </div> 
+    );
+  } else {
+    return null;
+  }
+}
+
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">
+        {showLine(props)}
+      
+      
+      </p>
     </div>
   );
 }

From 02a6ef34287d69dd30ce3b9cdbf62f3fb38cbb50 Mon Sep 17 00:00:00 2001
From: brilatimer <brihiramine@gmail.com>
Date: Thu, 12 Dec 2019 22:05:36 -0800
Subject: [PATCH 3/4] player count grows

---
 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 ae2fd431..53dffc13 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -45,7 +45,7 @@ class Game extends Component {
 
         <RecentSubmission recentSubmissionWordsArray={this.state.playerInputs.slice(-1).pop()}  />
 
-        <PlayerSubmissionForm addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
+        <PlayerSubmissionForm playerNumber={this.state.playerInputs.length + 1} addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1ebda364..fe0114f2 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -32,7 +32,7 @@ class PlayerSubmissionForm extends Component {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</h3>
 
         <form className="PlayerSubmissionForm__form" 
             onSubmit={ this.sendPlayerInputWordsArray }

From 0b1edcf26d2642012ca84f4b33062873c350c3b6 Mon Sep 17 00:00:00 2001
From: brilatimer <brihiramine@gmail.com>
Date: Thu, 12 Dec 2019 22:37:21 -0800
Subject: [PATCH 4/4] push sentence state into finalPoem

---
 src/components/FinalPoem.js            | 27 +++++++++++++++++++++++++-
 src/components/Game.js                 |  3 +--
 src/components/PlayerSubmissionForm.js |  2 --
 src/components/RecentSubmission.js     |  6 ++----
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..179c1822 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,11 +3,36 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  function showSentence(sentenceArray) {
+    if (sentenceArray) {
+      console.log(sentenceArray);
+      return (
+        <div>
+        The&nbsp;
+          {sentenceArray[0]}&nbsp;
+          {sentenceArray[1]}&nbsp;
+          {sentenceArray[2]}&nbsp;
+          {sentenceArray[3]} the&nbsp;
+          {sentenceArray[4]}&nbsp;
+          {sentenceArray[5]}
+          .
+          </div> 
+      );
+    } else {
+      return null;
+    }
+  }
+
+  function mapSentences(props) {props.finalPoemLines.map((sentenceArray) => {
+    return <div>{showSentence(sentenceArray)}</div>;
+  })};
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {mapSentences(props)} 
+        {/* I'm able to see the state via console.log, but the sentences won't display */}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 53dffc13..44510505 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -18,7 +18,6 @@ class Game extends Component {
     this.setState((state, props) => ({
       playerInputs: [...state.playerInputs, inputWordsArray]
     }));
-    console.log(inputWordsArray);
   }
 
   render() {
@@ -47,7 +46,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm playerNumber={this.state.playerInputs.length + 1} addPlayerInputWordsArray={this.addPlayerInputWordsArray} />
 
-        <FinalPoem />
+        <FinalPoem finalPoemLines= {this.state.playerInputs}/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index fe0114f2..832657f9 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -22,8 +22,6 @@ class PlayerSubmissionForm extends Component {
 
   sendPlayerInputWordsArray = (e) => {
     e.preventDefault();
-    // console.log(this.state[0]);
-    // console.log(this.state[1]);
     const inputWords = [this.state[0], this.state[1], this.state[2], this.state[3], this.state[4], this.state[5]];
     this.props.addPlayerInputWordsArray(inputWords);
   }
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 8d6625e5..792e58eb 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ import './RecentSubmission.css';
 function showLine(props) {
   if (props.recentSubmissionWordsArray) {
     return (
-      <div>
+      <span>
       The&nbsp;
         {props.recentSubmissionWordsArray[0]}&nbsp;
         {props.recentSubmissionWordsArray[1]}&nbsp;
@@ -15,7 +15,7 @@ function showLine(props) {
         {props.recentSubmissionWordsArray[5]}
         .
         {/*magical spaces: https://stackoverflow.com/questions/46656476/rendering-empty-space-in-react */}
-        </div> 
+        </span> 
     );
   } else {
     return null;
@@ -28,8 +28,6 @@ const RecentSubmission = (props) => {
       <h3>The Most Recent Submission</h3>
       <p className="RecentSubmission__submission">
         {showLine(props)}
-      
-      
       </p>
     </div>
   );