From 400230eb71c7d10bfefad1b98cc5ca126095d875 Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 15:50:41 -0800
Subject: [PATCH 1/6] Worked on logic for showing submissions in Game.js

---
 .env                                    |  1 +
 src/components/Game.js                  | 10 ++++++++++
 src/components/PlayerSubmissionForm.css |  2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 00000000..7d910f14
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..0b954856 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,10 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [],
+      isSubmitted: false,
+    }
   }
 
   render() {
@@ -20,6 +24,10 @@ class Game extends Component {
       }
     }).join(" ");
 
+    let submissionLength = this.state.submissions.length
+
+    const recentSubmission = submissionLength > 0 && !this.state.isSubmitted ? <RecentSubmission submission={ this.state.submissions[submissionLength - 1] }/> : '';
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,6 +40,8 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
+        { recentSubmission }
+
         <RecentSubmission />
 
         <PlayerSubmissionForm />
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;
 }
 

From 3d7abb669c740165f2e821cb7fdfbfe8866b2c9c Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 17:51:28 -0800
Subject: [PATCH 2/6] Finished playerSubmissionForm.

---
 src/components/Game.js                 | 12 ++++-
 src/components/PlayerSubmissionForm.js | 70 ++++++++++++++++++++++++--
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 0b954856..6ed519a4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -24,10 +24,16 @@ class Game extends Component {
       }
     }).join(" ");
 
+    addSubmission = (submission) => {
+
+    };
+
     let submissionLength = this.state.submissions.length
 
     const recentSubmission = submissionLength > 0 && !this.state.isSubmitted ? <RecentSubmission submission={ this.state.submissions[submissionLength - 1] }/> : '';
 
+    const submissionForm = this.state.isSubmitted ? '' : <PlayerSubmissionForm submissionIndex={ submissionLength + 1 } sendSubmission={ this.addSubmission} fields={ FIELDS} />;
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -42,9 +48,11 @@ class Game extends Component {
 
         { recentSubmission }
 
-        <RecentSubmission />
+        { submissionForm }
+
+        {/* <RecentSubmission /> */}
 
-        <PlayerSubmissionForm />
+        {/* <PlayerSubmissionForm /> */}
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..6ab0ab23 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,21 +5,83 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    const stateOfFields = {};
+    props.fields.forEach((field) => {
+      if (field.key) {
+        stateOfFields[ field.key ] = '';
+      }
+    });
+
+    this.state = stateOfFields;
+  };
+
+  newForm () {
+    const emptyFields = {};
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        emptyFields[ field.key ] = '';
+      };
+      this.setState(
+        emptyFields
+        );
+    })
+  }
+
+  onInputChange = (value, key) => {
+    this.setState({
+      [key]: value,
+    });
+  }
+
+  submitSubmission = (event) => {
+    event.preventDefault();
+    const submission = this.props.fields.map((field) => {
+      if (field.key) {
+        return this.state[field.key];
+      } else {
+        return field;
+      }
+    });
+    this.props.submitSubmission(submission.join(' '));
+    this.newForm();
+
+  }
+
+  isValid = (input) => {
+    return input.length;
   }
 
   render() {
 
+    const input = this.props.fields.map((field, i) => {
+      if (field.key) {
+        return <input
+        key={ i }
+        placeholder= { field.placeholder }
+        value={ this.state[field.key] }
+        onChange={ (event)=> {
+          this.onInputChange(event.target.value, field.key)
+        }}
+        type='text'
+        className={ this.isValid(this.state[field.key]) ? "PlayerSubmissionForm__input" : 'PlayerSubmissionForm__input--invalid' }
+        />;
+      } else {
+        return field;
+      }
+    })
+
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form 
+        onSubmit={ this.submitSubmission }
+        className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+            { input }
+            
             <input
               placeholder="hm..."
               type="text" />

From dcff48a62805d7bb017fd26453cb7c0aa56c22d8 Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 19:15:02 -0800
Subject: [PATCH 3/6] Added submission to recent submission.

---
 src/components/Game.js             | 11 +++++++----
 src/components/RecentSubmission.js |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 6ed519a4..89b01d02 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -14,6 +14,12 @@ class Game extends Component {
     }
   }
 
+  addSubmission = (submission) => {
+    this.setState({
+      submissions: [ ...this.state.submissions, submission],
+    });
+  };
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -24,15 +30,12 @@ class Game extends Component {
       }
     }).join(" ");
 
