Leaves - Elizabeth

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

src/components/FinalPoem.js

@@ -1,20 +1,38 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 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>;
 
-      </section>
+  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>;
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+  const buttonOrPoem = props.isSubmitted ? finalPoem : showButton;
+
+  return (
+    <div className="FinalPoem">
+      {buttonOrPoem}
     </div>
   );
-}
+};
+
+FinalPoem.propTypes = {
+  isSubmitted: PropTypes.func.isRequired,
+  showPoem: PropTypes.func.isRequired,
+  submissions: PropTypes.array,
+
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -8,8 +8,25 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions: [],
+      isSubmitted: false,
+    }
   }
 
+  addSubmission = (submission) => {
+    this.setState({
+      submissions: [ ...this.state.submissions, submission],
+    });
+  };
+
+  showPoem = (event) => {
+    event.preventDefault();
+    this.setState({
+      isSubmitted: true
+    });
+  };
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +37,13 @@ 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] }/> : '';
+
+    const submissionForm = this.state.isSubmitted ? '' : <PlayerSubmissionForm submissionIndex={ submissionLength + 1 } submitSubmission={ this.addSubmission} fields={ FIELDS} />;
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,11 +56,19 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        { recentSubmission }
+
+        { submissionForm }
+
+        {/* <RecentSubmission /> */}
 
-        <PlayerSubmissionForm />
+        {/* <PlayerSubmissionForm /> */}
 
-        <FinalPoem />
+        <FinalPoem
+          isSubmitted={ this.state.isSubmitted }
+          showPoem={ this.showPoem } 
+          submissions={ this.state.submissions }
+          />
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -1,28 +1,87 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 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
-              placeholder="hm..."
-              type="text" />
+            { input }
 
           </div>
 
@@ -33,6 +92,13 @@ class PlayerSubmissionForm extends Component {
       </div>
     );
   }
-}
+};
+
+PlayerSubmissionForm.propTypes = {
+  submitSubmission: PropTypes.func.isRequired,
+  fields: PropTypes.array.isRequired,
+  submissionIndex: PropTypes.number
+
+};
 
 export default PlayerSubmissionForm;

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>
   );
 }