Daniela - Leaves

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Game from './components/Game.js';
 
 class App extends Component {
+
   render() {
     return (
       <div className="App">

src/components/FinalPoem.js

@@ -1,20 +1,43 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+  const revealPoemButton = 
+    <div className="FinalPoem__reveal-btn-container">
+      <input 
+        type="button" 
+        value="We are finished: Reveal the Poem" 
+        className="FinalPoem__reveal-btn" 
+        onClick={ props.revealPoem } />
+    </div>
+
+  const submissionsCollection = props.poem.map((submission, i) => {
+    const { adjective, noun, adverb, verb, adjective2, noun2 } = submission
+    const sentence = `The ${adjective} ${noun} ${adverb} ${verb} the ${adjective2} ${noun2}.` 
+      return <p key={i}> {sentence}</p>;
+    }
+  );
 
-  return (
+  const Poem = 
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <ul>
+          {submissionsCollection}
+        </ul>
       </section>
+    </div>;
+
+  return ( 
+    props.showPoem ? Poem : revealPoemButton 
+  ); 
+};
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
-  );
+FinalPoem.propTypes = {
+  poem: PropTypes.array.isRequired,
+  revealPoem: PropTypes.func.isRequired,
+  showPoem: PropTypes.bool.isRequired  
 }
-
-export default FinalPoem;
+  
+export default FinalPoem;

src/components/Game.js

@@ -6,10 +6,51 @@ import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+
+    this.state = {
+      submissions: [],
+      lastSubmission: {},
+      player: 1,
+      showPoem: false, 
+      showSubm: false
+    }
+  };
+
+  addSubmission = (submission) => {
+
+    const submissions = this.state.submissions;
+
+    submissions.push(submission);
+    this.setState({
+      submissions,
+      player: this.state.player + 1,
+      showSubm: true,
+    })
+  };
+
+  lastSubmission = (submission) => {
+
+    let { lastSubmission } = this.state.lastSubmission;
+
+    lastSubmission = submission
+    this.setState({
+      lastSubmission,
+    });
   }
 
+  revealPoem = (event) => {
+    event.preventDefault();
+    if (this.state.submissions.length > 0) {
+      this.setState({
+        showPoem: true,
+        showSubm: false,
+      });
+    };
+  };
+
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -32,12 +73,23 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        <RecentSubmission 
+          submission={this.state.lastSubmission} 
+          showSubm={this.state.showSubm} 
+          showPoem={this.state.showPoem}/>
 
-        <FinalPoem />
+        <PlayerSubmissionForm 
+          addSubmissionCallback={this.addSubmission} 
+          lastSubmissionCallback={this.lastSubmission} 
+          player={this.state.player} 
+          showPoem={this.state.showPoem}
+          fields={FIELDS}
+          />
 
+        <FinalPoem 
+          poem={this.state.submissions} 
+          revealPoem={this.revealPoem} 
+          showPoem={this.state.showPoem} />
       </div>
     );
   }
@@ -46,15 +98,15 @@ class Game extends Component {
 const FIELDS = [
   "The",
   {
-    key: 'adj1',
+    key: 'adjective',
     placeholder: 'adjective',
   },
   {
-    key: 'noun1',
+    key: 'noun',
     placeholder: 'noun',
   },
   {
-    key: 'adv',
+    key: 'adverb',
     placeholder: 'adverb',
   },
   {
@@ -63,7 +115,7 @@ const FIELDS = [
   },
   "the",
   {
-    key: 'adj2',
+    key: 'adjective2',
     placeholder: 'adjective',
   },
   {

src/components/PlayerSubmissionForm.css

@@ -35,6 +35,6 @@
   background-color: #FFE9E9;
 }
 
-.PlayerSubmissionForm__input--invalid::placeholder {
+.PlayerSubmissionFormt__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -1,38 +1,122 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
-  }
 
-  render() {
+    this.state = STATE
+
+    this.validators = {
+      adjective: /.+/,
+      noun: /.+/, 
+      adverb: /.+/, 
+      verb: /.+/, 
+      adjective2: /.+/, 
+      noun2: /.+/,
+    }
+  };
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+  onFieldChange = (event) => {
+    const { placeholder, value } = event.target;
+
+    const updatedState = {};
+    updatedState[placeholder] = value;
 
-        <form className="PlayerSubmissionForm__form" >
+    this.setState(updatedState);
+  };
 
-          <div className="PlayerSubmissionForm__poem-inputs">
+  validate = (fieldName) => {
+    const value = this.state[fieldName];
+    const validation = this.validators[fieldName];
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+    if (value.match(validation)) {
+      return 'PlayerSubmissionFormt__input';
+    }
+    return 'PlayerSubmissionFormt__input--invalid';
+  };
 
-          </div>
+  onSubmit = (event) => {
+    // Stop the default page reload
+    event.preventDefault();
+
+    let allValid = true;
+
+    Object.keys(this.validators).forEach((key) => {
+      if (!this.state[key].match(this.validators[key])) {
+        allValid = false;
+      }
+    });
+
+    if (!allValid) {
+      return;
+    }
+
+    let newSubmission = {}
+    Object.keys(this.state).forEach((key) => {  
+      newSubmission[key] = this.state[key]
+    });  
+
+    this.props.addSubmissionCallback(newSubmission);
+    this.props.lastSubmissionCallback(newSubmission);
+
+    this.setState(
+      STATE
+    );
+  };
+
+  render() {
 
+    let form = this.props.fields.map((field) => { 
+      if (field['key']) {
+        return <input placeholder={ field['key'] } 
+          type="text" 
+          className={this.validate(field['key'])} 
+          value={this.state[field['key']]} 
+          onChange={this.onFieldChange}
+          />              
+      } else {
+        return field
+      }
+    });
+
+  if (this.props.showPoem !== true) 
+    {
+      return (
+        <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{ this.props.player }</h3>
+        <form className="PlayerSubmissionForm__form" >
+          <div className="PlayerSubmissionForm__poem-inputs">
+            { form }
+          </div>
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" onClick={this.onSubmit} />
           </div>
         </form>
-      </div>
-    );
+      </div>);
+    } else {
+      return ('')
+    }
   }
+};
+
+const STATE = { 
+  adjective: '',
+  noun: '', 
+  adverb: '', 
+  verb: '', 
+  adjective2: '', 
+  noun2: ''
+};
+
+PlayerSubmissionForm.propTypes = {
+  addSubmissionCallback: PropTypes.func.isRequired,
+  lastSubmissionCallback: PropTypes.func.isRequired,
+  player: PropTypes.number.isRequired,
+  showPoem: PropTypes.bool.isRequired,
+  fields: PropTypes.array.isRequired
 }
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,28 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
-  return (
+  const { adjective, noun, adverb, verb, adjective2, noun2 } = props.submission;
+
+  const lastSubmission = `The ${adjective} ${noun} ${adverb} ${verb}
+   the ${adjective2} ${noun2}.`;
+
+  const showSubmission =
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
+      <p className="RecentSubmission__submission">{ lastSubmission }</p>
+    </div>;
+
+  return ( 
+    props.showSubm ? showSubmission : ("") 
   );
+};
+
+RecentSubmission.propTypes = {
+  showSubmission: PropTypes.bool.isRequired,  
+  showPoem: PropTypes.bool.isRequired,
+  submission: PropTypes.object.isRequired
 }
 
 export default RecentSubmission;