Earth - Kal

src/components/FinalPoem.js

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

@@ -2,3 +2,23 @@
   text-align: center;
   font-style: italic;
 }
+
+.ResetGame-btn-container {
+  display: flex;
+  justify-content: center;
+  margin: 2rem;
+  width: 200px;
+}
+
+.ResetGame-btn-container {
+  flex: 0.8;
+
+  padding: 1rem;
+  border: 2px black solid;
+  box-shadow: 5px 10px black;
+  transition: 0.25s;
+}
+
+.ResetGame-btn-container:hover {
+  background-color: tomato;
+}  

src/components/Game.js

@@ -5,6 +5,10 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  const [submissions, setSubmissions] = useState([]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +17,14 @@ const Game = () => {
     }
   }).join(' ');
 
+  const addSubmission = (submission) => {
+    setSubmissions([ ...submissions, submission ])
+  }
+
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -24,12 +36,16 @@ const Game = () => {
       <p className="Game__format-example">
         { exampleFormat }
       </p>
+
+      {isSubmitted || !submissions.length || <RecentSubmission submission={ submissions[submissions.length - 1] } />}
 
-      <RecentSubmission />
+      {isSubmitted || <PlayerSubmissionForm fields={FIELDS} sendSubmission={addSubmission} index={ submissions.length + 1 } />}
 
-      <PlayerSubmissionForm />
+      <FinalPoem isSubmitted={isSubmitted} submissions={submissions} revealPoem={revealPoem} />
 
-      <FinalPoem />
+      <div className="ResetGame-btn-container" >
+        <input type="button" value="Reset Game" className="ResetGame-btn" onClick={revealPoem}/>
+      </div>
 
     </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

@@ -38,3 +38,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.bad {
+  background-color: red;
+} 

src/components/PlayerSubmissionForm.js

@@ -1,24 +1,85 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  const [wordFields, setWordFields] = useState({
+    adjOne: '',
+    nounOne: '',
+    adverb: '',
+    verb: '',
+    adjTwo: '',
+    nounTwo: ''
+  })
+
+  const onInputChange = (event) => {
+    console.log(`Changing field ${ event.target.name } to ${ event.target.value }`);
+    const newWordFields = {
+      ...wordFields,
+    }
+
+    newWordFields[event.target.name] = event.target.value;
+    setWordFields(newWordFields);
+  }
+
+  const isValid = (val) => {
+    return val && val.length
+  }
+
+  const formSubmission = () => props.fields.map(field => {
+    if (typeof field === 'object') {
+      return wordFields[field.key]
+    }
+    return field
+  }).join(' ')
+
+  const onFormSubmit = (event) => { // stops browser from trying to submit the form
+
+    event.preventDefault();
+    props.sendSubmission(formSubmission());
+
+    setWordFields({
+      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 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" />
+            props.fields.map((field, i) => {
 
+              if (typeof field === 'object') {
+                return(
+                  <input
+                    key={i}
+                    value={wordFields[field.key]}
+                    name={field.key}
+                    placeholder={field.placeholder}
+                    type="text" 
+                    onChange={onInputChange}
+                    className={isValid(wordFields[field.key]) ? 'PlayerSubmissionForm__input' : 'PlayerSubmissionForm__input--invalid'}
+                  />
+                )
+              } else {
+                return(
+                  <span key={i}>
+                    {field}
+                  </span>
+                )
+              }
+            })
+          }
         </div>
 
         <div className="PlayerSubmissionForm__submit">

src/components/RecentSubmission.js

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import './RecentSubmission.css';
@@ -6,7 +7,9 @@ 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>
   );
 }
@@ -15,4 +18,4 @@ RecentSubmission.propTypes = {
   submission: PropTypes.string.isRequired,
 };
 
-export default RecentSubmission;
+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'} />);