diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..dbc381c7 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,17 +2,35 @@ import React from 'react';
import './FinalPoem.css';
const FinalPoem = (props) => {
+
+ const finalPoem = props.lines;
+ const finalPoemReturn = finalPoem.map((line, i) => {
+ return (
+
Final Poem
-
+ {finalPoemReturn}
+ )
+ };
+ const poemButton = () => {
+ return (
-
+
+ )
+ };
+
+ return (
+
+ {props.gameEnded ? completePoem() : poemButton()}
);
}
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..6b6c8de4 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,34 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ submissionCount: 0,
+ recentSubmission: '',
+ submissionList: [],
+ gameComplete: '',
+ };
+ }
+
+ onFormSubmission = (newSubmission) => {
+ const updatedSubmissionList = this.state.submissionList;
+ updatedSubmissionList.push(newSubmission)
+
+ const updatedRecentSubmission = updatedSubmissionList[updatedSubmissionList.length - 1]
+ const updatedSubmissionCount = this.state.submissionCount + 1
+ this.setState({
+ submissionCount: updatedSubmissionCount,
+ recentSubmission: updatedRecentSubmission,
+ submissionList: updatedSubmissionList,
+ })
+ }
+
+ onEndGame = () => {
+ const gameCompleteUpdate = true;
+ this.setState({
+ gameComplete: gameCompleteUpdate,
+ recentSubmission: '',
+ })
}
render() {
@@ -32,11 +60,11 @@ class Game extends Component {
{ exampleFormat }
-
+ {this.state.recentSubmission ?
: ""}
-
+ {this.state.gameComplete ? "" : this.onFormSubmission(newSubmission)} format={FIELDS} /> }
-
+
);
@@ -48,27 +76,33 @@ const FIELDS = [
{
key: 'adj1',
placeholder: 'adjective',
+ entry: '',
},
{
key: 'noun1',
placeholder: 'noun',
+ entry: '',
},
{
key: 'adv',
placeholder: 'adverb',
+ entry: '',
},
{
key: 'verb',
placeholder: 'verb',
+ entry: '',
},
"the",
{
key: 'adj2',
placeholder: 'adjective',
+ entry: '',
},
{
key: 'noun2',
placeholder: 'noun',
+ entry: '',
},
".",
];
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..22f625be 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -2,28 +2,67 @@ import React, { Component } from 'react';
import './PlayerSubmissionForm.css';
class PlayerSubmissionForm extends Component {
-
+
constructor(props) {
super(props);
+ this.state = { fields: this.props.format }
+ }
+
+ onChange = (event, i) => {
+ const { value } = event.target;
+ const newState = this.state.fields;
+ newState[i]["entry"] = value;
+ this.setState({fields: newState});
+ }
+
+ validate = (i) => {
+ return this.state.fields[i]["entry"].match(/.+/);
+ }
+
+ onFormSubmit = (event) => {
+ event.preventDefault();
+
+ const newSubmission = this.state.fields.map((field) => {
+ if (field.key) {
+ return field.entry;
+ } else {
+ return field;
+ }
+ }).join(" ");
+
+ const newFields = this.state.fields;
+
+ newFields.forEach(field => {
+ if (field.entry) {
+ field.entry = ""
+ }
+ });
+
+ this.setState({ fields: newFields });
+
+ this.props.submitFormCallback(newSubmission);
}
render() {
+ const formElements = this.props.format.map((field, i) => {
+ if (field.key) {
+ return (
+