diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..ccfd3086 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,28 @@
-import React from 'react';
-import './FinalPoem.css';
-
-const FinalPoem = (props) => {
+import React from "react";
+import "./FinalPoem.css";
+const FinalPoem = props => {
return (
);
-}
+};
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..d94373a0 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,18 +1,49 @@
-import React, { Component } from 'react';
-import './Game.css';
-import PlayerSubmissionForm from './PlayerSubmissionForm';
-import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
+import React, { Component } from "react";
+import "./Game.css";
+import PlayerSubmissionForm from "./PlayerSubmissionForm";
+import FinalPoem from "./FinalPoem";
+import RecentSubmission from "./RecentSubmission";
class Game extends Component {
-
constructor(props) {
super(props);
+
+ this.state = {
+ playerNumber: 1,
+ isFormSubmitted: false,
+ userInputs: ["The", "the"],
+ userSubmission: "",
+ finalPoem: [],
+ shouldShowFinalPoem: false
+ };
}
- render() {
+ handleRecentSubmission = userInputs => {
+ console.log(userInputs);
+
+ let { adj1, noun1, adv, verb, adj2, noun2 } = userInputs;
+ let sentence = `The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`;
+
+ let finalPoem = this.state.finalPoem;
+ finalPoem.push(sentence);
+ // userInputs.forEach(data => console.log(data));
+
+ this.setState({
+ isFormSubmitted: true,
+ playerNumber: this.state.playerNumber + 1,
+ userSubmission: sentence,
+ finalPoem: finalPoem
+ });
+ };
- const exampleFormat = FIELDS.map((field) => {
+ showFinalPoem = () => {
+ this.setState({
+ shouldShowFinalPoem: true
+ });
+ };
+
+ render() {
+ const exampleFormat = FIELDS.map(field => {
if (field.key) {
return field.placeholder;
} else {
@@ -20,24 +51,38 @@ class Game extends Component {
}
}).join(" ");
+ const userSubmission = this.state.userSubmission;
+
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.
+
+ 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 }
-
-
-
+
{exampleFormat}
-
+ {this.state.isFormSubmitted && (
+
+ )}
-
+
+
);
}
@@ -46,31 +91,31 @@ class Game extends Component {
const FIELDS = [
"The",
{
- key: 'adj1',
- placeholder: 'adjective',
+ key: "adj1",
+ placeholder: "adjective"
},
{
- key: 'noun1',
- placeholder: 'noun',
+ key: "noun1",
+ placeholder: "noun"
},
{
- key: 'adv',
- placeholder: 'adverb',
+ key: "adv",
+ placeholder: "adverb"
},
{
- key: 'verb',
- placeholder: 'verb',
+ key: "verb",
+ placeholder: "verb"
},
"the",
{
- key: 'adj2',
- placeholder: 'adjective',
+ key: "adj2",
+ placeholder: "adjective"
},
{
- key: 'noun2',
- placeholder: 'noun',
+ key: "noun2",
+ placeholder: "noun"
},
- ".",
+ "."
];
export default Game;
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..6c1c0e97 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,33 +1,120 @@
-import React, { Component } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { Component } from "react";
+import "./PlayerSubmissionForm.css";
class PlayerSubmissionForm extends Component {
-
constructor(props) {
super(props);
+
+ //
+ this.state = {
+ // playerNumber: 1,
+ adj1: "",
+ noun1: "",
+ adv: "",
+ verb: "",
+ adj2: "",
+ noun2: ""
+ };
}
- render() {
+ handleSubmit = e => {
+ e.preventDefault();
+ // this.setState({
+ //
+ // });
- return (
-
-
Player Submission Form for Player #{ }
+ this.props.handleRecentSubmission(this.state);
+ const keys = Object.keys(this.state);
+ keys.map(key => {
+ this.setState({
+ [key]: ""
+ });
+ });
+ };
-