From 563656b9c3b07b6529c5701aa3db40b84a32be1d Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 14:43:37 -0800
Subject: [PATCH 01/11] added fields for player submission form

---
 src/components/Game.js                 |  5 ++-
 src/components/PlayerSubmissionForm.js | 51 +++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..be18208e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,9 @@ class Game extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+
+    }
   }
 
   render() {
@@ -34,7 +37,7 @@ class Game extends Component {
 
         <RecentSubmission />
 
-        <PlayerSubmissionForm />
+        <PlayerSubmissionForm fields={FIELDS} />
 
         <FinalPoem />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..b3a616b8 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,27 +2,60 @@ import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
-
+  
+  
   constructor(props) {
     super(props);
+
+    let stateKeys = {}
+    this.props.fields.forEach((field) => {
+      if (field.key) {
+        stateKeys[field.key] = ''
+      }
+    });
+
+    this.state = stateKeys
   }
 
-  render() {
+  onInputChange = (event) => {
+    const updatedState = {};
 
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState(updatedState);
+    console.log(event.target)
+  }
+
+  render() {
+    
+    const fieldsDisplay = this.props.fields.map((field, i) => {
+      if (field.key) {
+        return (
+          <input
+            key={i}
+            name={field.key}
+            placeholder={field.placeholder}
+            type="text"
+            onChange={this.onInputChange}
+            value={this.state[field.key]}
+          />
+        )
+      } else {
+        return field
+      }
+    })
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" >
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmitHandler} 
+        >
 
           <div className="PlayerSubmissionForm__poem-inputs">
 
-            {
-              // Put your form inputs here... We've put in one below as an example
-            }
-            <input
-              placeholder="hm..."
-              type="text" />
+            {fieldsDisplay}
 
           </div>
 

From 95e44d709c6dd40c56e59ded2043cf43ee2028f0 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 16:22:31 -0800
Subject: [PATCH 02/11] let players submit form when clicking 'submit line'
 button

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

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index b3a616b8..c4ef3fac 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,18 +3,19 @@ import './PlayerSubmissionForm.css';
 
 class PlayerSubmissionForm extends Component {
   
-  
-  constructor(props) {
-    super(props);
-
+  resetState = () => {
     let stateKeys = {}
     this.props.fields.forEach((field) => {
       if (field.key) {
         stateKeys[field.key] = ''
       }
     });
-
-    this.state = stateKeys
+    return stateKeys
+  }
+  
+  constructor(props) {
+    super(props);
+    this.state = this.resetState()
   }
 
   onInputChange = (event) => {
@@ -25,11 +26,30 @@ class PlayerSubmissionForm extends Component {
 
     updatedState[field] = value;
     this.setState(updatedState);
-    console.log(event.target)
+    
+  }
+
+  canSubmit = () => {
+    let complete = true
+    Object.values(this.state).forEach((value) => {
+      if (value === '') {
+        complete = false
+      }
+    })
+    return complete
+  }
+
+  onSubmitHandler = (event) => {
+    event.preventDefault();
+
+    if (this.canSubmit()) {
+      this.props.addSubmissionCallback(this.state);
+      this.setState(this.resetState());
+    }
   }
 
   render() {
-    
+    console.log(this.state)
     const fieldsDisplay = this.props.fields.map((field, i) => {
       if (field.key) {
         return (
@@ -46,6 +66,7 @@ class PlayerSubmissionForm extends Component {
         return field
       }
     })
+
     return (
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>

From 1559b807ea6f33a0961c81290fd962bfa391bad4 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 16:22:49 -0800
Subject: [PATCH 03/11] display most recent submission when clicking 'submit
 line' button

---
 src/components/Game.js             | 42 +++++++++++++++++++++++++-----
 src/components/RecentSubmission.js |  2 +-
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/Game.js b/src/components/Game.js
index be18208e..370c9299 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -9,19 +9,47 @@ class Game extends Component {
   constructor(props) {
     super(props);
     this.state = {
-
+      recentSubmission: undefined,
+      finalPoem: []
     }
   }
 
-  render() {
-
-    const exampleFormat = FIELDS.map((field) => {
+  generateVerse = (fields) => {
+    return fields.map((field) => {
       if (field.key) {
         return field.placeholder;
       } else {
         return field;
       }
     }).join(" ");
+  }
+
+  submitForm = (verse) => {
+    let fields = FIELDS
+    let i = 0
+    let j = 0
+    while (i < fields.length) {
+      if (fields[i]['key']) {
+        fields[i]['placeholder'] = Object.values(verse)[j]
+        i++
+        j++
+      } else {
+        i++
+      }
+    }
+
+    const sentence = this.generateVerse(fields)
+    let updatePoem = this.state.finalPoem
+    updatePoem.push(sentence)
+    this.setState({
+      recentSubmission: sentence,
+      finalPoem: updatePoem
+    })
+  }
+
+  render() {
+
+    const exampleFormat = this.generateVerse(FIELDS)
 
     return (
       <div className="Game">
@@ -35,11 +63,11 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission />
+        <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
-        <PlayerSubmissionForm fields={FIELDS} />
+        <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.submitForm}/>
 
-        <FinalPoem />
+        <FinalPoem finalPoem={this.state.finalPoem}/>
 
       </div>
     );
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..f95a7827 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.recentSubmission }</p>
     </div>
   );
 }

From d138f32f4de6af13a89ba9d7cc9a8d78f51f81b7 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 18:12:31 -0800
Subject: [PATCH 04/11] display final poems when clicking submit button

---
 src/components/FinalPoem.js | 11 ++++++++++-
 src/components/Game.js      | 17 ++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..122d0780 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,15 +3,24 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const finalPoem = props.finalPoem.map((line, i) => {
+    return (
+      <p key={i}>{line}</p>
+    )
+  })
+
+  // console.log(props.finalPoem)
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
+        <div>{finalPoem}</div>
 
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.submitPoemCallback}/>
       </div>
     </div>
   );
diff --git a/src/components/Game.js b/src/components/Game.js
index 370c9299..1e05d75b 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,6 +10,7 @@ class Game extends Component {
     super(props);
     this.state = {
       recentSubmission: undefined,
+      currentPoem: [],
       finalPoem: []
     }
   }
@@ -25,7 +26,7 @@ class Game extends Component {
   }
 
   submitForm = (verse) => {
-    let fields = FIELDS
+    let fields = JSON.parse(JSON.stringify(FIELDS))
     let i = 0
     let j = 0
     while (i < fields.length) {
@@ -39,18 +40,24 @@ class Game extends Component {
     }
 
     const sentence = this.generateVerse(fields)
-    let updatePoem = this.state.finalPoem
+    let updatePoem = this.state.currentPoem
     updatePoem.push(sentence)
     this.setState({
       recentSubmission: sentence,
-      finalPoem: updatePoem
+      currentPoem: updatePoem
+    })
+  }
+
+  submitPoem = () => {
+    this.setState({
+      finalPoem: this.state.currentPoem
     })
   }
 
   render() {
 
     const exampleFormat = this.generateVerse(FIELDS)
-
+    
     return (
       <div className="Game">
         <h2>Game</h2>
@@ -67,7 +74,7 @@ class Game extends Component {
 
         <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.submitForm}/>
 
-        <FinalPoem finalPoem={this.state.finalPoem}/>
+        <FinalPoem finalPoem={this.state.finalPoem} submitPoemCallback={this.submitPoem} />
 
       </div>
     );

From 20baab8180af012c52099711d97de6359773a6ca Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 23:33:05 -0800
Subject: [PATCH 05/11] refactored

---
 src/components/FinalPoem.js            |  1 -
 src/components/Game.js                 | 13 +++++++------
 src/components/PlayerSubmissionForm.js | 13 +++----------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 122d0780..f45476b6 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -16,7 +16,6 @@ const FinalPoem = (props) => {
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
         <div>{finalPoem}</div>
-
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
diff --git a/src/components/Game.js b/src/components/Game.js
index 1e05d75b..49fc6200 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -15,7 +15,7 @@ class Game extends Component {
     }
   }
 
-  generateVerse = (fields) => {
+  generateLine = (fields) => {
     return fields.map((field) => {
       if (field.key) {
         return field.placeholder;
@@ -25,13 +25,13 @@ class Game extends Component {
     }).join(" ");
   }
 
-  submitForm = (verse) => {
+  submitLine = (line) => {
     let fields = JSON.parse(JSON.stringify(FIELDS))
     let i = 0
     let j = 0
     while (i < fields.length) {
       if (fields[i]['key']) {
-        fields[i]['placeholder'] = Object.values(verse)[j]
+        fields[i]['placeholder'] = Object.values(line)[j]
         i++
         j++
       } else {
@@ -39,9 +39,10 @@ class Game extends Component {
       }
     }
 
-    const sentence = this.generateVerse(fields)
+    const sentence = this.generateLine(fields)
     let updatePoem = this.state.currentPoem
     updatePoem.push(sentence)
+
     this.setState({
       recentSubmission: sentence,
       currentPoem: updatePoem
@@ -56,7 +57,7 @@ class Game extends Component {
 
   render() {
 
-    const exampleFormat = this.generateVerse(FIELDS)
+    const exampleFormat = this.generateLine(FIELDS)
     
     return (
       <div className="Game">
@@ -72,7 +73,7 @@ class Game extends Component {
 
         <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
-        <PlayerSubmissionForm fields={FIELDS} addSubmissionCallback={this.submitForm}/>
+        <PlayerSubmissionForm fields={FIELDS} addLineCallback={this.submitLine}/>
 
         <FinalPoem finalPoem={this.state.finalPoem} submitPoemCallback={this.submitPoem} />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index c4ef3fac..ea661391 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -20,13 +20,11 @@ class PlayerSubmissionForm extends Component {
 
   onInputChange = (event) => {
     const updatedState = {};
-
     const field = event.target.name;
     const value = event.target.value;
 
     updatedState[field] = value;
     this.setState(updatedState);
-    
   }
 
   canSubmit = () => {
@@ -41,15 +39,14 @@ class PlayerSubmissionForm extends Component {
 
   onSubmitHandler = (event) => {
     event.preventDefault();
-
     if (this.canSubmit()) {
-      this.props.addSubmissionCallback(this.state);
+      this.props.addLineCallback(this.state);
       this.setState(this.resetState());
     }
   }
 
   render() {
-    console.log(this.state)
+    // console.log(this.state)
     const fieldsDisplay = this.props.fields.map((field, i) => {
       if (field.key) {
         return (
@@ -71,13 +68,9 @@ class PlayerSubmissionForm extends Component {
       <div className="PlayerSubmissionForm">
         <h3>Player Submission Form for Player #{  }</h3>
 
-        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmitHandler} 
-        >
-
+        <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmitHandler} >
           <div className="PlayerSubmissionForm__poem-inputs">
-
             {fieldsDisplay}
-
           </div>
 
           <div className="PlayerSubmissionForm__submit">

From abe90401e092179b2a9db740c5fc2c4cf9a85b84 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Wed, 11 Dec 2019 23:36:31 -0800
Subject: [PATCH 06/11] increase playerCount by submitting a line

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

diff --git a/src/components/Game.js b/src/components/Game.js
index 49fc6200..94a20136 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -10,6 +10,7 @@ class Game extends Component {
     super(props);
     this.state = {
       recentSubmission: undefined,
+      playerCount: 1,
       currentPoem: [],
       finalPoem: []
     }
@@ -42,10 +43,11 @@ class Game extends Component {
     const sentence = this.generateLine(fields)
     let updatePoem = this.state.currentPoem
     updatePoem.push(sentence)
-
+    
     this.setState({
       recentSubmission: sentence,
-      currentPoem: updatePoem
+      playerCount: this.state.playerCount + 1,
+      currentPoem: updatePoem,
     })
   }
 
@@ -73,7 +75,7 @@ class Game extends Component {
 
         <RecentSubmission recentSubmission={this.state.recentSubmission}/>
 
-        <PlayerSubmissionForm fields={FIELDS} addLineCallback={this.submitLine}/>
+        <PlayerSubmissionForm fields={FIELDS} playerCount={ this.state.playerCount } addLineCallback={this.submitLine}/>
 
         <FinalPoem finalPoem={this.state.finalPoem} submitPoemCallback={this.submitPoem} />
 
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ea661391..2d8d7b71 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -66,7 +66,7 @@ class PlayerSubmissionForm extends Component {
 
     return (
       <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+        <h3>Player Submission Form for Player #{ this.props.playerCount }</h3>
 
         <form className="PlayerSubmissionForm__form" onSubmit={this.onSubmitHandler} >
           <div className="PlayerSubmissionForm__poem-inputs">

From 85eb3602350487e0a6e5c6ca072db381e7b0dd2f Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Thu, 12 Dec 2019 00:14:30 -0800
Subject: [PATCH 07/11] hide form and recent submission after submitting final
 poem

---
 src/components/FinalPoem.js | 12 +++++++++---
 src/components/Game.js      | 28 +++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index f45476b6..19b443e4 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -18,9 +18,15 @@ const FinalPoem = (props) => {
         <div>{finalPoem}</div>
       </section>
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.submitPoemCallback}/>
-      </div>
+      {!props.completed ?
+        <div className="FinalPoem__reveal-btn-container">
+          <input
+            type="button"
+            value="We are finished: Reveal the Poem"
+            className="FinalPoem__reveal-btn"
+            onClick={props.submitPoemCallback}
+          />
+        </div> : null}
     </div>
   );
 }
diff --git a/src/components/Game.js b/src/components/Game.js
index 94a20136..6b85ad5e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -12,7 +12,8 @@ class Game extends Component {
       recentSubmission: undefined,
       playerCount: 1,
       currentPoem: [],
-      finalPoem: []
+      finalPoem: [],
+      completed: false
     }
   }
 
@@ -53,7 +54,8 @@ class Game extends Component {
 
   submitPoem = () => {
     this.setState({
-      finalPoem: this.state.currentPoem
+      finalPoem: this.state.currentPoem,
+      completed: true
     })
   }
 
@@ -73,11 +75,23 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        <RecentSubmission recentSubmission={this.state.recentSubmission}/>
-
-        <PlayerSubmissionForm fields={FIELDS} playerCount={ this.state.playerCount } addLineCallback={this.submitLine}/>
-
-        <FinalPoem finalPoem={this.state.finalPoem} submitPoemCallback={this.submitPoem} />
+        {!this.state.completed ?
+          <RecentSubmission
+            recentSubmission={this.state.recentSubmission}
+          /> : null}
+
+        {!this.state.completed ?
+          <PlayerSubmissionForm
+            fields={FIELDS}
+            playerCount={this.state.playerCount}
+            addLineCallback={this.submitLine}
+          /> : null}
+
+        <FinalPoem
+          finalPoem={this.state.finalPoem}
+          submitPoemCallback={this.submitPoem}
+          completed={this.state.completed}
+        />
 
       </div>
     );

From d6ddc037ed389f1d81d6dc7eec8adbdf460cc511 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Thu, 12 Dec 2019 13:54:15 -0800
Subject: [PATCH 08/11] display pink background color when input is invalid

---
 src/components/PlayerSubmissionForm.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 2d8d7b71..dd7c788d 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -49,6 +49,12 @@ class PlayerSubmissionForm extends Component {
     // console.log(this.state)
     const fieldsDisplay = this.props.fields.map((field, i) => {
       if (field.key) {
+        
+        let fieldColor = 'PlayerSubmissionFormt__input--invalid'
+        if (this.state[field.key] !== '') {
+          fieldColor = 'PlayerSubmissionFormt__input'
+        }
+
         return (
           <input
             key={i}
@@ -57,6 +63,7 @@ class PlayerSubmissionForm extends Component {
             type="text"
             onChange={this.onInputChange}
             value={this.state[field.key]}
+            className={fieldColor}
           />
         )
       } else {

From 96f03fb6a4cc27c4d00b67685c6c001ccaebf2b4 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Thu, 12 Dec 2019 13:55:33 -0800
Subject: [PATCH 09/11] cleared comments

---
 src/components/FinalPoem.js            | 2 --
 src/components/PlayerSubmissionForm.js | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index 19b443e4..b08ed4b0 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -9,8 +9,6 @@ const FinalPoem = (props) => {
     )
   })
 
-  // console.log(props.finalPoem)
-
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index dd7c788d..42fda673 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -46,10 +46,9 @@ class PlayerSubmissionForm extends Component {
   }
 
   render() {
-    // console.log(this.state)
     const fieldsDisplay = this.props.fields.map((field, i) => {
       if (field.key) {
-        
+
         let fieldColor = 'PlayerSubmissionFormt__input--invalid'
         if (this.state[field.key] !== '') {
           fieldColor = 'PlayerSubmissionFormt__input'

From cbbf988351d21d02d58a8c43ccebb156d0d37b49 Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Thu, 12 Dec 2019 14:36:41 -0800
Subject: [PATCH 10/11] added proptypes and refactored to hide recentsubmission
 for the first player

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

diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b08ed4b0..f5f016a4 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
@@ -29,4 +30,10 @@ const FinalPoem = (props) => {
   );
 }
 
+FinalPoem.propTypes = {
+  finalPoem: PropTypes.array.isRequired,
+  submitPoemCallback: PropTypes.func.isRequired,
+  completed: PropTypes.bool.isRequired
+};
+
 export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index 6b85ad5e..b5415e9a 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -75,7 +75,7 @@ class Game extends Component {
           { exampleFormat }
         </p>
 
-        {!this.state.completed ?
+        {(!this.state.completed && this.state.playerCount > 1) ?
           <RecentSubmission
             recentSubmission={this.state.recentSubmission}
           /> : null}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 42fda673..877f5266 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
   
@@ -88,4 +89,10 @@ class PlayerSubmissionForm extends Component {
   }
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  playerCount: PropTypes.number.isRequired,
+  addLineCallback: PropTypes.func.isRequired
+};
+
 export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index f95a7827..ff4be898 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,8 @@ const RecentSubmission = (props) => {
   );
 }
 
+RecentSubmission.propTypes = {
+  recentSubmission: PropTypes.string
+};
+
 export default RecentSubmission;

From a5a59e8337c99277d635015c738ade092c36856d Mon Sep 17 00:00:00 2001
From: gracexinran <gracexinran@gmail.com>
Date: Thu, 12 Dec 2019 21:52:21 -0800
Subject: [PATCH 11/11] refactored, optional was implemented in the first step

---
 src/components/RecentSubmission.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index ff4be898..b39c47cb 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -12,7 +12,7 @@ const RecentSubmission = (props) => {
 }
 
 RecentSubmission.propTypes = {
-  recentSubmission: PropTypes.string
+  recentSubmission: PropTypes.string.isRequired
 };
 
 export default RecentSubmission;