From 322c2c642ee19c8213130099fefe0b9d347aea45 Mon Sep 17 00:00:00 2001
From: Mariya Burrows <mariya.burrows@gmail.com>
Date: Wed, 11 Dec 2019 22:06:50 -0800
Subject: [PATCH 1/3] completed wave 1

---
 src/components/Game.js                 | 13 ++++-
 src/components/PlayerSubmissionForm.js | 80 +++++++++++++++++++++++---
 2 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..f1939418 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 = {
+      sentences: []
+    }
+  }
+
+  onPlayerSubmit = (submissionData) => {
+    this.setState({
+      sentences: this.state.sentences.concat(submissionData)
+    })
+
   }
 
   render() {
@@ -34,7 +45,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm onFormSubmit={this.onPlayerSubmit}/>
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..348df8e1 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,28 +1,88 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      words: ["", "", "", "", "", ""],
+      count: 1
+    }
   }
 
+  onInputChange = (event) => {
+    const name = event.target.name 
+    const value = event.target.value
+
+    const index = parseInt(name, 10);
+    let oldWords = this.state.words;
+    oldWords[index] = value
+    
+    this.setState({
+      words: oldWords
+    })
+  }
+
+  clickedPlayerSubmission = (event) => {
+    event.preventDefault()
+    const sentence = this.state.words.join(" ")
+    this.props.onFormSubmit(sentence)
+    this.setState({
+      words: ["", "", "", "", "", ""],
+      count: this.state.count + 1
+    })
+  }
+
+  
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.state.count }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.clickedPlayerSubmission} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+            The
+            <input 
+              value={this.state.words[0]}
+              placeholder="Adjective"
+              type="text"
+              onChange={this.onInputChange}
+              name="0" />
+
+            <input value={this.state.words[1]}
+              placeholder="Noun"
+              type="text"
+              onChange={this.onInputChange}
+              name="1" />
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+            <input value={this.state.words[2]}
+              placeholder="Adverb"
+              type="text"
+              onChange={this.onInputChange}
+              name="2" />
+
+            <input value={this.state.words[3]}
+              placeholder="Verb"
+              type="text"
+              onChange={this.onInputChange}
+              name="3" />
+
+            the 
+            <input value={this.state.words[4]}
+              placeholder="Adjective"
+              type="text"
+              onChange={this.onInputChange}
+              name="4" />
+
+            <input value={this.state.words[5]}
+              placeholder="Noun"
+              type="text"
+              onChange={this.onInputChange}
+              name="5" />.
 
           </div>
 
@@ -35,4 +95,8 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  onFormSubmit: PropTypes.func.isRequired,
+}
+
 export default PlayerSubmissionForm;

From a4c7372ee12928c5ec3523a16b3a07f092fc3df4 Mon Sep 17 00:00:00 2001
From: Mariya Burrows <mariya.burrows@gmail.com>
Date: Thu, 12 Dec 2019 19:52:38 -0800
Subject: [PATCH 2/3] finished wave 2

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

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..08062f8a 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,13 +1,19 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+  const sentences = props.sentences.map((sentence) => {
+    return (
+    <p> { sentence } </p>
+    );
+  })
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        { sentences }
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
@@ -17,4 +23,10 @@ const FinalPoem = (props) => {
   );
 }
 
+FinalPoem.propTypes = {
+  sentences: PropTypes.arrayOf(PropTypes.string).isRequired
+
+}
 export default FinalPoem;
+
+
diff --git a/src/components/Game.js b/src/components/Game.js
index f1939418..8793b6e0 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -47,7 +47,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm onFormSubmit={this.onPlayerSubmit}/>
 
-        <FinalPoem />
+        <FinalPoem sentences={this.state.sentences}/>
 
       </div>
     );

From d1cdd06a6ab726f065530326b1412af5ac80f593 Mon Sep 17 00:00:00 2001
From: Mariya Burrows <mariya.burrows@gmail.com>
Date: Thu, 12 Dec 2019 21:03:20 -0800
Subject: [PATCH 3/3] completed wave 3

