Time - Sharon Cheung

src/components/FinalPoem.js

@@ -1,20 +1,48 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => {
+
 
+  const finalPoemDisplayed = finalPoemSubmitted.map((sentence , i) => {
+    return (
+      <p key={i}>
+        {sentence}
+      </p>
+    )
+  })
+  //conditional rendering depending on whether the final poem is showing or not
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
+      {isFinalPoemVisible && (
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {finalPoemDisplayed}
+        </section>
+      )}
 
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {!isFinalPoemVisible && (
+        <div className="FinalPoem__reveal-btn-container">
+          <button
+            className="FinalPoem__reveal-btn" 
+            onClick={showFinalPoem}
+          >
+            We are finished: Reveal the Poem
+          </button>
+        </div>
+      )}
     </div>
   );
 }
 
+
+FinalPoem.propTypes = {
+  finalPoemSubmitted: PropTypes.array.isRequired,
+  isFinalPoemVisible: PropTypes.bool.isRequired,
+  showFinalPoem: PropTypes.func.isRequired,
+}
+
+
+
 export default FinalPoem;

src/components/Game.js

@@ -13,26 +13,49 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [mostRecent, setMostRecent] = useState('');
+  const [finalPoem, setFinalPoem] = useState([]);
+  const [isFinalPoemVisible, setIsFinalPoemVisible] = useState(false);
+
+  const onSubmit = (sentence) => {
+    // Store it in an all sentence array 
+    // Store it in most recent submission 
+    setFinalPoem([...finalPoem, sentence]);
+    setMostRecent(sentence);
+  }
+
+
+  const showFinalPoem = () => {
+    setIsFinalPoemVisible(true);
+  }
+
+  // conditional rendering 
+  // hide recent submission if there is no recent submitted or final poem is showing 
+  // hide player submission form if final poem is showing 
   return (
     <div className="Game">
+      <div className="Game">
       <h2>Game</h2>
-
-      <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
-
+      <p>
+        Each player should take turns filling out and submitting the form below.
+        Each turn should be done individually and <em>in secret!</em> 
+        Take inspiration from the revealed recent submission. When all players are finished,
+        click the final button on the bottom to reveal the entire poem.
+      </p>
       <p>Please follow the following format for your poetry submission:</p>
-
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
-
-    </div>
-  );
+      </div>
+      {mostRecent && !isFinalPoemVisible && <RecentSubmission mostRecentSubmitted={mostRecent}/>}
+      {!isFinalPoemVisible && <PlayerSubmissionForm fields={FIELDS} onSubmitCallback={onSubmit}/>}
+      <FinalPoem 
+        finalPoemSubmitted={finalPoem} 
+        showFinalPoem={showFinalPoem}
+        isFinalPoemVisible={isFinalPoemVisible}
+      />
+  </div>
+  )
 }
 
 

src/components/PlayerSubmissionForm.js

@@ -1,24 +1,91 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const PlayerSubmissionForm = (props) => {
+  //set state for current player number
+  const[currentPlayer, setCurrentPlayer] = useState(1);
+  // set state for the form input
+  const[formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
 
-      <form className="PlayerSubmissionForm__form" >
+  const fieldComponents = () => {
+    return (
+      props.fields.map((field , i )=> {
+        if (typeof field === 'string') {
+          return (
+            <div key={i}>
+              {field}
+            </div>
+          )
+        } else {
+          return (
+            <input
+              key={field.key}
+              className={formFields[field.key] === ''? 'PlayerSubmissionFormt__input--invalid': null}
+              placeholder={field.placeholder}
+              name={field.key}
+              value={formFields[field.key]}
+              type="text" 
+              onChange={onInputChange}
+            />
+            )
+        }
+      })
+    )
+  }
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  const onInputChange = (event) => {
+    const newFormField = {
+      ...formFields
+    }
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+    newFormField[event.target.name] = event.target.value;
+    setFormFields(newFormField);
+  }
 
-        </div>
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    let sentence_array = [];
+    props.fields.forEach(field => {
+      if (typeof field === 'string') {
+        sentence_array.push(field);
+      } else {
+        sentence_array.push(formFields[field.key]);
+      }
+    });
+
+    // Put all the words together in a sentence.
+    let sentence = sentence_array.join(' ')
+    props.onSubmitCallback(sentence);
+
+    // reset state of the form
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    })
 
+    //reset Player
+    setCurrentPlayer(currentPlayer + 1);
+  } 
+
+  return (
+    <div className="PlayerSubmissionForm">
+      <h3>Player Submission Form for Player #{currentPlayer}</h3>
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit} >
+        <div className="PlayerSubmissionForm__poem-inputs" >
+          {fieldComponents()}
+        </div>
         <div className="PlayerSubmissionForm__submit">
           <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
         </div>
@@ -27,5 +94,9 @@ const PlayerSubmissionForm = () => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  onSubmitCallback: PropTypes.func.isRequired
+}
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
+
+const RecentSubmission = ({mostRecentSubmitted}) => {
+
 
-const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{mostRecentSubmitted}</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  mostRecentSubmitted: PropTypes.string.isRequired,
+}
+
 export default RecentSubmission;