From 82f942df548781f0f1087718decfb6ea3d9be7e9 Mon Sep 17 00:00:00 2001
From: Morgan Schuler <morganlschuler@gmail.com>
Date: Thu, 12 Dec 2019 19:30:31 -0800
Subject: [PATCH 1/5] completed wave 1

---
 src/components/Game.js                 | 79 +++++++++++++----------
 src/components/PlayerSubmissionForm.js | 87 ++++++++++++++++++++++++--
 src/components/RecentSubmission.js     | 20 ++++++
 3 files changed, 149 insertions(+), 37 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..11e2a881 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -4,14 +4,57 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+const FIELDS = [
+  "The",
+  {
+    key: 'adj1',
+    placeholder: 'adjective',
+  },
+  {
+    key: 'noun1',
+    placeholder: 'noun',
+  },
+  {
+    key: 'adv',
+    placeholder: 'adverb',
+  },
+  {
+    key: 'verb',
+    placeholder: 'verb',
+  },
+  "the",
+  {
+    key: 'adj2',
+    placeholder: 'adjective',
+  },
+  {
+    key: 'noun2',
+    placeholder: 'noun',
+  },
+  ".",
+];
+
 class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      poem: []
+    };
   }
 
+  addLineToPoem = (poemLine) => {
+    this.setState((prevState) => ({
+      poem: [
+        ...prevState.poem,
+        poemLine
+      ]
+    }));
+  }
+ // ... is saying: in this spot on the code, take all the elements on the array and add them one by one
+ // prevState(variable name) will always give you the most current version of state
   render() {
-
+    console.log(this.state.poem)
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -32,9 +75,9 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission onSubmitLine={this.state.poem}/>
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm onSubmitLine={this.addLineToPoem} currentPlayer={this.state.poem.length + 1} />
 
         <FinalPoem />
 
@@ -43,34 +86,4 @@ class Game extends Component {
   }
 }
 
-const FIELDS = [
-  "The",
-  {
-    key: 'adj1',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun1',
-    placeholder: 'noun',
-  },
-  {
-    key: 'adv',
-    placeholder: 'adverb',
-  },
-  {
-    key: 'verb',
-    placeholder: 'verb',
-  },
-  "the",
-  {
-    key: 'adj2',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun2',
-    placeholder: 'noun',
-  },
-  ".",
-];
-
 export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..4b1fa3ba 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,13 +5,49 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adjective1: "",
+      noun1: "", 
+      adverb: "", 
+      verb: "", 
+      adjective2: "",
+      noun2: ""
+    };
+  }
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  }
+
+  handleClick = (event) => {
+    const {
+      adjective1,
+      noun1, 
+      adverb, 
+      verb, 
+      adjective2,
+      noun2
+    } = this.state;
+    const poemLine = `The ${adjective1} ${noun1} ${adverb} ${verb} the ${adjective2} ${noun2}.`;
+    
+    event.preventDefault();
+
+    this.props.onSubmitLine(poemLine);
+    this.setState({
+      adjective1: "",
+      noun1: "", 
+      adverb: "", 
+      verb: "", 
+      adjective2: "",
+      noun2: ""
+    });
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.currentPlayer}</h3>
 
         <form className="PlayerSubmissionForm__form" >
 
@@ -20,14 +56,57 @@ class PlayerSubmissionForm extends Component {
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            <span>The</span>
+            <input
+              name="adjective1"
+              placeholder="adjective"
+              type="text"
+              value={this.state.adjective1}
+              onChange={this.handleChange}
+            />
+            <input
+              name="noun1"
+              placeholder="noun"
+              type="text"
+              value={this.state.noun1}
+              onChange={this.handleChange}
+            />
+            <input
+              name="adverb"
+              placeholder="adverb"
+              type="text"
+              value={this.state.adverb}
+              onChange={this.handleChange}
+            />
+            <input
+              name="verb"
+              placeholder="verb"
+              type="text"
+              value={this.state.verb}
+              onChange={this.handleChange}
+            /> 
+            <span>the</span>
+            <input
+              name="adjective2"
+              placeholder="adjective"
+              type="text"
+              value={this.state.adjective2}
+              onChange={this.handleChange}
+            />
             <input
-              placeholder="hm..."
-              type="text" />
+              name="noun2"
+              placeholder="noun"
+              type="text"
+              value={this.state.noun2}
+              onChange={this.handleChange}
+            />
+            <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" onClick={this.handleClick} />
           </div>
         </form>
       </div>
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..31aa02ee 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,7 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  
+  // const lines = props.lines.map((line) => {
+  //   return (
+  //     <PlayerSubmissionForm 
+  //       handleChangeCallback={props.handleChange}
+  //       handleClickCallback={props.handleClick}
+  //       {...line}
+  //     />
+  //   )
+  // });
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
@@ -10,4 +22,12 @@ const RecentSubmission = (props) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  lines: PropTypes.array,
+  handleChange: PropTypes.func,
+  onSelectPet: PropTypes.func
+}
+
 export default RecentSubmission;
