ports - sav

src/components/FinalPoem.js

@@ -1,20 +1,40 @@
 import React from 'react';
 import './FinalPoem.css';
+import PropTypes from 'prop-types';
 
-const FinalPoem = (props) => {
-
+const FinalPoem = ({ finalPoemDisplayCallback, poem, poemComplete }) => {
   return (
     <div className="FinalPoem">
-      <section className="FinalPoem__poem">
-        <h3>Final Poem</h3>
-
-      </section>
-
-      <div className="FinalPoem__reveal-btn-container">
-        <input type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
-      </div>
+      {poemComplete && (
+        <section className="FinalPoem__poem">
+          <h3>Final Poem</h3>
+          {formatPoem(poem)}
+        </section>
+      )}
+      {!poemComplete && (
+        <div className="FinalPoem__reveal-btn-container">
+          <input
+            type="button"
+            value="We are finished: Reveal the Poem"
+            className="FinalPoem__reveal-btn"
+            onClick={() => finalPoemDisplayCallback()}
+          />
+        </div>
+      )}
     </div>
   );
-}
+};
+
+const formatPoem = poemArray => {
+  return poemArray.map((line, i) => {
+    return <p key={i}> {line} </p>;
+  });
+};
+
+FinalPoem.propTypes = {
+  finalPoemDisplayCallback: PropTypes.func.isRequired,
+  poem: PropTypes.arrayOf(PropTypes.string).isRequired,
+  poemComplete: PropTypes.bool.isRequired,
+};
 
 export default FinalPoem;

src/components/Game.js

@@ -5,46 +5,79 @@ import FinalPoem from './FinalPoem';
 import RecentSubmission from './RecentSubmission';
 
 class Game extends Component {
-
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+    this.state = {
+      recentSubmission: null,
+      finalSubmission: { poemComplete: false, poem: [] },
+      currentPlayer: 1,
+    };
   }
 
