From 1f484348b400c9533d06ee6825dc932267a2d33e Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Wed, 11 Dec 2019 15:45:30 -0800
Subject: [PATCH 1/7] line is captured, player number is incremented

---
 src/components/Game.js                 | 26 +++++++-
 src/components/PlayerSubmissionForm.js | 87 +++++++++++++++++++++++---
 2 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..8eb7201f 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,27 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      lines: [],
+    }
   }
 
+  addLine = (lineObject) => {
+      // console.log(lineObject)
+      // const placeholder = ["one"]
+      // if (this.state.lines.length === 0 ) {
+      //   this.setState({lines: placeholder})
+      // }
+      // else {
+      const addingLine = []
+      addingLine.push(this.state.lines)
+      addingLine.push(lineObject)
+      this.setState({lines: addingLine})
+      // }
+  }
+
+
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -22,6 +41,7 @@ class Game extends Component {
 
     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>
@@ -34,7 +54,11 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm 
+          addLineCallback = {(lineObject) => this.addLine(lineObject)}
+          
+        />
+        {console.log(this.state.lines)}
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..36a2e938 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,33 +1,102 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
+  // state can possibly hold the default words so that way they can be reset properly? 
+
+  // props will include be the callback function
+
+  // props is probably also the next available ID number because Game knows how many players it has already and will call the next one over. Yea, that makes the most sense. 
+
+  // Starting with the tags in the state so that upon reset, it'll always start with this text in it. 
   constructor(props) {
     super(props);
+    this.state = {
+      player: 1,
+      adj1: 'adjective',
+      noun1: 'noun', 
+      adverb: 'adverb', 
+      verb: 'verb', 
+      adj2: 'adjective', 
+      noun2: 'noun'
+    }
+  }
+  //on word tabbing or entering, this takes the new information and adjusts state accordingly
+  onInputChange = (event) => {
+    //emtpy updated state
+    const updatedState = {}
+    //sets the data and name/label for setState
+    const field = event.target.name;
+    const value = event.target.value
+    //updates the updated state at the particular name to have the value of value
+    //bracket notation is needed when what we're passing into it is a variable
+    updatedState[field] = value
+    //updated the state with the updatedState object
+    this.setState(updatedState)
   }
 
+  //on submit, this takes the event and then takes all the items into state very momentarily
+  onSubmitLine = (event) => {
+    console.log("blarg")
+    event.preventDefault();
+    const line = {
+      adj1: this.state.adj1,
+      noun1: this.state.noun1, 
+      adverb: this.state.adverb, 
+      verb: this.state.verb, 
+      adj2: this.state.adj2, 
+      noun2: this.state.noun2,
+    }
+
+    //then, it uses the line to pass into the addLineCallback function, which will go back to Game
+    this.props.addLineCallback(line);
+
+    //this resets the form for use next time
+    this.setState({
+      adj1: 'adjective',
+      noun1: 'noun', 
+      adverb: 'adverb', 
+      verb: 'verb', 
+      adj2: 'adjective', 
+      noun2: 'noun'
+    })
+
+    let inc = this.state.player
+    inc = inc + 1
+    this.setState({player: inc})
+
+  }
+
+
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{`${this.state.player}`}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form"  onSubmit={this.onSubmitLine}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
             }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            The 
+            <input name="adj1" placeholder={this.state.adj1} type="text" onChange={this.onInputChange} value={this.state.adj1} />
+            <input name="noun1" placeholder={this.state.noun1} type="text" onChange={this.onInputChange} value={this.state.noun1} />
+            <input name="adverb" placeholder={this.state.adverb} type="text" onChange={this.onInputChange} value={this.state.adverb} />
+            <input name="verb" placeholder={this.state.verb} type="text" onChange={this.onInputChange} value={this.state.verb} />
+            the
+            <input name="adj2" placeholder={this.state.adj2} type="text" onChange={this.onInputChange} value={this.state.adj2} />
+            <input name="noun2" placeholder={this.state.noun2} type="text" onChange={this.onInputChange} value={this.state.noun2} />
+            .
           </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>
@@ -35,4 +104,8 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+}
+
 export default PlayerSubmissionForm;

