Leaves - Sabrina

src/components/FinalPoem.css

@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.FinalPoem__poem--empty {
+  font-style: italic;
+}

src/components/FinalPoem.js

@@ -1,20 +1,39 @@
 import React from 'react';
+import PropType from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({ poemLines, revealPoem, onRevealPoem }) => {
 
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+  const displayPoem = (poemLines) => {
+    const collectedPoem = poemLines.map((line, i) => {
+      return <p key={i}>{line}</p>
+    });
 
-      </section>
+    return collectedPoem;
+  }
 
-      <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">
+        { revealPoem 
+          ? <section className="FinalPoem__poem">
+              <h3>Final Poem</h3> 
+              { poemLines.length > 0 
+                ? displayPoem(poemLines) 
+                : <p className="FinalPoem__poem--empty">You didn't enter any lines of poetry.</p> 
+              } 
+            </section> 
+          : <div className="FinalPoem__reveal-btn-container">
+              <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={ onRevealPoem } />
+            </div>
+        }
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  poemLines: PropType.arrayOf(PropType.string).isRequired,
+  onRevealPoem: PropType.func.isRequired,
+  revealPoem: PropType.bool.isRequired,
+}
+
 export default FinalPoem;

src/components/Game.js

@@ -8,17 +8,51 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
-  }
 
-  render() {
+    this.state = {
+      submissions: [],
+      currentPlayer: 1,
+      lastsubmission: undefined,
+      poemCompleted: false,
+    }
+  }
 
-    const exampleFormat = FIELDS.map((field) => {
-      if (field.key) {
-        return field.placeholder;
+  mapToString = (arrayOfStrings) => {
+    const newString = arrayOfStrings.map((string) => {
+      if (string.key) {
+        return string.placeholder;
       } else {
-        return field;
+        return string;
       }
     }).join(" ");
+    return newString;
+  }
+
+  onFormSubmit = (submissionComponents) => {
+    const newSubmission = this.mapToString(submissionComponents);
+
+    let { submissions, currentPlayer, lastsubmission } = this.state;
+
+    // add submissionComponents to submissions array
+    submissions.push(newSubmission);
+    // add one to currentPlayer
+    currentPlayer += 1;
+    // replace current last submission with this submission
+    lastsubmission = newSubmission;
+
+    this.setState( {submissions, currentPlayer, lastsubmission} );
+  }
+
+  onRevealPoem = () => {
+    // change poemCompleted to true
+    let { poemCompleted } = this.state;
+    poemCompleted = true;
+    this.setState({ poemCompleted });
+  }
+
+  render() {
+    const exampleFormat = this.mapToString(FIELDS);
+    const { submissions, lastsubmission, currentPlayer, poemCompleted } = this.state;
 
     return (
       <div className="Game">
@@ -32,11 +66,18 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        { poemCompleted 
+          ? '' 
+          : <div>
+              { lastsubmission 
+                ? <RecentSubmission submission={lastsubmission} /> 
+                : ''
+              } 
+              <PlayerSubmissionForm formFields={FIELDS} playerNumber={currentPlayer} onFormSubmit={this.onFormSubmit} />
+            </div>
+        }
 
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <FinalPoem poemLines={submissions} revealPoem={poemCompleted} onRevealPoem={this.onRevealPoem} />
 
       </div>
     );
@@ -61,6 +102,10 @@ const FIELDS = [
     key: 'verb',
     placeholder: 'verb',
   },
+  {
+    key: 'preposition',
+    placeholder: 'preposition',
+  },
   "the",
   {
     key: 'adj2',

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,29 +1,134 @@
 import React, { Component } from 'react';
+import PropType from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      fields: {},
+      placeholders: {},
+    }
   }
 
-  render() {
+  componentDidMount = () => {
+    this.initializeFieldsAndPlaceholders();
+    this.initializeValidators();
+  }
+
+  validate = (fieldName) => {
+    const value = this.state.fields[fieldName];
+    const validation = this.validators[fieldName];
+
+    return (validation.test(value));
+  }
+
+  initializeValidators = () => {
+    this.validators = {};
+    const formFields = this.props.formFields;
+
+    for (const field of formFields) {
+      if (field.key) {
+        const {key} = field;
+        this.validators[key] = /.+/;
+      } else {
+        this.validators[field] = new RegExp(field);
+      }
+    }
+  }
+
+  initializeFieldsAndPlaceholders = () => {
+    let fieldState = {};
+    let placeholderState = {};
+    const formFields = this.props.formFields;
+
+    for (const field of formFields) {
+      if (field.key) {
+        const {key, placeholder} = field;
+        fieldState[key] = '';
+        placeholderState[key] = placeholder;
+      } else {
+        fieldState[field] = field;
+      }
+    }
+
+    this.setState({ fields: fieldState, placeholders: placeholderState });
+  }
+
+  onFieldChange = (event) => {
+    const { name, value } = event.target;
+
+    const { fields } = this.state;
+    const updatedFields = fields;
+    updatedFields[name] = value;
 
+    this.setState({fields: updatedFields});
+  }
+
+  clearState = () => {
+    let { fields } = this.state;
+    fields = {};
+
+    this.setState({ fields });
+    this.initializeFieldsAndPlaceholders();
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    // returns if there's any invalid inputs
+    const keys = Object.keys(this.validators);
+    for (const key of keys) {
+      if (!this.validators[key].test(this.state.fields[key])) {
+        return;
+      }
+    }
+
+    // get the values from state
+    const submissionComponentsArray = Object.values({ ...this.state.fields });
+    // pass up array to Game
+    this.props.onFormSubmit(submissionComponentsArray);
+    // clear all changeable values from state
+    this.clearState();
+  }
+
+  makeInputCollection = (stateFields, placeholders) => {
+    // const { placeholders } = this.state;
+    const inputCollection = Object.keys(stateFields).map((field, i) => {
+      if ( !/the/i.test(field)
+      && !/[.,?!]/.test(field)
+      && !/^a$/.test(field) ) {
+        const fieldName = field;
+        const fieldValid = this.validate(String( fieldName ));
+        return <input 
+          key={ i }
+          name={ fieldName }
+          value={ this.state.fields[fieldName] }
+          placeholder={ placeholders[field] }
+          onChange={ this.onFieldChange }
+          className={ fieldValid ? 'valid' : 'PlayerSubmissionForm__input--invalid' }
+          type="text"
+        />;
+      } else {
+        return field;
+      }
+    });
+    return inputCollection;
+  }
+
+  render() {
+    const inputs = this.makeInputCollection(this.state.fields, this.state.placeholders);
+
     return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+      <div className="PlayerSubmissionForm" onSubmit={this.onFormSubmit}>
+        <h3>Player Submission Form for Player #{ this.props.playerNumber }</h3>
 
         <form 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" />
-
+            { inputs }
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +140,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  formFields: PropType.array.isRequired,
+  playerNumber: PropType.number.isRequired,
+  onFormSubmit: PropType.func.isRequired,
+};
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,18 @@
 import React from 'react';
+import PropType from 'prop-types';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({ submission }) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ submission }</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  submission: PropType.string.isRequired,
+}
+
 export default RecentSubmission;