Branches - Brianna

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "3.0.1"
+    "react-scripts": "^3.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/FinalPoem.js

@@ -1,20 +1,35 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
 
-      </section>
+const getPoemLines = (poem) => {
+  return poem.map((line) => {
+    return <p>{line}</p>
+  })
+}
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+const FinalPoem = (props) => {
+  console.log(props.buttonCheck);
+
+  if (props.buttonCheck) {
+    return (
+      <div className="FinalPoem">
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {getPoemLines(props.poem)}
+        </section>
       </div>
-    </div>
-  );
+    )
+  } else {
+      return (
+        <div className="FinalPoem">
+          <div className="FinalPoem__reveal-btn-container">
+            <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.button}/>
+          </div>
+        </div>
+
+      )
+  }
 }
 
 export default FinalPoem;

src/components/Game.js

@@ -8,10 +8,27 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      currentSubmission: '',
+      finalPoem: [],
+      reveal: false, 
+    }
   }
 
-  render() {
+  addRecentSubmission = (line) => {
+    const {finalPoem} = this.state;
+    finalPoem.push(line)
+    this.setState({
+      currentSubmission: line, 
+      finalPoem, 
+    })
+  }
+
+  onButtonClick = () => {
+    this.setState({reveal: true})
+  }
 
+  render() {
     const exampleFormat = FIELDS.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -31,12 +48,12 @@ class Game extends Component {
         <p className="Game__format-example">
           { exampleFormat }
         </p>
+
+        { this.state.reveal ? ' ' : <RecentSubmission submission={this.state.currentSubmission}/> }
+
+        { this.state.reveal ? ' ' : <PlayerSubmissionForm addRecentSubmission={(line) => { this.addRecentSubmission(line) }} playerNumber={this.state.finalPoem.length + 1}/> }
 
-        <RecentSubmission />
-
-        <PlayerSubmissionForm />
-
-        <FinalPoem />
+        <FinalPoem poem={this.state.finalPoem} button={this.onButtonClick} buttonCheck={this.state.reveal} />
 
       </div>
     );

src/components/PlayerSubmissionForm.js

@@ -5,25 +5,105 @@ class PlayerSubmissionForm extends Component {
 
   constructor(props) {
     super(props);
+    this.addRecentSubmission = props.addRecentSubmission;
+    this.state = {
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      mid: 'the', 
+      adj2: '',
+      noun2: '',
+    }
   }
 
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    let submission = 'The';
+
+    Object.keys(this.state).forEach((key) => {
+      submission += ' ' + this.state[key];
+    })
+    submission += '.';
+
+    this.addRecentSubmission(submission);
+
+    const resetState = {
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        mid: 'the', 
+        adj2: '',
+        noun2: '',
+    };
+
+    this.setState(resetState);
+  }
+
+  onInputChange = (event) => {
+    const updatedState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
   render() {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{this.props.playerNumber  }</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
-            }
             <input
-              placeholder="hm..."
-              type="text" />
-
+              className={this.state.adj1 === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="adj1"
+              placeholder="adjective"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adj1} />
+            <input
+              className={this.state.noun1 === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="noun1"
+              placeholder="noun"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.noun1} />
+            <input
+              className={this.state.adv === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="adv"
+              placeholder="adverb"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adv} />
+            <input
+              className={this.state.verb === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="verb"
+              placeholder="verb"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.verb} />
+            <input
+              className={this.state.adj2 === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="adj2"
+              placeholder="adjective"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.adj2} />
+            <input
+              className={this.state.noun2 === '' ? "PlayerSubmissionFormt__input--invalid" : ''}
+              name="noun2"
+              placeholder="noun"
+              type="text"
+              onChange={this.onInputChange}
+              value={this.state.noun2} /> 
           </div>
 
           <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

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