Leaves - Alice

src/components/FinalPoem.js

@@ -1,20 +1,48 @@
-import React from 'react';
-import './FinalPoem.css';
+import React from "react";
+import "./FinalPoem.css";
+import PropTypes from "prop-types";
 
-const FinalPoem = (props) => {
+const FinalPoem = props => {
+  let contents = "";
 
-  return (
-    <div className="FinalPoem">
+  if (props.showFinalPoem) {
+    contents = (
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
       </section>
-
+    );
+  } else {
+    contents = (
       <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.showFinalPoemCallback}
+        />
       </div>
+    );
+  }
+
+  let finalPoem = "";
+  if (props.showFinalPoem) {
+    finalPoem = props.lines.map((line, i) => {
+      return <p key={i}>{line}</p>;
+    });
+  }
+
+  return (
+    <div className="FinalPoem">
+      {contents}
+      {finalPoem}
     </div>
   );
-}
+};
+
+FinalPoem.propTypes = {
+  showFinalPoem: PropTypes.bool.isRequired,
+  showFinalPoemCallback: PropTypes.func.isRequired,
+  lines: PropTypes.array.isRequired
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -1,43 +1,90 @@
-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 = {
+      lines: [],
+      finalPoem: false
+    };
   }
 
-  render() {
+  addLine = newLine => {
+    const lines = this.state.lines;
+    lines.push(newLine);
+
+    this.setState({
+      lines
+    });
+  };
 
-    const exampleFormat = FIELDS.map((field) => {
+  revealPoem = () => {
+    this.setState({
+      finalPoem: true
+    });
+  };
+
+  render() {
+    const exampleFormat = FIELDS.map(field => {
       if (field.key) {
         return field.placeholder;
       } else {
         return field;
       }
     }).join(" ");
 
+    let recentSub = "";
+
+    if (this.state.lines.length > 0) {
+      recentSub = (
+        <RecentSubmission
+          recentSub={this.state.lines[this.state.lines.length - 1]}
+        />
+      );
+    }
+
+    let submissionForm = "";
+
+    if (!this.state.finalPoem) {
+      submissionForm = (
+        <div>
+          {recentSub}
+          <PlayerSubmissionForm
+            addPoemLineCallback={this.addLine}
+            fields={FIELDS}
+            playerNum={this.state.lines.length + 1}
+          />
+        </div>
+      );
+    }
     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>Please follow the following format for your poetry submission:</p>
-
-        <p className="Game__format-example">
-          { exampleFormat }
+        <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>
 
-        <RecentSubmission />
+        <p>Please follow the following format for your poetry submission:</p>
 
-        <PlayerSubmissionForm />
+        <p className="Game__format-example">{exampleFormat}</p>
 
-        <FinalPoem />
+        {submissionForm}
 
+        <FinalPoem
+          lines={this.state.lines}
+          showFinalPoem={this.state.finalPoem}
+          showFinalPoemCallback={this.revealPoem}
+        />
       </div>
     );
   }
@@ -46,31 +93,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;
 }