Leaves - Hallie

src/components/FinalPoem.js

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

src/components/Game.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types'
 import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
@@ -8,9 +9,35 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentSubmission: '',
+      allSubmissions: [],
+      showPoem: false,
+    }
+  }
+
+  addLine = (newLine) => {
+    const makeSentence = `The ${newLine.adjective} ${newLine.noun} ${newLine.adverb} ${newLine.verb} the ${newLine.adjective2} ${newLine.noun2}.`
+
+    this.state.allSubmissions.push(makeSentence);
+
+    this.setState({
+      recentSubmission: makeSentence,
+      allSubmissions: this.state.allSubmissions,
+    })
+
+    console.log(this.state.allSubmissions)
+  }
+
+ onClickShowPoem = () => {
+    this.setState({
+      showPoem: true,
+    });
   }
 
   render() {
+    const showPoem = this.state.showPoem;
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -21,6 +48,7 @@ class Game extends Component {
     }).join(" ");
 
     return (
+
       <div className="Game">
         <h2>Game</h2>
 
@@ -32,12 +60,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        { (this.state.allSubmissions.length > 0 && !showPoem) ? <RecentSubmission newLine={this.state.recentSubmission}/> : ''}
 
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        { (!showPoem ? <PlayerSubmissionForm addLineCallback={this.addLine}/> : '') }
 
+        <FinalPoem allLines={this.state.allSubmissions} showPoem={this.state.showPoem} onClickShowPoemCallback={this.onClickShowPoem}/>
       </div>
     );
   }
@@ -73,4 +100,8 @@ const FIELDS = [
   ".",
 ];
 
+Game.propTypes = {
+  newLine: PropTypes.object.isRequired,
+}
+
 export default Game;

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,38 +1,155 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+      count: 1,
+    }
+
+    this.validators = {
+      adjective: /.+/,
+      noun: /.+/,
+      adverb: /.+/,
+      verb: /.+/,
+      adjective2: /.+/,
+      noun2: /.+/,
+    };
+  }
+
+  validate = (fieldName) => {
+    const value = this.state[fieldName];
+    const validation = this.validators[fieldName];
+
+    if (value.match(validation)) {
+      return true;
+    }
+
+    return false;
+  }
+
+
+  resetState = () => {
+    this.setState({
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: '',
+      count: this.state.count + 1
+    });
+  }
+
+  onFormChange = (event) => {
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    let allValid = true;
+
+    Object.keys(this.validators).forEach((key) => {
+      if (!this.state[key].match(this.validators[key])) {
+        allValid = false;
+      }
+    });
+
+    if (!allValid) {
+      return;
+    }
+    console.log(event);
+
+    this.props.addLineCallback(this.state);
+    this.resetState();
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{ this.state.count }</h3>
+        
+        <form onSubmit={this.onSubmit} className="PlayerSubmissionForm__form" >
 
           <div className="PlayerSubmissionForm__poem-inputs">
+            <div>{"The "}
+              <label htmlFor="adjective"></label>
+              <input name="adjective" placeholder="adjective" onChange={this.onFormChange} 
+              value={this.state.adjective} className={this.validate("adjective") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              />
+            </div>
+
+            <div>
+            <label htmlFor="noun"></label>
+            <input name="noun" placeholder="noun" 
+            onChange={this.onFormChange} value={this.state.noun}
+            className={this.validate("noun") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+            />
+            </div>
+
+            <div>
+              <label htmlFor="adverb"></label>
+              <input name="adverb" placeholder="adverb"
+              onChange={this.onFormChange} value={this.state.adverb}
+              className={this.validate("adverb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              />
+            </div>
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+            <div>
+              <label htmlFor="verb"></label>
+              <input name="verb" placeholder="verb" 
+              onChange={this.onFormChange} value={this.state.verb}
+              className={this.validate("verb") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              />
+            </div>
+
+            <div>{"the "}
+              <label htmlFor="adjective2"></label>
+              <input name="adjective2" placeholder="adjective" 
+              onChange={this.onFormChange} value={this.state.adjective2}
+              className={this.validate("adjective2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+              />
+            </div>
+
+            <div>
+            <label htmlFor="noun2"></label>
+            <input name="noun2" placeholder="noun" 
+            onChange={this.onFormChange} value={this.state.noun2}
+            className={this.validate("noun2") ? "PlayerSubmissionForm__input--valid": "PlayerSubmissionForm__input--invalid"}
+            />.
+            </div>
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input name="submit" type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
         </form>
       </div>
     );
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  addLineCallback: PropTypes.func.isRequired,
+};
+
 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.newLine }</p>
     </div>
   );
 }