+
+

From c8ca1aade37224324487fea11138ceea79c94cb7 Mon Sep 17 00:00:00 2001
From: Morgan Schuler <morganlschuler@gmail.com>
Date: Thu, 12 Dec 2019 22:27:10 -0800
Subject: [PATCH 2/5] added logic for wave 2

---
 src/components/FinalPoem.js             |  12 +-
 src/components/Game.js                  |  25 +++-
 src/components/PlayerSubmissionForm.css |   2 +-
 src/components/PlayerSubmissionForm.js  | 149 +++++++++++++++++++-----
 src/components/RecentSubmission.js      |  19 ++-
 5 files changed, 152 insertions(+), 55 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..a6e7fa75 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -5,14 +5,18 @@ const FinalPoem = (props) => {
 
   return (
     <div className="FinalPoem">
+      {props.showPoem ? (
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+    {props.poem.map((poemLine, i) => (
+      <p key={i}>{poemLine}</p>
+    ))}
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      ) : (
+        <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.onDisplayPoem} />
       </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index 11e2a881..a4fa5f28 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -39,7 +39,8 @@ class Game extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      poem: []
+      poem: [],
+      showPoem: false
     };
   }
 
@@ -53,7 +54,11 @@ class Game extends Component {
   }
  // ... is saying: in this spot on the code, take all the elements on the array and add them one by one
  // prevState(variable name) will always give you the most current version of state
-  render() {
+  handleDisplayPoem = () => {
+    this.setState({ showPoem: true });
+  } 
+ 
+ render() {
     console.log(this.state.poem)
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -75,11 +80,19 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission onSubmitLine={this.state.poem}/>
+        {!this.state.showPoem && (
+          <>
 
-        <PlayerSubmissionForm onSubmitLine={this.addLineToPoem} currentPlayer={this.state.poem.length + 1} />
-
-        <FinalPoem />
+        <RecentSubmission onSubmitLine={this.state.poem[this.state.poem.length -1]}/>
+      
+        <PlayerSubmissionForm fields={FIELDS} onSubmitLine={this.addLineToPoem} currentPlayer={this.state.poem.length + 1} />
+        </>
+        )}
+        <FinalPoem 
+        poem={this.state.poem}
+        showPoem={this.state.showPoem}
+        onDisplayPoem={this.handleDisplayPoem}
+        />
 
       </div>
     );
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 4b1fa3ba..523c9d3a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,44 +4,104 @@ import './PlayerSubmissionForm.css';
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
-    super(props);
+    super(props);	    super(props);
     this.state = {
-      adjective1: "",
-      noun1: "", 
-      adverb: "", 
-      verb: "", 
-      adjective2: "",
-      noun2: ""
+      adjectiveFirst: '',
+      nounFirst: '',
+      adverb: '',
+      verb: '',
+      adjectiveSecond: '',
+      nounSecond: ''
     };
-  }
+  }	  
+
 
   handleChange = (event) => {
-    this.setState({ [event.target.name]: event.target.value });
-  }
+    const newState = {};
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+    console.log(this.state);
+  };
 
   handleClick = (event) => {
-    const {
-      adjective1,
-      noun1, 
-      adverb, 
-      verb, 
-      adjective2,
-      noun2
-    } = this.state;
-    const poemLine = `The ${adjective1} ${noun1} ${adverb} ${verb} the ${adjective2} ${noun2}.`;
-    
     event.preventDefault();
+    const sentence = this.props.fields.reduce((acc, field, i) => {
+      if (field.key) {
+        return `${acc} ${this.state[field.name].trim()}`;
+      }
+      else {
+        if (i > 0 && i < (this.props.fields.length - 1)) 
+          return `${acc} ${field}`;
+        }
+        return `${acc}${field}`;
+      }
+    }, '');
+
+    this.props.onSubmitLine(sentence);
 
-    this.props.onSubmitLine(poemLine);
     this.setState({
-      adjective1: "",
-      noun1: "", 
-      adverb: "", 
-      verb: "", 
-      adjective2: "",
-      noun2: ""
+      adjectiveFirst: '',
+      nounFirst: '',
+      adverb: '',
+      verb: '',
+      adjectiveSecond: '',
+      nounSecond: ''
     });
