Ports - Laneia

src/components/FinalPoem.js

@@ -3,15 +3,19 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const formattedPoem = props.poem.map((line, i) => {
+    return <p key={i}>{line}</p>
+  })
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {props.displayPoem && formattedPoem}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {!props.displayPoem && <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick = {props.revealPoem}/>}
       </div>
     </div>
   );

src/components/Game.js

@@ -8,6 +8,25 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      poem: []
+    }
+  }
+
+  addLine = (poemLine) => {
+    let poem = [...this.state.poem];
+
+    poem.push(poemLine)
+    this.setState({
+      poem: poem
+    });
+  }
+
+  revealPoem = () => {
+    this.setState({
+      displayPoem: true
+    });
   }
 
   render() {
@@ -32,11 +51,19 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        { !this.state.displayPoem &&
+          <RecentSubmission line={[...this.state.poem].pop()}/>
+        }
 
-        <FinalPoem />
+        { !this.state.displayPoem &&
+          <PlayerSubmissionForm
+            addLine = {(poemLine) => this.addLine(poemLine)}
+            submissionNumber = {this.state.poem.length + 1}/>
+        }
+
+        <FinalPoem displayPoem={this.state.displayPoem}
+        revealPoem={this.revealPoem}
+        poem={this.state.poem}/>
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,97 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adjective: '',
+      noun: '',
+      adverb: '',
+      verb: '',
+      adverb2: '',
+      noun2: ''
+    }
+
+    this.baseState = this.state;
+  }
+
+   onInputChange = (e) => {
+    const field = e.target.name;
+    const value = e.target.value;
+    const newState = {};
+    newState[field] = value;
+
+     this.setState(newState);
+  }
+
+   onFormSubmit = (e) => {
+    e.preventDefault();
+
+     const poemLine = `The ${this.state.adjective} ${this.state.noun} ${this.state.adverb} ${this.state.verb} ${this.state.adverb2} ${this.state.noun2}.`;
+
+     this.setState(this.baseState);
+
+     this.props.addLine(poemLine);
   }
 
   render() {
 
+    const inputClass = {}
+    for (const field in this.state) {
+       inputClass[field] = `PlayerSubmissionForm__input${this.state[field] === "" ? "--invalid" : ""}`
+    }
+
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.submissionNumber }</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
-            }
+            <label>The</label>
             <input
-              placeholder="hm..."
+              className={inputClass.adjective}
+            	name="adjective"
+              placeholder="adjective"
+              value = {this.state.adjective}
+              onChange = {this.onInputChange}
               type="text" />
-
+            <input
+              className={inputClass.noun}
+              name="noun"
+              placeholder="noun"
+              value = {this.state.noun}
+              onChange = {this.onInputChange}
+              type="text" />
+            <input
+              className={inputClass.adverb}
+              name="adverb"
+              placeholder="adverb"
+              value = {this.state.adverb}
+              onChange = {this.onInputChange}
+              type="text" />
+            <input
+              className={inputClass.verb}
+              name="verb"
+              placeholder="verb"
+              value = {this.state.verb}
+              onChange = {this.onInputChange}
+              type="text" />	        
+            <label>the</label>
+            <input
+              className={inputClass.adverb2}
+              name="adverb2"
+              placeholder="adverb"
+              value = {this.state.adverb2}
+              onChange = {this.onInputChange}
+              type="text" />
+            <input
+              className={inputClass.noun2}
+              name="noun2"
+              placeholder="noun"
+              value = {this.state.noun2}
+              onChange = {this.onInputChange}
+              type="text" />
+            <label>.</label>
           </div>
 
           <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -2,10 +2,13 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
+  const recentLine = props.line ? props.line : '';
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ recentLine }</p>
     </div>
   );
 }