Space - Charlotte

.vscode/settings.json

@@ -0,0 +1 @@
+123,125

src/components/FinalPoem.js

@@ -1,18 +1,44 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({poem, onSubmitCallBack}) => {
+
+  // hooks/state organized here
+  const [showPoem, setShowPoem ] = useState('');
+  const [showFinalPoemButton, setShowFinalPoemButton] = useState(true);
+  let finalPoemLines = [];
+
+  poem.forEach (poemLine => {
+    finalPoemLines.push(Object.values(poemLine).join(" ").concat('.'));
+  });
+
+  const onFinalPoemButtonClick = (e) => {
+    // prevent default behavior
+    e.preventDefault();
+
+    let finalPoem =  finalPoemLines.join('\n');
+    setShowPoem(finalPoem);
+    onSubmitCallBack(false);
+    setShowFinalPoemButton(false);
+    }
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      <section className="FinalPoem__poem FinalPoem__display-linebreak ">
         <h3>Final Poem</h3>
-
+
+        {showPoem}
+
       </section>
 
+      {showFinalPoemButton &&
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+        <input 
+        type="button" 
+        onClick={onFinalPoemButtonClick}
+        value="We are finished: Reveal the Poem" 
+        className="FinalPoem__reveal-btn" />
+      </div>}
     </div>
   );
 }

src/components/Game.js

@@ -13,6 +13,31 @@ const Game = () => {
     }
   }).join(" ");
 
+  // Game.js keeps track of state
+  // all the hooks/useState organized here
+  const [poemLines, setPoemLines] = useState([]);
+  const [showRecentSubmission, setShowRecentSubmission] = useState(false);
+  const [showPlayerSubmissionForm, setShowPlayerSubmissionForm] = useState(true);
+
+  // use this example
+  // const addStudent = (student) => {
+  // Duplicate the student list.
+  // const newStudentList = [...students];
+  const addPoemLine = (poem) => {
+    const newPoemLines = [...poemLines];
+
+    newPoemLines.push(poem);
+
+    setPoemLines(newPoemLines);
+    setShowRecentSubmission(true);
+  }
+
+  const hidePlayerSubmissionForm = (value) => {
+    setShowPlayerSubmissionForm(value);
+    setShowRecentSubmission(false);
+  }
+
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +50,12 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      {/* figured out how to write the next two lines with && by looking at classmates' code */}
+      {showRecentSubmission && <RecentSubmission poem={poemLines}/>}
+      {/* define currentPlayerId here - got idea from Chris' video where he did student_id */}
+      {showPlayerSubmissionForm && <PlayerSubmissionForm onSubmitCallBack={addPoemLine} currentPlayerId={poemLines.length + 1}/>}
 
-      <FinalPoem />
+      <FinalPoem poem={poemLines} onSubmitCallBack={hidePlayerSubmissionForm}/>
 
     </div>
   );
@@ -66,4 +92,4 @@ const FIELDS = [
   ".",
 ];
 
-export default Game;
+export default Game;

src/components/PlayerSubmissionForm.js

@@ -1,22 +1,153 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = ({onSubmitCallBack, currentPlayerId}) => {
+  // I did not do this project in the Waves as recommended. The instructions did not totally make sense to me. 
+  // I got a solid 3 hours of tutoring while working on this project. React can get confusing - fast. 
+  // I referenced this link often. 
+  // https://codesandbox.io/s/serene-fire-no8p7?file=/src/components/SignupForm.js
+  const [formFields, setFormFields ] = useState({
+    the1: "The",
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    the2: 'the',
+    adj2: '',
+    noun2: ''
+  });
+
+  const inputs = {
+    // This feels repetitive - need to DRY
+    adj1: {
+      // This regex allows alphabetic characters only. However, 
+      // upon the actual 'submit', non-alphabetic characters pass through my program! :(
+      validation: /[a-zA-Z]/,
+    },
+    noun1: {
+      validation: /[a-zA-Z]/, 
+    },
+    adv: {
+      validation: /[a-zA-Z]/,
+    },
+    verb: {
+      validation: /[a-zA-Z]/,
+    },
+    adj2: {
+      validation: /[a-zA-Z]/,
+    },
+    noun2: {
+      validation: /[a-zA-Z]/,
+    }
+  };
+
+  const onInputChange = (event) => {
+    const newFormFields = {
+      // using the spread operator to grab ALL the form fields
+      ...formFields,
+    };
+
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  };
+  // https://codesandbox.io/s/serene-fire-no8p7?file=/src/components/SignupForm.js
+  const validateField = fieldName => {
+    return inputs[fieldName].validation.test(formFields[fieldName]);
+  };
+
+  const onFormSubmit = (e) => {
+    // prevent default behavior which is to call external api (?)
+    e.preventDefault();
+
+    const formFieldsArray = Object.values(formFields);
+
+    // check if form fields are NOT empty
+    if (!formFieldsArray.includes('')) {
+
+      onSubmitCallBack(formFields);
+
+      setFormFields({
+        the1: "The",
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        the2: 'the',
+        adj2: '',
+        noun2: ''
+      });
+    }
+
+  }
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{currentPlayerId}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form 
+        className="PlayerSubmissionForm__form" 
+        onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+        {/* There's a lot of repeition in the form. Not sure if that's just how forms work, 
+        or if this can be refactored. If time were not an issue, I would look into this further.
+        The example forms in lecture etc. seem to have this repeition as well.  */}
+          The
           <input
-            placeholder="hm..."
-            type="text" />
-
+            name="adj1"
+            placeholder="adjective"
+            type="text"
+            // This is repetitive - need to DRY
+            onChange={onInputChange}
+            // This too is repetitive - need to DRY
+            // This applies the (already provided) css for pink fields. Not sure why the 't' is 
+            // after "PlayerSubmissionFormt". Why is that 't' there? I looked at the css to verify as the 
+            // css was provided. 
+            className={validateField("adj1") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.adj1}
+            />
+          <input
+            name="noun1"
+            placeholder="noun"
+            type="text"
+            onChange={onInputChange}
+            className={validateField("noun1") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.noun1}
+            />
+          <input
+            name="adv"
+            placeholder="adverb"
+            type="text"
+            onChange={onInputChange}
+            className={validateField("adv") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.adv}
+            />
+          <input
+            name="verb"
+            placeholder="verb"
+            type="text" 
+            onChange={onInputChange}
+            className={validateField("verb") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.verb}
+            />
+          the
+          <input
+            name="adj2"
+            placeholder="adjective"
+            type="text"
+            onChange={onInputChange}
+            className={validateField("adj2") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.adj2}
+            />
+          <input
+            name="noun2"
+            placeholder="noun"
+            type="text" 
+            onChange={onInputChange}
+            className={validateField("noun2") ? "" : "PlayerSubmissionFormt__input--invalid"}
+            value={formFields.noun2}
+            />
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -28,4 +159,5 @@ const PlayerSubmissionForm = () => {
 }
 
 
-export default PlayerSubmissionForm;
+
+export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,29 @@
 import React from 'react';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({ poem }) => {
+  let submission = []
+  let mostRecentSubmission = poem.slice(-1)[0];
+
+
+// As a player, I only want to see the "The Most Recent Submission" section if 
+// there has already been at least one submission. If no submission, return empty string.
+  if (mostRecentSubmission === undefined) {
+    submission.push('')
+  } else {
+    submission.push(Object.values(mostRecentSubmission).join(" ").concat('.'));
+  }
+
   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;