Water - Beatrice

src/components/FinalPoem.css

@@ -19,3 +19,17 @@
 .FinalPoem__poem {
   border-bottom: 2px gray dashed;
 }
+
+.FinalPoem__poem--ul {
+  list-style: none;
+  font-size: 2rem;
+  font-family: fantasy;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.hidden {
+  display: none;
+}

src/components/FinalPoem.js

@@ -4,15 +4,24 @@ import './FinalPoem.css';
 
 const FinalPoem = (props) => {
 
+  const finalPoem = props.submissions.map((line, i) => {
+    return(
+      <li key={i}>
+        {line}
+      </li>
+    )
+  });
+
   return (
-    <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+    <div className='FinalPoem'>
+      <section className={`FinalPoem__poem ${props.isSubmitted ? 'visible' : 'hidden'}`}>
         <h3>Final Poem</h3>
-
+        <ul className="FinalPoem__poem--ul">
+          {finalPoem}
+        </ul>
       </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+      <div className={`FinalPoem__reveal-btn-container ${props.isSubmitted ? 'hidden' : 'visible'}`}>
+        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={props.revealPoem} />
       </div>
     </div>
   );

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,11 @@
   text-align: center;
   font-style: italic;
 }
+
+.visible {
+  visibility: visible;
+}
+
+.hidden {
+  display: none;
+}

src/components/Game.js

@@ -5,6 +5,10 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+  const [poem, setPoem] = useState([]);
+  const [currentPlayer, setCurrentPlayer] = useState(1);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +17,41 @@ const Game = () => {
     }
   }).join(' ');
 
+  const enterLineToPoem = (words) => {
+    // Use words object to fill in fields and join into string
+    let newLine = FIELDS.map((field, i) => {
+      if (typeof field === 'string') {
+        return field;
+      } else {
+        return words[field.key];
+      }
+    }).join(' ');
+
+    const newPoem = [...poem, newLine];
+
+    setPoem(newPoem);
+
+    // Advance current player count
+    setCurrentPlayer(currentPlayer + 1);
+  };
+
+  // Function to check if recent submission should be shown
+  const showRecentSubmission = () => {
+    if (poem.length > 0 && !isSubmitted) {
+      return true
+    } else {
+      return false
+    }
+  };
+
+  // Function to end game and reveal poem + hide non-relevant elements
+  const revealPoem = () => {
+    setIsSubmitted(true);
+  };
+
+  // TODO remove
+  console.log(isSubmitted);
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,12 +64,15 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <div className={showRecentSubmission() ? 'visible' : 'hidden'}>
+        <RecentSubmission submission={poem[poem.length-1]}/>
+      </div>
 
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      <div className={isSubmitted ? 'hidden' : 'visible'}>
+        <PlayerSubmissionForm index={currentPlayer} fields={FIELDS} sendSubmission={enterLineToPoem} />
+      </div>
 
+      <FinalPoem submissions={poem} isSubmitted={isSubmitted} revealPoem={revealPoem}/>
     </div>
   );
 }
@@ -63,7 +105,10 @@ const FIELDS = [
     key: 'noun2',
     placeholder: 'noun',
   },
-  '.',
+  {
+    key: 'adv2',
+    placeholder: 'adverb',
+  }
 ];
 
 export default Game;

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

@@ -21,7 +21,7 @@
   flex: 0.5;
   margin: 2rem;
 
-  padding: 0.5rem;
+  padding: 0.25rem;
   border: 2px black solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
@@ -38,3 +38,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.pink {
+  background-color: pink;
+}

src/components/PlayerSubmissionForm.js

@@ -3,21 +3,66 @@ import PropTypes from 'prop-types';
 
 import './PlayerSubmissionForm.css';
 
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+  // Function to pull the base state of words from the fields prop 
+  const generateWordObject = () => {
+    let wordsObject = {};
+    props.fields.forEach(word => {
+      if (typeof word === 'object') {
+        wordsObject[word.key] = '';
+      }
+    })
+
+    return wordsObject;
+  };
+
+  // We have to define these before the inputElements makes the textboxes
+  const [words, setWords] = useState(generateWordObject);
+
+  const onInputChange = (event) => {
+    const newWords = {...words};
+
+    newWords[event.target.name] = event.target.value;
+    setWords(newWords);
+  }
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    // Send words to game
+    props.sendSubmission(words);
+
+    // Clear words
+    setWords(generateWordObject);
+  }
+
+  const inputElements = props.fields.map((field, i) => {
+    if (typeof field === 'string') {
+      return(
+        <div key={i}>
+          {field}
+        </div>
+        ); // Return just the hardcoded word
+    } else { // Else it's an object
+      return(
+      <div key={i}>
+        <input name={field.key} type="text" placeholder={field.placeholder} 
+        value={words[field.key]} onChange={onInputChange} 
+        className={(words[field.key].length === 0) ? 'pink' : 'wiggle'}/>
+      </div>
+      )
+    }
+  });
+
   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" />
+          {inputElements}
 
         </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'} />);