Time - Anaya

src/components/FinalPoem.js

@@ -1,20 +1,57 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
 const FinalPoem = (props) => {
 
+  const onDisplayPoem = (event) => {
+    event.preventDefault();
+    props.setFieldsPoem(true);
+  };
+  // Display message format like demo
+  function formatFields(fieldInput){
+    let fullPoem = '';
+    fieldInput = fieldInput.split(" ");
+
+    for(let i = 0; i < fieldInput.length; i++){
+      if(i === 0){
+        fullPoem += ("The " + fieldInput[i]);
+      }else if(i === 3){
+        fullPoem += (" " + fieldInput[i] + " the "); 
+      }else{
+        fullPoem += (" " + fieldInput[i] );
+      };
+    };
+    return (fullPoem + ".");
+  }
+
   return (
-    <div className="FinalPoem">
+    <div className="FinalPoem" onClick={onDisplayPoem}>
       <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
 
+        {props.poemLines.map((line, i) => {
+          return(
+            <div key={`${i}`}>
+              <p>{formatFields(line)}</p>
+            </div>
+          );
+        })}
       </section>
-
+      
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        <input 
+          type="button" 
+          value="We are finished: Reveal the Poem" 
+          className="FinalPoem__reveal-btn" 
+        />
       </div>
     </div>
   );
 }
+FinalPoem.propTypes = {
+  poemLines: PropTypes.array,
+  setFieldsPoem: PropTypes.func
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -5,6 +5,12 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 const Game = () => {
+
+  const [currentField, setCurrentField] = useState('');
+  const [allFields, setAllFields] = useState([]);
+  const [displayPoem, setDisplayPoem] = useState(false);
+
+  // Provided code
   const exampleFormat = FIELDS.map((field) => {
     if (field.key) {
       return field.placeholder;
@@ -13,6 +19,44 @@ const Game = () => {
     }
   }).join(" ");
 
+  // Gets field input and renders all the fields together
+  const showSubmittedField = (fieldInput) => {
+
+    const newField = Object.values(fieldInput).join(' ');
+    setCurrentField(newField);
+
+    const newFieldList = [...allFields];
+    newFieldList.push(newField);
+    setAllFields(newFieldList);
+  };
+
+  // Array to hold field input
+  let poem = [];
+
+  if (displayPoem === true) {
+    poem = allFields;
+
+    return (
+      <div className="Game">
+        <h2>Game</h2>
+
+        <p>Each player should take turns filling out and submitting the form below. Each turn should be done individually and <em>in secret!</em> Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.</p>
+
+        <p>Please follow the following format for your poetry submission:</p>
+
+        <p className="Game__format-example">
+          { exampleFormat }
+        </p>
+
+
+        {/* <RecentSubmission fieldInput={ currentField }/> <--- shows last submitted line by user*/}
+
+        <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
+
+      </div>
+    );
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,17 +69,16 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
+      <RecentSubmission fieldInput={ currentField }/>
 
-      <PlayerSubmissionForm />
+      <PlayerSubmissionForm onCallbackField={ showSubmittedField } fields={ FIELDS }/>
 
-      <FinalPoem />
+      <FinalPoem setFieldsPoem={ setDisplayPoem } poemLines={ poem }/>
 
     </div>
   );
 }
-
-
+// Part for making this dynamic later use
 const FIELDS = [
   "The",
   {

src/components/PlayerSubmissionForm.css

@@ -25,6 +25,7 @@
   border: 2px black solid;
   box-shadow: 5px 10px black;
   transition: 0.25s;
+  background-color: cadetblue;
 }
 
 .PlayerSubmissionForm__submit-btn:hover {
@@ -38,3 +39,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+input.empty {
+  background-color: #FFE9E9;
+}

src/components/PlayerSubmissionForm.js

@@ -1,31 +1,92 @@
 import React, { useState } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
-const PlayerSubmissionForm = () => {
-  return (
-    <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+const PlayerSubmissionForm = (props) => {
 
-      <form className="PlayerSubmissionForm__form" >
+  const [fieldInput, setFieldInput] = useState ({
+    adj1: '',
+    noun1: '', 
+    adv: '', 
+    verb: '', 
+    adj2: '',
+    noun2: '',
+  });
 
-        <div className="PlayerSubmissionForm__poem-inputs">
+  const [player, nextPlayer] = useState(1);
+
+  const onInput = (event) => {
+    // Get all field inputs
+    const newField = {
+      ...fieldInput,
+    };
+
+    newField[event.target.name]  = event.target.value;
+    setFieldInput(newField);
+  };
+
+  // Gets and sends field's input to Game.js and resets current input
+  const onSubmitField= (event) => {
+    event.preventDefault();
+
+    props.onCallbackField(fieldInput);
+
+    setFieldInput({
+      adj1: '',
+      noun1: '', 
+      adv: '', 
+      verb: '', 
+      adj2: '',
+      noun2: '',
+    });
 
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
+    // Move to next player
+    nextPlayer(player + 1);
+  };
 
+  const isEmpty = (name) => {
+    return name === '';
+  };
+
+  return (
+    <div className="PlayerSubmissionForm" onSubmit={ onSubmitField }>
+      <h3>Player Submission Form for Player #{player}</h3>
+
+      <form className="PlayerSubmissionForm__form">
+
+        <div className="PlayerSubmissionForm__poem-inputs">
+
+          {props.fields.map((field, i) => {
+            if (field.key) {
+              return (
+                <input 
+                  key={`${i}`}
+                  name={`${field.key}`}
+                  placeholder={`${field.placeholder}`} 
+                  type="text" 
+                  value={fieldInput[`${field.key}`]}
+                  onChange={onInput} 
+                  className={isEmpty(fieldInput[`${field.key}`]) ? "empty" : "filled"}
+                />
+              );
+            }else{
+              return field;
+            };
+          })}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
-          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn" />
+          <input type="submit" value="Submit Line" className="PlayerSubmissionForm__submit-btn"/>
         </div>
       </form>
     </div>
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  onCallbackField: PropTypes.func.isRequired,
+};
+
 
 export default PlayerSubmissionForm;

src/components/RecentSubmission.js

@@ -1,13 +1,35 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
+// To add "the" to match demo Resource: R. Quin :) zoom call
 const RecentSubmission = (props) => {
+
+  const fieldInput = props.fieldInput.split(" ");
+
+  let fullPoem = '';
+    if(props.fieldInput.length !== 0){
+    for(let i =0; i < fieldInput.length; i++){
+      if(i ===0){
+        fullPoem += ("The " + fieldInput[i]);
+      }else if(i === 3){
+        fullPoem += (" " + fieldInput[i] + " the "); 
+      }else{
+        fullPoem += (" " + fieldInput[i]);
+      };
+    };
+  };
+
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{fullPoem}</p>
     </div>
   );
-}
+};
+
+RecentSubmission.propTypes = {
+  fieldInput: PropTypes.string
+};
 
 export default RecentSubmission;