Ports - Ngoc

src/components/FinalPoem.js

@@ -1,20 +1,54 @@
-import React from 'react';
+import React, { Component } from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+class FinalPoem extends Component {
 
-  return (
-    <div className="FinalPoem">
+  constructor(props) {
+    super(props);
+    this.state = {
+      finalPoem: props.poem
+    }
+  }
+  showFinalPoem = () => {
+    const poemlines = this.state.finalPoem.map((poemline, i) => {
+      return (
+        <p key={i}>{poemline}</p>
+      )
+    });
+    return poemlines
+  }
+
+  onSubmitButtonClick = () => {
+    this.props.displayCallback()
+  }
+
+  render() {
+   if(this.props.display) {
+
+    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" onClick={this.onSubmitButtonClick}/>
+        </div>
+      </div>
+    );
+   } else {
+     return(
+      <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        <section>
+        {this.showFinalPoem()}
+        </section> 
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
-    </div>
-  );
+     )
+
+   }
+  }
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,8 +8,39 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentSubmission: "",
+      finalPoem: [],
+      display: true
+
+    }
+  }
+
+  displayCallback = () => {
+    this.setState({
+      display: false,
+    })
   }
 
+  addPoemLineCallback = (words) => {
+     let line = FIELDS.map((field) => {
+       if(field.key) {
+         if (words[field.key] !== "") {
+         return words[field.key]
+         }
+       } else {
+         return field;
+       }                              
+     }).filter(word => word !== undefined ).join(" ");
+
+     let updatedPoem = this.state.finalPoem;
+     updatedPoem.push(line)
+     this.setState({
+       recentSubmission: line,
+       finalPoem: updatedPoem
+     })
+  }
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -31,12 +62,23 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+        {
+          this.state.display?
+            <section>
+            <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
-        <RecentSubmission />
+            <PlayerSubmissionForm addPoemLineCallback={this.addPoemLineCallback} />
+            </section>
 
-        <PlayerSubmissionForm />
+            :null
+        }
 
-        <FinalPoem />
+        <FinalPoem 
+
+          poem ={this.state.finalPoem}
+          displayCallback={this.displayCallback}
+          display={this.state.display}
+        />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,118 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.cleared = {
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: "",
+    }
+
+    this.state = {...this.cleared, player: 1}
+  }
+
+  validations = {
+    adj1: /.+/,
+    noun1: /.+/,
+    adv: /.+/, 
+    verb: /.+/, 
+    adj2: /.+/, 
+    noun2: /.+/
+  };
+
+  fieldValid = (fieldName) => {
+    return this.validations[fieldName].test(this.state[fieldName]);
+  };
+
+  addWords  = (event) => {
+
+    event.preventDefault();
+
+    const words = this.state
+
+    this.props.addPoemLineCallback(words)
+
+    this.setState({...this.cleared})
+
+    let updatedUserId = this.state.player
+    updatedUserId += 1
+
+    this.setState({
+      player: updatedUserId});
+
+  }
+
+  onChangeHandler = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.state.player }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.addWords}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
-
+            "The"
             {
               // Put your form inputs here... We've put in one below as an example
             }
-            <input
-              placeholder="hm..."
-              type="text" />
-
+
+            <input className={!this.fieldValid('adj1') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="adj1"
+              placeholder="adjective"
+              value={this.state.adj1}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            <input className={!this.fieldValid('noun1') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="noun1"
+              placeholder="noun"
+              value={this.state.noun1}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />      
+            <input className={!this.fieldValid('adv') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="adv"
+              placeholder="adverb"
+              type="text" 
+              value={this.state.adv}
+              onChange={this.onChangeHandler}
+              />
+            <input className={!this.fieldValid('verb') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="verb"
+              placeholder="verb"
+              value={this.state.verb}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            "the"
+            <input className={!this.fieldValid('adj2') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="adj2"
+              placeholder="adjective"
+              value={this.state.adj2}
+              type="text"
+              onChange={this.onChangeHandler}
+              />
+            <input className={!this.fieldValid('noun2') ? 'PlayerSubmissionFormt__input--invalid' : ''}
+              name="noun2"
+              placeholder="noun"
+              value={this.state.noun2}
+              type="text" 
+              onChange={this.onChangeHandler}
+              />
+            "."
           </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.recentSubmission }</p>
     </div>
   );
 }