From 887a048c629d1f503b0c46cbb811ecec4ca942ed Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Tue, 18 Jun 2019 16:21:44 -0700
Subject: [PATCH 1/5] got submission form to work

---
 src/components/Game.js                 | 16 ++++-
 src/components/PlayerSubmissionForm.js | 91 ++++++++++++++++++++++++--
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..c5bea96b 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,9 +8,22 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      lines: []
+    };
+  }
+
+  addLine = (line) => {
+    const lines = this.state.lines;
+    lines.push(line);
+    // console.log(line);
+    this.setState({
+      lines,
+    });
   }
 
   render() {
+    console.log(this.state);
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -34,7 +47,8 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm 
+          addLineCallback={this.addLine}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..4dd15b1a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,25 +5,108 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      playerNum: 1,
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    };
+  }
+
+  onChangeHandler = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+    this.setState(field);
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const line = ["The", this.state.adj1, this.state.noun1, this.state.adv, this.state.verb, "the", this.state.adj2, this.state.noun2 + "."].join(" ");
+    // console.log(line);
+    
+    this.props.addLineCallback(line);
+
+    this.setState({
+      playerNum: this.state.playerNum + 1,
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
   }
 
   render() {
 
+    // console.log(this.state);
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.playerNum }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <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
             }
+            The
+
+            <input
+              name="adj1"
+              value={this.state.adj1}
+              placeholder="adjective"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
             <input
-              placeholder="hm..."
-              type="text" />
+              name="noun1"
+              value={this.state.noun1}
+              placeholder="noun"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
 
+            <input
+              name="adv"
+              value={this.state.adv}
+              placeholder="adverb"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            <input
+              name="verb"
+              value={this.state.verb}
+              placeholder="verb"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            the 
+
+            <input
+              name="adj2"
+              value={this.state.adj2}
+              placeholder="adjective"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+
+            <input
+              name="noun2"
+              value={this.state.noun2}
+              placeholder="noun"
+              type="text"
+              onChange={this.onChangeHandler} 
+            />
+            .
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From 5da90a2a3e7e7f26e83b0f3daf352f26dd67e5c6 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 19 Jun 2019 15:46:24 -0700
Subject: [PATCH 2/5] revealed final poem when clicked

---
 src/components/FinalPoem.js |  7 +++++--
 src/components/Game.js      | 23 +++++++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..93d2c27d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,16 +2,19 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const handleClick = () => {
+    props.handleClickCallback();
+  }
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <p>{props.lines}</p>
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input onClick={handleClick} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index c5bea96b..715ded09 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -9,21 +9,34 @@ class Game extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      lines: []
+      lines: [],
+      disPlayLines: false
     };
   }
 
   addLine = (line) => {
     const lines = this.state.lines;
     lines.push(line);
-    // console.log(line);
     this.setState({
       lines,
     });
   }
 
