From 234fb415778381d2e112f0722aba4a0f6d5c0d5c Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Tue, 21 Apr 2020 21:30:11 -0700
Subject: [PATCH 1/6] Wave 1

---
 src/components/Game.js                 | 14 +++-
 src/components/PlayerSubmissionForm.js | 95 +++++++++++++++++++++++---
 2 files changed, 100 insertions(+), 9 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..b10e4f7a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,18 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [poem, setPoem] = useState([])
+  const [player, setPlayer] = useState(1)
+
+  const onSubmitFormClickCallback = (line) => {
+    const newPoem = [...poem];
+    newPoem.push(Object.values(line).join(" "));
+    setPoem(newPoem);
+    console.log(newPoem);
+    const newPlayer = player + 1
+    setPlayer(newPlayer);
+  }
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -27,7 +39,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm player={player} onClickCallback={onSubmitFormClickCallback}/>
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..18880137 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,26 +1,105 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const [line, setLine] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  const onInputChange = (e) => {
+    const newSubmission = {
+      ...line,
+    }
+    newSubmission[e.target.name] = e.target.value;
+    // console.log(e.target.value);
+    setLine(newSubmission);
+  };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    if (
+      line.adj1 !== '' &&
+      line.noun1 !== '' &&
+      line.adv !== '' &&
+      line.verb !== '' &&
+      line.adj2 !== '' &&
+      line.noun2 !== ''
+    ) {
+      props.onClickCallback(line);
+      console.log(line);
+
+      setLine({
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        adj2: '',
+        noun2: ''
+      });
+    };
+  };
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.player}</h3>
 
       <form className="PlayerSubmissionForm__form" >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+          The
+          <input
+            name="adj1"
+            onChange={onInputChange}
+            placeholder="adjective"
+            value={line.adj1}
+            type="text" />
+          <input
+            name="noun1"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={line.noun1}
+            type="text" />
+          <input
+            name="adv"
+            onChange={onInputChange}
+            placeholder="adverb"
+            value={line.name}
+            type="text" />
+          <input
+            name="verb"
+            onChange={onInputChange}
+            placeholder="verb"
+            value={line.verb}
+            type="text" />
+          the
+          <input
+            name="adj2"
+            onChange={onInputChange}
+            placeholder="adjective"
+            value={line.adj2}
+            type="text" />
           <input
-            placeholder="hm..."
+            name="noun2"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={line.noun2}
             type="text" />
 
         </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"
+            onClick={onFormSubmit}
+          />
         </div>
       </form>
     </div>

From 37bf904687c9ad36dbf03628b797744d40e785c9 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Wed, 22 Apr 2020 08:33:13 -0700
Subject: [PATCH 2/6] wave 2

