Space - Nora

src/components/FinalPoem.js

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  let increment = 0;
+  let finalPoem = props.poemList.map(sentence => {
+    increment += 1
+  return (<p key={increment}>{sentence}</p>) 
+  });
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
+      { props.showFinal ? 
+        <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" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.onFinalPoemSubmit} />
       </div>
     </div>
   );
 }
 
-export default FinalPoem;
+// TODO Need to add propTypes
+
+export default FinalPoem;

src/components/Game.js

@@ -3,8 +3,14 @@ import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
+import PropTypes from 'prop-types';
 
 const Game = () => {
+  const [poemList, setPoemList] = useState([]);
+  const [player, setPlayer] = useState(1);
+  const [showFinal, setShowFinal] = useState(false);
+
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +19,21 @@ const Game = () => {
     }
   }).join(" ");
 
+  // callback function to add students to the list
+  const addPoem = (poem) => {
+    const newPoemList = [...poemList]; // copy PoemList
+
+    const newLine = "The " + poem.adj1 + " " + poem.noun1 + " " + poem.adv + " " + poem.verb + " the " + poem.adj2 + " " + poem.noun2 + ".";
+
+    newPoemList.push(newLine);
+    setPoemList(newPoemList); 
+    setPlayer(player + 1);
+    };
+
+    const finishedPoem = () => {
+      setShowFinal(true);
+    };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +46,16 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      {
+        player > 1 && showFinal !== true ? <RecentSubmission recentSubmission={poemList[poemList.length - 1]} /> : null
+      }
+
+      {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */}
+      {
+        showFinal ? null : <PlayerSubmissionForm player={player} onSubmit={addPoem} />
+      }
 
-      <FinalPoem />
+      <FinalPoem showFinal={showFinal} poemList={poemList} onFinalPoemSubmit={finishedPoem}/>
 
     </div>
   );
@@ -48,7 +74,7 @@ const FIELDS = [
   },
   {
     key: 'adv',
-    placeholder: 'adverb',
+    placeholder: 'adv',
   },
   {
     key: 'verb',
@@ -66,4 +92,8 @@ const FIELDS = [
   ".",
 ];
 
+// TODO Need to add propTypes
+
+// TODO As a player, I want the form text inputs to be light pink when they are blank, so I have a visual way of seeing that it's invalid when it's blank.
+
 export default Game;

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,118 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
+
+const PlayerSubmissionForm = (props) => {
+  const [fields, setFields] /* destructuring array - first element is fields, second element is setFields */ = useState(
+    { 
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: ""
+  });
+
+  const onInputChange = event => {
+    const { name, value } = event.target;
+
+    const newFields = {
+      ...fields,
+      [name]: value // [name] get value of name and use it as the key | value is the variable above
+      // line 46 is equivalent to: newFields[name] = value
+    };
+
+    setFields(newFields);
+  };
+
+  const onFormSubmit = (event) => {
+    // prevent browser from trying to submit form
+    event.preventDefault();
+
+    props.onSubmit(fields);
+
+    // reset fields
+    setFields({
+      adj1: "",
+      noun1: "",
+      adv: "",
+      verb: "",
+      adj2: "",
+      noun2: ""
+    });
+  };
+
 
-const PlayerSubmissionForm = () => {
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.player}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
+          The
+          <input
+            name="adj1"
+            onChange={onInputChange}
+            value={fields.adj1}
+            placeholder="adjective"
+            type="text" 
+          />
+
+          <input
+            name="noun1"
+            onChange={onInputChange}
+            value={fields.noun1}
+            placeholder="noun"
+            type="text" 
+          />
+
+          <input
+            name="adv"
+            onChange={onInputChange}
+            value={fields.adv}
+            placeholder="adverb"
+            type="text" 
+          />
+
+          <input
+            name="verb"
+            onChange={onInputChange}
+            value={fields.verb}
+            placeholder="verb"
+            type="text" 
+          /> 
+          the 
+          <input
+            name="adj2"
+            onChange={onInputChange}
+            value={fields.adj2}
+            placeholder="adjective"
+            type="text" 
+          />
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
           <input
-            placeholder="hm..."
-            type="text" />
+            name="noun2"
+            onChange={onInputChange}
+            value={fields.noun2}
+            placeholder="noun"
+            type="noun" 
+          />.
 
         </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>
   );
 }
 
+// TODO Need to add propTypes
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <h3>The Most Recent Submission</h3> 
+      <p className="RecentSubmission__submission">{ props.recentSubmission }</p> 
+      {/* // ? refactor generate sentence here, not in Game ? */}
     </div>
   );
 }
 
 export default RecentSubmission;
+
+// TODO Need to add propTypes