- FIRE - Stacy's Exquisite

src/components/FinalPoem.js

@@ -3,20 +3,23 @@ import PropTypes from 'prop-types';
 import './FinalPoem.css';
 
 const FinalPoem = (props) => {
-
-  return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
+  if (props.isSubmitted) {
+    return ( 
+    <div className = "FinalPoem">
+      <section className = "FinalPoem__poem">
+        <h3> Final Poem </h3>
+        {props.submissions.map((line, i) => <p key={i}>{line}</p>)}
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
-    </div>
-  );
-}
+      </div>)
+  } else {
+    return( 
+    <div className = "FinalPoem__reveal-btn-container">
+      <input type = "button"
+      value = "We are finished: Reveal the Poem"
+      className = "FinalPoem__reveal-btn" onClick={props.revealPoem}/>
+    </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

@@ -5,13 +5,40 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
-  const exampleFormat = FIELDS.map((field) => {
-    if (field.key) {
+  const [lines, setLines] = useState([]);
+  const [playerNumber, setPlayerNumber] = useState(1);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const newPhrase = (phrase) => {
+    const phrases = [
+      ...lines,
+    ];
+    const newPhrase = [
+      ...phrase,
+    ];
+
+    const newString = stringFormat(newPhrase);
+    phrases.push(newString);
+    setLines(phrases)
+
+    let newPlayer = playerNumber + 1;
+    setPlayerNumber(newPlayer);
+  }
+
+  const stringFormat = (fields) => fields.map((field) => {
+    if (field.userInput) {
+      return field.userInput;
+    } else if (field.key) {
       return field.placeholder;
     } else {
       return field;
     }
   }).join(' ');
+
+  const onRevealPoem = () => {
+    setIsSubmitted(true)
+  };
+
 
   return (
     <div className="Game">
@@ -22,14 +49,14 @@ const Game = () => {
       <p>Please follow the following format for your poetry submission:</p>
 
       <p className="Game__format-example">
-        { exampleFormat }
+        { stringFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission  submission={lines[lines.length-1]} isSubmitted={isSubmitted}/> 
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm index={playerNumber} fields={FIELDS} sendSubmission={newPhrase} isSubmitted={isSubmitted}/>
 
-      <FinalPoem />
+      <FinalPoem submissions={lines} isSubmitted={isSubmitted} revealPoem={onRevealPoem}/>
 
     </div>
   );
@@ -41,27 +68,33 @@ const FIELDS = [
   {
     key: 'adj1',
     placeholder: 'adjective',
+    userInput: '',
   },
   {
     key: 'noun1',
     placeholder: 'noun',
+    userInput: '',
   },
   {
     key: 'adv',
     placeholder: 'adverb',
+    userInput: '',
   },
   {
     key: 'verb',
     placeholder: 'verb',
+    userInput: '',
   },
   'the',
   {
     key: 'adj2',
     placeholder: 'adjective',
+    userInput: '',
   },
   {
     key: 'noun2',
     placeholder: 'noun',
+    userInput: '',
   },
   '.',
 ];

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

@@ -31,7 +31,7 @@
   background-color: tomato;
 }
 
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
   background-color: #FFE9E9;
 }
 

src/components/PlayerSubmissionForm.js

@@ -1,24 +1,54 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+const PlayerSubmissionForm = (props) => {
+
+  const [formFields, setFormFields] = useState(props.fields)
+
+  const onFormFieldChange = (i, event) => {
+    const newFormFields = [
+      ...formFields
+    ];
+    newFormFields[i] = {
+      ...newFormFields[i],
+      userInput: event.target.value
+    };
+    setFormFields(newFormFields);
+  };
 
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    props.sendSubmission(formFields);
+    setFormFields(props.fields);
+  }
+  const poemInputs = formFields.map((field, i) => {
+      if (field.key) {
+        return (
+          <input 
+          key={field.key}
+          name={field.key}
+          placeholder={field.placeholder}
+          type="text"
+          value={field.userInput}
+          onChange={(event) => {onFormFieldChange(i,event)}}
+          className={field.userInput ? '' : 'PlayerSubmissionForm__input--invalid' } 
+          />
+        )} else {
+        return (field)
+      }
+  });
+
+  if (!props.isSubmitted) {
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{ props.index }</h3>
+        < 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
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+          {poemInputs}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -27,11 +57,15 @@ const PlayerSubmissionForm = () => {
       </form>
     </div>
   );
+} else {
+  return null
+}
 }
 
 PlayerSubmissionForm.propTypes = {
   index: PropTypes.number.isRequired,
   sendSubmission: PropTypes.func.isRequired,
+  isSubmitted: PropTypes.bool.isRequired,
   fields: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({

src/components/RecentSubmission.js

@@ -3,16 +3,20 @@ import PropTypes from 'prop-types';
 import './RecentSubmission.css';
 
 const RecentSubmission = (props) => {
-  return (
-    <div className="RecentSubmission">
-      <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+  if (!props.isSubmitted && props.submission) {
+    return ( 
+    <div className = "RecentSubmission" >
+      <h3> The Most Recent Submission </h3> 
+      <p className = "RecentSubmission__submission" > {props.submission} </p> 
     </div>
-  );
-}
+    )
+  } else {
+    return (null)
+  }}
 
 RecentSubmission.propTypes = {
   submission: PropTypes.string.isRequired,
+  isSubmitted: PropTypes.bool.isRequired,
 };
 
 export default RecentSubmission;

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'} />);