Space - Lak

src/App.js

@@ -2,7 +2,10 @@ import React from 'react';
 import './App.css';
 import Game from './components/Game.js';
 
+//Create a callback function for onSubmitCallback
+
 const App = () => {
+
   return (
     <div className="App">
       <header className="App__header">

src/components/FinalPoem.js

@@ -1,20 +1,38 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+  const arrayOfStrings = props.submissions.map((input) =>{
+    return (
+      <p>The {input.adjective1} {input.noun1} {input.adverb} {input.verb} the {input.adjective2} {input.noun2} .</p>
+    )
+  })
 
+  const onButtonClick = () =>{
+    props.onClickCallback()
+  }
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      {props.showComponent && <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>
+        <p>{arrayOfStrings}</p>
+      </section>}
+      {!props.showComponent && <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 = {
+  submissions: PropTypes.arrayOf(PropTypes.object),
+  onClickCallback: PropTypes.func,
+  showComponent: PropTypes.bool
+}
 export default FinalPoem;

src/components/Game.js

@@ -4,38 +4,50 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
-const Game = () => {
+const Game = (props) => {
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
     } else {
       return field;
     }
   }).join(" ");
+  const [mostRecentSubmissionText, setMostRecentSubmissionText] = useState("")
+  const [submissions, setSubmissions] = useState([])
+  const [showComponent, setShowComponent] = useState(false)
+  const createPoem = (poem) =>{
+    const newSubmissions = [...submissions]
+      newSubmissions.push({
+        adjective1:poem.adjective1,
+        noun1: poem.noun1,
+        adverb: poem.adverb,
+        verb: poem.verb,
+        adjective2: poem.adjective2,
+        noun2:poem.noun2 
+      });
+    setSubmissions(newSubmissions);
+    setMostRecentSubmissionText("The Most Recent Submission")
+  }
 
+  const displayFinalPoem = () =>{
+    setShowComponent(!showComponent);
+  }
+
   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>Please follow the following format for your poetry submission:</p>
-
       <p className="Game__format-example">
         { exampleFormat }
       </p>
-
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
-
+      {!showComponent && <RecentSubmission submissions = {submissions} mostRecentSubmissionText={mostRecentSubmissionText}/>}
+      {!showComponent && <PlayerSubmissionForm onSubmitCallback = {createPoem}/>}
+      {<FinalPoem submissions = {submissions} onClickCallback = {displayFinalPoem} showComponent = {showComponent}/>}
     </div>
-  );
+  ); 
 }
 
