From f47ffa3b9e58e8521cfa7fd9cbe293c9f3536156 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 19:37:12 -0700
Subject: [PATCH 01/11] set up form input fields

---
 src/components/PlayerSubmissionForm.js | 37 ++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..ca41f7c7 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
 const PlayerSubmissionForm = () => {
+
   return (
     <div className="PlayerSubmissionForm">
       <h3>Player Submission Form for Player #{  }</h3>
@@ -9,13 +10,39 @@ const PlayerSubmissionForm = () => {
       <form className="PlayerSubmissionForm__form" >
 
         <div className="PlayerSubmissionForm__poem-inputs">
+          The
+          <input
+           placeholder="adjective"
+           type="text"
+          />
+
+          <input
+           placeholder="noun"
+           type="text"
+          />
+
+          <input
+           placeholder="adverb"
+           type="text"
+          />
+
+          <input
+           placeholder="verb"
+           type="text"
+          />
+
+          the
+          <input
+           placeholder="adjective"
+           type="text"
+          />
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
           <input
-            placeholder="hm..."
-            type="text" />
+           placeholder="noun"
+           type="text"
+          />
+        
+          
 
         </div>
 

From 6237d0dcd34096cd7328830ed840e1cd970f8945 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 21:29:03 -0700
Subject: [PATCH 02/11]  set use states in player submission form and game

---
 src/components/Game.js                 | 23 +++++++++++++--
 src/components/PlayerSubmissionForm.js | 41 +++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..ce7aa69e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,6 +13,25 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [poems, setPoems] = useState([])
+  const createPoems = (poemsCreated) => {
+    const newPoems = [...poems];
+
+    const nextId = Math.max([...poems].map((poem) => poem.id)) + 1
+
+    newPoems.push({
+      firstAdjective: '',
+      firstNoun: '',
+      adverb: '',
+      verb: '',
+      secondAdjective: '',
+      secondNound: '',
+      id: nextId
+    });
+
+    setPoems(newPoems);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,9 +44,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission addPoemCallback={createPoems} />
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm  />
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ca41f7c7..dfaa1893 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,48 +2,81 @@ import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
 const PlayerSubmissionForm = () => {
+  const [formFields, setFormFields] = useState({
+    firstAdjective: '',
+    firstNoun: '',
+    adverb: '',
+    verb: '',
+    secondAdjective: '',
+    secondNoun: '',
+    id: 1
+  });
 
+  const onInputChange = (event) => {
+    console.log(event.target.value)
+    const newFormFields = {
+      ...formFields
+    }
+
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  }
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{formFields.id}</h3>
 
       <form className="PlayerSubmissionForm__form" >
 
         <div className="PlayerSubmissionForm__poem-inputs">
           The
           <input
+           name="firstAdjective"
+           onChange={onInputChange}
+           value={formFields.firstAdjective}
            placeholder="adjective"
            type="text"
           />
 
           <input
+           name="firstNoun"
+           onChange={onInputChange}
+           value={formFields.firstNoun}
            placeholder="noun"
            type="text"
           />
 
           <input
+           name="adverb"
+           onChange={onInputChange}
+           value={formFields.adverb}
            placeholder="adverb"
            type="text"
           />
 
           <input
+           name="verb"
+           onChange={onInputChange}
+           value={formFields.verb}
            placeholder="verb"
            type="text"
           />
 
           the
           <input
+           name="secondAdjective"
+           onChange={onInputChange}
+           value={formFields.secondAdjective}
            placeholder="adjective"
            type="text"
           />
 
           <input
+           name="secondNoun"
+           onChange={onInputChange}
+           value={formFields.secondNoun}
            placeholder="noun"
            type="text"
           />
-        
-          
-
         </div>
 
         <div className="PlayerSubmissionForm__submit">

From f84c0d3ca06759666ad9fd374a00ae42e0077a39 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 22:08:10 -0700
Subject: [PATCH 03/11] wirte onFormSubmit function

---
 src/components/Game.js                 | 16 ++++++++--------
 src/components/PlayerSubmissionForm.js | 23 +++++++++++++++++++----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index ce7aa69e..34287451 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -20,12 +20,12 @@ const Game = () => {
     const nextId = Math.max([...poems].map((poem) => poem.id)) + 1
 
     newPoems.push({
-      firstAdjective: '',
-      firstNoun: '',
-      adverb: '',
-      verb: '',
-      secondAdjective: '',
-      secondNound: '',
+      firstAdjective: poemsCreated.firstAdjective,
+      firstNoun: poemsCreated.firstNoun,
+      adverb: poemsCreated.adverb,
+      verb: poemsCreated.verb,
+      secondAdjective: poemsCreated.secondAdjective,
+      secondNoun: poemsCreated.secondNoun,
       id: nextId
     });
 
@@ -44,9 +44,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission addPoemCallback={createPoems} />
+      <RecentSubmission />
 
-      <PlayerSubmissionForm  />
+      <PlayerSubmissionForm addPoemCallback={createPoems}  />
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index dfaa1893..401a2e8c 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 = () => {
+const PlayerSubmissionForm = (props) => {
   const [formFields, setFormFields] = useState({
     firstAdjective: '',
     firstNoun: '',
@@ -13,7 +13,6 @@ const PlayerSubmissionForm = () => {
   });
 
   const onInputChange = (event) => {
-    console.log(event.target.value)
     const newFormFields = {
       ...formFields
     }
@@ -21,11 +20,27 @@ const PlayerSubmissionForm = () => {
     newFormFields[event.target.name] = event.target.value;
     setFormFields(newFormFields);
   }
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    props.addPoemCallback(formFields);
+
+    setFormFields({
+      firstAdjective: '',
+      firstNoun: '',
+      adverb: '',
+      verb: '',
+      secondAdjective: '',
+      secondNoun: '',
+      id: 1,
+    });
+  };
   return (
-    <div className="PlayerSubmissionForm">
+    <div className="PlayerSubmissionForm" >
       <h3>Player Submission Form for Player #{formFields.id}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
           The

From 57a64239f381fd636a80efdbb13ff318a81f5fa4 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 22:47:30 -0700
Subject: [PATCH 04/11] write hook to keep track of player writing poem

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 34287451..8cacd0c0 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,7 +13,7 @@ const Game = () => {
     }
   }).join(" ");
 
-  const [poems, setPoems] = useState([])
+  const [poems, setPoems] = useState([{id: 0}])
   const createPoems = (poemsCreated) => {
     const newPoems = [...poems];
 
@@ -46,7 +46,7 @@ const Game = () => {
 
       <RecentSubmission />
 
-      <PlayerSubmissionForm addPoemCallback={createPoems}  />
+      <PlayerSubmissionForm  recentPoem={poems[poems.length - 1]} addPoemCallback={createPoems}  />
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 401a2e8c..189425d3 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
 const PlayerSubmissionForm = (props) => {
+  const [count, setCount] = useState(1)
   const [formFields, setFormFields] = useState({
     firstAdjective: '',
     firstNoun: '',
@@ -22,6 +23,7 @@ const PlayerSubmissionForm = (props) => {
   }
 
   const onFormSubmit = (event) => {
+    setCount(count + 1)
     event.preventDefault();
 
     props.addPoemCallback(formFields);
@@ -33,12 +35,12 @@ const PlayerSubmissionForm = (props) => {
       verb: '',
       secondAdjective: '',
       secondNoun: '',
-      id: 1,
+      id: props.recentPoem.id + 1
     });
   };
   return (
     <div className="PlayerSubmissionForm" >
-      <h3>Player Submission Form for Player #{formFields.id}</h3>
+      <h3>Player Submission Form for Player #{count}</h3>
 
       <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 

From 031f78ac54a4f190bb5eed0e61d006311f7a806a Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 22:49:47 -0700
Subject: [PATCH 05/11]  getting rid of id because it isn't needed

---
 src/components/Game.js                 | 3 ---
 src/components/PlayerSubmissionForm.js | 2 --
 2 files changed, 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 8cacd0c0..7d997a6c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -17,8 +17,6 @@ const Game = () => {
   const createPoems = (poemsCreated) => {
     const newPoems = [...poems];
 
-    const nextId = Math.max([...poems].map((poem) => poem.id)) + 1
-
     newPoems.push({
       firstAdjective: poemsCreated.firstAdjective,
       firstNoun: poemsCreated.firstNoun,
@@ -26,7 +24,6 @@ const Game = () => {
       verb: poemsCreated.verb,
       secondAdjective: poemsCreated.secondAdjective,
       secondNoun: poemsCreated.secondNoun,
-      id: nextId
     });
 
     setPoems(newPoems);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 189425d3..1348dc6c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -10,7 +10,6 @@ const PlayerSubmissionForm = (props) => {
     verb: '',
     secondAdjective: '',
     secondNoun: '',
-    id: 1
   });
 
   const onInputChange = (event) => {
@@ -35,7 +34,6 @@ const PlayerSubmissionForm = (props) => {
       verb: '',
       secondAdjective: '',
       secondNoun: '',
-      id: props.recentPoem.id + 1
     });
   };
   return (

From 2b6859b73721b14c003845b4a86c1e3823a44f25 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Tue, 21 Apr 2020 23:14:07 -0700
Subject: [PATCH 06/11] complete wave 1

---
 src/components/Game.js                 | 15 +++++++++++----
 src/components/PlayerSubmissionForm.js |  1 +
 src/components/RecentSubmission.js     |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 7d997a6c..04cf1dc6 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,7 +13,14 @@ const Game = () => {
     }
   }).join(" ");
 
-  const [poems, setPoems] = useState([{id: 0}])
+  const [poems, setPoems] = useState([{
+    firstAdjective: '',
+    firstNoun: '',
+    adverb: '',
+    verb: '',
+    secondAdjective: '',
+    secondNoun: '',
+  }]);
   const createPoems = (poemsCreated) => {
     const newPoems = [...poems];
 
@@ -28,7 +35,7 @@ const Game = () => {
 
     setPoems(newPoems);
   };
-
+  console.log(poems)
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -41,9 +48,9 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission recentPoem={poems[poems.length - 1]} />
 
-      <PlayerSubmissionForm  recentPoem={poems[poems.length - 1]} addPoemCallback={createPoems}  />
+      <PlayerSubmissionForm  addPoemCallback={createPoems}  />
 
       <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1348dc6c..ecf90bc6 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -92,6 +92,7 @@ const PlayerSubmissionForm = (props) => {
            placeholder="noun"
            type="text"
           />
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..cb8f15ad 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">{`The ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} the ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun}.`}</p>
     </div>
   );
 }

From fedea16b89a6aad361203f5b7fcdfe6d228a1389 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Wed, 22 Apr 2020 01:34:51 -0700
Subject: [PATCH 07/11] refactor wave 1

---
 src/components/FinalPoem.js        |  3 +--
 src/components/Game.js             | 15 +++++++++++++--
 src/components/RecentSubmission.js |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..89ba0921 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -6,8 +6,7 @@ const FinalPoem = (props) => {
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
+        <h3>{props.final}</h3>
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 04cf1dc6..058525d6 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,6 +13,11 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [recentSubmission, setRececentSubmission] = useState('')
+  const [sentenceStart, setSentenceStart] = useState('')
+  const [sentenceMid, setSentenceMid] = useState('')
+  const [sentenceEnd, setSentenceEnd] = useState('')
+  const [final, setFinal] = useState('')
   const [poems, setPoems] = useState([{
     firstAdjective: '',
     firstNoun: '',
@@ -34,8 +39,14 @@ const Game = () => {
     });
 
     setPoems(newPoems);
+    setRececentSubmission('The Most Recent Submission');
+    setSentenceStart('The')
+    setSentenceMid('the')
+    setSentenceEnd('.')
+    setFinal('Final Poem')
   };
-  console.log(poems)
+  
+  
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -48,7 +59,7 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission recentPoem={poems[poems.length - 1]} />
+      <RecentSubmission submission={recentSubmission} start={sentenceStart} mid={sentenceMid} end={sentenceEnd} recentPoem={poems[poems.length - 1]} final={final} />
 
       <PlayerSubmissionForm  addPoemCallback={createPoems}  />
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index cb8f15ad..12c0934d 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -4,8 +4,8 @@ import './RecentSubmission.css';
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{`The ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} the ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun}.`}</p>
+      <h3>{props.submission}</h3>
+      <p className="RecentSubmission__submission">{`${props.start} ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} ${props.mid} ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun} ${props.end}`}</p>
     </div>
   );
 }

From 5ab5307cc44422c636c0404f3539e8e04f852005 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Wed, 22 Apr 2020 19:44:51 -0700
Subject: [PATCH 08/11] refactor to hide recent submission until submission is
 made

---
 src/components/Game.js             | 16 ++++------------
 src/components/RecentSubmission.js |  4 ++--
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index 058525d6..e6dcd24a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,11 +13,7 @@ const Game = () => {
     }
   }).join(" ");
 
-  const [recentSubmission, setRececentSubmission] = useState('')
-  const [sentenceStart, setSentenceStart] = useState('')
-  const [sentenceMid, setSentenceMid] = useState('')
-  const [sentenceEnd, setSentenceEnd] = useState('')
-  const [final, setFinal] = useState('')
+  const [revealSubmission, setRevealSubmission] = useState(false)
   const [poems, setPoems] = useState([{
     firstAdjective: '',
     firstNoun: '',
@@ -38,12 +34,8 @@ const Game = () => {
       secondNoun: poemsCreated.secondNoun,
     });
 
+    setRevealSubmission(true);
     setPoems(newPoems);
-    setRececentSubmission('The Most Recent Submission');
-    setSentenceStart('The')
-    setSentenceMid('the')
-    setSentenceEnd('.')
-    setFinal('Final Poem')
   };
   
   
@@ -58,8 +50,8 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission submission={recentSubmission} start={sentenceStart} mid={sentenceMid} end={sentenceEnd} recentPoem={poems[poems.length - 1]} final={final} />
+      
+      {revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1]} /> : ""}
 
       <PlayerSubmissionForm  addPoemCallback={createPoems}  />
 
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 12c0934d..b2e3cd5c 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -4,8 +4,8 @@ import './RecentSubmission.css';
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
-      <h3>{props.submission}</h3>
-      <p className="RecentSubmission__submission">{`${props.start} ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} ${props.mid} ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun} ${props.end}`}</p>
+      <h3>'The Most Recent Submission'</h3>
+      <p className="RecentSubmission__submission">{`The ${props.recentPoem.firstAdjective} ${props.recentPoem.firstNoun} ${props.recentPoem.adverb} ${props.recentPoem.verb} the ${props.recentPoem.secondAdjective} ${props.recentPoem.secondNoun}.`}</p>
     </div>
   );
 }

From 910983f6cb3655e5490f7fcf7a96b19c1265bdcf Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Wed, 22 Apr 2020 20:50:38 -0700
Subject: [PATCH 09/11] complete wave 2

---
 src/components/FinalPoem.js | 24 ++++++++++++++++++------
 src/components/Game.js      | 23 ++++++++++-------------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 89ba0921..6336ebe9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,16 +2,28 @@ import React from 'react';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  
+  const result = props.finalPoem.map((poem, i) => {
+    const {firstAdjective, firstNoun, adverb, verb, secondAdjective, secondNoun} = poem;
+      return <p key = {i}> The {firstAdjective} {firstNoun} {adverb} {verb} the {secondAdjective} {secondNoun} .</p>
+  })
+    
+  const onFinalSubmit = () => {
+    props.onClickCallback()
+  }
 
+  
+  
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>{props.final}</h3>
-      </section>
+      {props.revealFinalPoem? <section className="FinalPoem__poem">
+        <h3>{'Final Poem'}</h3>
+        {result}
+      </section> : ""}
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {props.revealFinalPoem? "" : <div className="FinalPoem__reveal-btn-container">
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onFinalSubmit}/>
+      </div>}
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index e6dcd24a..af50ddf8 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -14,14 +14,8 @@ const Game = () => {
   }).join(" ");
 
   const [revealSubmission, setRevealSubmission] = useState(false)
-  const [poems, setPoems] = useState([{
-    firstAdjective: '',
-    firstNoun: '',
-    adverb: '',
-    verb: '',
-    secondAdjective: '',
-    secondNoun: '',
-  }]);
+  const [revealFinalPoem, setRevealFinalPoem] = useState(false)
+  const [poems, setPoems] = useState([]);
   const createPoems = (poemsCreated) => {
     const newPoems = [...poems];
 
@@ -37,7 +31,10 @@ const Game = () => {
     setRevealSubmission(true);
     setPoems(newPoems);
   };
-  
+
+  const onFinalPoemClick = () => {
+    setRevealFinalPoem(true)
+  }
   
   return (
     <div className="Game">
@@ -50,12 +47,12 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-      
-      {revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1]} /> : ""}
 
-      <PlayerSubmissionForm  addPoemCallback={createPoems}  />
+      { !revealFinalPoem && revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1]}/> : ""}
+
+      {revealFinalPoem? "" : <PlayerSubmissionForm  addPoemCallback={createPoems}  />}
 
-      <FinalPoem />
+      <FinalPoem revealFinalPoem={revealFinalPoem} finalPoem={poems} onClickCallback={onFinalPoemClick} />
 
     </div>
   );

From 869531f8c35551a2afd6914f3589a6a1f1064154 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Wed, 22 Apr 2020 21:20:51 -0700
Subject: [PATCH 10/11] add proptypes

---
 src/components/FinalPoem.js            | 20 ++++++++++++++++----
 src/components/PlayerSubmissionForm.js |  4 ++++
 src/components/RecentSubmission.js     | 11 +++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 6336ebe9..e268b89f 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,19 +1,17 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from "prop-types";
 
 const FinalPoem = (props) => {
   
   const result = props.finalPoem.map((poem, i) => {
     const {firstAdjective, firstNoun, adverb, verb, secondAdjective, secondNoun} = poem;
-      return <p key = {i}> The {firstAdjective} {firstNoun} {adverb} {verb} the {secondAdjective} {secondNoun} .</p>
+    return <p key = {i}> The {firstAdjective} {firstNoun} {adverb} {verb} the {secondAdjective} {secondNoun} .</p>
   })
     
   const onFinalSubmit = () => {
     props.onClickCallback()
   }
-
-  
-  
   return (
     <div className="FinalPoem">
       {props.revealFinalPoem? <section className="FinalPoem__poem">
@@ -28,4 +26,18 @@ const FinalPoem = (props) => {
   );
 }
 
+FinalPoem.propTypes = {
+  finalPoem: PropTypes.arrayOf(
+    PropTypes.shape({
+      firstAdjective: PropTypes.string.isRequired,
+      firstNoun: PropTypes.string.isRequired,
+      adverb: PropTypes.string.isRequired,
+      verb: PropTypes.string.isRequired,
+      secondAdjective: PropTypes.string.isRequired,
+      secondNoun: PropTypes.string.isRequired,
+    })
+  ),
+  revealFinalPoem: PropTypes.bool.isRequired,
+  onClickCallback: PropTypes.func.isRequired,
+};
 export default FinalPoem;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ecf90bc6..52f58ffc 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from "prop-types";
 
 const PlayerSubmissionForm = (props) => {
   const [count, setCount] = useState(1)
@@ -103,5 +104,8 @@ const PlayerSubmissionForm = (props) => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  addPoemCallback: PropTypes.func.isRequired,
+};
 
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index b2e3cd5c..e6523f7d 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from "prop-types";
 
 const RecentSubmission = (props) => {
   return (
@@ -10,4 +11,14 @@ const RecentSubmission = (props) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  recentPoem: PropTypes.shape({
+    firstAdjective: PropTypes.string.isRequired,
+    firstNoun: PropTypes.string.isRequired,
+    adverb: PropTypes.string.isRequired,
+    verb: PropTypes.string.isRequired,
+    secondAdjective: PropTypes.string.isRequired,
+    secondNoun: PropTypes.string.isRequired,
+  })
+};
 export default RecentSubmission;

From 898629372c97ab8966fea12703fe9501cf7515c8 Mon Sep 17 00:00:00 2001
From: Yieni <yaynee8d@gmail.com>
Date: Wed, 22 Apr 2020 22:27:46 -0700
Subject: [PATCH 11/11] complete wave & add conditional

---
 src/components/Game.js                  |  4 +++-
 src/components/PlayerSubmissionForm.css |  4 ++++
 src/components/PlayerSubmissionForm.js  | 15 +++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index af50ddf8..11110d14 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -16,6 +16,8 @@ const Game = () => {
   const [revealSubmission, setRevealSubmission] = useState(false)
   const [revealFinalPoem, setRevealFinalPoem] = useState(false)
   const [poems, setPoems] = useState([]);
+
+
   const createPoems = (poemsCreated) => {
     const newPoems = [...poems];
 
@@ -48,7 +50,7 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      { !revealFinalPoem && revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1]}/> : ""}
+      { !revealFinalPoem && revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1] }/> : ""}
 
       {revealFinalPoem? "" : <PlayerSubmissionForm  addPoemCallback={createPoems}  />}
 
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..a45fec75 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -35,6 +35,10 @@
   background-color: #FFE9E9;
 }
 
+.PlayerSubmissionFormt__input--valid {
+  background-color: white;
+}
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 52f58ffc..0267870c 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -17,11 +17,20 @@ const PlayerSubmissionForm = (props) => {
     const newFormFields = {
       ...formFields
     }
+    
 
     newFormFields[event.target.name] = event.target.value;
     setFormFields(newFormFields);
   }
 
+  const isValid = (name) => {
+    if (formFields[name].match(/[a-zA-Z]+ |[^\W-9+)]/)) {
+      return true
+    } else {
+      return false
+    }
+  }
+
   const onFormSubmit = (event) => {
     setCount(count + 1)
     event.preventDefault();
@@ -51,6 +60,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.firstAdjective}
            placeholder="adjective"
            type="text"
+           className= {isValid("firstAdjective")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
 
           <input
@@ -59,6 +69,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.firstNoun}
            placeholder="noun"
            type="text"
+           className= {isValid("firstNoun")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
 
           <input
@@ -67,6 +78,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.adverb}
            placeholder="adverb"
            type="text"
+           className= {isValid("adverb")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
 
           <input
@@ -75,6 +87,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.verb}
            placeholder="verb"
            type="text"
+           className= {isValid("verb")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
 
           the
@@ -84,6 +97,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.secondAdjective}
            placeholder="adjective"
            type="text"
+           className= {isValid("secondAdjective")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
 
           <input
@@ -92,6 +106,7 @@ const PlayerSubmissionForm = (props) => {
            value={formFields.secondNoun}
            placeholder="noun"
            type="text"
+           className= {isValid("secondNoun")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
           />
           .
         </div>