Space - Chelsea

src/components/FinalPoem.css

@@ -7,7 +7,7 @@
   flex: 0.8;
 
   padding: 1rem;
-  border: 2px black solid;
+  border: 2px rgb(0, 0, 0) solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
 }
@@ -16,6 +16,19 @@
   background-color: tomato;
 }
 
+.noShow{
+  display:none;
+
+}
+
+.show{
+  font-size: 32px;
+  background-color: rgb(7, 189, 89);
+  text-align: center;
+  margin: 0px 300px;
+  border-radius: 20px;
+}
+
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }

src/components/FinalPoem.js

@@ -1,20 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
+  const [show, setShow] = useState(false)
+
+  const onButtonClick = () => {
+    setShow(true)
+
+    props.componentDissapear()
+  };
+
+  const lineComponents = props.props.map((line) => {
+    return (
+    <p>
+      {line}
+    </p>
+    );
+  });
 
   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 className={show ? "noshow" : "FinalPoem__reveal-btn-container"}>
+        <input type="button" onClick={onButtonClick} value="We are finished: Reveal the Poem" className={show ? "noShow" : "FinalPoem__reveal-btn"} />
       </div>
+      <p className={show ? "show" : "noShow"}>
+      {lineComponents}
+      </p>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  props: PropTypes.array,
+  componentDissapear: PropTypes.func.isRequired,
+};
+
 export default FinalPoem;

src/components/Game.css

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

src/components/Game.js

@@ -4,7 +4,19 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+let recent = "";
+let poemLines = [];
+
 const Game = () => {
+  const [poemList, setPoemList] = useState([]);
+  const [player, setPlayer] = useState(1);
+
+  const [show, setShow] = useState(true)
+
+  const componentDissapear = () => {
+    setShow(false)
+  };
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +25,19 @@ const Game = () => {
     }
   }).join(" ");
 
+  const addLine = (line) => {
+    const newPoemList = [...poemList];
+    newPoemList.push({ ...line
+    });
+
+    setPoemList(newPoemList);
+
+    setPlayer(player + 1)
+
+    recent = (Object.values(line)).join(" ");
+    poemLines.push(recent);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +50,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission line={recent} className={`${show ? "RecentSubmission" : "noShow"}`}/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm onSubmitCallback={addLine} player={player} className={`${show ? "PlayerSubmission_form" : "noShow"}`}/>
 
-      <FinalPoem />
+      <FinalPoem props={poemLines} componentDissapear={componentDissapear}/>
 
     </div>
   );

src/components/PlayerSubmissionForm.css

@@ -10,7 +10,11 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-}
+  }
+
+.boxColor {
+  color: pink;
+  }
 
 .PlayerSubmissionForm__submit {
   display: flex;
@@ -35,6 +39,10 @@
   background-color: #FFE9E9;
 }
 
+.valid {
+  background-color: white;
+}
+
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }

src/components/PlayerSubmissionForm.js

@@ -1,21 +1,107 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+  const [line, setLine] = useState({
+    the1: 'The',
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    the2: 'the',
+    adj2: '',
+    noun2: '',
+  });
+
+  const onInputChange = (event) => {
+    console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+
+    const newLine = {
+      ...line
+    }
+
+    newLine[event.target.name] = event.target.value;
+    setLine(newLine);
+  };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    console.log('Submitting form');
+
+    if (line.adj1 !== '' && line.noun1 !== '' && line.adv !== '' && line.verb !== '' && line.adj2 !== '' && line.noun2 !== '') {
+      props.onSubmitCallback(line);  
+      setLine ({    //Clearing Fields
+        the1: 'The',
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        the2: 'the',
+        adj2: '',
+        noun2: '',
+      }); 
+    }
+  }
+
+  const boxColor = (name) => {
+    return (name === "") ? "PlayerSubmissionFormt__input--invalid" : "valid";
+  };
+
   return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+    <div className={(props.className=="noShow") ? "noShow" : "PlayerSubmissionForm"}>
+      <h3>Player Submission Form for Player #{props.player}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className={props.className} 
+            onSubmit={onFormSubmit}>
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+          <p>The </p>
+          <input
+            className={boxColor(line.adj1)}
+            placeholder="adjective"
+            type="text" 
+            name='adj1'
+            value={line.adj1}
+            onChange={onInputChange}/>
+          <input
+            className={boxColor(line.noun1)}
+            placeholder="noun"
+            type="text" 
+            name='noun1'
+            value={line.noun1}
+            onChange={onInputChange}/>
           <input
-            placeholder="hm..."
-            type="text" />
+            className={boxColor(line.adv)}
+            placeholder="adverb"
+            type="text" 
+            name='adv'
+            value={line.adv}
+            onChange={onInputChange}/>
+          <input
+            className={boxColor(line.verb)}
+            placeholder="verb"
+            type="text" 
+            name='verb'
+            value={line.verb}
+            onChange={onInputChange}/>
+          <p> the </p>
+          <input
+            className={boxColor(line.adj2)}
+            placeholder="adjective"
+            type="text" 
+            name='adj2'
+            value={line.adj2}
+            onChange={onInputChange}/>
+          <input
+            className={boxColor(line.noun2)}
+            placeholder="noun"
+            type="text" 
+            name='noun2'
+            value={line.noun2}
+            onChange={onInputChange}/>
 
         </div>
 
@@ -27,5 +113,12 @@ const PlayerSubmissionForm = () => {
   );
 }
 
-
+PlayerSubmissionForm.propTypes = {
+  onSubmitCallback: PropTypes.func.isRequired,
+  player: PropTypes.number,
+  className: PropTypes.string,
+};
 export default PlayerSubmissionForm;
+
+
+

src/components/RecentSubmission.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
 const RecentSubmission = (props) => {
   return (
-    <div className="RecentSubmission">
+    <div className={props.className}>
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{props.line}</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  line: PropTypes.string,
+  className: PropTypes.string,
+};
 export default RecentSubmission;