Leaves - Samantha

src/components/FinalPoem.js

@@ -1,18 +1,27 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = (props) => {  
+
+  const poemContent = props.submissions.map((line,key) => {
+    // console.log(line)
+    return <p key={key}>{line}</p>;
+  });
 
-  return (
-    <div className="FinalPoem">
+  const revealPoem =
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {poemContent}
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+  const revealPoemButton =  
+    <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" onClick={props.revealPoem} className="FinalPoem__reveal-btn"/>
+    </div>;
+
+  return (
+    <div className="FinalPoem">
+      {props.completed ? revealPoem : revealPoemButton}
     </div>
   );
 }

src/components/Game.js

@@ -5,13 +5,38 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
-
   constructor(props) {
     super(props);
+
+    this.state = {
+      submissions: [],
+      completed: false,
+      playerCount: 1,
+    }
   }
 
-  render() {
+  addSubmission = (newSubmission) => {
+    const submissions = this.state.submissions
+    submissions.push(newSubmission)
+
+    // console.log(submissions)
+    this.setState({
+      submissions,
+      playerCount: (this.state.playerCount + 1)
+    })
+  }
+
+  revealPoem = (event) => {
+    event.preventDefault();
+
+    this.setState({
+      completed: true
+    });
+  }
 
+  render() {
+    // console.log(this.state.submissions)
+
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -23,21 +48,20 @@ class Game extends Component {
     return (
       <div className="Game">
         <h2>Game</h2>
-
         <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
-
         <p>Please follow the following format for your poetry submission:</p>
 
         <p className="Game__format-example">
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <RecentSubmission newSubmission={this.state.submissions.slice(-1)[0]}/>
+        <PlayerSubmissionForm addSubmissionCallback={this.addSubmission} playerCount={this.state.playerCount}/>
 
+        <FinalPoem 
+          completed={this.state.completed}
+          revealPoem={this.revealPoem}
+          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

@@ -2,28 +2,132 @@ import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
-
   constructor(props) {
     super(props);
+
+    this.state = {
+      adjective: '',
+      noun1: '',
+      adverb1: '',
+      verb: '',
+      adverb2: '',
+      noun2: '',
+    }
+
+    this.validators = {
+      adjective: /.+/,
+      noun1: /.+/,
+      adverb1: /.+/,
+      verb: /.+/,
+      adverb2: /.+/,
+      noun2: /.+/,
+    };
+  }
+
+  validate = (fieldName) => {
+    const value = this.state[fieldName];
+    const validation = this.validators[fieldName];
+
+    if (value.match(validation)) {
+      return true;
+    }
+    return false;
+  }
+
+  onFieldChange = (event) => {
+    const {placeholder, value} = event.target;
+    const updatedState = {};
+
+    updatedState[placeholder] = value;
+
+    this.setState(updatedState);
+  }
+
+  sendSubmission = (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;
+    }
+
+    const newSubmission = `The ${this.state.adjective} ${this.state.noun1} ${this.state.adverb1} ${this.state.verb} the ${this.state.adverb2} ${this.state.noun2}.`
+
+    this.setState({
+      adjective: '',
+      noun1: '',
+      adverb1: '',
+      verb: '',
+      adverb2: '',
+      noun2: '',
+    });
+
+    this.props.addSubmissionCallback(newSubmission);
   }
 
   render() {
+    const adjectiveValid =  this.validate('adjective');
+    const noun1Valid =  this.validate('noun1');
+    const adverb1Valid =  this.validate('adverb1');
+    const verbValid =  this.validate('verb');
+    const adverb2Valid =  this.validate('adverb2');
+    const noun2Valid =  this.validate('noun2');
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
-
-        <form className="PlayerSubmissionForm__form" >
+        <h3>Player Submission Form for Player #{this.props.playerCount}</h3>
 
+        <form className="PlayerSubmissionForm__form" onSubmit={this.sendSubmission}>
           <div className="PlayerSubmissionForm__poem-inputs">
+            The
+            <input
+            placeholder="adjective"
+            value={this.state.adjective}
+            onChange={this.onFieldChange}
+            className={adjectiveValid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
             <input
-              placeholder="hm..."
-              type="text" />
+            placeholder="noun1"
+            value={this.state.noun1}
+            onChange={this.onFieldChange}
+            className={noun1Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>
+
+            <input
+            placeholder="adverb1"
+            value={this.state.adverb1}
+            onChange={this.onFieldChange}
+            className={adverb1Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>
 
+            <input
+            placeholder="verb"
+            value={this.state.verb}
+            onChange={this.onFieldChange}
+            className={verbValid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>
+
+            the
+            <input
+            placeholder="adverb2"
+            value={this.state.adverb2}
+            onChange={this.onFieldChange}
+            className={adverb2Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>
+
+            <input
+            placeholder="noun2"
+            value={this.state.noun2}
+            onChange={this.onFieldChange}
+            className={noun2Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'}
+            type="text"/>.
           </div>
 
           <div className="PlayerSubmissionForm__submit">

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.newSubmission}</p>
     </div>
   );
 }