-    addSubmission = (submission) => {
-
-    };
 
     let submissionLength = this.state.submissions.length
 
     const recentSubmission = submissionLength > 0 && !this.state.isSubmitted ? <RecentSubmission submission={ this.state.submissions[submissionLength - 1] }/> : '';
 
-    const submissionForm = this.state.isSubmitted ? '' : <PlayerSubmissionForm submissionIndex={ submissionLength + 1 } sendSubmission={ this.addSubmission} fields={ FIELDS} />;
+    const submissionForm = this.state.isSubmitted ? '' : <PlayerSubmissionForm submissionIndex={ submissionLength + 1 } submitSubmission={ this.addSubmission} fields={ FIELDS} />;
 
     return (
       <div className="Game">
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..bd9d70ff 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
 }

From 46a25d9ec0d589b3d6f97e725066384d94965f40 Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 19:43:40 -0800
Subject: [PATCH 4/6] Finished finalPoem.

---
 src/components/FinalPoem.js            | 26 ++++++++++++++++++--------
 src/components/Game.js                 | 10 +++++++++-
 src/components/PlayerSubmissionForm.js |  4 ----
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..0c73f0ba 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,16 +3,26 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const showButton = 
+    <div className="FinalPoem__reveal-btn-container">
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.showPoem} />
+    </div>;
+
+  const finalPoemContent = props.submissions.map((line, i) => {
+    return <p key={i}>{line}</p>
+  })
+  
+  const finalPoem = 
+    <section className="FinalPoem__poem">
+      <h3>Final Poem</h3>
+      {finalPoemContent}
+    </section>;
 
-      </section>
+  const buttonOrPoem = props.isSubmitted ? finalPoem : showButton;
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+  return (
+    <div className="FinalPoem">
+      {buttonOrPoem}
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index 89b01d02..e0145217 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -20,6 +20,10 @@ class Game extends Component {
     });
   };
 
+  showPoem = (event) => {
+
+  };
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -57,7 +61,11 @@ class Game extends Component {
 
         {/* <PlayerSubmissionForm /> */}
 
-        <FinalPoem />
+        <FinalPoem
+          isSubmitted={ this.state.isSubmitted }
+          showPoem={ this.showPoem } 
+          submissions={ this.state.submissions }
+          />
 
       </div>
     );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 6ab0ab23..efd0dd94 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -81,10 +81,6 @@ class PlayerSubmissionForm extends Component {
           <div className="PlayerSubmissionForm__poem-inputs">
 
             { input }
-            
-            <input
-              placeholder="hm..."
-              type="text" />
 
           </div>
 

From 0812beb740c14ac175643e15f2b42406a132760e Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 19:46:45 -0800
Subject: [PATCH 5/6] Finished showPoem.

---
 src/components/Game.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e0145217..a8917356 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -21,7 +21,10 @@ class Game extends Component {
   };
 
   showPoem = (event) => {
-
+    event.preventDefault();
+    this.setState({
+      isSubmitted: true
+    });
   };
 
   render() {

From d832ec974084c876a22a9a5e364cc62759b329b0 Mon Sep 17 00:00:00 2001
From: Elizabeth Northrop <elizabethjnorthrop@gmail.com>
Date: Thu, 12 Dec 2019 19:58:47 -0800
Subject: [PATCH 6/6] Added propTypes.

---
 src/components/FinalPoem.js            | 10 +++++++++-
 src/components/PlayerSubmissionForm.js | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 0c73f0ba..abbc14b8 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) => {
 
@@ -25,6 +26,13 @@ const FinalPoem = (props) => {
       {buttonOrPoem}
     </div>
   );
-}
+};
+
+FinalPoem.propTypes = {
+  isSubmitted: PropTypes.func.isRequired,
+  showPoem: PropTypes.func.isRequired,
+  submissions: PropTypes.array,
+
+};
 
 export default FinalPoem;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index efd0dd94..0a466e1a 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
@@ -91,6 +92,13 @@ class PlayerSubmissionForm extends Component {
       </div>
     );
   }
-}
+};
+
+PlayerSubmissionForm.propTypes = {
+  submitSubmission: PropTypes.func.isRequired,
+  fields: PropTypes.array.isRequired,
+  submissionIndex: PropTypes.number
+
+};
 
 export default PlayerSubmissionForm;