Time - Yesenia

src/App.js

@@ -17,4 +17,4 @@ const App = () => {
 }
 
 
-export default App;
+export default App;

src/components/FinalPoem.js

@@ -3,18 +3,27 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const onPoemReveal = (event) => {
+    props.onPoemFinishCallback(false);
+  }
+
   return (
     <div className="FinalPoem">
+
+      { props.gameStatus ? "" :       
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
+        <div>
+          {props.allSubmissions.map(line => <p>{line}</p>)}
+        </div>
+      </section> }
 
-      </section>
-
+      { props.gameStatus ? 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+        <input type="button" value="We are finished: Reveal the Poem" onClick={onPoemReveal} className="FinalPoem__reveal-btn" />
+      </div> : "" }
     </div>
   );
 }
 
-export default FinalPoem;
+export default FinalPoem;

src/components/Game.js

@@ -5,6 +5,30 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  const [currentPlayer, setCurrentPlayer] = useState(1);
+  const [submissions, setSubmissions] = useState([]);
+  const [gameOn, setGameOn] = useState(true);
+
+  const updateSubmissions = (line) => {
+    const newSubmissions = [];
+
+    submissions.forEach( (submission) => {
+      newSubmissions.push(submission);
+    })
+
+    newSubmissions.push(line);
+
+    setSubmissions(newSubmissions); 
+    setCurrentPlayer(currentPlayer + 1);
+  }
+
+  const updateGameStatus = (bool) =>{
+    if(bool === false){
+      setGameOn(!gameOn);
+    }
+  }
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -25,11 +49,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      { gameOn && submissions.length >=1 ? <RecentSubmission mostRecentSub={submissions[submissions.length - 1]}/> : ""}
 
-      <PlayerSubmissionForm />
+      {gameOn ? <PlayerSubmissionForm currentPlayer={currentPlayer} onSubmitCallback={updateSubmissions}/> : ""}
 
-      <FinalPoem />
+      <FinalPoem allSubmissions={submissions} onPoemFinishCallback={updateGameStatus} gameStatus={gameOn} />
 
     </div>
   );
@@ -66,4 +90,4 @@ const FIELDS = [
   ".",
 ];
 
-export default Game;
+export default Game;

src/components/PlayerSubmissionForm.css

@@ -10,6 +10,15 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  line-height: 32px;
+}
+
+.PlayerSubmissionForm__poem-inputs-unfilled {
+  background-color: rgb(255, 233, 233);
+}
+
+.PlayerSubmissionForm__poem-inputs-filled {
+  background-color: white;
 }
 
 .PlayerSubmissionForm__submit {

src/components/PlayerSubmissionForm.js

@@ -1,22 +1,107 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const emptyLine = {
+    adj1 : '',
+    noun1 : '',
+    adverb : '',
+    verb: '',
+    adj2 : '',
+    noun2 : ''
+  }
+
+  const [lineFields, setLineFields] = useState(emptyLine);
+
+  const onInputChange = (event) => {
+    // duplicate lineFields into a new object
+    const newLineFields = {
+      ...lineFields,
+    }
+
+    // identify which field to update 
+    newLineFields[event.target.name] = event.target.value;
+
+    // update state of the fields
+    setLineFields(newLineFields);
+  }
+
+  const onSubmitLine = (event) => {
+    event.preventDefault();
+
+    // combine line fields into one string
+    const line = 'The'.concat(` ${lineFields.adj1}`).concat(` ${lineFields.noun1}`).concat(` ${lineFields.adverb}`).concat(` ${lineFields.verb}`).concat(' the').concat(` ${lineFields.adj2}`).concat(` ${lineFields.noun2}`).concat('.')
+
+    // send submission back to Game.js 
+    props.onSubmitCallback(line);
+
+    // reset fields
+    setLineFields(emptyLine);
+  }
+
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.currentPlayer}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form onSubmit={onSubmitLine} className="PlayerSubmissionForm__form">
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+          <p>The</p>
+
           <input
-            placeholder="hm..."
-            type="text" />
+            value = {lineFields.adj1}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[0]}
+            placeholder={'adjective'}
+            type="text" 
+            className={lineFields.adj1 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <input
+            value = {lineFields.noun1}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[1]}
+            placeholder={'noun'}
+            type="text" 
+            className={lineFields.noun1 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <input
+            value = {lineFields.adverb}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[2]}
+            placeholder={'adverb'}
+            type="text" 
+            className={lineFields.adverb === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <input
+            value = {lineFields.verb}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[3]}
+            placeholder={'verb'}
+            type="text" 
+            className={lineFields.verb === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <p>the</p>
 
+          <input
+            value = {lineFields.adj2}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[4]}
+            placeholder={'adjective'}
+            type="text" 
+            className={lineFields.adj2 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <input
+            value = {lineFields.noun2}
+            onChange={onInputChange}
+            name={Object.keys(lineFields)[5]}
+            placeholder={'noun'}
+            type="text" 
+            className={lineFields.noun2 === '' ? "PlayerSubmissionForm__poem-inputs-unfilled" : "PlayerSubmissionForm__poem-inputs-filled"}/>
+
+          <p>.</p>
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -27,5 +112,4 @@ const PlayerSubmissionForm = () => {
   );
 }
 
-
-export default PlayerSubmissionForm;
+export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -5,9 +5,9 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.mostRecentSub}</p>
     </div>
   );
 }
 
-export default RecentSubmission;
+export default RecentSubmission;