From a3eac55bffe33315cbc8441fed59e37948a4b8fc Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Wed, 11 Dec 2019 15:57:57 -0800
Subject: [PATCH 2/7] line saved is string

---
 src/components/Game.js                 | 15 ++++-----------
 src/components/PlayerSubmissionForm.js | 15 +++++----------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 8eb7201f..8e0b617b 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,22 +13,15 @@ class Game extends Component {
     }
   }
 
-  addLine = (lineObject) => {
-      // console.log(lineObject)
-      // const placeholder = ["one"]
-      // if (this.state.lines.length === 0 ) {
-      //   this.setState({lines: placeholder})
-      // }
-      // else {
+  addLine = (lineString) => {
       const addingLine = []
       addingLine.push(this.state.lines)
-      addingLine.push(lineObject)
+      addingLine.push(lineString)
       this.setState({lines: addingLine})
-      // }
+      console.log(lineString)
   }
 
 
-
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -55,7 +48,7 @@ class Game extends Component {
         <RecentSubmission />
 
         <PlayerSubmissionForm 
-          addLineCallback = {(lineObject) => this.addLine(lineObject)}
+          addLineCallback = {(lineString) => this.addLine(lineString)}
           
         />
         {console.log(this.state.lines)}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 36a2e938..a319e28d 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -39,18 +39,14 @@ class PlayerSubmissionForm extends Component {
 
   //on submit, this takes the event and then takes all the items into state very momentarily
   onSubmitLine = (event) => {
-    console.log("blarg")
+
     event.preventDefault();
-    const line = {
-      adj1: this.state.adj1,
-      noun1: this.state.noun1, 
-      adverb: this.state.adverb, 
-      verb: this.state.verb, 
-      adj2: this.state.adj2, 
-      noun2: this.state.noun2,
-    }
+
+    // this concatenates the line together
+    let line = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adverb} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
 
     //then, it uses the line to pass into the addLineCallback function, which will go back to Game
+
     this.props.addLineCallback(line);
 
     //this resets the form for use next time
@@ -70,7 +66,6 @@ class PlayerSubmissionForm extends Component {
   }
 
 
-
   render() {
 
     return (

From 55f606e4b47602ebd42406a0bc8978e1c9aa4dc0 Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Wed, 11 Dec 2019 17:10:02 -0800
Subject: [PATCH 3/7] final poem displays based on a conditional

---
 src/components/FinalPoem.js | 38 +++++++++++++++++++++++++++----------
 src/components/Game.js      | 12 ++++++++++--
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..51a2766b 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,18 +3,36 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const lines = props.lines
 
-      </section>
+  let finalPoem = lines.map((line, i) => {
+    return (
+      <p key= {i}>{line}</p> 
+    )
+  })
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+  if (props.inPlay === true) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+  
+        </section>
+  
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ () => {props.onFinishPoemCallback()}}/>
+        </div>
       </div>
-    </div>
-  );
+    );
+  } 
+
+  else {
+    return (
+      <div>
+      {finalPoem}
+      </div>
+    )
+  }
 }
 
-export default FinalPoem;
+export default FinalPoem;
\ No newline at end of file
diff --git a/src/components/Game.js b/src/components/Game.js
index 8e0b617b..eb53ca84 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,6 +10,7 @@ class Game extends Component {
     super(props);
     this.state = {
       lines: [],
+      inplay: true,
     }
   }
 
@@ -21,6 +22,10 @@ class Game extends Component {
       console.log(lineString)
   }
 