-  }
+  };
+
+
+
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       adjective1: "",
+//       noun1: "", 
+//       adverb: "", 
+//       verb: "", 
+//       adjective2: "",
+//       noun2: ""
+//     };
+//   }
+
+//   handleChange = (event) => {
+//     this.setState({ [event.target.name]: event.target.value });
+//   }
+
+//   handleClick = (event) => {
+//     event.preventDefault();
+
+//     const sentence = this.props.fields.reduce((acc, field, i) => {
+//       if (field.key) {
+//         return `${acc} $this.state[field.name].trim()]`;
+//       } 
+//       else {
+//         if (i > 0 && i < (this.props.fields.length - 1))
+
+//         return `${acc} ${field}`;
+//       } 
+//       return `${acc}${field}`;
+//     }
+//   }, '');
+
+//     //   adjective1,
+//     //   noun1, 
+//     //   adverb, 
+//     //   verb, 
+//     //   adjective2,
+//     //   noun2
+//     // } = this.state;
+//     // const poemLine = `The ${adjective1} ${noun1} ${adverb} ${verb} the ${adjective2} ${noun2}.`;
+    
+//     this.props.onSubmitLine(poemLine);
+//     this.setState({
+//       adjective1: "",
+//       noun1: "", 
+//       adverb: "", 
+//       verb: "", 
+//       adjective2: "",
+//       noun2: ""
+//     });
+//   
 
   render() {
 
@@ -55,14 +115,34 @@ class PlayerSubmissionForm extends Component {
 
             {
               // Put your form inputs here... We've put in one below as an example
-            }
-            <span>The</span>
+          this.props.fields.map((field, i) => {
+            	if (field.key) {
+            	  return (
+                  <input
+              	  placeholder={field.placeholder}
+                  value={this.state[field.name]}
+                  type="text"
+                  name={field.name}
+                  onChange={this.handleChange}
+                  className={this.state[field.name] ? "" : "red"}
+                  key={field.name} 
+                      />
+                ); 
+                } 
+                else {
+                    return <span key={i}>{field}</span>;}
+                })
+              }    
+          </div>	         
+
+            {/* /* <span>The</span>
             <input
               name="adjective1"
               placeholder="adjective"
               type="text"
               value={this.state.adjective1}
               onChange={this.handleChange}
+              className={this.state[]}
             />
             <input
               name="noun1"
@@ -70,6 +150,7 @@ class PlayerSubmissionForm extends Component {
               type="text"
               value={this.state.noun1}
               onChange={this.handleChange}
+              className={this.state["noun1"]}
             />
             <input
               name="adverb"
@@ -77,6 +158,7 @@ class PlayerSubmissionForm extends Component {
               type="text"
               value={this.state.adverb}
               onChange={this.handleChange}
+              className={this.state["adverb1"]}
             />
             <input
               name="verb"
@@ -84,6 +166,7 @@ class PlayerSubmissionForm extends Component {
               type="text"
               value={this.state.verb}
               onChange={this.handleChange}
+              className={this.state["verb"]}
             /> 
             <span>the</span>
             <input
@@ -92,6 +175,7 @@ class PlayerSubmissionForm extends Component {
               type="text"
               value={this.state.adjective2}
               onChange={this.handleChange}
+              className={this.state["adjective2"]}
             />
             <input
               name="noun2"
@@ -99,11 +183,12 @@ class PlayerSubmissionForm extends Component {
               type="text"
               value={this.state.noun2}
               onChange={this.handleChange}
+              className={this.state["noun2"]}
             />
-            <span>.</span>
+            <span>.</span> */}
             
 
-          </div>
+          {/* </div> */} 
 
           <div className="PlayerSubmissionForm__submit">
             <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" onClick={this.handleClick} />
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 31aa02ee..9a3e9596 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -3,21 +3,16 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  
-  // const lines = props.lines.map((line) => {
-  //   return (
-  //     <PlayerSubmissionForm 
-  //       handleChangeCallback={props.handleChange}
-  //       handleClickCallback={props.handleClick}
-  //       {...line}
-  //     />
-  //   )
-  // });
-
   return (
     <div className="RecentSubmission">
+      {props.lastLine && (
+        <>
+
+      
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.lastLine}</p>
+      </>
+      )}
     </div>
   );
 }

From d86865702ac4d2e0b6fd2a810065c0b6e1979c41 Mon Sep 17 00:00:00 2001
From: Morgan Schuler <morganlschuler@gmail.com>
Date: Thu, 12 Dec 2019 23:35:22 -0800
Subject: [PATCH 3/5] updated display poem line section