+  handleClickFinalPoem = () => {
+    this.setState({
+      disPlayLines: true
+    })
+  }
+
+
   render() {
-    console.log(this.state);
+    // console.log(this.state);
+    let lines;
+    if (this.state.disPlayLines){
+      lines = this.state.lines;
+    } else {
+      lines = '';
+    }
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -50,7 +63,9 @@ class Game extends Component {
         <PlayerSubmissionForm 
           addLineCallback={this.addLine}/>
 
-        <FinalPoem />
+        <FinalPoem 
+          lines={lines}
+          handleClickCallback={this.handleClickFinalPoem}/>
 
       </div>
     );

From df5a4c9d22a9d2fa80f8eabdb69dd9d4f2fd56e2 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 19 Jun 2019 16:24:42 -0700
Subject: [PATCH 3/5] indented lines in the final poem section

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

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 93d2c27d..cb6ab5da 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,6 +2,7 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  
   const handleClick = () => {
     props.handleClickCallback();
   }
@@ -10,7 +11,7 @@ const FinalPoem = (props) => {
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        <p>{props.lines}</p>
+        <article>{props.lines}</article>
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 715ded09..4d40dd8e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -16,7 +16,7 @@ class Game extends Component {
 
   addLine = (line) => {
     const lines = this.state.lines;
-    lines.push(line);
+    lines.push(<p key={this.state.lines.length + 1}>{line}</p>);
     this.setState({
       lines,
     });
@@ -65,7 +65,8 @@ class Game extends Component {
 
         <FinalPoem 
           lines={lines}
-          handleClickCallback={this.handleClickFinalPoem}/>
+          handleClickCallback={this.handleClickFinalPoem}
+          />
 
       </div>
     );

From fb9daf48d41c55404516840adba145a7162f611a Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Wed, 19 Jun 2019 16:59:07 -0700
Subject: [PATCH 4/5] hide submission buttons when finished

---
 src/components/FinalPoem.css |  4 ++++
 src/components/FinalPoem.js  | 11 +++++++++--
 src/components/Game.js       | 30 ++++++++++++++++++++----------
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css
index 67dda943..e2655277 100644
--- a/src/components/FinalPoem.css
+++ b/src/components/FinalPoem.css
@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.hide {
+  display: none;
+}
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index cb6ab5da..c07de187 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -7,6 +7,13 @@ const FinalPoem = (props) => {
     props.handleClickCallback();
   }
 
+  // console.log(props.finalized);
+  let buttonStyle = "FinalPoem__reveal-btn-container";
+  let clickStyle = "FinalPoem__reveal-btn";
+  if (props.finalized) {
+    buttonStyle = "FinalPoem__reveal-btn-container hide";
+    clickStyle = "FinalPoem__reveal-btn hide";
+  }
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
@@ -14,8 +21,8 @@ const FinalPoem = (props) => {
         <article>{props.lines}</article>
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input onClick={handleClick} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <div className={buttonStyle}>
+        <input onClick={handleClick} type="button" value="We are finished: Reveal the Poem" className={clickStyle} />
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 4d40dd8e..2e00c006 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,7 +10,7 @@ class Game extends Component {
     super(props);
     this.state = {
       lines: [],
-      disPlayLines: false
+      finalized: false,
     };
   }
 
@@ -24,18 +24,28 @@ class Game extends Component {
 
   handleClickFinalPoem = () => {
     this.setState({
-      disPlayLines: true
-    })
+      finalized: true,
+    });
   }
 
 
   render() {
     // console.log(this.state);
     let lines;
-    if (this.state.disPlayLines){
+    let submissionForm;
+    let recentSubmission;
+    let finalized;
+    if (this.state.finalized){
       lines = this.state.lines;
+      submissionForm = '';
+      finalized = true;
     } else {
       lines = '';
+      submissionForm = (<PlayerSubmissionForm 
+        addLineCallback={this.addLine}/>);
+      recentSubmission = (<RecentSubmission />);
+      finalized = false;
+      
     }
 
     const exampleFormat = FIELDS.map((field) => {
@@ -58,15 +68,15 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {recentSubmission}
 
-        <PlayerSubmissionForm 
-          addLineCallback={this.addLine}/>
+        {submissionForm}
 
         <FinalPoem 
-          lines={lines}
-          handleClickCallback={this.handleClickFinalPoem}
-          />
+        lines={lines}
+        handleClickCallback={this.handleClickFinalPoem}
+        finalized = {finalized}
+        />
 
       </div>
     );

From c609e2426ccce97ef91ffd95ed1ee5b25b24f8e0 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Thu, 20 Jun 2019 15:23:00 -0700
Subject: [PATCH 5/5] added prop types

---
 src/components/FinalPoem.js            |  6 +++++-
 src/components/Game.js                 | 12 ++++++++----
 src/components/PlayerSubmissionForm.js | 25 +++++++++++--------------
 src/components/RecentSubmission.js     |  7 ++++++-
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index c07de187..436dcb1a 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
   
@@ -7,7 +8,6 @@ const FinalPoem = (props) => {
     props.handleClickCallback();
   }
 
-  // console.log(props.finalized);
   let buttonStyle = "FinalPoem__reveal-btn-container";
   let clickStyle = "FinalPoem__reveal-btn";
   if (props.finalized) {
@@ -28,4 +28,8 @@ const FinalPoem = (props) => {
   );
 }
 
+FinalPoem.propTypes = {
+  lines: PropTypes.array
+}
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 2e00c006..9fb2d8cc 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -30,24 +30,28 @@ class Game extends Component {
 
 
   render() {
-    // console.log(this.state);
     let lines;
     let submissionForm;
     let recentSubmission;
     let finalized;
     if (this.state.finalized){
-      lines = this.state.lines;
+      lines = this.state.lines.reverse();
       submissionForm = '';
       finalized = true;
     } else {
-      lines = '';
+      lines = null;
       submissionForm = (<PlayerSubmissionForm 
         addLineCallback={this.addLine}/>);
-      recentSubmission = (<RecentSubmission />);
+      recentSubmission = (<RecentSubmission 
+        lastLine={this.state.lines.reverse().slice(0,1)}/>);
       finalized = false;
       
     }
 
+    if (this.state.lines.length === 0) {
+      recentSubmission = '';
+    }
+
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 4dd15b1a..3529a305 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,8 +1,13 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
+  static propTypes = {
+    addLineCallback: PropTypes.func,
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -25,7 +30,6 @@ class PlayerSubmissionForm extends Component {
   handleSubmit = (event) => {
     event.preventDefault();
     const line = ["The", this.state.adj1, this.state.noun1, this.state.adv, this.state.verb, "the", this.state.adj2, this.state.noun2 + "."].join(" ");
-    // console.log(line);
     
     this.props.addLineCallback(line);
 
@@ -42,8 +46,6 @@ class PlayerSubmissionForm extends Component {
 
   render() {
 
-    // console.log(this.state);
-
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{ this.state.playerNum }</h3>
@@ -51,13 +53,8 @@ class PlayerSubmissionForm extends Component {
         <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
-            }
             The
-
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="adj1"
               value={this.state.adj1}
               placeholder="adjective"
@@ -65,7 +62,7 @@ class PlayerSubmissionForm extends Component {
               onChange={this.onChangeHandler} 
             />
 
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="noun1"
               value={this.state.noun1}
               placeholder="noun"
@@ -73,7 +70,7 @@ class PlayerSubmissionForm extends Component {
               onChange={this.onChangeHandler} 
             />
 
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="adv"
               value={this.state.adv}
               placeholder="adverb"
@@ -81,7 +78,7 @@ class PlayerSubmissionForm extends Component {
               onChange={this.onChangeHandler} 
             />
 
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="verb"
               value={this.state.verb}
               placeholder="verb"
@@ -91,7 +88,7 @@ class PlayerSubmissionForm extends Component {
 
             the 
 
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="adj2"
               value={this.state.adj2}
               placeholder="adjective"
@@ -99,7 +96,7 @@ class PlayerSubmissionForm extends Component {
               onChange={this.onChangeHandler} 
             />
 
-            <input
+            <input className="PlayerSubmissionFormt__input--invalid"
               name="noun2"
               value={this.state.noun2}
               placeholder="noun"
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..f57db2e1 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,18 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <section className="RecentSubmission__submission">{ props.lastLine }</section>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  lastLine: PropTypes.array
+}
+
 export default RecentSubmission;