Blaine-Fire

src/components/FinalPoem.js

@@ -4,19 +4,24 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+if (props.isSubmitted) {
   return (
     <div className="FinalPoem">
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
+        {props.submissions.map((submission, i) => (
+          <p key={i}>{submission}</p>
+          ))
+        }
       </section>
-
+      </div>
+  )}  else  {
+    return (
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input onClick={props.revealPoem} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
       </div>
-    </div>
-  );
-}
+  )}
+};
 
 FinalPoem.propTypes = {
   isSubmitted: PropTypes.bool.isRequired,

src/components/FinalPoem.test.js

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import FinalPoem from './FinalPoem';
 
-describe.skip('FinalPoem', () => {
+describe('FinalPoem', () => {
   describe('before the poem is finished', () => {
     test('it renders with a button when isSubmitted is false', () => {
       // Act

src/components/Game.js

@@ -13,7 +13,43 @@ const Game = () => {
     }
   }).join(' ');
 
+  const [submissions, setSubmissions] = useState([])
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  // const [index, setIndex] = useState(1)
+
+  const sendSubmission = (submission) => {
+    // Create a new array, make submissions that array (basically always += the object the newly substantiated array??), push submission into that new array, set state to that new array????
+
+    // submissions = empty array
+    // sumission = {}
+    // ...submission = guts of {}
+    // ...submissions = {}, {}, {}
+    // newSubmission = [{}, {}, {}]
+    const verse = `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}.` 
+    const newSubmissions = [...submissions, verse]
+    // array of strings ^
+    // newSubmissions.push(submission)
+    setSubmissions(newSubmissions)
+    console.log(submissions)
+    console.log(newSubmissions)
+    // setIndex(index + 1)
+  };
+
+
+  const revealPoem = () => {
+    setIsSubmitted(true)
+  } 
+
+
+  // isSubmittd = boolean
+  // submissions = Array of strings
+  // `'My namy is ${}`
+  // revealPoem = function
+
+
+
   return (
+
     <div className="Game">
       <h2>Game</h2>
 
@@ -24,12 +60,12 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
+
+      {(!isSubmitted && submissions.length > 0) ?<RecentSubmission submission={submissions[submissions.length - 1]}/> : ''}
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
+      {(!isSubmitted) ? <PlayerSubmissionForm sendSubmission={sendSubmission} index={submissions.length + 1} fields={FIELDS}/> : '' }
 
-      <FinalPoem />
+      <FinalPoem isSubmitted={isSubmitted} submissions={submissions} revealPoem={revealPoem} />
 
     </div>
   );

src/components/Game.test.js

@@ -37,7 +37,7 @@ const FIELDS = [
 
 const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
 
-describe.skip('Game', () => {
+describe('Game', () => {
 
   describe('Wave 1:  Rendering Game', () => {
 

src/components/PlayerSubmissionForm.css

@@ -2,6 +2,10 @@
   line-height: 3rem;
 }
 
+.emptyField {
+  background-color: pink;
+}
+
 .PlayerSubmissionForm__form {
   margin: 2rem auto 3rem auto;
 }

src/components/PlayerSubmissionForm.js

@@ -1,26 +1,69 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const [formFields, setFormFields] = useState({
+    adj1: '',
+    noun1: '',
+    adv: '',
+    verb: '',
+    adj2: '',
+    noun2: ''
+  });
+
+  const onFieldChange = (event) => {
+    console.log(`Field updated ${ event.target.value }`);
+
+    const newOnFieldChange = {
+      ...formFields,
+    }
+
+    newOnFieldChange[event.target.name] = event.target.value;
+    setFormFields(newOnFieldChange);
+
+  };
+
+  const inputFields = props.fields.map(field => {
+    if (field.key) {
+      return (
+      <input 
+        key={field.key}
+        name={field.key}
+        value={formFields[field.key]}
+        onChange={onFieldChange}
+        placeholder={field.placeholder}
+        type="text" />);
+    } else {
+      return field;
+    }
+  });
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    props.sendSubmission(formFields);
+
+
+    setFormFields({
+      adj1: '',
+      noun1: '',
+      adv: '',
+      verb: '',
+      adj2: '',
+      noun2: ''
+    });
+  };
+
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{ props.index }</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form onSubmit={onFormSubmit} className="PlayerSubmissionForm__form" >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+        {inputFields}
         </div>
-
         <div className="PlayerSubmissionForm__submit">
           <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
         </div>

src/components/RecentSubmission.js

@@ -6,7 +6,7 @@ const RecentSubmission = (props) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{ props.submission }</p>
     </div>
   );
 }

src/components/RecentSubmission.test.js

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import RecentSubmission from './RecentSubmission';
 
 
-describe.skip('Wave 2:  RecentSubmission', () => {
+describe('Wave 2:  RecentSubmission', () => {
   test('It renders with a submission and shows the text', () => {
     // Act
     render(<RecentSubmission submission={'This is a submission'} />);