Space - Katie

src/components/FinalPoem.js

@@ -1,17 +1,35 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './FinalPoem.css';
 
+
 const FinalPoem = (props) => {
 
+  const emptyList = <p></p>
+  const listOfSentences = props.submissions.map(submission => {
+    return (
+      <p>The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.ajd2} {submission.noun2}.</p>
+    );
+  })
+
+  const [reveal, setReveal] = useState(false)
+
+  const revealSentences = () => { 
+    props.setGameOverCallback(true);
+    setReveal(true);
+  }
+
+
+
+
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {reveal ? listOfSentences : emptyList}
       </section>
 
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        {reveal ? "" : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={revealSentences}/>}
       </div>
     </div>
   );

src/components/Game.js

@@ -4,6 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
+
 const Game = () => {
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
@@ -13,6 +14,27 @@ const Game = () => {
     }
   }).join(" ");
 
+  const [submissions, setSubmissionList] = useState([])
+
+  const addSubmission = (newSubmission) => {
+
+    const newSubmissionList = [...submissions];
+
+    newSubmissionList.push(newSubmission)
+    setSubmissionList(newSubmissionList)
+    console.log(newSubmissionList)
+
+  };
+
+  let mostRecentSubmissionSentence = ""
+
+  if (submissions.length > 0){
+    let mostRecentSubmission = submissions[submissions.length-1]
+    mostRecentSubmissionSentence = "The " + mostRecentSubmission.adj1 + " " + mostRecentSubmission.noun1 + " " + mostRecentSubmission.adv + " " + mostRecentSubmission.verb + " the " + mostRecentSubmission.adj2 + " " + mostRecentSubmission.noun2 + "."
+  }
+
+  const [gameOver, setGameOver] = useState(false)
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,11 +47,22 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      {gameOver || submissions.length === 0 ? "" : <RecentSubmission 
+        mostRecentSubmission={mostRecentSubmissionSentence}
+      />}
+
 
-      <PlayerSubmissionForm />
+      {gameOver ? "" : <PlayerSubmissionForm 
+        fields={FIELDS} 
+        onSubmitCallback={addSubmission} 
+        playerNumber={submissions.length+1}
+      />}
 
-      <FinalPoem />
+      <FinalPoem 
+        submissions={submissions}
+        format={exampleFormat}
+        setGameOverCallback={setGameOver}
+      />
 
     </div>
   );

src/components/PlayerSubmissionForm.js

@@ -1,21 +1,110 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+
+const PlayerSubmissionForm = (props) => {
+
+  const [submission, setSubmission] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: '',
+  });
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    console.log(event.target)
+
+    props.onSubmitCallback(submission)
+
+    setSubmission({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: '',
+    })
+
+  };
+
+  const onInputChange = (event) => {
+    console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+
+    const newSubmissionFields = {
+      ...submission,
+    }
+
+    newSubmissionFields[event.target.name] = event.target.value;
+    setSubmission(newSubmissionFields);
+  }
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{props.playerNumber}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form 
+        className="PlayerSubmissionForm__form" 
+        onSubmit={onFormSubmit}
+      >
 
         <div className="PlayerSubmissionForm__poem-inputs">
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
+          <p>{props.fields[0]}</p>
+
           <input
-            placeholder="hm..."
-            type="text" />
+            placeholder={props.fields[1].placeholder}
+            value={submission.adj1}
+            name="adj1"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.adj1 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}
+          />
+
+            <input
+            placeholder={props.fields[2].placeholder}
+            value={submission.noun1}
+            name="noun1"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.noun1 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
+
+            <input
+            placeholder={props.fields[3].placeholder}
+            value={submission.adv}
+            name="adv"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.adv !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
+
+            <input
+            placeholder={props.fields[4].placeholder}
+            value={submission.verb}
+            name="verb"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.verb !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
+
+            <p>{props.fields[5]}</p>
+
+            <input
+            placeholder={props.fields[6].placeholder}            
+            value={submission.adj2}
+            name="adj2"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.adj2 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
+
+            <input
+            placeholder={props.fields[7].placeholder}
+            value={submission.noun2}
+            name="noun2"
+            type="text"
+            onChange={onInputChange}
+            className={ submission.noun2 !== "" ? "valid" : "PlayerSubmissionFormt__input--invalid"}/>
 
         </div>
 

src/components/RecentSubmission.js

@@ -2,10 +2,11 @@ import React from 'react';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+  <p className="RecentSubmission__submission">{props.mostRecentSubmission}</p>
     </div>
   );
 }