---
 src/components/FinalPoem.js            | 26 ++++++++++++++++----------
 src/components/Game.js                 | 21 +++++++++++++++++----
 src/components/PlayerSubmissionForm.js | 23 +++++++++++++++++------
 src/components/RecentSubmission.js     | 20 ++++++++++++++------
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 08062f8a..98811967 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,29 +3,35 @@ import './FinalPoem.css';
 import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
-  const sentences = props.sentences.map((sentence) => {
+  const sentences = props.sentences.map((sentence, i) => {
     return (
-    <p> { sentence } </p>
+    <p key={i}> { sentence } </p>
     );
   })
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-        { sentences }
-      </section>
-
+      {
+        props.completedGame &&
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          { sentences }
+        </section>
+      }
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {
+          !props.completedGame &&  
+          <input onClick={props.onPoemComplete} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        }
       </div>
     </div>
   );
 }
 
 FinalPoem.propTypes = {
-  sentences: PropTypes.arrayOf(PropTypes.string).isRequired
-
+  sentences: PropTypes.arrayOf(PropTypes.string).isRequired,
+  completedGame: PropTypes.bool.isRequired,
+  onPoemComplete: PropTypes.func.isRequired
 }
 export default FinalPoem;
 
diff --git a/src/components/Game.js b/src/components/Game.js
index 8793b6e0..bda48852 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,7 +10,8 @@ class Game extends Component {
     super(props);
 
     this.state = {
-      sentences: []
+      sentences: [],
+      completed: false
     }
   }
 
@@ -21,6 +22,12 @@ class Game extends Component {
 
   }
 
+  completePoem = () => {
+    this.setState({
+      completed: true
+    })
+  }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -31,6 +38,8 @@ class Game extends Component {
       }
     }).join(" ");
 
+    const lastIndex= this.state.sentences.length - 1
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -43,11 +52,15 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmission={this.state.sentences[lastIndex]} />
+        {
+          !this.state.completed && 
+          <PlayerSubmissionForm onFormSubmit={this.onPlayerSubmit}/>
+        }
 
-        <PlayerSubmissionForm onFormSubmit={this.onPlayerSubmit}/>
+        
 
-        <FinalPoem sentences={this.state.sentences}/>
+        <FinalPoem sentences={this.state.sentences} completedGame={this.state.completed} onPoemComplete={this.completePoem}/>
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 348df8e1..7a19096e 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -46,39 +46,50 @@ class PlayerSubmissionForm extends Component {
 
           <div className="PlayerSubmissionForm__poem-inputs">
             The
-            <input 
+            <input
+              className={this.state.words[0].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"}
               value={this.state.words[0]}
               placeholder="Adjective"
               type="text"
               onChange={this.onInputChange}
               name="0" />
 
-            <input value={this.state.words[1]}
+            <input 
+              className={this.state.words[1].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"}
+              value={this.state.words[1]}
               placeholder="Noun"
               type="text"
               onChange={this.onInputChange}
               name="1" />
 
-            <input value={this.state.words[2]}
+            <input
+              className={this.state.words[2].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"} 
+              value={this.state.words[2]}
               placeholder="Adverb"
               type="text"
               onChange={this.onInputChange}
               name="2" />
 
-            <input value={this.state.words[3]}
+            <input
+              className={this.state.words[3].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"} 
+              value={this.state.words[3]}
               placeholder="Verb"
               type="text"
               onChange={this.onInputChange}
               name="3" />
 
             the 
-            <input value={this.state.words[4]}
+            <input
+              className={this.state.words[4].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"} 
+              value={this.state.words[4]}
               placeholder="Adjective"
               type="text"
               onChange={this.onInputChange}
               name="4" />
 
-            <input value={this.state.words[5]}
+            <input 
+              className={this.state.words[5].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"}
+              value={this.state.words[5]}
               placeholder="Noun"
               type="text"
               onChange={this.onInputChange}
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..059107d5 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,21 @@
 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>
-    </div>
-  );
+  if (props.recentSubmission === undefined){
+    return null
+  } else {
+    return (
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{ props.recentSubmission }</p>
+      </div>
+    );
+  }
 }
 
+RecentSubmission.propTypes = {
+  recentSubmission: PropTypes.string
+}
 export default RecentSubmission;