Space - Shonda

src/components/FinalPoem.js

@@ -1,20 +1,47 @@
-import React from 'react';
-import './FinalPoem.css';
+import React, { useState } from "react";
+import "./FinalPoem.css";
 
-const FinalPoem = (props) => {
+const FinalPoem = ({ poem, onSubmitCallBack }) => {
+  // hooks/state organized here // used another help in this section
+  const [revealPoem, setRevealPoem] = useState("");
+  const [showFinalPoemButton, setShowFinalPoemButton] = useState(true);
+  let finalPoemSentence = [];
+
+  poem.forEach((poemLine) => {
+    finalPoemSentence.push(Object.values(poemLine).join(" ").concat("."));
+  });
+
+  const onFinalPoemButtonClick = (event) => {
+    // prevent default behavior
+    event.preventDefault();
+
+    // creates final poem
+    let finalPoem = finalPoemSentence.join("\n");
+    setRevealPoem(finalPoem);
+    onSubmitCallBack(false);
+    setShowFinalPoemButton(false);
+  };
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      <section className="FinalPoem__poem FinalPoem__display-linebreak ">
         <h3>Final Poem</h3>
 
+        {revealPoem}
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {showFinalPoemButton && (
+        <div className="FinalPoem__reveal-btn-container">
+          <input
+            type="button"
+            onClick={onFinalPoemButtonClick}
+            value="We are finished: Reveal the Poem"
+            className="FinalPoem__reveal-btn"
+          />
+        </div>
+      )}
     </div>
   );
-}
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -1,10 +1,18 @@
-import React, { useState } from 'react';
-import './Game.css';
-import PlayerSubmissionForm from './PlayerSubmissionForm';
-import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
+import React, { useState } from "react";
+import "./Game.css";
+import PlayerSubmissionForm from "./PlayerSubmissionForm";
+import FinalPoem from "./FinalPoem";
+import RecentSubmission from "./RecentSubmission";
 
 const Game = () => {
+  // keep track of current sentence
+  const [currentSentence, nextSentence] = useState([]);
+  // holds subs or all sentences
+  const [submissions, setSubmissions] = useState(false);
+
+  //reveal poem
+  const [showPoem, changeShowPoem] = useState(true);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,55 +21,80 @@ const Game = () => {
     }
   }).join(" ");
 
+  // used hold a list of sentence that make the final poem
+  const showRecentSubmission = (sentence) => {
+    const newSentenceList = [...currentSentence];
+
+    newSentenceList.push(sentence);
+
+    nextSentence(newSentenceList);
+    setSubmissions(true);
+  };
+
+  const hidePlayerSubmissionForm = (value) => {
+    changeShowPoem(value);
+    setSubmissions(false);
+  };
+
   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>
+      {/* keeps all subs an recent sub together */}
+      {submissions && <RecentSubmission poem={currentSentence} />}
 
-      <FinalPoem />
+      {showPoem && (
+        <PlayerSubmissionForm
+          callbackSentenceForm={showRecentSubmission}
+          player={currentSentence.length + 1}
+        />
+      )}
 
+      <FinalPoem
+        poem={currentSentence}
+        onSubmitCallBack={hidePlayerSubmissionForm}
+      />
     </div>
   );
-}
-
+};
 
 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",
   },
   ".",
 ];

src/components/PlayerSubmissionForm.css

@@ -32,9 +32,13 @@
 }
 
 .PlayerSubmissionFormt__input--invalid {
-  background-color: #FFE9E9;
+  background-color: #ffe9e9;
 }
 
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.InputColor {
+  color: pink;
+}

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,100 @@
-import React, { useState } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { useState } from "react";
+import "./PlayerSubmissionForm.css";
+import PropTypes from "prop-types";
+
+const PlayerSubmissionForm = (props) => {
+  const initialState = {
+    the1: "The ",
+    adj1: "",
+    noun1: "",
+    adv: "",
+    verb: "",
+    the2: "the ",
+    adj2: "",
+    noun2: "",
+  };
+  const [sentence, setSentence] = useState(initialState);
+
+  const onInputChange = (event) => {
+    // console.log(`Changing field ${event.target.name} to ${event.target.value}`);
+    const setNewSentence = {
+      ...sentence,
+    };
+    setNewSentence[event.target.name] = event.target.value;
+    setSentence(setNewSentence);
+  };
+
+  const onSentenceSubmit = (event) => {
+    event.preventDefault();
+    props.callbackSentenceForm(sentence);
+    setSentence({
+      ...initialState,
+    });
+  };
 
-const PlayerSubmissionForm = () => {
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
-
-      <form className="PlayerSubmissionForm__form" >
+      <h3>Player Submission Form for Player #{props.player}</h3>
 
+      <form className="PlayerSubmissionForm__form" onSubmit={onSentenceSubmit}>
         <div className="PlayerSubmissionForm__poem-inputs">
-
           {
             // Put your form inputs here... We've put in one below as an example
           }
+          The
           <input
-            placeholder="hm..."
-            type="text" />
-
+            name="adj1"
+            placeholder="adjective"
+            onChange={onInputChange}
+            value={sentence.adj1}
+          />
+          <input
+            name="noun1"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={sentence.noun1}
+          />
+          <input
+            name="adv"
+            onChange={onInputChange}
+            placeholder="adverb"
+            value={sentence.adv}
+          />
+          <input
+            name="verb"
+            onChange={onInputChange}
+            placeholder="verb"
+            value={sentence.verb}
+          />
+          the
+          <input
+            name="adj2"
+            onChange={onInputChange}
+            placeholder="adjective"
+            value={sentence.adj2}
+          />
+          <input
+            name="noun2"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={sentence.noun2}
+          />
         </div>
-
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input
+            type="submit"
+            value="Submit Line"
+            className="PlayerSubmissionForm__submit-btn"
+          />
         </div>
       </form>
     </div>
   );
-}
+};
 
+PlayerSubmissionForm.propTypes = {
+  player: PropTypes.number.isRequired,
+  callbackSentenceForm: PropTypes.func.isRequired,
+};
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,24 @@
-import React from 'react';
-import './RecentSubmission.css';
+import React from "react";
+import "./RecentSubmission.css";
+
+const RecentSubmission = ({ poem }) => {
+  let submission = [];
+  const recentSubmission = poem.slice(-1)[0];
+
+  //recentSubmission will be undefined
+  if (recentSubmission === null) {
+    submission.push(" ");
+  } else {
+    // push to submission object values of the poem and spliting
+    submission.push(Object.values(recentSubmission).join(" ").concat("."));
+  }
 
-const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{submission}</p>
     </div>
   );
-}
+};
 
 export default RecentSubmission;