Space - Faezeh

src/components/FinalPoem.js

@@ -1,20 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({isDone, poem, onClickCallback}) => {
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
+        {
+          isDone && (
+            <section className="FinalPoem__poem">
+              <h3>Final Poem</h3>
+              {poem.map(line => <p>{line}</p>)}
+            </section>
+          )
+        }
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {
+          isDone || 
+          <input 
+          type="button"
+          onClick={onClickCallback}
+          value="We are finished: Reveal the Poem"
+          className="FinalPoem__reveal-btn" />
+        }
+
       </div>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  isDone: PropTypes.bool.isRequired,
+  poem: PropTypes.array.isRequired,
+  onClickCallback: PropTypes.func.isRequired,
+};
+
 export default FinalPoem;

src/components/Game.js

@@ -5,6 +5,25 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [poem, setPoem] = useState([])
+  const [player, setPlayer] = useState(1)
+  const [gameOn, setGameOn] = useState(true)
+
+  const onSubmitFormClickCallback = (line) => {
+    const newPoem = [...poem];
+    const {adj1, noun1, adv, verb, adj2, noun2} = line;
+    newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`)
+    // newPoem.push(Object.values(line).join(" "));
+    setPoem(newPoem);
+    console.log(newPoem);
+    const newPlayer = player + 1
+    setPlayer(newPlayer);
+  }
+
+  const onFinishPoem = () => {
+    setGameOn(false);
+  };
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +32,14 @@ const Game = () => {
     }
   }).join(" ");
 
+  const lastLine = () => {
+    if (poem.length === 0 ) {
+      return "";
+    }
+
+    return poem[poem.length - 1];
+  };
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +52,11 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission isDone={!gameOn} lastLine={lastLine()}/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm isDone={!gameOn} player={player} onClickCallback={onSubmitFormClickCallback}/>
 
-      <FinalPoem />
+      <FinalPoem isDone={!gameOn} poem={poem} onClickCallback={onFinishPoem}/>
 
     </div>
   );
@@ -67,3 +94,5 @@ const FIELDS = [
 ];
 
 export default Game;
+
+

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,131 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => {
+  const [line, setLine] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  const {adj1, noun1, adv, verb, adj2, noun2} = line
+
+  const onInputChange = (e) => {
+    const newSubmission = {
+      ...line,
+    }
+    newSubmission[e.target.name] = e.target.value;
+    // console.log(e.target.value);
+    setLine(newSubmission);
+  };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    if (
+      adj1 !== '' &&
+      noun1 !== '' &&
+      adv !== '' &&
+      verb !== '' &&
+      adj2 !== '' &&
+      noun2 !== ''
+    ) {
+      onClickCallback(line);
+      console.log(line);
+
+      setLine({
+        adj1: '',
+        noun1: '',
+        adv: '',
+        verb: '',
+        adj2: '',
+        noun2: ''
+      });
+    };
+  };
+
+  const inputDisplay = (name) => {
+    return (name !== "") ? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid";
+  }
+
   return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+    !isDone && (
+      <div className="PlayerSubmissionForm">
+      <h3>Player Submission Form for Player #{player}</h3>
 
       <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 
+            className={inputDisplay(adj1)}
+            name="adj1"
+            onChange={onInputChange}
+            placeholder="adjective"
+            value={adj1}
+            type="text" />
+          <input 
+            className={inputDisplay(noun1)}
+            name="noun1"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={noun1}
+            type="text" />
           <input
-            placeholder="hm..."
+            className={inputDisplay(adv)}
+            name="adv"
+            onChange={onInputChange}
+            placeholder="adverb"
+            value={adv}
             type="text" />
-
+          <input
+            className={inputDisplay(verb)}
+            name="verb"
+            onChange={onInputChange}
+            placeholder="verb"
+            value={verb}
+            type="text" />
+          the
+          <input
+            className={inputDisplay(adj2)}
+            name="adj2"
+            onChange={onInputChange}
+            placeholder="adjective"
+            value={adj2}
+            type="text" />
+          <input
+            className={inputDisplay(noun2)}
+            name="noun2"
+            onChange={onInputChange}
+            placeholder="noun"
+            value={noun2}
+            type="text" />
+          .
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input 
+            type="submit"
+            value="Submit Line"
+            className="PlayerSubmissionForm__submit-btn"
+            onClick={onFormSubmit}
+          />
         </div>
       </form>
     </div>
+    )
+
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  isDone: PropTypes.bool.isRequired,
+  player: PropTypes.number.isRequired,
+  onClickCallback: PropTypes.func.isRequired,
+};
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

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