Leaves - Yitgop

src/components/FinalPoem.js

@@ -1,20 +1,37 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  const finalizedPoem = props.poem.map((line, i) => {
+    return (
+      <p key={i}>
+        {line}
+      </p>
+    )
+  });
+
   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" />
-      </div>
+      { props.ready ? 
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          { finalizedPoem }
+        </section> 
+        : 
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ props.onFinalSubmit }/>
+        </div>
+      }
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  poem: PropTypes.array.isRequired,
+  ready: PropTypes.bool.isRequired,
+  onFinalSubmit: PropTypes.func.isRequired,
+}
+
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,22 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      lines: [],
+      ready: false,
+    }
+  }
+
+  addLine = (line) =>{
+    const lines = this.state.lines;
+    lines.push(line);
+
+    this.setState({ lines });
+  }
+
+  finalSubmit = () => {
+    this.setState({ ready: true })
   }
 
   render() {
@@ -32,11 +48,19 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        { this.state.lines.length > 0 && !this.state.ready ?
+          <RecentSubmission recentLine={ this.state.lines[this.state.lines.length - 1] } />
+          :
+          ''
+        }
 
-        <FinalPoem />
+        { this.state.ready?
+          ''
+          :
+          <PlayerSubmissionForm addLineCallback={this.addLine} id={ (this.state.lines.length + 1) }/>
+        }
+
+        <FinalPoem poem={ this.state.lines } ready={ this.state.ready } onFinalSubmit={ this.finalSubmit }/>
 
       </div>
     );
@@ -71,6 +95,6 @@ const FIELDS = [
     placeholder: 'noun',
   },
   ".",
-];
+]
 
 export default Game;

src/components/PlayerSubmissionForm.js

@@ -1,29 +1,109 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    }
+  }
+
+  onFieldChange = (event) => {
+    this.setState({ 
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  fieldValid = (fieldName) => {
+    return this.state[fieldName] !== '';
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    // React won't render Object. Making the line a string or array here to render successfully in FinalPoem's map function on line#9
+    const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`
+
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    });
+
+    this.props.addLineCallback(newLine);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.id }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onFormSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
+            The
             <input
-              placeholder="hm..."
-              type="text" />
-
+              onChange={this.onFieldChange}
+              name="adj1"
+              value={this.state.adj1}
+              type="text"
+              placeholder="adjective"
+              className={this.fieldValid("adj1")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="noun1"
+              value={this.state.noun1}
+              type="text"
+              placeholder="noun"
+              className={this.fieldValid("noun1")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="adv"
+              value={this.state.adv}
+              type="text"
+              placeholder="adverb"
+              className={this.fieldValid("adv")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="verb"
+              value={this.state.verb}
+              type="text"
+              placeholder="verb"
+              className={this.fieldValid("verb")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />
+            the
+            <input
+              onChange={this.onFieldChange}
+              name="adj2"
+              value={this.state.adj2}
+              type="text"
+              placeholder="adjective"
+              className={this.fieldValid("adj2")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />
+            <input
+              onChange={this.onFieldChange}
+              name="noun2"
+              value={this.state.noun2}
+              type="text"
+              placeholder="noun"
+              className={this.fieldValid("noun2")? "" : "PlayerSubmissionFormt__input--invalid"}
+            />.
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +115,9 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+  id: PropTypes.number.isRequired,
+}
+
 export default PlayerSubmissionForm;

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>
+      <p className="RecentSubmission__submission">{ props.recentLine }</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  recentLine: PropTypes.string.isRequired,
+}
+
 export default RecentSubmission;