water - marj

src/components/FinalPoem.css

@@ -19,3 +19,7 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.hide {
+  display: none;
+}

src/components/FinalPoem.js

@@ -3,16 +3,29 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
+  // variables
+  const revealState = props.revealState
 
+  // creat list of all submissions
+  const finalPoem = props.submissions.map(sentence => {
+    return <p>{sentence}</p>
+  })
+
+// event handler
+  const onPoemReveal = () => {
+    props.onRevealPoemCallback(revealState)
+  }
+
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      <section className={revealState ? 'FinalPoem__poem' : 'hide FinalPoem__poem'}>
         <h3>Final Poem</h3>
-
+        {finalPoem}
       </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={onPoemReveal}/>
       </div>
     </div>
   );

src/components/Game.css

@@ -2,3 +2,7 @@
   text-align: center;
   font-style: italic;
 }
+
+.hide {
+  display: none;
+}

src/components/Game.js

@@ -5,6 +5,11 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  // state
+  const [allSubmissions, setAllSubmissions] = useState([])
+  const [revealed, setRevealed] = useState(false)
+
+  // dynamically make example sentence
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +18,17 @@ const Game = () => {
     }
   }).join(' ');
 
+  // helper functions
+  const addLineToPoem = (line) => {
+    const newSubmission = [...allSubmissions];
+    newSubmission.push(line);
+    setAllSubmissions(newSubmission);
+  }
+
+  const revealFinalPoem = () => {
+    setRevealed(true)
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -24,13 +40,15 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
-
+      <section className={revealed ? 'hide' : ''}>
+        <RecentSubmission mostRecentSubmission={allSubmissions[allSubmissions.length - 1]}/>
+      </section>
+      <section className={revealed ? 'hide' : ''}>
+        <PlayerSubmissionForm sendSubmission={addLineToPoem}/>
+      </section>
+      <section>
+        <FinalPoem submissions={allSubmissions} onRevealPoemCallback={revealFinalPoem} revealState={revealed}/>
+      </section>
     </div>
   );
 }

src/components/PlayerSubmissionForm.js

@@ -3,22 +3,107 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+// initial values for formFields
+const emptySentence = {
+  articleOne: 'The',
+  adj1: '',
+  noun1: '',
+  adv: '',
+  verb: '',
+  articleTwo:'the',
+  adj2: '',
+  noun2: '',
+  puncOne: '.'
+}
+
+const PlayerSubmissionForm = (props) => {
+  // states
+  const [formFields, setFormFields] = useState({...emptySentence});
+  const [currentPlayer, setCurrentPlayer] = useState(1)
+
+  // event handlers
+  const onInputChange = (event) => {
+    const newFormFields = {...formFields}
+    newFormFields[event.target.id] = event.target.value;
+    setFormFields(newFormFields);
+  }
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newSentence = Object.values(formFields).join(' ');
+
+    props.sendSubmission(newSentence);
+
+    setCurrentPlayer(currentPlayer + 1)
+    setFormFields({...emptySentence})
+  };
+
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{ currentPlayer }</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
-          }
+          <span>The </span>
           <input
-            placeholder="hm..."
-            type="text" />
-
+              id="adj1"
+              name="adj1" 
+              placeholder="adjective"
+              type="text"
+              onChange={onInputChange}
+              value={formFields.adj1}
+              className={formFields.adj1 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <input
+              id="noun1"
+              name="noun1"
+              placeholder="noun"
+              type="text" 
+              onChange={onInputChange}
+              value={formFields.noun1}
+              className={formFields.noun1 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <input
+              id="adv"
+              name="adv"
+              placeholder="adverb"
+              type="text" 
+              onChange={onInputChange}
+              value={formFields.adv}
+              className={formFields.adv === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <input
+              id="verb"
+              name="verb"
+              placeholder="verb"
+              type="text"
+              onChange={onInputChange}
+              value={formFields.verb}
+              className={formFields.verb === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <span>the </span>
+          <input
+              id="adj2"
+              name="adj2"
+              placeholder="adjective"
+              type="text"
+              onChange={onInputChange}
+              value={formFields.adj2}
+              className={formFields.adj2 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <input
+              id="noun2"
+              name="noun2"
+              placeholder="noun"
+              type="text"
+              onChange={onInputChange}
+              value={formFields.noun2}
+              className={formFields.noun2 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''}
+          />
+          <span>.</span>
         </div>
 
         <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -6,7 +6,7 @@ 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>
   );
 }