Sara-Branches

src/components/FinalPoem.js

@@ -1,20 +1,28 @@
-import React from 'react';
-import './FinalPoem.css';
-
-const FinalPoem = (props) => {
+import React from "react";
+import "./FinalPoem.css";
 
+const FinalPoem = props => {
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
+      {props.shouldShowFinalPoem && (
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {props.finalPoem.map(para => (
+            <p>{para}</p>
+          ))}
+        </section>
+      )}
 
       <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.showFinalPoem}
+        />
       </div>
     </div>
   );
-}
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -1,43 +1,88 @@
-import React, { Component } from 'react';
-import './Game.css';
-import PlayerSubmissionForm from './PlayerSubmissionForm';
-import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
+import React, { Component } from "react";
+import "./Game.css";
+import PlayerSubmissionForm from "./PlayerSubmissionForm";
+import FinalPoem from "./FinalPoem";
+import RecentSubmission from "./RecentSubmission";
 
 class Game extends Component {
-
   constructor(props) {
     super(props);
+
+    this.state = {
+      playerNumber: 1,
+      isFormSubmitted: false,
+      userInputs: ["The", "the"],
+      userSubmission: "",
+      finalPoem: [],
+      shouldShowFinalPoem: false
+    };
   }
 
-  render() {
+  handleRecentSubmission = userInputs => {
+    console.log(userInputs);
+
+    let { adj1, noun1, adv, verb, adj2, noun2 } = userInputs;
+    let sentence = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`;
+
+    let finalPoem = this.state.finalPoem;
+    finalPoem.push(sentence);
+    // userInputs.forEach(data => console.log(data));
+
+    this.setState({
+      isFormSubmitted: true,
+      playerNumber: this.state.playerNumber + 1,
+      userSubmission: sentence,
+      finalPoem: finalPoem
+    });
+  };
 
-    const exampleFormat = FIELDS.map((field) => {
+  showFinalPoem = () => {
+    this.setState({
+      shouldShowFinalPoem: true
+    });
+  };
+
+  render() {
+    const exampleFormat = FIELDS.map(field => {
       if (field.key) {
         return field.placeholder;
       } else {
         return field;
       }
     }).join(" ");
 
+    const userSubmission = this.state.userSubmission;
+
     return (
       <div className="Game">
         <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>
+        <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>
 
         <p>Please follow the following format for your poetry submission:</p>
 
-        <p className="Game__format-example">
-          { exampleFormat }
-        </p>
-
-        <RecentSubmission />
+        <p className="Game__format-example">{exampleFormat}</p>
 
-        <PlayerSubmissionForm />
+        {this.state.isFormSubmitted && (
+          <RecentSubmission submission={this.state.userSubmission} />
+        )}
 
-        <FinalPoem />
+        <PlayerSubmissionForm
+          playerNumber={this.state.playerNumber}
+          handleRecentSubmission={this.handleRecentSubmission}
+        />
 
+        <FinalPoem
+          shouldShowFinalPoem={this.state.shouldShowFinalPoem}
+          showFinalPoem={this.showFinalPoem}
+          finalPoem={this.state.finalPoem}
+        />
       </div>
     );
   }
@@ -46,31 +91,31 @@ class Game extends Component {
 const FIELDS = [
   "The",
   {
-    key: 'adj1',
-    placeholder: 'adjective',
+    key: "adj1",
+    placeholder: "adjective"
   },
   {
-    key: 'noun1',
-    placeholder: 'noun',
+    key: "noun1",
+    placeholder: "noun"
   },
   {
-    key: 'adv',
-    placeholder: 'adverb',
+    key: "adv",
+    placeholder: "adverb"
   },
   {
-    key: 'verb',
-    placeholder: 'verb',
+    key: "verb",
+    placeholder: "verb"
   },
   "the",
   {
-    key: 'adj2',
-    placeholder: 'adjective',
+    key: "adj2",
+    placeholder: "adjective"
   },
   {
-    key: 'noun2',
-    placeholder: 'noun',
+    key: "noun2",
+    placeholder: "noun"
   },
-  ".",
+  "."
 ];
 
 export default Game;

src/components/PlayerSubmissionForm.css

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

src/components/PlayerSubmissionForm.js

@@ -1,33 +1,120 @@
-import React, { Component } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { Component } from "react";
+import "./PlayerSubmissionForm.css";
 
 class PlayerSubmissionForm extends Component {
-
   constructor(props) {
     super(props);
+
+    //
+    this.state = {
+      // playerNumber: 1,
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: ""
+    };
   }
 
-  render() {
+  handleSubmit = e => {
+    e.preventDefault();
+    // this.setState({
+    //
+    // });
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+    this.props.handleRecentSubmission(this.state);
+    const keys = Object.keys(this.state);
+    keys.map(key => {
+      this.setState({
+        [key]: ""
+      });
+    });
+  };
 
-        <form className="PlayerSubmissionForm__form" >
+  handleChange = event => {
+    let name = event.target.name;
+    let value = event.target.value;
+    // console.log(name, value);
+    this.setState({
+      [name]: value
+    });
+  };
 
+  render() {
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{this.props.playerNumber}</h3>
+        <h1>{this.props.propTest}</h1>
+        <form
+          className="PlayerSubmissionForm__form"
+          onSubmit={this.handleSubmit}
+        >
           <div className="PlayerSubmissionForm__poem-inputs">
-
             {
               // Put your form inputs here... We've put in one below as an example
             }
+            <span>The </span>
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="adjective"
+              type="text"
+              name="adj1"
+              value={this.state.adj1}
+              onChange={this.handleChange}
+            />
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="noun"
+              type="text"
+              name="noun1"
+              value={this.state.noun1}
+              onChange={this.handleChange}
+            />
+
             <input
-              placeholder="hm..."
-              type="text" />
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="adverb"
+              type="text"
+              name="adv"
+              value={this.state.adv}
+              onChange={this.handleChange}
+            />
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="verb"
+              type="text"
+              name="verb"
+              value={this.state.verb}
+              onChange={this.handleChange}
+            />
+            <span>the </span>
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="adjective"
+              type="text"
+              name="adj2"
+              value={this.state.adj2}
+              onChange={this.handleChange}
+            />
 
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              placeholder="noun"
+              type="text"
+              name="noun2"
+              value={this.state.noun2}
+              onChange={this.handleChange}
+            />
           </div>
 
           <div className="PlayerSubmissionForm__submit">
-            <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+            <input
+              className="PlayerSubmissionForm__input--invalid"
+              type="submit"
+              value="Submit Line"
+              className="PlayerSubmissionForm__submit-btn"
+            />
           </div>
         </form>
       </div>

src/components/RecentSubmission.js

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