Time - Angela

src/components/Field.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import './Field.css';
+import PropTypes from 'prop-types';
+
+const Field = ({id, placeholder, value, onChangeCallback}) => {
+  return (
+    <input className={`PlayerSubmissionForm__input${value.length > 0 ? "" : "--invalid"}`}
+      id={id}
+      placeholder={placeholder}
+      type="text"
+      value={value}
+      onChange={onChangeCallback} />
+  );
+}
+
+Field.propTypes = {
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  onChangeCallback: PropTypes.func.isRequired,
+};
+
+export default Field;

src/components/FinalPoem.js

@@ -1,20 +1,28 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
-const FinalPoem = (props) => {
+const FinalPoem = ({isRevealed, poem, onButtonClickCallback}) => {
 
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
+      { isRevealed ? <section className="FinalPoem__poem">
         <h3>Final Poem</h3>
-
-      </section>
-
+        {poem.map((line, index) => <p key={index}>{line}</p>)}
+      </section> : null }
+      
       <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+        { isRevealed ? null : <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" onClick={onButtonClickCallback} /> }
       </div>
     </div>
   );
 }
 
+FinalPoem.propTypes = {
+  isRevealed: PropTypes.bool.isRequired,
+  poem: PropTypes.array.isRequired,
+  onButtonClickCallback: PropTypes.func.isRequired,
+};
+
+
 export default FinalPoem;

src/components/Game.js

@@ -3,16 +3,60 @@ import './Game.css';
 import PlayerSubmissionForm from './PlayerSubmissionForm';
 import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
+import poemFormat from './data/fields.json';
+
+const FIELDS = poemFormat;
+
+//Establish the format of user data that gets stored
+//We are only tracking poem fields that take user input
+const submissionTemplate = () => {
+  const submissionKeys = {};
+  for (let field of FIELDS) {
+    if (field.key) submissionKeys[field.key] = "";
+  }
+  return submissionKeys;
+}
 
 const Game = () => {
+  const [playerSubmission, setPlayerSubmission] = useState(submissionTemplate());
+  const [poem, setPoem] = useState([]);
+  const [isRevealed, setIsRevealed] = useState(false);
+
+  //pretty-print the format of a poem sentence
   const exampleFormat = FIELDS.map((field) => {
-    if (field.key) {
-      return field.placeholder;
-    } else {
-      return field;
-    }
+    return field.key ? field.placeholder : field
   }).join(" ");
 
+  //callback function to handle changes on text input fields
+  const handleChange = (event) => {
+    let updatedFields = {...playerSubmission};
+    updatedFields[event.target.id] = event.target.value;
+    setPlayerSubmission(updatedFields);
+  }
+
+  //callback function to store user's submitted poem sentence
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    //returns the user's inputs in string format
+    const submittedLine = () => {
+      let submissionString = "";
+      for (let field of FIELDS) {
+        field.key ? submissionString += ` ${(playerSubmission[field.key])}` : submissionString += ` ${field}`;
+      }
+      return submissionString.trim();
+    };
+
+    let updatedPoem = [...poem]; 
+    updatedPoem.push(submittedLine());
+    setPoem(updatedPoem);
+    setPlayerSubmission(submissionTemplate());
+  }
+
+  const handleReveal = (event) => {
+    setIsRevealed(true);
+  }
+
   return (
     <div className="Game">
       <h2>Game</h2>
@@ -25,45 +69,13 @@ const Game = () => {
         { exampleFormat }
       </p>
 
-      <RecentSubmission />
-
-      <PlayerSubmissionForm />
-
-      <FinalPoem />
+      {poem.length > 0 && !isRevealed ? <RecentSubmission line={poem[poem.length-1]}/> : null }
+      { isRevealed ? null : <PlayerSubmissionForm fields={FIELDS} current={playerSubmission} count={poem.length+1} onChangeCallback={handleChange} onSubmitCallback={handleSubmit}/> }
+      <FinalPoem isRevealed={isRevealed} poem={poem} onButtonClickCallback={handleReveal} />  
 
     </div>
   );
 }
 
 
-const FIELDS = [
-  "The",
-  {
-    key: 'adj1',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun1',
-    placeholder: 'noun',
-  },
-  {
-    key: 'adv',
-    placeholder: 'adverb',
-  },
-  {
-    key: 'verb',
-    placeholder: 'verb',
-  },
-  "the",
-  {
-    key: 'adj2',
-    placeholder: 'adjective',
-  },
-  {
-    key: 'noun2',
-    placeholder: 'noun',
-  },
-  ".",
-];
-
 export default Game;

src/components/PlayerSubmissionForm.css

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

src/components/PlayerSubmissionForm.js

@@ -1,22 +1,30 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './PlayerSubmissionForm.css';
+import Field from './Field.js';
+import PropTypes from 'prop-types';
+
+const generateSubmissionFields = (fields, current, onChangeCallback) => {
+  const submissionFields = fields.map((field, index) => field.key ? <Field
+    key={field.key}
+    id={field.key} //explicit prop for storing keys since Field component can't pass back key prop
+    placeholder={field.placeholder}
+    value={current[field.key]}
+    onChangeCallback={onChangeCallback}  /> : <span key={index}>{field}</span> );
+
+  return submissionFields;
+}
+
+const PlayerSubmissionForm = ({ fields, current, count, onChangeCallback, onSubmitCallback}) => {
+  const submissionFields = generateSubmissionFields(fields, current, onChangeCallback);
 
-const PlayerSubmissionForm = () => {
   return (
     <div className="PlayerSubmissionForm">
-      <h3>Player Submission Form for Player #{  }</h3>
+      <h3>Player Submission Form for Player #{count}</h3>
 
-      <form className="PlayerSubmissionForm__form" >
+      <form className="PlayerSubmissionForm__form" onSubmit={onSubmitCallback} >
 
         <div className="PlayerSubmissionForm__poem-inputs">
-
-          {
-            // Put your form inputs here... We've put in one below as an example
-          }
-          <input
-            placeholder="hm..."
-            type="text" />
-
+          {submissionFields}
         </div>
 
         <div className="PlayerSubmissionForm__submit">
@@ -27,5 +35,16 @@ const PlayerSubmissionForm = () => {
   );
 }
 
+PlayerSubmissionForm.propTypes = {
+  fields: PropTypes.array.isRequired,
+  current: PropTypes.object.isRequired,
+  count: PropTypes.number.isRequired,
+  onChangeCallback: PropTypes.func.isRequired,
+  onSubmitCallback: PropTypes.func.isRequired,
+};
+
+
 
 export default PlayerSubmissionForm;
+
+

src/components/RecentSubmission.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import './RecentSubmission.css';
+import PropTypes from 'prop-types';
 
-const RecentSubmission = (props) => {
+const RecentSubmission = ({line}) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{line}</p>
     </div>
   );
 }
 
+RecentSubmission.propTypes = {
+  line: PropTypes.string.isRequired,
+};
+
 export default RecentSubmission;

src/components/data/fields.json

@@ -0,0 +1,29 @@
+[
+  "The",
+  {
+     "key":"adj1",
+     "placeholder":"adjective"
+  },
+  {
+     "key":"noun1",
+     "placeholder":"noun"
+  },
+  {
+     "key":"adv",
+     "placeholder":"adverb"
+  },
+  {
+     "key":"verb",
+     "placeholder":"verb"
+  },
+  "the",
+  {
+     "key":"adj2",
+     "placeholder":"adjective"
+  },
+  {
+     "key":"noun2",
+     "placeholder":"noun"
+  },
+  "."
+]