Branches - Amal

src/components/FinalPoem.js

@@ -3,18 +3,34 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const finishedPoem = props.poem.map((line) => {
   return (
-    <div className="FinalPoem">
+  <p> {line}</p>
+  )
+  })
+
+  if(props.poemStatus){
+    return( 
+      <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+
+      {finishedPoem}
+
       </section>
+    </div>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+    )
+  }else{
+    return(
+
+    <div className="FinalPoem__reveal-btn-container">
+
+      <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn FinalPoem__reveal-btn:hover" onClick={() => { props.showPoemCallback()} }/>
     </div>
-  );
+    )}
+
+
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,9 +8,46 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      recentLine: "",
+      submissions: [],
+      poemFinished: false,
+      playerNum: 1
+    }
+  }
+
+  showPoem = () => {
+
+    this.setState({
+      poemFinished: true
+    }
+    )
+    console.log(this.state)
+
+  }
+
+  addLine = (words) => {
+
+
+    const wordArray = Object.values(words)
+    const line = `The ${wordArray[0]} ${wordArray[1]} ${wordArray[2]} ${wordArray[3]} the ${wordArray[4]} ${wordArray[5]}.`
+
+    this.setState({
+      recentLine: line, 
+      playerNum: this.state.playerNum + 1
+    })
+    this.state.submissions.push(line)
+
   }
 
   render() {
+    let recentSubmission = ""
+    if (this.state.submissions.length >= 1 && !this.state.poemFinished){
+      recentSubmission = <RecentSubmission recentSubmission={this.state.recentLine} />
+    }
+
+
 
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
@@ -32,11 +69,12 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+
+        {recentSubmission}
 
-        <PlayerSubmissionForm />
+    { this.state.poemFinished ? "" : <PlayerSubmissionForm fields={FIELDS} addLineCallback={this.addLine} playerNum={this.state.playerNum} /> }
 
-        <FinalPoem />
+        <FinalPoem poem={this.state.submissions} poemStatus={this.state.poemFinished} showPoemCallback={this.showPoem} />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -2,32 +2,94 @@ import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
+fieldState = () => {
+  let  fieldState = {}
+  this.props.fields.forEach((field) => {
+    if(field.key) {
+    fieldState[field.key] = ""
+    }
+
+  })
+  return fieldState
+}
 
   constructor(props) {
     super(props);
+
+
+    this.state = this.fieldState()
+  }
+
+
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  checkSubmission = () => {
+    let check = true 
+    this.props.fields.forEach((field) => {
+      if (field === ""){
+        check = false 
+      }
+
+    })
+    return check 
   }
+  onSubmit = (event) => {
+    event.preventDefault();
+    if (this.checkSubmission()) {
+      this.props.addLineCallback(this.state)
+    }
+
+      this.setState(this.fieldState());
+
+    }
+
+
 
   render() {
+
+    console.log(this.state)
+    const playerForm = this.props.fields.map((field, i) => {
+      if(field.key) {
+        return(<input
+          key={i}
+          placeholder={field.placeholder}
+          name={field.key}
+          value={this.state[field.key]}
+          onChange={this.onInputChange}
+          type="text" />
+
+        )
+
+      }else{
+        return field
+      }
+
+    })
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.playerNum}</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form onSubmit={this.onSubmit} 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" />
+            {playerForm}
+
 
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input 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.recentSubmission}</p>
     </div>
   );
 }