Time - Vera

src/components/FinalPoem.css

@@ -13,7 +13,7 @@
 }
 
 .FinalPoem__reveal-btn:hover {
-  background-color: tomato;
+  background-color: rgb(54, 236, 197);
 }
 
 .FinalPoem__poem {

src/components/FinalPoem.js

@@ -1,20 +1,53 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  console.log(props)
+
+  // Each submission in the final poem section on a different line or paragraph.
+  const showingPoemLines = props.poems.map((poem, i) => {
+    return (
+      <p key={i}>{poem}</p>
+    )
+  });
+
+  // It shows each part depends on playing state. 
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+      {
+        // props.playing || === !props.playing 
+        // It shows final poem if playing is false. 
+        props.playing || (
+          <section className="FinalPoem__poem">
+            <h3>Final Poem</h3>
+            {/* See all of the submissions of poetry lines in the section named "Final Poem". */}
+            {showingPoemLines}
+          </section>
+        )
+      }
+      {
+         // It shows the button if playing is true.
+         // Means the game is not over.  
+        props.playing && (
+          <div className="FinalPoem__reveal-btn-container">
+            {/* A button to click to finalize the poem and reveal the entire final poem, 
+            it does not show the previous lines until the poem is finished. */}
+            <input onClick={props.onGameOverCallback} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+          </div>
+        )
+      }
 
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  poems: PropTypes.array.isRequired,
+  playing: PropTypes.bool.isRequired,
+  onGameOverCallback: PropTypes.func.isRequired
+};
+
 export default FinalPoem;

src/components/Game.css

@@ -2,3 +2,11 @@
   text-align: center;
   font-style: italic;
 }
+.btn {
+  display: flex;
+  justify-content: space-around;
+}
+
+h2 {
+  padding: 20px;
+}

src/components/Game.js

@@ -4,7 +4,17 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+
 const Game = () => {
+
+  // data of form submission, so that the Game component keeps track of all of the submissions.
+
+  const [poems, setPoemPieces] = useState([]);
+  // SetPlaying false when the game is over. 
+  const [playing, setPlaying] = useState(true);
+  // State to add up 1 to the next player. 
+  const [player, setPlayer] = useState(1)
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,24 +23,63 @@ const Game = () => {
     }
   }).join(" ");
 
+  // Function to start over the game! Anytime
+  const resetGame = () => {
+    setPoemPieces([]);
+    setPlaying(true);
+    setPlayer(1);
+  }
+
+
+  // CallBack func to get the info from the form. 
+  const addPoemPiece = (poem) => {
+
+    const newPoemPiece = [...poems];
+    console.log(poem)
+
+    newPoemPiece.push(poem)
+    setPlayer(player + 1)
+    setPoemPieces(newPoemPiece);
+  }
+
+  const gameOver = () => {
+    setPlaying(false);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
+      <div className="btn">
+        <input onClick={resetGame} type="reset" value="Start Over" className="PlayerSubmissionForm__submit-btn" />
+      </div>
 
       <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 }
+        {exampleFormat}
       </p>
+
+      <RecentSubmission
+        // Spread operator here === playing={playing}
+        {...{ poems }}
+        {...{ playing }}
+      />
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      <PlayerSubmissionForm
+        onFormSubmitCallback={addPoemPiece}
+        fields={FIELDS}
+        currentPlayer={player}
+        {...{ playing }}
+      />
 
+      <FinalPoem
+         {...{ poems }}
+        onGameOverCallback={gameOver}
+        // Spread operator here === playing={playing}
+        {...{ playing }}
+      />
     </div>
   );
 }
@@ -66,4 +115,5 @@ const FIELDS = [
   ".",
 ];
 
+
 export default Game;

src/components/PlayerSubmissionForm.css