---
 src/components/FinalPoem.js            | 25 ++++++++++++++++++-------
 src/components/Game.js                 | 13 ++++++++++---
 src/components/PlayerSubmissionForm.js |  2 +-
 src/components/RecentSubmission.js     |  2 +-
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..2d1c0349 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,17 +1,28 @@
 import React from 'react';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({isDone, poem, onClickCallback}) => {
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
+        {
+          isDone && (
+            <section className="FinalPoem__poem">
+              <h3>Final Poem</h3>
+              {poem.map(line => <p>{line}</p>)}
+            </section>
+          )
+        }
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {
+          isDone || 
+          <input 
+          type="button"
+          onClick={onClickCallback}
+          value="We are finished: Reveal the Poem"
+          className="FinalPoem__reveal-btn" />
+        }
+        
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index b10e4f7a..4fe8d372 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -7,16 +7,23 @@ import RecentSubmission from './RecentSubmission';
 const Game = () => {
   const [poem, setPoem] = useState([])
   const [player, setPlayer] = useState(1)
+  const [gameOn, setGameOn] = useState(true)
 
   const onSubmitFormClickCallback = (line) => {
     const newPoem = [...poem];
-    newPoem.push(Object.values(line).join(" "));
+    const {adj1, noun1, adv, verb, adj2, noun2} = line;
+    newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}`)
+    // newPoem.push(Object.values(line).join(" "));
     setPoem(newPoem);
     console.log(newPoem);
     const newPlayer = player + 1
     setPlayer(newPlayer);
   }
 
+  const onFinishPoem = () => {
+    setGameOn(false);
+  };
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -37,11 +44,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission lastLine={poem[poem.length - 1]}/>
 
       <PlayerSubmissionForm player={player} onClickCallback={onSubmitFormClickCallback}/>
 
-      <FinalPoem />
+      <FinalPoem isDone={!gameOn} poem={poem} onClickCallback={onFinishPoem}/>
 
     </div>
   );
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 18880137..e2275f28 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -69,7 +69,7 @@ const PlayerSubmissionForm = (props) => {
             name="adv"
             onChange={onInputChange}
             placeholder="adverb"
-            value={line.name}
+            value={line.adv}
             type="text" />
           <input
             name="verb"
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..3614b3ce 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.lastLine }</p>
     </div>
   );
 }

From 9a8436cef24aefbfd7a124bb1c3fabed1c2b8873 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Wed, 22 Apr 2020 09:02:41 -0700
Subject: [PATCH 3/6] recent submission display

---
 src/components/Game.js                 | 10 +++++++++-
 src/components/PlayerSubmissionForm.js | 14 ++++++++------
 src/components/RecentSubmission.js     | 15 ++++++++++-----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 4fe8d372..69c83149 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -32,6 +32,14 @@ const Game = () => {
     }
   }).join(" ");
 
+  const lastLine = () => {
+    if (poem.length === 0 ) {
+      return "";
+    }
+
+    return poem[poem.length - 1];
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -44,7 +52,7 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission lastLine={poem[poem.length - 1]}/>
+      <RecentSubmission isDone={!gameOn} lastLine={lastLine()}/>
 
       <PlayerSubmissionForm player={player} onClickCallback={onSubmitFormClickCallback}/>
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index e2275f28..ee878461 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -45,6 +45,8 @@ const PlayerSubmissionForm = (props) => {
     };
   };
 
+  
+
   return (
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{props.player}</h3>
@@ -53,38 +55,38 @@ const PlayerSubmissionForm = (props) => {
 
         <div className="PlayerSubmissionForm__poem-inputs">
           The
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="adj1"
             onChange={onInputChange}
             placeholder="adjective"
             value={line.adj1}
             type="text" />
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="noun1"
             onChange={onInputChange}
             placeholder="noun"
             value={line.noun1}
             type="text" />
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="adv"
             onChange={onInputChange}
             placeholder="adverb"
             value={line.adv}
             type="text" />
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="verb"
             onChange={onInputChange}
             placeholder="verb"
             value={line.verb}
             type="text" />
           the
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="adj2"
             onChange={onInputChange}
             placeholder="adjective"
             value={line.adj2}
             type="text" />
-          <input
+          <input className="PlayerSubmissionFormt__input--invalid"
             name="noun2"
             onChange={onInputChange}
             placeholder="noun"
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 3614b3ce..b50e9051 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,12 +1,17 @@
 import React from 'react';
 import './RecentSubmission.css';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({isDone, lastLine}) => {
+  const shouldDisplay = () => {
+    return (!isDone && lastLine);
+  }
   return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{ props.lastLine }</p>
-    </div>
+      shouldDisplay() && (
+        <div className="RecentSubmission">
+          <h3>The Most Recent Submission</h3>
+          <p className="RecentSubmission__submission">{ lastLine }</p>
+        </div>
+      )
   );
 }
 

From 1a9994d0bae9cf1981fb4bd895695728cca4320c Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Wed, 22 Apr 2020 16:01:22 -0700
Subject: [PATCH 4/6] invalid fields are pink

---
 src/components/Game.js                 |  2 +-
 src/components/PlayerSubmissionForm.js | 48 ++++++++++++++++----------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 69c83149..ae81df7a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -12,7 +12,7 @@ const Game = () => {
   const onSubmitFormClickCallback = (line) => {
     const newPoem = [...poem];
     const {adj1, noun1, adv, verb, adj2, noun2} = line;
-    newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}`)
+    newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`)
     // newPoem.push(Object.values(line).join(" "));
     setPoem(newPoem);
     console.log(newPoem);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ee878461..517b8a90 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -11,6 +11,8 @@ const PlayerSubmissionForm = (props) => {
     noun2: '',
   });
 
+  const {adj1, noun1, adv, verb, adj2, noun2} = line
+
   const onInputChange = (e) => {
     const newSubmission = {
       ...line,
@@ -24,12 +26,12 @@ const PlayerSubmissionForm = (props) => {
     event.preventDefault();
 
     if (
-      line.adj1 !== '' &&
-      line.noun1 !== '' &&
-      line.adv !== '' &&
-      line.verb !== '' &&
-      line.adj2 !== '' &&
-      line.noun2 !== ''
+      adj1 !== '' &&
+      noun1 !== '' &&
+      adv !== '' &&
+      verb !== '' &&
+      adj2 !== '' &&
+      noun2 !== ''
     ) {
       props.onClickCallback(line);
       console.log(line);
@@ -45,7 +47,9 @@ const PlayerSubmissionForm = (props) => {
     };
   };
 
-  
+  const inputDisplay = (name) => {
+    return (name !== "") ? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid";
+  }
 
   return (
     <div className="PlayerSubmissionForm">
@@ -55,42 +59,48 @@ const PlayerSubmissionForm = (props) => {
 
         <div className="PlayerSubmissionForm__poem-inputs">
           The
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input 
+            className={inputDisplay(adj1)}
             name="adj1"
             onChange={onInputChange}
             placeholder="adjective"
-            value={line.adj1}
+            value={adj1}
             type="text" />
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input 
+            className={inputDisplay(noun1)}
             name="noun1"
             onChange={onInputChange}
             placeholder="noun"
-            value={line.noun1}
+            value={noun1}
             type="text" />
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input
+            className={inputDisplay(adv)}
             name="adv"
             onChange={onInputChange}
             placeholder="adverb"
-            value={line.adv}
+            value={adv}
             type="text" />
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input
+            className={inputDisplay(verb)}
             name="verb"
             onChange={onInputChange}
             placeholder="verb"
-            value={line.verb}
+            value={verb}
             type="text" />
           the
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input
+            className={inputDisplay(adj2)}
             name="adj2"
             onChange={onInputChange}
             placeholder="adjective"
-            value={line.adj2}
+            value={adj2}
             type="text" />
-          <input className="PlayerSubmissionFormt__input--invalid"
+          <input
+            className={inputDisplay(noun2)}
             name="noun2"
             onChange={onInputChange}
             placeholder="noun"
-            value={line.noun2}
+            value={noun2}
             type="text" />
 
         </div>

From 485e7ef6a700b363cb58038180ea5aec8e5624a7 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Wed, 22 Apr 2020 21:23:35 -0700
Subject: [PATCH 5/6] all waves

---
 src/components/Game.js                 |  4 +++-
 src/components/PlayerSubmissionForm.js | 13 ++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ae81df7a..49708cef 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -54,7 +54,7 @@ const Game = () => {
 
       <RecentSubmission isDone={!gameOn} lastLine={lastLine()}/>
 
-      <PlayerSubmissionForm player={player} onClickCallback={onSubmitFormClickCallback}/>
+      <PlayerSubmissionForm isDone={!gameOn} player={player} onClickCallback={onSubmitFormClickCallback}/>
 
       <FinalPoem isDone={!gameOn} poem={poem} onClickCallback={onFinishPoem}/>
 
@@ -94,3 +94,5 @@ const FIELDS = [
 ];
 
 export default Game;
+
+// proptypes
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 517b8a90..cc73fabc 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = (props) => {
+const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => {
   const [line, setLine] = useState({
     adj1: '',
     noun1: '',
@@ -33,7 +33,7 @@ const PlayerSubmissionForm = (props) => {
       adj2 !== '' &&
       noun2 !== ''
     ) {
-      props.onClickCallback(line);
+      onClickCallback(line);
       console.log(line);
 
       setLine({
@@ -52,8 +52,9 @@ const PlayerSubmissionForm = (props) => {
   }
 
   return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{props.player}</h3>
+    !isDone && (
+      <div className="PlayerSubmissionForm">
+      <h3>Player Submission Form for Player #{player}</h3>
 
       <form className="PlayerSubmissionForm__form" >
 
@@ -102,7 +103,7 @@ const PlayerSubmissionForm = (props) => {
             placeholder="noun"
             value={noun2}
             type="text" />
-
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -115,6 +116,8 @@ const PlayerSubmissionForm = (props) => {
         </div>
       </form>
     </div>
+    )
+    
   );
 }
 

From 2056930d0ba50011537027374226f5c2d0b10c80 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Wed, 22 Apr 2020 21:42:34 -0700
Subject: [PATCH 6/6] added propTypes

---
 src/components/FinalPoem.js            | 7 +++++++
 src/components/Game.js                 | 2 +-
 src/components/PlayerSubmissionForm.js | 6 ++++++
 src/components/RecentSubmission.js     | 7 +++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 2d1c0349..1744ef37 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = ({isDone, poem, onClickCallback}) => {
@@ -28,4 +29,10 @@ const FinalPoem = ({isDone, poem, onClickCallback}) => {
   );
 }
 
+FinalPoem.propTypes = {
+  isDone: PropTypes.bool.isRequired,
+  poem: PropTypes.array.isRequired,
+  onClickCallback: PropTypes.func.isRequired,
+};
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 49708cef..cf0adaca 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -95,4 +95,4 @@ const FIELDS = [
 
 export default Game;
 
-// proptypes
+
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index cc73fabc..ff3c9b42 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
 const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => {
@@ -121,5 +122,10 @@ const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  isDone: PropTypes.bool.isRequired,
+  player: PropTypes.number.isRequired,
+  onClickCallback: PropTypes.func.isRequired,
+};
 
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index b50e9051..dc697ee1 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = ({isDone, lastLine}) => {
@@ -15,4 +16,10 @@ const RecentSubmission = ({isDone, lastLine}) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  isDone: PropTypes.bool.isRequired,
+  lastLine: PropTypes.string.isRequired,
+};
+
 export default RecentSubmission;
+