Space- Yieni

src/components/FinalPoem.js

@@ -1,20 +1,43 @@
 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>
+  })
+
+  const onFinalSubmit = () => {
+    props.onClickCallback()
+  }
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</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>
   );
 }
 
+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;

src/components/Game.js

@@ -13,6 +13,31 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [revealSubmission, setRevealSubmission] = useState(false)
+  const [revealFinalPoem, setRevealFinalPoem] = useState(false)
+  const [poems, setPoems] = useState([]);
+
+
+  const createPoems = (poemsCreated) => {
+    const newPoems = [...poems];
+
+    newPoems.push({
+      firstAdjective: poemsCreated.firstAdjective,
+      firstNoun: poemsCreated.firstNoun,
+      adverb: poemsCreated.adverb,
+      verb: poemsCreated.verb,
+      secondAdjective: poemsCreated.secondAdjective,
+      secondNoun: poemsCreated.secondNoun,
+    });
+
+    setRevealSubmission(true);
+    setPoems(newPoems);
+  };
+
+  const onFinalPoemClick = () => {
+    setRevealFinalPoem(true)
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +50,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      { !revealFinalPoem && revealSubmission? <RecentSubmission recentPoem={poems[poems.length - 1] }/> : ""}
 
-      <PlayerSubmissionForm />
+      {revealFinalPoem? "" : <PlayerSubmissionForm  addPoemCallback={createPoems}  />}
 
-      <FinalPoem />
+      <FinalPoem revealFinalPoem={revealFinalPoem} finalPoem={poems} onClickCallback={onFinalPoemClick} />
 
     </div>
   );

src/components/PlayerSubmissionForm.css

@@ -35,6 +35,10 @@
   background-color: #FFE9E9;
 }
 
+.PlayerSubmissionFormt__input--valid {
+  background-color: white;
+}
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -1,22 +1,114 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from "prop-types";
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const [count, setCount] = useState(1)
+  const [formFields, setFormFields] = useState({
+    firstAdjective: '',
+    firstNoun: '',
+    adverb: '',
+    verb: '',
+    secondAdjective: '',
+    secondNoun: '',
+  });
+
+  const onInputChange = (event) => {
+    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();
+
+    props.addPoemCallback(formFields);
+
+    setFormFields({
+      firstAdjective: '',
+      firstNoun: '',
+      adverb: '',
+      verb: '',
+      secondAdjective: '',
+      secondNoun: '',
+    });
+  };
   return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+    <div className="PlayerSubmissionForm" >
+      <h3>Player Submission Form for Player #{count}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
+          The
+          <input
+           name="firstAdjective"
+           onChange={onInputChange}
+           value={formFields.firstAdjective}
+           placeholder="adjective"
+           type="text"
+           className= {isValid("firstAdjective")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
           <input
-            placeholder="hm..."
-            type="text" />
+           name="firstNoun"
+           onChange={onInputChange}
+           value={formFields.firstNoun}
+           placeholder="noun"
+           type="text"
+           className= {isValid("firstNoun")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
 
+          <input
+           name="adverb"
+           onChange={onInputChange}
+           value={formFields.adverb}
+           placeholder="adverb"
+           type="text"
+           className= {isValid("adverb")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
+
+          <input
+           name="verb"
+           onChange={onInputChange}
+           value={formFields.verb}
+           placeholder="verb"
+           type="text"
+           className= {isValid("verb")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
+
+          the
+          <input
+           name="secondAdjective"
+           onChange={onInputChange}
+           value={formFields.secondAdjective}
+           placeholder="adjective"
+           type="text"
+           className= {isValid("secondAdjective")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
+
+          <input
+           name="secondNoun"
+           onChange={onInputChange}
+           value={formFields.secondNoun}
+           placeholder="noun"
+           type="text"
+           className= {isValid("secondNoun")? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -27,5 +119,8 @@ const PlayerSubmissionForm = () => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  addPoemCallback: PropTypes.func.isRequired,
+};
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,24 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from "prop-types";
 
 const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</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>
   );
 }
 
+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;