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 }