Branches - Kelsey

src/components/FinalPoem.js

@@ -2,19 +2,33 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
+  const revealPoem = () => {
+    props.revealPoemCallback();
+  }
+  const poemDisplay = props.finalPoem.map((stanza, i) => {
+    return (
+      <p key={i}>
+        {stanza}
+      </p>
+    )  
+  })
+
+  if (props.displayPoem === true) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {poemDisplay}
+        </section>
+        </div>
+    )
+  } else {
+    return (
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" onClick={revealPoem} value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,8 +8,27 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      currentSubmission: '',
+      finalPoem: [],
+      displayPoem: false,
+    }
+  }
+  addRecentSubmission = (stanza) => {
+    // add stanza to Game state
+    const {finalPoem} = this.state;
+    finalPoem.push(stanza);
+    this.setState({
+      currentSubmission: stanza,
+      finalPoem,
+    }) 
   }
 
+  revealPoem = () => {
+    this.setState({
+      displayPoem: true
+    })
+  }
   render() {
 
     const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +39,14 @@ class Game extends Component {
       }
     }).join(" ");
 
+    if (this.state.displayPoem === true) {
+      return (
+        <div>
+          <FinalPoem finalPoem={this.state.finalPoem} displayPoem={this.state.displayPoem} revealPoemCallback={this.revealPoem} />
+        </div>
+      )
+    } else {
+
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -32,14 +59,16 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmission={this.state.currentSubmission} />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addRecentSubmission={(stanza) => { this.addRecentSubmission(stanza) }} />
 
-        <FinalPoem />
+        <FinalPoem finalPoem={this.state.finalPoem} displayPoem={this.state.displayPoem} revealPoemCallback={this.revealPoem} />
 
       </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

@@ -4,30 +4,77 @@ import './PlayerSubmissionForm.css';
 class PlayerSubmissionForm extends Component {
 
   constructor(props) {
-    super(props);
+    super(props);    
+    this.addRecentSubmission = props.addRecentSubmission;
+    this.playerNum = 1;
+    this.state = {
+      // words live in state until submit is clicked
+      prefix: 'The',
+      adjectiveA: '',
+      nounA: '',
+      adverbA: '',
+      verbA: '',
+      midfix: 'the',
+      adjectiveB: '',
+      nounB: ''
+    };
+    this.inputs = Object.keys(this.state);
+
+  }
+
+  updateWord = (event) => {
+    console.log(this.inputs);
+    const value = event.target.value
+    this.setState({
+      [event.target.name]: value
+    })
+  }
+
+  onSubmitForm = (event) => {
+    event.preventDefault();
+    let submission = '';
+    Object.keys(this.state).forEach((key) => {
+      submission += ' ' + this.state[key];
+    });
+    this.setState({
+      adjectiveA: '',
+      nounA: '',
+      adverbA: '',
+      verbA: '',
+      adjectiveB: '',
+      nounB: ''
+    })
+
+    this.addRecentSubmission(submission);
+    this.playerNum += 1;
   }
 
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.playerNum }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <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" />
-
+            {this.inputs.map((wordInput, i) => {
+              return (
+                <input
+                  key={i}
+                  name={wordInput}
+                  onChange={this.updateWord}
+                  placeholder={this.state[wordInput] === '' ? wordInput.slice('A', -1).slice('B') : this.state[wordInput]}
+                  value={this.state[wordInput]}
+                  className={this.state[wordInput] === '' ? 'PlayerSubmissionForm__input--invalid' : 'PlayerSubmissionForm__input'}
+                />
+            )
+          })}
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input onClick={this.onSubmitForm} type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
           </div>
         </form>
       </div>

src/components/RecentSubmission.js

@@ -2,12 +2,22 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+  if (props.recentSubmission === '') {
+    return (
+      <div>
+
+      </div>
+    );
+  } else {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.recentSubmission }</p>
     </div>
-  );
+  )
+}
+
 }
 
 export default RecentSubmission;