-  render() {
+  onPoemSubmission = lastLine => {
+    let poem = this.state.finalSubmission.poem;
+    poem.push(lastLine);
+    this.setState({
+      recentSubmission: lastLine,
+      finalSubmission: { poemComplete: false, poem: poem },
+      currentPlayer: this.state.currentPlayer + 1,
+    });
+  };
+
+  onFinalPoemDisplay = () => {
+    this.setState({
+      finalSubmission: { ...this.state.finalSubmission, poemComplete: true },
+    });
+  };
 
-    const exampleFormat = FIELDS.map((field) => {
+  render() {
+    const { recentSubmission, finalSubmission, currentPlayer } = this.state;
+    const exampleFormat = FIELDS.map(field => {
       if (field.key) {
         return field.placeholder;
       } else {
         return field;
       }
-    }).join(" ");
-
+    }).join(' ');
     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>
+          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>
 
-        <RecentSubmission />
+        <p>Please follow the following format for your poetry submission:</p>
 
-        <PlayerSubmissionForm />
+        <p className="Game__format-example">{exampleFormat}</p>
+        {!finalSubmission.poemComplete &&
+          (recentSubmission && (
+            <RecentSubmission recentSubmission={recentSubmission} />
+          ))}
 
-        <FinalPoem />
+        {!finalSubmission.poemComplete && (
+          <PlayerSubmissionForm
+            currentPlayer={currentPlayer}
+            format={FIELDS}
+            onPoemSubmissionCallback={this.onPoemSubmission}
+          />
+        )}
 
+        <FinalPoem
+          {...finalSubmission}
+          finalPoemDisplayCallback={this.onFinalPoemDisplay}
+        />
       </div>
     );
   }
 }
 
 const FIELDS = [
-  "The",
+  'The',
   {
     key: 'adj1',
     placeholder: 'adjective',
@@ -61,7 +94,7 @@ const FIELDS = [
     key: 'verb',
     placeholder: 'verb',
   },
-  "the",
+  'the',
   {
     key: 'adj2',
     placeholder: 'adjective',
@@ -70,7 +103,7 @@ const FIELDS = [
     key: 'noun2',
     placeholder: 'noun',
   },
-  ".",
+  '.',
 ];
 
 export default Game;

src/components/PlayerSubmissionForm.css

@@ -38,3 +38,7 @@
 .PlayerSubmissionForm__input--invalid::placeholder {
   color: black;
 }
+
+.center {
+  text-align: center;
+}

src/components/PlayerSubmissionForm.js

@@ -1,38 +1,140 @@
 import React, { Component } from 'react';
 import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
 
 class PlayerSubmissionForm extends Component {
-
   constructor(props) {
     super(props);
+    this.state = this.stateFields();
   }
 
-  render() {
+  stateFields = () => {
+    const formFields = {};
+    this.props.format.forEach(elem => {
+      if (elem.key) {
+        formFields[elem.key] = '';
+      }
+    });
+    return formFields;
+  };
 
-    return (
-      <div className="PlayerSubmissionForm">
-        <h3>Player Submission Form for Player #{  }</h3>
+  validations = () => {
+    const validations = {};
+    Object.keys(this.state).forEach(field => {
+      validations[field] = /.+/;
+    });
+    return validations;
+  };
 
-        <form className="PlayerSubmissionForm__form" >
+  isValid = (field, validations) => {
+    return validations[field].test(this.state[field]);
+  };
 
-          <div className="PlayerSubmissionForm__poem-inputs">
+  handleInput = event => {
+    const formField = {};
+    formField[event.target.name] = event.target.value;
+    this.setState(formField);
+  };
+
+  handleSubmitPoem = event => {
+    event.preventDefault();
+    let isValid = true;
+    const validations = this.validations();
+    Object.keys(this.state).forEach(field => {
+      if (!this.isValid(field, validations)) {
+        isValid = false;
+      }
+    });
+    if (isValid) {
+      this.props.onPoemSubmissionCallback(this.formatPoemLine(this.state));
+      this.setState({ ...this.stateFields(), errorMessage: null });
+    } else {
+      this.setState({
+        errorMessage: '⚠️ Please fill out all fields to submit Line. ⚠️',
+      });
+    }
+  };
 
-            {
-              // Put your form inputs here... We've put in one below as an example
+  formatPoemLine = poemState => {
+    let poemLine = this.props.format
+      .map(word => {
+        if (word.key) {
+          return this.state[word.key];
+        } else {
+          return word;
+        }
+      })
+      .join(' ');
+    return poemLine.slice(0, -2).concat(poemLine.slice(-1));
+  };
+
+  createFormBody = () => {
+    const validations = this.validations();
+    return this.props.format.map((field, i) => {
+      if (field.placeholder) {
+        return (
+          <input
+            type="text"
+            placeholder={field.placeholder}
+            name={field.key}
+            onChange={this.handleInput}
+            value={this.state[field.key]}
+            key={i}
+            className={
+              !this.isValid(field.key, validations)
+                ? 'PlayerSubmissionFormt__input--invalid'
+                : ''
             }
-            <input
-              placeholder="hm..."
-              type="text" />
+          />
+        );
+      } else {
+        return <span key={i}>{field}</span>;
+      }
+    });
+  };
 
-          </div>
+  render() {
+    return (
+      <div className="PlayerSubmissionForm">
+        <h3>Player Submission Form for Player #{this.props.currentPlayer}</h3>
+        {this.state.errorMessage && (
+          <section className="PlayerSubmissionFormt__input--invalid center">
+            {this.state.errorMessage}
+          </section>
+        )}
 
+        <form
+          className="PlayerSubmissionForm__form"
+          onSubmit={this.handleSubmitPoem}
+        >
+          <div className="PlayerSubmissionForm__poem-inputs">
+            {this.createFormBody()}
+          </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 = {
+  currentPlayer: PropTypes.number.isRequired,
+  format: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        key: PropTypes.string,
+        placeholder: PropTypes.string,
+      }),
+    ]).isRequired
+  ),
+  onPoemSubmissionCallback: 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 = ({ recentSubmission }) => {
   return (
     <div className="RecentSubmission">
       <h3>The Most Recent Submission</h3>
-      <p className="RecentSubmission__submission">{  }</p>
+      <p className="RecentSubmission__submission">{recentSubmission}</p>
     </div>
   );
-}
+};
+
+RecentSubmission.propTypes = {
+  recentSubmission: PropTypes.string.isRequired,
+};
 
 export default RecentSubmission;