---
 src/components/Game.js                  |  8 +++-
 src/components/PlayerSubmissionForm.css |  4 ++
 src/components/PlayerSubmissionForm.js  | 58 +------------------------
 3 files changed, 13 insertions(+), 57 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index a4fa5f28..2b05407f 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -9,27 +9,33 @@ const FIELDS = [
   {
     key: 'adj1',
     placeholder: 'adjective',
+    name: 'adjectiveFirst',
   },
   {
     key: 'noun1',
     placeholder: 'noun',
+    name: 'nounFirst'
   },
   {
     key: 'adv',
     placeholder: 'adverb',
+    name: 'adverb'
   },
   {
     key: 'verb',
     placeholder: 'verb',
+    name: 'verb'
   },
   "the",
   {
     key: 'adj2',
     placeholder: 'adjective',
+    name: 'adjectiveSecond'
   },
   {
     key: 'noun2',
     placeholder: 'noun',
+    name: 'nounSecond'
   },
   ".",
 ];
@@ -83,7 +89,7 @@ class Game extends Component {
         {!this.state.showPoem && (
           <>
 
-        <RecentSubmission onSubmitLine={this.state.poem[this.state.poem.length -1]}/>
+        <RecentSubmission lastLine={this.state.poem[this.state.poem.length -1]}/>
       
         <PlayerSubmissionForm fields={FIELDS} onSubmitLine={this.addLineToPoem} currentPlayer={this.state.poem.length + 1} />
         </>
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 6d6f98eb..fce16195 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -38,3 +38,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.red {
+  background-color: red
+}
\ No newline at end of file
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 523c9d3a..7b9821b6 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -13,7 +13,7 @@ class PlayerSubmissionForm extends Component {
       adjectiveSecond: '',
       nounSecond: ''
     };
-  }	  
+  }	 
 
 
   handleChange = (event) => {
@@ -30,7 +30,7 @@ class PlayerSubmissionForm extends Component {
         return `${acc} ${this.state[field.name].trim()}`;
       }
       else {
-        if (i > 0 && i < (this.props.fields.length - 1)) 
+        if (i > 0 && i < (this.props.fields.length - 1)) {
           return `${acc} ${field}`;
         }
         return `${acc}${field}`;
@@ -49,60 +49,6 @@ class PlayerSubmissionForm extends Component {
     });
   };
 
-
-
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       adjective1: "",
-//       noun1: "", 
-//       adverb: "", 
-//       verb: "", 
-//       adjective2: "",
-//       noun2: ""
-//     };
-//   }
-
-//   handleChange = (event) => {
-//     this.setState({ [event.target.name]: event.target.value });
-//   }
-
-//   handleClick = (event) => {
-//     event.preventDefault();
-
-//     const sentence = this.props.fields.reduce((acc, field, i) => {
-//       if (field.key) {
-//         return `${acc} $this.state[field.name].trim()]`;
-//       } 
-//       else {
-//         if (i > 0 && i < (this.props.fields.length - 1))
-
-//         return `${acc} ${field}`;
-//       } 
-//       return `${acc}${field}`;
-//     }
-//   }, '');
-
-//     //   adjective1,
-//     //   noun1, 
-//     //   adverb, 
-//     //   verb, 
-//     //   adjective2,
-//     //   noun2
-//     // } = this.state;
-//     // const poemLine = `The ${adjective1} ${noun1} ${adverb} ${verb} the ${adjective2} ${noun2}.`;
-    
-//     this.props.onSubmitLine(poemLine);
-//     this.setState({
-//       adjective1: "",
-//       noun1: "", 
-//       adverb: "", 
-//       verb: "", 
-//       adjective2: "",
-//       noun2: ""
-//     });
-//   
-
   render() {
 
     return (

From 56e615abb8c3ea4adb09a6339f53d9b6f7340d48 Mon Sep 17 00:00:00 2001
From: Morgan Schuler <morganlschuler@gmail.com>
Date: Fri, 13 Dec 2019 13:54:42 -0800
Subject: [PATCH 4/5] adjustments to plater submission form

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

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 7b9821b6..a33cc85f 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -13,8 +13,7 @@ class PlayerSubmissionForm extends Component {
       adjectiveSecond: '',
       nounSecond: ''
     };
-  }	 
-
+  }
 
   handleChange = (event) => {
     const newState = {};

From 380a281284f82e4e047936174d821d6779d34fa4 Mon Sep 17 00:00:00 2001
From: Morgan Schuler <morganlschuler@gmail.com>
Date: Fri, 13 Dec 2019 13:56:04 -0800
Subject: [PATCH 5/5] fixed dynamic form

---
 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 a33cc85f..edf92838 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -13,7 +13,7 @@ class PlayerSubmissionForm extends Component {
       adjectiveSecond: '',
       nounSecond: ''
     };
-  }
+  }	 
 
   handleChange = (event) => {
     const newState = {};