From 766e41e2724acd0c01ab74c64b530733fd0f20a9 Mon Sep 17 00:00:00 2001
From: Katie <katie.vandervoort@gmail.com>
Date: Wed, 22 Apr 2020 21:37:48 -0700
Subject: [PATCH 1/4] completed wave 1

---
 src/components/Game.js                 | 16 ++++-
 src/components/PlayerSubmissionForm.js | 94 ++++++++++++++++++++++++--
 2 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..6a8b127f 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -4,6 +4,8 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+const submissionsList = []
+
 const Game = () => {
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
@@ -13,6 +15,18 @@ const Game = () => {
     }
   }).join(" ");
 
+  const addSubmission = (newSubmission) => {
+    const newSubmissionList = [...submissionsList];
+
+    newSubmissionList.push(newSubmission)
+    console.log("the new submission (in game)")
+    console.log(newSubmission)
+    console.log("the new submission list (in game)")
+    console.log(newSubmissionList)
+  }
+
+
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -27,7 +41,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={addSubmission}/>
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..dd2d218d 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,21 +1,107 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+
+const PlayerSubmissionForm = (props) => {
+
+  const [submission, setSubmission] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    console.log(event.target)
+
+    props.onSubmitCallback(submission)
+
+    setSubmission({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    })
+
+  };
+
+  const onInputChange = (event) => {
+    console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+    // Duplicate formFields into new object
+    const newSubmissionFields = {
+      ...submission,
+    }
+  
+    newSubmissionFields[event.target.name] = event.target.value;
+    setSubmission(newSubmissionFields);
+  }
+
   return (
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{  }</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
           }
+
+          <p>{props.fields[0]}</p>
+          
           <input
-            placeholder="hm..."
-            type="text" />
+            placeholder={props.fields[1].placeholder}
+            value={submission.adj1}
+            name="adj1"
+            type="text"
+            onChange={onInputChange}/>
+
+            <input
+            placeholder={props.fields[2].placeholder}
+            value={submission.noun1}
+            name="noun1"
+            type="text"
+            onChange={onInputChange}/>
+
+            <input
+            placeholder={props.fields[3].placeholder}
+            value={submission.adv}
+            name="adv"
+            type="text"
+            onChange={onInputChange}/>
+
+            <input
+            placeholder={props.fields[4].placeholder}
+            value={submission.verb}
+            name="verb"
+            type="text"
+            onChange={onInputChange}/>
+
+            <p>{props.fields[5]}</p>
+
+            <input
+            placeholder={props.fields[6].placeholder}            
+            value={submission.adj2}
+            name="adj2"
+            type="text"
+            onChange={onInputChange}/>
+
+            <input
+            placeholder={props.fields[7].placeholder}
+            value={submission.noun2}
+            name="noun2"
+            type="text"
+            onChange={onInputChange}/>
 
         </div>
 

From 0860f62c8736f00740127791ac3481aa2ab415fc Mon Sep 17 00:00:00 2001
From: Katie <katie.vandervoort@gmail.com>
Date: Wed, 22 Apr 2020 21:47:17 -0700
Subject: [PATCH 2/4] finished implementing user stories of wave 1

---
 src/components/Game.js                 | 13 +++++++------
 src/components/PlayerSubmissionForm.js |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 6a8b127f..3736628c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -15,14 +15,15 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [submissions, setSubmissionList] = useState(submissionsList)
+
   const addSubmission = (newSubmission) => {
-    const newSubmissionList = [...submissionsList];
+
+    const newSubmissionList = [...submissions];
 
     newSubmissionList.push(newSubmission)
-    console.log("the new submission (in game)")
-    console.log(newSubmission)
-    console.log("the new submission list (in game)")
-    console.log(newSubmissionList)
+    setSubmissionList(newSubmissionList)
+
   }
 
 
@@ -41,7 +42,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={addSubmission}/>
+      <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={addSubmission} playerNumber={submissions.length+1}/>
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index dd2d218d..fd1a14b8 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -44,7 +44,7 @@ const PlayerSubmissionForm = (props) => {
 
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.playerNumber}</h3>
 
       <form 
         className="PlayerSubmissionForm__form" 

From 3f24c1f260e059a17f10c0cfcc4882a844aef00f Mon Sep 17 00:00:00 2001
From: Katie <katie.vandervoort@gmail.com>
Date: Wed, 22 Apr 2020 22:54:45 -0700
Subject: [PATCH 3/4] implemented wave 2

---
 src/components/FinalPoem.js        | 13 +++++++++++--
 src/components/Game.js             | 27 ++++++++++++++++++++++-----
 src/components/RecentSubmission.js |  3 ++-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..ed5deb47 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,13 +1,22 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './FinalPoem.css';
 