-
 const FIELDS = [
   "The",
   {

src/components/PlayerSubmissionForm.css

@@ -1,17 +1,24 @@
 .PlayerSubmissionForm {
   line-height: 3rem;
+
 }
 
 .PlayerSubmissionForm__form {
-  margin: 2rem auto 3rem auto;
+  margin: 2rem auto 3rem auto;  
 }
 
 .PlayerSubmissionForm__poem-inputs {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+
 }
 
+.PlayerSubmissionForm__poem-inputs input {
+
+  width: 150px;
+  height: 50px;
+}
 .PlayerSubmissionForm__submit {
   display: flex;
   justify-content: center;
@@ -35,6 +42,10 @@
   background-color: #FFE9E9;
 }
 
+.PlayerSubmissionFormt__input--valid {
+  background-color: white;
+}
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -1,24 +1,146 @@
 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) => {
+  //create a useState hook for the input changes 
+  const [poem, setPoem] = useState({
+    adjective1: "",
+    noun1: "",
+    adverb: "",
+    verb: "",
+    adjective2: "",
+    noun2: ""
+  })
+
+  const [currentPlayer, setPlayer] = useState(1)
+  //create an event handler function for the onChange event listener 
+  const onInputChange = (event) =>{
+    const newPoem = {
+      ...poem
+    }
+    newPoem[event.target.name] = [event.target.value.toLowerCase()]
+    setPoem(newPoem)
+  }
+  //create an event handler function for onSubmit event listener 
+  const onSubmitForm = (event) =>{
+    if (isEmpty()) return // to prevent the user if they miss filling out any field
+    event.preventDefault();
+    console.log("creating a poem");
+    console.log(poem);
+
+    //send call back function to RecentSubmission 
+    props.onSubmitCallback(poem)
+      setPoem({
+        adjective1:"",
+        noun1:"",
+        adverb:"",
+        verb:"",
+        adjective2:"",
+        noun2:""})
+      setPlayer(currentPlayer + 1)
+    }
 
+  // Field validation
+  const inputs = {
+    adjective1:{
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    },
+    noun1:{
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    },
+    adverb: {
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    },
+    verb: {
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    },
+    adjective2: {
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    },
+    noun2: {
+      validation: /.+/,
+      message: "Field must have 1 or more letters"
+    }
+  }
+  //Validate function
+  const fieldValid = (fieldName) =>{
+    return inputs[fieldName].validation.test(poem[fieldName])
+  }
+  const isEmpty = () =>{
+    return(
+      poem.adjective1 === "" ||
+      poem.noun1 === "" ||
+      poem.adverb === "" ||
+      poem.verb === "" ||
+      poem.adjective2 === ""||
+      poem.noun2 === "" 
+    )
+  }
+  return (
+    <div
+      onSubmit = {onSubmitForm} 
+      className="PlayerSubmissionForm">
+      <h3>Player Submission Form for Player #{ currentPlayer }</h3>
       <form className="PlayerSubmissionForm__form" >
-
         <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 = "adjective1"
+            value = {poem.adjective1}
+            onChange = {onInputChange}
+            className = {fieldValid("adjective1")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <input
+            placeholder="noun"
+            type="text" 
+            name = "noun1"
+            value = {poem.noun1}
+            onChange = {onInputChange}
+            className = {fieldValid("noun1")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <input
+            placeholder="adverb"
+            type="text"
+            name = "adverb"
+            value = {poem.adverb}
+            onChange = {onInputChange}
+            className = {fieldValid("adverb")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <input
+            placeholder="verb"
+            type="text" 
+            name = "verb"
+            value = {poem.verb}
+            onChange = {onInputChange}
+            className = {fieldValid("verb")?  'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <p>the</p>
+          <input
+            placeholder="adjective"
+            type="text"
+            name = "adjective2"
+            value = {poem.adjective2}
+            onChange = {onInputChange}
+            className = {fieldValid("adjective2")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <input
+            placeholder="noun"
+            type="text" 
+            name = "noun2"
+            value = {poem.noun2}
+            onChange = {onInputChange}
+            className = {fieldValid("noun2")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'}
+          />
+          <p> .</p>
         </div>
-
         <div className="PlayerSubmissionForm__submit">
           <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
         </div>
@@ -27,5 +149,8 @@ const PlayerSubmissionForm = () => {
   );
 }
 
+PlayerSubmissionForm.proptype = {
+  onSubmitCallback: PropTypes.func,
+}
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,29 @@
 import React from 'react';
 import './RecentSubmission.css';
-
+import PropTypes from 'prop-types';
 const RecentSubmission = (props) => {
+  const submissions = props.submissions.map(input =>{
+    return(
+      `The ${input.adjective1} 
+      ${input.noun1} 
+      ${input.adverb} 
+      ${input.verb} the
+      ${input.adjective2} 
+      ${input.noun2} .`
+    )
+  })
+
   return (
     <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
-    </div>
+      <h3>{props.mostRecentSubmissionText}</h3>
+      <p className="RecentSubmission__submission">{submissions[submissions.length - 1]}</p>
+    </div> 
   );
 }
 
+RecentSubmission.propTypes = {
+  submissions: PropTypes.arrayOf(PropTypes.object),
+  mostRecentSubmissionText: PropTypes.string
+}
+
 export default RecentSubmission;