Ports - Jillianne

src/components/FinalPoem.js

@@ -2,17 +2,17 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  const finalButton = () => {
+    return (
+      <div className="FinalPoem__reveal-btn-container">
+        <input onClick={props.onFinishCallback} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      </div>
+    )
+  }
 
   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" />
-      </div>
+      {!props.finish && finalButton()}
     </div>
   );
 }

src/components/Game.js

@@ -8,8 +8,49 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      poem: [],
+      finished: undefined,
+      finalPoem: []
+    }
   }
 
+    onSubmit = (line) => {
+      const extendedPoem = this.state.poem
+      extendedPoem.push(line)
+
+      this.setState({
+        poem: extendedPoem,
+      });
+    };
+
+    onFinishCallback = () => {
+      const entirePoem = this.state.poem
+
+      this.setState({
+        finalPoem: entirePoem,
+        poem: [],
+        finished: true,
+      });
+    }
+
+    finalPoem = () => {
+      const styledPoem = this.state.finalPoem.map((line, i) => {
+        return (
+          <p key={i}>{line}</p>
+        )
+      });
+
+
+      return (
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          <div>{styledPoem}</div>
+        </section>
+      )
+    }
+
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -21,7 +62,7 @@ class Game extends Component {
     }).join(" ");
 
     return (
-      <div className="Game">
+      <div>
         <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>
@@ -32,12 +73,13 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
+        {this.state.poem.length > 0 && <RecentSubmission recentLine={this.state.poem[this.state.poem.length - 1]}/>}
 
-        <FinalPoem />
+        {!this.state.finished &&  <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={this.onSubmit} player={this.state.poem.length + 1}/>}
 
+        <FinalPoem poem={this.state.poem} finish={this.state.finished} onFinishCallback={this.onFinishCallback} />
+
+        {this.state.finished && this.finalPoem()}
       </div>
     );
   }

src/components/PlayerSubmissionForm.js

@@ -5,29 +5,75 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    }
+  }
+
+  formInputs = () => {
+    const fields = this.props.fields.map((field, i) => {
+      if (typeof field !== "object") {
+        return field;
+      } else {
+        if (this.state[field.key] === '') {
+          return (
+            <input className='PlayerSubmissionFormt__input--invalid' key={i} name={field.key} placeholder={field.placeholder} onChange={this.onChanges} value={this.state[field.key]}/>
+          )
+        } else {
+          return (
+            <input key={i} name={field.key} placeholder={field.placeholder} onChange={this.onChanges} value={this.state[field.key]}/>
+          )
+        }
+      }
+    });
+
+    return fields
+  }
+
+  onChanges = (event) => {
+    const field = {}
+    field[event.target.name] = event.target.value;
+
+    this.setState(field);
+  }
+
+  submitLine = (event) => {
+    event.preventDefault();
+
+    const line = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2} .`
+
+    this.props.onSubmitCallback(line);
+    this.setState({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.player}</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" />
-
+            {/* Notes from https://github.com/Ada-Developers-Academy/textbook-curriculum/blob/master/React/forms.md utilized */}
+            {this.formInputs()}
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input onClick={this.submitLine} type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
         </form>
       </div>

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