Water @ Hanh Solo Exquisite React Submission

src/App.js

@@ -2,13 +2,18 @@ import React from 'react';
 import './App.css';
 import Game from './components/Game.js';
 
+
 const App = () => {
   return (
     <div className="App">
       <header className="App__header">
         <h1 className="App__title">Exquisite Corpse</h1>
         <p className="App__intro-text">
-          Exquisite corpse, also known as exquisite cadaver (from the original French term cadavre exquis), is a method by which a collection of words or images is collectively assembled. Each collaborator adds to a composition in sequence, either by following a rule (e.g. "The adjective noun adverb verb the adjective noun." as in "The green duck sweetly sang the dreadful dirge.") or by being allowed to see only the end of what the previous person contributed.
+          Exquisite corpse, also known as exquisite cadaver (from the original French term cadavre exquis), 
+          is a method by which a collection of words or images is collectively assembled. 
+          Each collaborator adds to a composition in sequence, either by following a rule
+          (e.g. "The adjective noun adverb verb the adjective noun." as in "The green duck sweetly sang the dreadful dirge.") 
+          or by being allowed to see only the end of what the previous person contributed.
         </p>
       </header>
       <Game />

src/components/FinalPoem.js

@@ -3,23 +3,36 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
-
+  const content = (props.isRevealed) ? (
+              <section className="FinalPoem__poem">
+                <h3>Final Poem</h3>
+                <div>
+                  {(props.submissions).map((string, index) => (
+                    <p key={index}>
+                      {string}
+                    </p>
+                  ))}
+                </div>
+              </section>
+  ) : (
+              <div className="FinalPoem__reveal-btn-container">
+                <input 
+                  type="button" value="We are finished: Reveal the Poem" 
+                  className="FinalPoem__reveal-btn"
+                  onClick={ props.revealPoem }
+                />
+              </div>
+  );
   return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
+          <div className="FinalPoem">
+            {content}
+          </div>
   );
-}
+};
 
+// checking for the types of props that pass in
 FinalPoem.propTypes = {
-  isSubmitted: PropTypes.bool.isRequired,
+  isRevealed: PropTypes.bool.isRequired,
   submissions: PropTypes.arrayOf(PropTypes.string).isRequired,
   revealPoem: PropTypes.func.isRequired,
 };

src/components/Game.js

@@ -11,31 +11,51 @@ const Game = () => {
     } else {
       return field;
     }
-  }).join(' ');
+  }).join(' '); //this is a string
+
+  const [poemLines, setPoemLines] = useState([]); //equivalent of a constant variable 
+
+  const getPlayerSubmission = (newLine) => { //update the state of poemLines
+    const { adj1, noun1, adv, verb, adj2, noun2 } = newLine; // destructuring
+    const newLineValue = 'The ' + adj1 + ' ' + noun1 + ' ' + adv + ' ' + verb + ' the ' + adj2 + ' ' + noun2 + '.'
+    console.log(newLineValue)
+    const newLines = [...poemLines];
+    newLines.push(newLineValue);
+    setPoemLines(newLines);
+  }
+
+  const[isRevealed, setIsRevealed] = useState(false); //keep track if the player has submitted/not
+
+  const revealPoem = (event) => {
+    setIsRevealed(true);
+  }
 
   return (
     <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>
+
+      {/* only show the latest submission/ last item in the array */}
+      {!isRevealed && <RecentSubmission submission={ poemLines[poemLines.length -1] || '' } />}
+      {/* {isRevealed ? null : <RecentSubmission submission={ poemLines[poemLines.length -1] || '' } />} */}
+      {!isRevealed && <PlayerSubmissionForm 
+        fields={ FIELDS } sendSubmission={ getPlayerSubmission } index={ poemLines.length + 1} /> }
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      <FinalPoem revealPoem={ revealPoem } isRevealed={ isRevealed } submissions={ poemLines } />
 
     </div>
   );
 }
 
