Space - Lee

package.json

@@ -2,10 +2,12 @@
   "name": "exquisite-react",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://peachmakkoli.github.io/exquisite-react/",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "gh-pages": "^2.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
@@ -14,6 +16,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/components/FinalPoem.css

@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.FinalPoem__hide {
+  display: none;
+}

src/components/FinalPoem.js

@@ -1,20 +1,43 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => {
+  const finalPoem = submissions.map(submission => <p key={submission.key}>The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.adj2} {submission.noun2}.</p>);
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      <section className={ revealPoem ? "FinalPoem__poem" : "FinalPoem__hide" }>
         <h3>Final Poem</h3>
-
+        {finalPoem}
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <div className={ revealPoem ? "FinalPoem__hide" : "FinalPoem__reveal-btn-container" }>
+        <input 
+          type="button" 
+          value="We are finished: Reveal the Poem"
+          className="FinalPoem__reveal-btn"
+          onClick={onButtonClickCallback}
+          />
       </div>
     </div>
   );
-}
+};
+
+FinalPoem.propTypes = {
+  submissions: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.number.isRequired,
+      adj1: PropTypes.string.isRequired,
+      noun1: PropTypes.string.isRequired,
+      adv: PropTypes.string.isRequired,
+      verb: PropTypes.string.isRequired,
+      adj2: PropTypes.string.isRequired,
+      noun2: PropTypes.string.isRequired,
+    })
+  ),
+  onButtonClickCallback: PropTypes.func.isRequired,
+  revealPoem: PropTypes.bool.isRequired,
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -13,6 +13,27 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [ player, setPlayer ] = useState(1);
+  const [ playerSubmission, setPlayerSubmission ] = useState(null); 
+  const [ submissionList, setSubmissionList ] = useState([]);
+  const [ revealPoem, setRevealPoem ] = useState(false);
+
+  const onLineSubmitCallback = (formInput) => {
+    const newSubmissionList = [...submissionList];
+    newSubmissionList.push({
+      key: player,
+      ...formInput,
+    });
+
+    setSubmissionList(newSubmissionList);
+    setPlayerSubmission(formInput);
+    setPlayer(player+1);
+  };
+
+  const onButtonClickCallback = () => {
+    setRevealPoem(true);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,15 +46,15 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission submission={playerSubmission} revealPoem={revealPoem} />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm player={player} onLineSubmitCallback={onLineSubmitCallback} revealPoem={revealPoem} />
 
-      <FinalPoem />
+      <FinalPoem submissions={submissionList} onButtonClickCallback={onButtonClickCallback} revealPoem={revealPoem} />
 
     </div>
   );
-}
+};
 
 
 const FIELDS = [

src/components/PlayerSubmissionForm.css

@@ -12,6 +12,19 @@
   justify-content: space-around;
 }
 
+.PlayerSubmissionForm__poem-inputs div {
+  display: flex;
+  align-content: center;
+}
+
+.PlayerSubmissionForm__poem-inputs label {
+  display: none;
+}
+
+.PlayerSubmissionForm__input-invalid {
+  background-color: lightpink;
+}
+
 .PlayerSubmissionForm__submit {
   display: flex;
   justify-content: center;