diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..ad921799 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -19,3 +19,7 @@ .FinalPoem__poem { border-bottom: 2px gray dashed; } + +.FinalPoem__poem--empty { + font-style: italic; +} \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..5aa8f099 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,39 @@ import React from 'react'; +import PropType from 'prop-types'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = ({ poemLines, revealPoem, onRevealPoem }) => { - return ( -
-
-

Final Poem

+ const displayPoem = (poemLines) => { + const collectedPoem = poemLines.map((line, i) => { + return

{line}

+ }); -
+ return collectedPoem; + } -
- -
+ return ( +
+ { revealPoem + ?
+

Final Poem

+ { poemLines.length > 0 + ? displayPoem(poemLines) + :

You didn't enter any lines of poetry.

+ } +
+ :
+ +
+ }
); } +FinalPoem.propTypes = { + poemLines: PropType.arrayOf(PropType.string).isRequired, + onRevealPoem: PropType.func.isRequired, + revealPoem: PropType.bool.isRequired, +} + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..152fe27b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,17 +8,51 @@ class Game extends Component { constructor(props) { super(props); - } - render() { + this.state = { + submissions: [], + currentPlayer: 1, + lastsubmission: undefined, + poemCompleted: false, + } + } - const exampleFormat = FIELDS.map((field) => { - if (field.key) { - return field.placeholder; + mapToString = (arrayOfStrings) => { + const newString = arrayOfStrings.map((string) => { + if (string.key) { + return string.placeholder; } else { - return field; + return string; } }).join(" "); + return newString; + } + + onFormSubmit = (submissionComponents) => { + const newSubmission = this.mapToString(submissionComponents); + + let { submissions, currentPlayer, lastsubmission } = this.state; + + // add submissionComponents to submissions array + submissions.push(newSubmission); + // add one to currentPlayer + currentPlayer += 1; + // replace current last submission with this submission + lastsubmission = newSubmission; + + this.setState( {submissions, currentPlayer, lastsubmission} ); + } + + onRevealPoem = () => { + // change poemCompleted to true + let { poemCompleted } = this.state; + poemCompleted = true; + this.setState({ poemCompleted }); + } + + render() { + const exampleFormat = this.mapToString(FIELDS); + const { submissions, lastsubmission, currentPlayer, poemCompleted } = this.state; return (
@@ -32,11 +66,18 @@ class Game extends Component { { exampleFormat }

- + { poemCompleted + ? '' + :
+ { lastsubmission + ? + : '' + } + +
+ } - - - +
); @@ -61,6 +102,10 @@ const FIELDS = [ key: 'verb', placeholder: 'verb', }, + { + key: 'preposition', + placeholder: 'preposition', + }, "the", { key: 'adj2', diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..6d6f98eb 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -31,7 +31,7 @@ background-color: tomato; } -.PlayerSubmissionFormt__input--invalid { +.PlayerSubmissionForm__input--invalid { background-color: #FFE9E9; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..8cdeeccc 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,29 +1,134 @@ import React, { Component } from 'react'; +import PropType from 'prop-types'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + fields: {}, + placeholders: {}, + } } - render() { + componentDidMount = () => { + this.initializeFieldsAndPlaceholders(); + this.initializeValidators(); + } + + validate = (fieldName) => { + const value = this.state.fields[fieldName]; + const validation = this.validators[fieldName]; + + return (validation.test(value)); + } + + initializeValidators = () => { + this.validators = {}; + const formFields = this.props.formFields; + + for (const field of formFields) { + if (field.key) { + const {key} = field; + this.validators[key] = /.+/; + } else { + this.validators[field] = new RegExp(field); + } + } + } + + initializeFieldsAndPlaceholders = () => { + let fieldState = {}; + let placeholderState = {}; + const formFields = this.props.formFields; + + for (const field of formFields) { + if (field.key) { + const {key, placeholder} = field; + fieldState[key] = ''; + placeholderState[key] = placeholder; + } else { + fieldState[field] = field; + } + } + + this.setState({ fields: fieldState, placeholders: placeholderState }); + } + + onFieldChange = (event) => { + const { name, value } = event.target; + + const { fields } = this.state; + const updatedFields = fields; + updatedFields[name] = value; + this.setState({fields: updatedFields}); + } + + clearState = () => { + let { fields } = this.state; + fields = {}; + + this.setState({ fields }); + this.initializeFieldsAndPlaceholders(); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + // returns if there's any invalid inputs + const keys = Object.keys(this.validators); + for (const key of keys) { + if (!this.validators[key].test(this.state.fields[key])) { + return; + } + } + + // get the values from state + const submissionComponentsArray = Object.values({ ...this.state.fields }); + // pass up array to Game + this.props.onFormSubmit(submissionComponentsArray); + // clear all changeable values from state + this.clearState(); + } + + makeInputCollection = (stateFields, placeholders) => { + // const { placeholders } = this.state; + const inputCollection = Object.keys(stateFields).map((field, i) => { + if ( !/the/i.test(field) + && !/[.,?!]/.test(field) + && !/^a$/.test(field) ) { + const fieldName = field; + const fieldValid = this.validate(String( fieldName )); + return ; + } else { + return field; + } + }); + return inputCollection; + } + + render() { + const inputs = this.makeInputCollection(this.state.fields, this.state.placeholders); + return ( -
-

Player Submission Form for Player #{ }

+
+

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

- - { - // Put your form inputs here... We've put in one below as an example - } - - + { inputs }
@@ -35,4 +140,10 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + formFields: PropType.array.isRequired, + playerNumber: PropType.number.isRequired, + onFormSubmit: PropType.func.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..017c6439 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,18 @@ import React from 'react'; +import PropType from 'prop-types'; import './RecentSubmission.css'; -const RecentSubmission = (props) => { +const RecentSubmission = ({ submission }) => { return (

The Most Recent Submission

-

{ }

+

{ submission }

); } +RecentSubmission.propTypes = { + submission: PropType.string.isRequired, +} + export default RecentSubmission;