Space- Jeta

src/components/FinalPoem.js

@@ -1,20 +1,50 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from "prop-types"
 
 const FinalPoem = (props) => {
 
+  const result = props.poems.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 onButtonClick = () =>{
+    props.callBackOnShowPoem();
+  };
+
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      {!props.showPoem && <section className="FinalPoem__poem" >
         <h3>Final Poem</h3>
+        {result}
 
-      </section>
+      </section>}
 
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {props.showPoem && <div className="FinalPoem__reveal-btn-container">
+        <input type="button" 
+        value="We are finished: Reveal the Poem" 
+        className="FinalPoem__reveal-btn" 
+        onClick = {onButtonClick}/>
+      </div>}
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  poems: 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,
+    })
+  ),
+  showPoem: PropTypes.bool.isRequired,
+  callBackOnShowPoem: PropTypes.func.isRequired,
+};
+
+
 export default FinalPoem;

src/components/Game.js

@@ -5,6 +5,9 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [poemSubmissions, setPoemList] = useState([]);
+  const [showPoem, setshowPoem] = useState(true);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +16,25 @@ const Game = () => {
     }
   }).join(" ");
 
+  const callBackOnShowPoem = () => {
+    setshowPoem(false);
+  };
+
+  const addPoem = (poem) => {
+    const newPoemList = [...poemSubmissions];
+
+    newPoemList.push({
+      firstAdjective: poem.firstAdjective,
+      firstNoun: poem.firstNoun,
+      adverb: poem.adverb,
+      verb: poem.verb,
+      secondAdjective: poem.secondAdjective,
+      secondNoun: poem.secondNoun,
+    });
+
+    setPoemList(newPoemList);
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -24,12 +46,9 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      { (showPoem) && poemSubmissions.length > 0 && <RecentSubmission poem = {poemSubmissions[poemSubmissions.length-1]}/>}
+      { (showPoem) && <PlayerSubmissionForm onCallBackPoem = {addPoem}/>}
+      <FinalPoem poems = {poemSubmissions}  callBackOnShowPoem= {callBackOnShowPoem} showPoem = {showPoem}/>
 
     </div>
   );

src/components/PlayerSubmissionForm.css

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

src/components/PlayerSubmissionForm.js

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

src/components/RecentSubmission.js

@@ -1,13 +1,27 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from "prop-types"
 
 const RecentSubmission = (props) => {
+
+  const {firstAdjective, firstNoun, adverb, verb, secondAdjective, secondNoun} = props.poem;
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{`The ${firstAdjective} ${firstNoun} ${adverb} ${verb} the ${secondAdjective} ${secondNoun}`}</p>
     </div>
   );
 }
 
-export default RecentSubmission;
+RecentSubmission.propTypes = {
+  poem: 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;