+
 const FinalPoem = (props) => {
 
+  const listOfSentences = props.submissions.map(submission => {
+    return (
+      <p>The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.ajd2} {submission.noun2}.</p>
+    );
+  })
+
+
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {listOfSentences}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 3736628c..1a250982 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -4,7 +4,6 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
-const submissionsList = []
 
 const Game = () => {
   const exampleFormat = FIELDS.map((field) => {
@@ -15,7 +14,7 @@ const Game = () => {
     }
   }).join(" ");
 
-  const [submissions, setSubmissionList] = useState(submissionsList)
+  const [submissions, setSubmissionList] = useState([])
 
   const addSubmission = (newSubmission) => {
 
@@ -23,7 +22,15 @@ const Game = () => {
 
     newSubmissionList.push(newSubmission)
     setSubmissionList(newSubmissionList)
+    console.log(newSubmissionList)
 
+  };
+
+  let mostRecentSubmissionSentence = ""
+
+  if (submissions.length > 0){
+    let mostRecentSubmission = submissions[submissions.length-1]
+    mostRecentSubmissionSentence = "The " + mostRecentSubmission.adj1 + " " + mostRecentSubmission.noun1 + " " + mostRecentSubmission.adv + " " + mostRecentSubmission.verb + " the " + mostRecentSubmission.adj2 + " " + mostRecentSubmission.noun2 + "."
   }
 
 
@@ -40,11 +47,21 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission 
+        mostRecentSubmission={mostRecentSubmissionSentence}
+      />
+
 
-      <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={addSubmission} playerNumber={submissions.length+1}/>
+      <PlayerSubmissionForm 
+        fields={FIELDS} 
+        onSubmitCallback={addSubmission} 
+        playerNumber={submissions.length+1}
+      />
 
-      <FinalPoem />
+      <FinalPoem 
+        submissions={submissions}
+        format={exampleFormat}
+      />
 
     </div>
   );
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..a34c1fe2 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,10 +2,11 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+  <p className="RecentSubmission__submission">{props.mostRecentSubmission}</p>
     </div>
   );
 }

From 62f076bd65ebc65ad2a3742f76833986e4e719f9 Mon Sep 17 00:00:00 2001
From: Katie <katie.vandervoort@gmail.com>
Date: Wed, 22 Apr 2020 23:48:34 -0700
Subject: [PATCH 4/4] implemented wave 3

---
 src/components/FinalPoem.js            | 13 +++++++++++--
 src/components/Game.js                 | 11 ++++++-----
 src/components/PlayerSubmissionForm.js | 25 ++++++++++++++-----------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index ed5deb47..672950ad 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,23 +4,32 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const emptyList = <p></p>
   const listOfSentences = props.submissions.map(submission => {
     return (
       <p>The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.ajd2} {submission.noun2}.</p>
     );
   })
 
+  const [reveal, setReveal] = useState(false)
+
+  const revealSentences = () => { 
+    props.setGameOverCallback(true);
+    setReveal(true);
+  }
+
+
 
 
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-        {listOfSentences}
+        {reveal ? listOfSentences : emptyList}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {reveal ? "" : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={revealSentences}/>}
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 1a250982..04bd4fad 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -33,7 +33,7 @@ const Game = () => {
     mostRecentSubmissionSentence = "The " + mostRecentSubmission.adj1 + " " + mostRecentSubmission.noun1 + " " + mostRecentSubmission.adv + " " + mostRecentSubmission.verb + " the " + mostRecentSubmission.adj2 + " " + mostRecentSubmission.noun2 + "."
   }
 
-
+  const [gameOver, setGameOver] = useState(false)
 
   return (
     <div className="Game">
@@ -47,20 +47,21 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission 
+      {gameOver || submissions.length === 0 ? "" : <RecentSubmission 
         mostRecentSubmission={mostRecentSubmissionSentence}
-      />
+      />}
 
 
-      <PlayerSubmissionForm 
+      {gameOver ? "" : <PlayerSubmissionForm 
         fields={FIELDS} 
         onSubmitCallback={addSubmission} 
         playerNumber={submissions.length+1}
-      />
+      />}
 
       <FinalPoem 
         submissions={submissions}
         format={exampleFormat}
+        setGameOverCallback={setGameOver}
       />
 
     </div>
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index fd1a14b8..cf6eb870 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -33,7 +33,7 @@ const PlayerSubmissionForm = (props) => {
 
   const onInputChange = (event) => {
     console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
-    // Duplicate formFields into new object
+
     const newSubmissionFields = {
       ...submission,
     }
@@ -53,10 +53,6 @@ const PlayerSubmissionForm = (props) => {
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-
           <p>{props.fields[0]}</p>
           
           <input
@@ -64,28 +60,33 @@ const PlayerSubmissionForm = (props) => {
             value={submission.adj1}
             name="adj1"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.adj1 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
 
             <input
             placeholder={props.fields[2].placeholder}
             value={submission.noun1}
             name="noun1"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.noun1 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
             <input
             placeholder={props.fields[3].placeholder}
             value={submission.adv}
             name="adv"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.adv !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
             <input
             placeholder={props.fields[4].placeholder}
             value={submission.verb}
             name="verb"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.verb !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
             <p>{props.fields[5]}</p>
 
@@ -94,14 +95,16 @@ const PlayerSubmissionForm = (props) => {
             value={submission.adj2}
             name="adj2"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.adj2 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
             <input
             placeholder={props.fields[7].placeholder}
             value={submission.noun2}
             name="noun2"
             type="text"
-            onChange={onInputChange}/>
+            onChange={onInputChange}
+            className={ submission.noun2 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
         </div>