diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..571b61e4 100644 --- a/src/components/FinalPoem.js +++ b/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 (
-
-

Final Poem

- -
- -
- -
+ {poemComplete && ( +
+

Final Poem

+ {formatPoem(poem)} +
+ )} + {!poemComplete && ( +
+ finalPoemDisplayCallback()} + /> +
+ )}
); -} +}; + +const formatPoem = poemArray => { + return poemArray.map((line, i) => { + return

{line}

; + }); +}; + +FinalPoem.propTypes = { + finalPoemDisplayCallback: PropTypes.func.isRequired, + poem: PropTypes.arrayOf(PropTypes.string).isRequired, + poemComplete: PropTypes.bool.isRequired, +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..54970ec2 100644 --- a/src/components/Game.js +++ b/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 (

Game

-

Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.

- -

Please follow the following format for your poetry submission:

- -

- { exampleFormat } +

+ Each player should take turns filling out and submitting the form + below. Each turn should be done individually and in secret!{' '} + Take inspiration from the revealed recent submission. When all players + are finished, click the final button on the bottom to reveal the + entire poem.

- +

Please follow the following format for your poetry submission:

- +

{exampleFormat}

+ {!finalSubmission.poemComplete && + (recentSubmission && ( + + ))} - + {!finalSubmission.poemComplete && ( + + )} +
); } } 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; diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..b5a83f0a 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -38,3 +38,7 @@ .PlayerSubmissionForm__input--invalid::placeholder { color: black; } + +.center { + text-align: center; +} diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..db555de1 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,33 +1,121 @@ 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 ( -
-

Player Submission Form for Player #{ }

+ validations = () => { + const validations = {}; + Object.keys(this.state).forEach(field => { + validations[field] = /.+/; + }); + return validations; + }; -
+ isValid = (field, validations) => { + return validations[field].test(this.state[field]); + }; -
+ 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 ( + + /> + ); + } else { + return {field}; + } + }); + }; -
+ render() { + return ( +
+

Player Submission Form for Player #{this.props.currentPlayer}

+ {this.state.errorMessage && ( +
+ {this.state.errorMessage} +
+ )} + +
+ {this.createFormBody()} +
- +
@@ -35,4 +123,18 @@ class PlayerSubmissionForm extends Component { } } +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; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..f2a0aa58 100644 --- a/src/components/RecentSubmission.js +++ b/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 (

The Most Recent Submission

-

{ }

+

{recentSubmission}

); -} +}; + +RecentSubmission.propTypes = { + recentSubmission: PropTypes.string.isRequired, +}; export default RecentSubmission;