Yasmin-Leaves

src/components/FinalPoem.js

@@ -2,19 +2,22 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
+  if (props.render === true){
+    return <div>
       <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
+        <h3>Final Poem </h3>
+          {props.submissions.map((submission) => {
+            return <p>{submission}</p>
+          })}
       </section>
-
+    </div>
+  }
+  return (
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.finalPoemCallback}/>
       </div>
-    </div>
-  );
+
+  )
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,6 +8,35 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      submissions:[], 
+      finalPoem: false
+    }
+  }
+
+  addLine = (submission) => {
+    const submissions = this.state.submissions;
+    submissions.push(submission);
+    this.setState({ submissions })
+    console.log(submissions)
+  }
+
+  finalPoemRender = () => {
+    this.setState({
+      finalPoem: true
+    });
+  }
+
+  renderRecentSubmission = () => {
+    const submissions = this.state.submissions;
+    if (submissions.length === 0) {
+      return null;
+    }
+    return (
+      <RecentSubmission 
+        recentsubmission={submissions[submissions.length - 1]} 
+      />
+    );
   }
 
   render() {
@@ -32,11 +61,12 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        {this.renderRecentSubmission()}
+
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm addLineCallback={this.addLine} render={this.state.finalPoem} player={this.state.submissions.length + 1}/>
 
-        <FinalPoem />
+        <FinalPoem submissions={this.state.submissions} render={this.state.finalPoem} finalPoemCallback={this.finalPoemRender}/>
 
       </div>
     );

src/components/PlayerSubmissionForm.css

@@ -31,10 +31,10 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
-}
+}

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,114 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      adjective1: '',
+      noun1: '',
+      adverb: '',
+      verb: '',
+      adjective2: '',
+      noun2: ''
+    }
   }
 
-  render() {
+  handleInput = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleOnSubmit = (event) => {
+    event.preventDefault();
+    this.setState(this.initialState);
+
+    const submission = `The ${this.state.adjective1} ${this.state.noun1} ${this.state.adverb}
+     ${this.state.verb} ${this.state.adjective2} ${this.state.noun2}.`;
+    this.props.addLineCallback(submission)
+
+  this.setState ({
+    adjective1: '',
+    noun1: '',
+    adverb: '',
+    verb: '',
+    adjective2: '',
+    noun2: ''
+  });
+}
 
+  isInputInvalid = (input) => {
+    if (input === ""){
+      return "PlayerSubmissionForm__input--invalid"
+    }
+  }    
+
+  render() {
+    if (this.props.render === true) {
+      return <div></div>
+    }
     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" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.handleOnSubmit}>
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
             {
               // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
 
+            }
+            <div>
+              <input
+                className = { this.isInputInvalid(this.state.adjective1) }
+                placeholder="adjective"
+                name="adjective1"
+                type="text"
+                value={this.state.adjective1}
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                className={this.isInputInvalid(this.state.noun1)}
+                placeholder="noun"
+                name="noun1"
+                type="text"
+                value={this.state.noun1} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                className={this.isInputInvalid(this.state.adverb)}
+                placeholder="adverb"
+                name="adverb"
+                type="text"
+                value={this.state.adverb} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                className={this.isInputInvalid(this.state.verb)}
+                placeholder="verb"
+                name="verb"
+                type="text"
+                value={this.state.verb} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                className={this.isInputInvalid(this.state.adjective2)}
+                placeholder="adjective"
+                name="adjective2"
+                type="text"
+                value={this.state.adjective2} 
+                onChange={this.handleInput}/>
+            </div>
+            <div>
+              <input
+                className={this.isInputInvalid(this.state.noun2)}
+                placeholder="noun"
+                name="noun2"
+                type="text"
+                value={this.state.noun2} 
+                onChange={this.handleInput}/>
+            </div>
           </div>
 
           <div className="PlayerSubmissionForm__submit">
@@ -35,4 +124,5 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -5,7 +5,8 @@ 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>
   );
 }