Leaves - Emily V

src/components/FinalPoem.js

@@ -2,17 +2,35 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+
+  const finalPoem = props.lines;
 
+  const finalPoemReturn = finalPoem.map((line, i) => {
+    return (
+      <p key={i}>{line}</p>
+    );
+  });
+
+  const completePoem = () => {
   return (
-    <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {finalPoemReturn}
       </section>
+    )
+  };
 
+  const poemButton = () => {
+    return (
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.endGameCallback} />
       </div>
+    )
+  };
+
+  return (
+    <div className="FinalPoem">
+     {props.gameEnded ? completePoem() : poemButton()}
     </div>
   );
 }

src/components/Game.js

@@ -8,6 +8,34 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      submissionCount: 0,
+      recentSubmission: '',
+      submissionList: [],
+      gameComplete: '',
+    };
+  }
+
+  onFormSubmission = (newSubmission) => {
+    const updatedSubmissionList = this.state.submissionList;
+    updatedSubmissionList.push(newSubmission)
+
+    const updatedRecentSubmission = updatedSubmissionList[updatedSubmissionList.length - 1]
+    const updatedSubmissionCount = this.state.submissionCount + 1
+    this.setState({
+      submissionCount: updatedSubmissionCount,
+      recentSubmission: updatedRecentSubmission,
+      submissionList: updatedSubmissionList,
+    })
+  }
+
+  onEndGame = () => {
+    const gameCompleteUpdate = true;
+    this.setState({
+      gameComplete: gameCompleteUpdate,
+      recentSubmission: '',
+    })
   }
 
   render() {
@@ -32,11 +60,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {this.state.recentSubmission ? <RecentSubmission recentSub={this.state.recentSubmission}/> : ""}
 
-        <PlayerSubmissionForm />
+        {this.state.gameComplete ? "" : <PlayerSubmissionForm playerNumber={this.state.submissionCount + 1} submitFormCallback={newSubmission => this.onFormSubmission(newSubmission)} format={FIELDS} /> }
 
-        <FinalPoem />
+        <FinalPoem lines={this.state.submissionList} endGameCallback={this.onEndGame} gameEnded={this.state.gameComplete}/>
 
       </div>
     );
@@ -48,27 +76,33 @@ const FIELDS = [
   {
     key: 'adj1',
     placeholder: 'adjective',
+    entry: '',
   },
   {
     key: 'noun1',
     placeholder: 'noun',
+    entry: '',
   },
   {
     key: 'adv',
     placeholder: 'adverb',
+    entry: '',
   },
   {
     key: 'verb',
     placeholder: 'verb',
+    entry: '',
   },
   "the",
   {
     key: 'adj2',
     placeholder: 'adjective',
+    entry: '',
   },
   {
     key: 'noun2',
     placeholder: 'noun',
+    entry: '',
   },
   ".",
 ];

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,67 @@ import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
-
+  
   constructor(props) {
     super(props);
+    this.state = { fields: this.props.format }
+  }
+
+  onChange = (event, i) => {
+    const { value } = event.target;
+    const newState = this.state.fields;
+    newState[i]["entry"] = value;
+    this.setState({fields: newState});
+  }
+
+  validate = (i) => {
+    return this.state.fields[i]["entry"].match(/.+/);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newSubmission = this.state.fields.map((field) => {
+      if (field.key) {
+        return field.entry;
+      } else {
+        return field;
+      }
+    }).join(" ");
+
+    const newFields = this.state.fields;
+
+    newFields.forEach(field => {
+      if (field.entry) { 
+        field.entry = "" 
+      } 
+    });
+
+    this.setState({ fields: newFields });
+
+    this.props.submitFormCallback(newSubmission);
   }
 
   render() {
 
+    const formElements = this.props.format.map((field, i) => {
+    if (field.key) {
+      return (
+        <input key={i} placeholder={field.placeholder} name={field.key} value={this.state.fields[i]["entry"]} type="text" onChange={(e) => this.onChange(e, i)} className={this.validate(i) ? '' : 'PlayerSubmissionForm__input--invalid'}/>
+        )
+      } else { 
+        return (
+        <span key={i}>{field}</span>) }
+    })
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</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
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+            {formElements}
           </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.recentSub}</p>
     </div>
   );
 }