-
 const FIELDS = [
   'The',
   {

src/components/PlayerSubmissionForm.css

@@ -1,15 +1,16 @@
 .PlayerSubmissionForm {
-  line-height: 3rem;
+  line-height: 2rem;
 }
 
 .PlayerSubmissionForm__form {
-  margin: 2rem auto 3rem auto;
+  margin: 2rem auto 2rem auto;
 }
 
 .PlayerSubmissionForm__poem-inputs {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+
 }
 
 .PlayerSubmissionForm__submit {

src/components/PlayerSubmissionForm.js

@@ -1,24 +1,106 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const setInitialState = () => {
+    const initialStateValue = {}; //this is an object with an ability to set key like hash
+    for ( const field of props.fields ) {
+      if (field.key) {// if this is true
+        initialStateValue[field.key] = ''; //set key and value
+      }
+    }
+    return initialStateValue;
+
+  }
+
+  const [words, updateWords] = useState(setInitialState());
+
+  /*event handlers/listeners*/
+  //this is how the form is gathering and building up data for form
+  const onInputChange = (event) => {
+
+    const newPlayerSubmission = {
+      ...words 
+    };
+
+    const { name, value } =  event.target
+
+    // This sets newformFields to the old value of the form state
+    // and then updates the one field that changed.
+    newPlayerSubmission[name] = value; // updated the value using the hash key
+    updateWords(newPlayerSubmission);  // updated the form with new values
+  }
+
+  //This is the finished data being passed to game
+  const onFormWordSubmission = (event) => {
+    // prevent the form from being submitted
+    event.preventDefault();
+    // print user data
+    console.log(words);
+    // pass data to Game-callback function-your submission is ready
+    props.sendSubmission(words)
+    // clear the submission, get ready for the next player
+    updateWords(setInitialState()); 
+  };
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
-
-      <form className="PlayerSubmissionForm__form" >
+      <h3>Player Submission Form for Player # { props.index }</h3>
 
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormWordSubmission}> 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+          <p>The</p>
           <input
-            placeholder="hm..."
-            type="text" />
-
+            placeholder="adjective"
+            type="text"
+            name='adj1'
+            value={ words.adj1 } 
+            onChange={ onInputChange }
+            className={ !words.adj1.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+          <input
+            placeholder="noun"
+            type="text"
+            name='noun1'
+            value={ words.noun1 } 
+            onChange={ onInputChange }
+            className={ !words.noun1.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+          <input
+            placeholder="adverb"
+            type="text"
+            name='adv'
+            value={ words.adv } 
+            onChange={ onInputChange }
+            className={ !words.adv.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+          <input
+            placeholder="verb"
+            type="text"
+            name='verb'
+            value={ words.verb } 
+            onChange={ onInputChange }
+            className={ !words.verb.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+            <p>the</p>
+          <input
+            placeholder="adjective"
+            type="text"
+            name='adj2'
+            value={ words.adj2 } 
+            onChange={ onInputChange }
+            className={ !words.adj2.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+          <input
+            placeholder="noun"
+            type="text"
+            name='noun2'
+            value={ words.noun2 } 
+            onChange={ onInputChange }
+            className={ !words.noun2.length ? 'PlayerSubmissionFormt__input--invalid' : '' }
+            />
+            <p>.</p>
         </div>
 
         <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -3,13 +3,17 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
-  );
-}
+  if (props.submission) {
+    return (
+      <div className="RecentSubmission">
+        <h3>The Most Recent Submission</h3>
+        <p className="RecentSubmission__submission">{ props.submission }</p>
+      </div>
+    );
+  } else {
+    return (null)
+  }
+};
 
 RecentSubmission.propTypes = {
   submission: PropTypes.string.isRequired,

src/components/finalpoemtest.js

@@ -0,0 +1,46 @@
+const FinalPoem = (props) => {
+
+    if  (props.isRevealed) {
+
+      //event handler
+      const showButton= (event) => {
+
+      return ( 
+        <div className="FinalPoem">
+          <section className="FinalPoem__poem">
+            <h3>Final Poem</h3>
+          </section>
+
+          <div className="FinalPoem__reveal-btn-container">
+            <input 
+              type="button" value="We are finished: Reveal the Poem" 
+              className="FinalPoem__reveal-btn"
+              onClick={ props.revealPoem }
+            />
+            <section>
+              {(props.submissions).map((string, index) => (
+                <p key={index}>
+                  {string}
+                </p>
+              ))}
+            </section>
+          </div>
+        </div>
+      )}
+    else {
+      return(
+      <div className="FinalPoem">
+          <section className="FinalPoem__poem">
+            <h3>Final Poem</h3>
+          </section>
+
+          <div className="FinalPoem__reveal-btn-container">
+            <input 
+              type="button" value="We are finished: Reveal the Poem" 
+              className="FinalPoem__reveal-btn"
+              onClick={ props.revealPoem }
+            />
+          </div>
+      </div>
+      )}
+  };