Space - Jessica

package.json

@@ -2,10 +2,12 @@
   "name": "exquisite-react",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://seaweeddol.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.js

@@ -1,20 +1,44 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  let increment = 0;
+  let finalPoem = props.submissions.map(sentence => {
+    increment += 1
+    return (<p key={increment}>{sentence}</p>) 
+  });
+
+  const onReveal = () => {
+    props.onFinalPoemCallback(true);
+  }
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
+      {/* if display is true, show final poem */}
+      { props.submitted ? 
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {finalPoem}
+        </section> : 
+        null
+      }
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      { props.submitted ? 
+        null : 
+        <div className="FinalPoem__reveal-btn-container">
+          <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onReveal}/>
+        </div>
+      }
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  submissions: PropTypes.arrayOf(PropTypes.string),
+  submitted: PropTypes.bool.isRequired,
+  onFinalPoemCallback: PropTypes.func,
+}
+
 export default FinalPoem;

src/components/Game.css

@@ -2,3 +2,7 @@
   text-align: center;
   font-style: italic;
 }
+
+.hide {
+  display: none;
+}

src/components/Game.js

@@ -13,6 +13,32 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [player, setPlayer] = useState(1);  
+  const [submissionsList, setsubmissionsList] = useState([]);
+  const [submitted, setSubmitted] = useState(false);
+
+
+  const onPlayerSubmissionCallback = (playerSubmission) => {
+    // make a copy of submissionsList
+    const newSubmissions = [...submissionsList];
+
+    // create sentence structure
+    const sentence = "The " + playerSubmission.adjective1 + " " + playerSubmission.noun1 + " " + playerSubmission.adverb + " " + playerSubmission.verb + " the " + playerSubmission.adjective2 + " " + playerSubmission.noun2 + ".";
+
+    newSubmissions.push(sentence); 
+    // update state of submissionsList to new list
+    setsubmissionsList(newSubmissions);  
+    // increment player
+    setPlayer(player + 1);
+  }
+
+  const onFinalPoemCallback = (bool) => {
+    setSubmitted(bool);
+  }
+
+  // on reset
+  // setPlayer(1)
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,29 +51,34 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <section className={submitted ? 'hide' : 'show'}>
+        {
+          submissionsList.length > 0 ? 
+          <RecentSubmission recentSubmission={submissionsList[submissionsList.length - 1]}/> :
+            null
+        }
+
+        <PlayerSubmissionForm player={player} onSubmit={onPlayerSubmissionCallback} fields={FIELDS} />
+      </section>
 
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      <FinalPoem submissions={submissionsList} submitted={submitted} onFinalPoemCallback={onFinalPoemCallback}/>
 
     </div>
   );
 }
 
-
 const FIELDS = [
   "The",
   {
-    key: 'adj1',
+    key: 'adjective1',
     placeholder: 'adjective',
   },
   {
     key: 'noun1',
     placeholder: 'noun',
   },
   {
-    key: 'adv',
+    key: 'adverb',
     placeholder: 'adverb',
   },
   {
@@ -56,7 +87,7 @@ const FIELDS = [
   },
   "the",
   {
-    key: 'adj2',
+    key: 'adjective2',
     placeholder: 'adjective',
   },
   {