@@ -28,7 +28,7 @@
 }
 
 .PlayerSubmissionForm__submit-btn:hover {
-  background-color: tomato;
+  background-color: rgb(54, 236, 197);
 }
 
 .PlayerSubmissionFormt__input--invalid {
@@ -38,3 +38,11 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.empty {
+  background-color: lightpink;
+}
+
+h3 {
+  text-align: center;  
+}

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,120 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const CLEARINPUTS = {
+  adj1: '',
+  noun1: '',
+  adv: '',
+  verb: '',
+  adj2: '',
+  noun2: ''
+};
+
+const PlayerSubmissionForm = (props) => {
+
+  // State to handle the pieces of poems.
+  // CLEARINPUTS = use constant to set the input to empty strings.
+  const [poemPiece, setPoemPiece] = useState(CLEARINPUTS);
+  console.log(props);
+  const onChange = (event) => {
+    const newPoem = {
+      ...poemPiece
+    }
 
-      <form className="PlayerSubmissionForm__form" >
+    console.log(newPoem);
+    newPoem[event.target.name] = event.target.value;
+    setPoemPiece(newPoem);
+  }
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    console.log("submitting form")
+    if (poemPiece.adj1 !== '' &&
+      poemPiece.noun1 !== '' &&
+      poemPiece.adv !== '' &&
+      poemPiece.verb !== '' &&
+      poemPiece.adj2 !== '' &&
+      poemPiece.noun2 !== '') {
+      // Format the poem once the submit event happens. 
+      // One line compact everything before to send it to game Component. 
+      const formatPoem = [
+        "The",
+        poemPiece.adj1,
+        poemPiece.noun1,
+        poemPiece.adv,
+        poemPiece.verb,
+        "the",
+        poemPiece.adj2,
+        poemPiece.noun2,
+        "."
+      ].join(" ")
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+      console.log(formatPoem)
+      // send that data back up to app.
+      props.onFormSubmitCallback(formatPoem)
+      // reseting form with no text in the input elements after the first player submitted
+      setPoemPiece(CLEARINPUTS);
+    }
+  };
 
-        </div>
+  // Getting the fields from the parent (Game) Props.field object.
+  const generateFormComponents = props.fields.map((field, i) => {
+    // Initialize the place holder value to empty string. 
+    const valueHolder = poemPiece[field.key];
+    if (field.key) {
+      return (
+        <input
+          key={i}
+          name={field.key}
+          // able to see placeholder text in each text input. 
+          placeholder={field.placeholder}
+          value={valueHolder}
+          onChange={onChange}
+          // Form text inputs to be light pink when they are empty. 
+          // A visual way of seeing that it's invalid when it's blank.
+          className={valueHolder === "" ? "empty" : "filled"}
+        />
+      );
+    } else {
+      return field;
+    }
+  });
 
-        <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
-        </div>
-      </form>
+  //  {/* Displaying the number of the current player. props.currentPlayer from Game.js */}
+  return (
+    <div className="PlayerSubmissionForm">
+      {/* Hide the Player Submission Form after the final poem has been revealed. */}
+      {
+        props.playing &&
+        (
+          <div className="submition-encapsulation">
+            <h3>Player Submission Form for Player #{props.currentPlayer}</h3>
+            <form
+              // Invoking onFormSubmit function. When the player submit the piece of their poem. 
+              onSubmit={onFormSubmit}
+              className="PlayerSubmissionForm__form" >
+              <div className="PlayerSubmissionForm__poem-inputs">
+                {/* Invoking the function to generate dynamicly the Input form. */}
+                {generateFormComponents}
+              </div>
+              <div className="PlayerSubmissionForm__submit">
+                <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+              </div>
+            </form>
+          </div>
+        )
+      }
     </div>
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  currentPlayer: PropTypes.number.isRequired,
+  fields: PropTypes.array.isRequired,
+  onFormSubmitCallback: PropTypes.func.isRequired,
+  playing: PropTypes.bool.isRequired,
+};
+
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,43 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
+
+  const showingLastPoemePiece = () => {
+    const lastPoemIdx = props.poems.length - 1
+    return (
+      <p key={lastPoemIdx}>{props.poems[lastPoemIdx]}</p>
+    )
+  };
+
+  // It returns false if there is not poems within the array.
+  const shouldDisplay = () => {
+    if (props.poems.length === 0) {
+      return false;
+    } else {
+      return props.playing;
+    }
+  }
+
   return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
+    // If the result of sholdDisplay is true -> Display the Most Recent. 
+    // React does not render anything if the return of our func is false. 
+    shouldDisplay() && (
+      <div className="RecentSubmission">
+        {/* See only the most recent submission of poetry in the section */}
+        <h3>The Most Recent Submission</h3>
+        {showingLastPoemePiece()}
+        <p className="RecentSubmission__submission">{}</p>
+      </div>
+    )
   );
 }
 
+RecentSubmission.propTypes = {
+  poems: PropTypes.array.isRequired,
+  playing: PropTypes.bool.isRequired,
+};
+
+
 export default RecentSubmission;