+  finishPoem = () => {
+    console.log("blarg")
+      this.setState({inplay: false})
+  }
 
   render() {
 
@@ -51,9 +56,12 @@ class Game extends Component {
           addLineCallback = {(lineString) => this.addLine(lineString)}
           
         />
-        {console.log(this.state.lines)}
 
-        <FinalPoem />
+        <FinalPoem
+        lines = {this.state.lines}
+        inPlay = {this.state.inplay}
+        onFinishPoemCallback = {() => this.finishPoem()}
+        />
 
       </div>
     );

From 89ce143b6015c0096d1ca50f7d310a56e7c69c66 Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Thu, 12 Dec 2019 22:03:53 -0800
Subject: [PATCH 4/7] conditional show of most recent line

---
 src/components/FinalPoem.js        |  5 ++---
 src/components/Game.js             |  8 ++++----
 src/components/RecentSubmission.js | 24 ++++++++++++++++++------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 51a2766b..68a4c2c9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -7,7 +7,7 @@ const FinalPoem = (props) => {
 
   let finalPoem = lines.map((line, i) => {
     return (
-      <p key= {i}>{line}</p> 
+      <p key= {i}>{line}</p>
     )
   })
 
@@ -16,9 +16,7 @@ const FinalPoem = (props) => {
       <div className="FinalPoem">
         <section className="FinalPoem__poem">
           <h3>Final Poem</h3>
-  
         </section>
-  
         <div className="FinalPoem__reveal-btn-container">
           <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ () => {props.onFinishPoemCallback()}}/>
         </div>
@@ -29,6 +27,7 @@ const FinalPoem = (props) => {
   else {
     return (
       <div>
+        {console.log(lines)}
       {finalPoem}
       </div>
     )
diff --git a/src/components/Game.js b/src/components/Game.js
index eb53ca84..41071e37 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -19,11 +19,9 @@ class Game extends Component {
       addingLine.push(this.state.lines)
       addingLine.push(lineString)
       this.setState({lines: addingLine})
-      console.log(lineString)
   }
 
   finishPoem = () => {
-    console.log("blarg")
       this.setState({inplay: false})
   }
 
@@ -50,11 +48,13 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission 
+        inplay = {this.state.inplay}
+        lines = {this.state.lines}
+        />
 
         <PlayerSubmissionForm 
           addLineCallback = {(lineString) => this.addLine(lineString)}
-          
         />
 
         <FinalPoem
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..76287635 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,12 +2,24 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
-  );
+
+  const lines = props.lines
+  const inplay = props.inplay
+  
+  if (inplay === false || lines.length === 0) {
+    return ( <div> </div> )
+  }
+
+  else {
+    return (
+      <div>
+        <div className="RecentSubmission">
+          <h3>The Most Recent Submission</h3>
+          <p className="RecentSubmission__submission">{lines[lines.length -1]}</p>
+        </div>
+      </div>
+    )
+  }
 }
 
 export default RecentSubmission;

From 4423371504784a0947d420155a778237b10b87f6 Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Thu, 12 Dec 2019 23:02:44 -0800
Subject: [PATCH 5/7] conditional display

---
 src/components/FinalPoem.js            |  9 +++++----
 src/components/Game.js                 | 11 ++++-------
 src/components/PlayerSubmissionForm.js |  9 +--------
 src/components/RecentSubmission.js     |  3 +--
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 68a4c2c9..99af8f19 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -14,9 +14,6 @@ const FinalPoem = (props) => {
   if (props.inPlay === true) {
     return (
       <div className="FinalPoem">
-        <section className="FinalPoem__poem">
-          <h3>Final Poem</h3>
-        </section>
         <div className="FinalPoem__reveal-btn-container">
           <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ () => {props.onFinishPoemCallback()}}/>
         </div>
@@ -27,8 +24,12 @@ const FinalPoem = (props) => {
   else {
     return (
       <div>
-        {console.log(lines)}
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+        </section>
       {finalPoem}
+      {console.log(lines.length)}
+      {console.log(finalPoem)}
       </div>
     )
   }
diff --git a/src/components/Game.js b/src/components/Game.js
index 41071e37..266785a9 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -48,14 +48,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission 
-        inplay = {this.state.inplay}
-        lines = {this.state.lines}
-        />
+        {this.state.inplay ? <RecentSubmission lines = {this.state.lines}/> : '' }
 
-        <PlayerSubmissionForm 
-          addLineCallback = {(lineString) => this.addLine(lineString)}
-        />
+   
+        {this.state.inplay ? <PlayerSubmissionForm addLineCallback = {(lineString) => this.addLine(lineString)}/> : '' }
+        
 
         <FinalPoem
         lines = {this.state.lines}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index a319e28d..4a86104c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,16 +4,11 @@ import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
-  // state can possibly hold the default words so that way they can be reset properly? 
-
-  // props will include be the callback function
-
-  // props is probably also the next available ID number because Game knows how many players it has already and will call the next one over. Yea, that makes the most sense. 
-
   // Starting with the tags in the state so that upon reset, it'll always start with this text in it. 
   constructor(props) {
     super(props);
     this.state = {
+      inPlay: props.inPlay,
       player: 1,
       adj1: 'adjective',
       noun1: 'noun', 
@@ -62,10 +57,8 @@ class PlayerSubmissionForm extends Component {
     let inc = this.state.player
     inc = inc + 1
     this.setState({player: inc})
-
   }
 
-
   render() {
 
     return (
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 76287635..b91e1758 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -4,9 +4,8 @@ import './RecentSubmission.css';
 const RecentSubmission = (props) => {
 
   const lines = props.lines
-  const inplay = props.inplay
   
-  if (inplay === false || lines.length === 0) {
+  if (lines.length === 0) {
     return ( <div> </div> )
   }
 

From 281c804e8641284c8bd7d32652ee581c2a7ec536 Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Fri, 13 Dec 2019 01:08:14 -0800
Subject: [PATCH 6/7] basic functionality with styling

---
 src/components/Game.js                  |   3 +-
 src/components/PlayerSubmissionForm.css |   2 +-
 src/components/PlayerSubmissionForm.js  | 118 ++++++++++++++++--------
 3 files changed, 80 insertions(+), 43 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 266785a9..84e5522b 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -15,8 +15,7 @@ class Game extends Component {
   }
 
   addLine = (lineString) => {
-      const addingLine = []
-      addingLine.push(this.state.lines)
+      let addingLine = this.state.lines
       addingLine.push(lineString)
       this.setState({lines: addingLine})
   }
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 4a86104c..e126c141 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -10,12 +10,18 @@ class PlayerSubmissionForm extends Component {
     this.state = {
       inPlay: props.inPlay,
       player: 1,
-      adj1: 'adjective',
-      noun1: 'noun', 
-      adverb: 'adverb', 
-      verb: 'verb', 
-      adj2: 'adjective', 
-      noun2: 'noun'
+      adj1: '',
+      noun1: '', 
+      adverb: '', 
+      verb: '', 
+      adj2: '', 
+      noun2: '',
+      adj1Class: 'invalid',
+      noun1Class: 'invalid',
+      adverbClass: 'invalid',
+      verbClass: 'invalid',
+      adj2Class: 'invalid',
+      noun2Class: 'invalid',
     }
   }
   //on word tabbing or entering, this takes the new information and adjusts state accordingly
@@ -30,6 +36,28 @@ class PlayerSubmissionForm extends Component {
     updatedState[field] = value
     //updated the state with the updatedState object
     this.setState(updatedState)
+
+    switch(field) {
+      case "adj1":
+        this.setState({adj1Class: 'valid'});
+        break;
+      case "noun1":
+          this.setState({noun1Class: 'valid'});
+          break;
+      case "adverb":
+          this.setState({adverbClass: 'valid'});
+          break;
+      case "verb":
+          this.setState({verbClass: 'valid'});
+          break;
+      case "adj2":
+          this.setState({adj2Class: 'valid'});
+          break;
+      case "noun2":
+          this.setState({noun2Class: 'valid'});
+          break;
+      default: {}
+    }
   }
 
   //on submit, this takes the event and then takes all the items into state very momentarily
@@ -38,6 +66,7 @@ class PlayerSubmissionForm extends Component {
     event.preventDefault();
 
     // this concatenates the line together
+    
     let line = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adverb} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
 
     //then, it uses the line to pass into the addLineCallback function, which will go back to Game
@@ -46,12 +75,18 @@ class PlayerSubmissionForm extends Component {
 
     //this resets the form for use next time
     this.setState({
-      adj1: 'adjective',
-      noun1: 'noun', 
-      adverb: 'adverb', 
-      verb: 'verb', 
-      adj2: 'adjective', 
-      noun2: 'noun'
+      adj1: '',
+      noun1: '', 
+      adverb: '', 
+      verb: '', 
+      adj2: '', 
+      noun2: '',
+      adj1Class: 'invalid',
+      noun1Class: 'invalid',
+      adverbClass: 'invalid',
+      verbClass: 'invalid',
+      adj2Class: 'invalid',
+      noun2Class: 'invalid',
     })
 
     let inc = this.state.player
@@ -61,39 +96,42 @@ class PlayerSubmissionForm extends Component {
 
   render() {
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{`${this.state.player}`}</h3>
-
-        <form className="PlayerSubmissionForm__form"  onSubmit={this.onSubmitLine}>
-
-          <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            The 
-            <input name="adj1" placeholder={this.state.adj1} type="text" onChange={this.onInputChange} value={this.state.adj1} />
-            <input name="noun1" placeholder={this.state.noun1} type="text" onChange={this.onInputChange} value={this.state.noun1} />
-            <input name="adverb" placeholder={this.state.adverb} type="text" onChange={this.onInputChange} value={this.state.adverb} />
-            <input name="verb" placeholder={this.state.verb} type="text" onChange={this.onInputChange} value={this.state.verb} />
-            the
-            <input name="adj2" placeholder={this.state.adj2} type="text" onChange={this.onInputChange} value={this.state.adj2} />
-            <input name="noun2" placeholder={this.state.noun2} type="text" onChange={this.onInputChange} value={this.state.noun2} />
-            .
-          </div>
-
-          <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"/>
-          </div>
-        </form>
-      </div>
-    );
+      return (
+        <div className="PlayerSubmissionForm">
+          <h3>Player Submission Form for Player #{`${this.state.player}`}</h3>
+
+          <form className="PlayerSubmissionForm__form"  onSubmit={this.onSubmitLine}>
+
+            <div className="PlayerSubmissionForm__poem-inputs">
+
+              The 
+              <input name="adj1" Placeholder={'adjective'} type="text" class={`PlayerSubmissionForm__input--${this.state.adj1Class}`} onChange={this.onInputChange} value={this.state.adj1} />
+              <input name="noun1" Placeholder={'noun'} type="text" class={`PlayerSubmissionForm__input--${this.state.noun1Class}`} onChange={this.onInputChange} value={this.state.noun1} />
+              <input name="adverb" Placeholder={'adverb'} type="text" class={`PlayerSubmissionForm__input--${this.state.adverbClass}`} onChange={this.onInputChange} value={this.state.adverb} />
+              <input name="verb" Placeholder={'verb'} type="text" class={`PlayerSubmissionForm__input--${this.state.verbClass}`} onChange={this.onInputChange} value={this.state.verb} />
+              the
+              <input name="adj2" Placeholder={'adjective'} type="text" class={`PlayerSubmissionForm__input--${this.state.adj2Class}`} onChange={this.onInputChange} value={this.state.adj2} />
+              <input name="noun2" Placeholder={'noun'} type="text" class={`PlayerSubmissionForm__input--${this.state.noun2Class}`} onChange={this.onInputChange} value={this.state.noun2} />
+              .
+            </div>
+
+            <div className="PlayerSubmissionForm__submit">
+              <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"/>
+            </div>
+          </form>
+        </div>
+      );
   }
 }
 
 PlayerSubmissionForm.propTypes = {
   addLineCallback: PropTypes.func.isRequired,
+  adj1: PropTypes.string.isRequired,
+  noun1: PropTypes.string.isRequired,
+  adverb: PropTypes.string.isRequired,
+  verb: PropTypes.string.isRequired,
+  adj2: PropTypes.string.isRequired,
+  noun2: PropTypes.string.isRequired,
 }
 
 export default PlayerSubmissionForm;

From 3062f1423afd65fc7f4a2dca1676a21b59ac681b Mon Sep 17 00:00:00 2001
From: C Gutierrez <gutierrez.clara.es@gmail.com>
Date: Fri, 13 Dec 2019 01:23:25 -0800
Subject: [PATCH 7/7] added comments

---
 src/components/FinalPoem.js            | 14 ++++++++++----
 src/components/Game.js                 |  6 ++++--
 src/components/PlayerSubmissionForm.js | 21 ++++++++-------------
 src/components/RecentSubmission.js     |  3 +++
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 99af8f19..fa3df3c4 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,16 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  // want to write '.prop' less 
   const lines = props.lines
 
+  // maps the lines into individual paragraphs
   let finalPoem = lines.map((line, i) => {
     return (
       <p key= {i}>{line}</p>
     )
   })
 
+  // if the poem is in play, shows the button that will be used to stop the poem. Note, if there is text in the fields this does NOT submit it and end the poem, that line will be lost. 
   if (props.inPlay === true) {
     return (
       <div className="FinalPoem">
@@ -20,7 +24,8 @@ const FinalPoem = (props) => {
       </div>
     );
   } 
-
+  
+  // if the poem is not in play, shows the final poem
   else {
     return (
       <div>
@@ -28,11 +33,12 @@ const FinalPoem = (props) => {
           <h3>Final Poem</h3>
         </section>
       {finalPoem}
-      {console.log(lines.length)}
-      {console.log(finalPoem)}
       </div>
     )
   }
-}
 
+}
+FinalPoem.propTypes = {
+  onFinishPoemCallback: PropTypes.func.isRequired,
+}
 export default FinalPoem;
\ No newline at end of file
diff --git a/src/components/Game.js b/src/components/Game.js
index 84e5522b..83356883 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -6,6 +6,8 @@ import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
 
+  // lines is the running collection of lines in the poem, stored as strings in an array
+  // inplay determines whether the poem is still being added to or whether it is completed
   constructor(props) {
     super(props);
     this.state = {
@@ -25,7 +27,6 @@ class Game extends Component {
   }
 
   render() {
-
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -47,12 +48,13 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
+        {/* Based on whether the poem is in play, Recent Submission and Player Submission Form appear in the render.  */}
         {this.state.inplay ? <RecentSubmission lines = {this.state.lines}/> : '' }
 
    
         {this.state.inplay ? <PlayerSubmissionForm addLineCallback = {(lineString) => this.addLine(lineString)}/> : '' }
         
-
+        {/* Final poem displays the "finish" button when the poem is in play and then the actual final poem when not, so it is always rendered.  */}
         <FinalPoem
         lines = {this.state.lines}
         inPlay = {this.state.inplay}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index e126c141..f2412074 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -16,6 +16,7 @@ class PlayerSubmissionForm extends Component {
       verb: '', 
       adj2: '', 
       noun2: '',
+      // the classes below are used to get the faint pink for blank displays
       adj1Class: 'invalid',
       noun1Class: 'invalid',
       adverbClass: 'invalid',
@@ -37,6 +38,7 @@ class PlayerSubmissionForm extends Component {
     //updated the state with the updatedState object
     this.setState(updatedState)
 
+    
     switch(field) {
       case "adj1":
         this.setState({adj1Class: 'valid'});
@@ -65,15 +67,13 @@ class PlayerSubmissionForm extends Component {
 
     event.preventDefault();
 
-    // this concatenates the line together
-    
+    // this concatenates the line together into a string
     let line = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adverb} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
 
     //then, it uses the line to pass into the addLineCallback function, which will go back to Game
-
     this.props.addLineCallback(line);
 
-    //this resets the form for use next time
+    //this resets the form for use next time, including reseting the classes to their original, invalid values
     this.setState({
       adj1: '',
       noun1: '', 
@@ -89,9 +89,10 @@ class PlayerSubmissionForm extends Component {
       noun2Class: 'invalid',
     })
 
-    let inc = this.state.player
-    inc = inc + 1
-    this.setState({player: inc})
+    // this increments the player count
+    let increment = this.state.player
+    increment = increment + 1
+    this.setState({player: increment})
   }
 
   render() {
@@ -126,12 +127,6 @@ class PlayerSubmissionForm extends Component {
 
 PlayerSubmissionForm.propTypes = {
   addLineCallback: PropTypes.func.isRequired,
-  adj1: PropTypes.string.isRequired,
-  noun1: PropTypes.string.isRequired,
-  adverb: PropTypes.string.isRequired,
-  verb: PropTypes.string.isRequired,
-  adj2: PropTypes.string.isRequired,
-  noun2: PropTypes.string.isRequired,
 }
 
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index b91e1758..a4fa1aa3 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -3,12 +3,15 @@ import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
 
+    // want to write '.prop' less 
   const lines = props.lines
   
+  // if no lines are in the poem (if this is player 1) section does not render
   if (lines.length === 0) {
     return ( <div> </div> )
   }
 
+  //only displays the last line (string) in the array
   else {
     return (
       <div>