diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..ed0059bc 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,16 +2,43 @@ import React from 'react';
import './FinalPoem.css';
const FinalPoem = (props) => {
+ // constructor(props) {
+ // super(props);
+ //
+ // this.state = {...props}
+ // }
+
+const allPoemLines = props.poemLines.map((line, i) => {
+ return
{line}
;
+});
+
+const onRevealFinalPoem = () => {
+
+ props.poemFinishedCallback(true);
+}
return (
);
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..9ee0122c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -2,14 +2,31 @@ 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 = {
+ poemLines: [],
+ poemFinished: false,
+ }
+ console.log(this.poemLines);
+ }
+
+ updatePoemLines = (newPoemLine) => {
+ const newPoemLines = this.state.poemLines
+ if (newPoemLine) {
+ newPoemLines.push(newPoemLine);
+ this.setState({
+ poemLines: newPoemLines
+ })
+ }
+ console.log(this.state.poemLines);
}
+
render() {
const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +37,12 @@ class Game extends Component {
}
}).join(" ");
+const poemFinished = () => {
+ this.setState({
+ poemFinished: true
+ })
+}
+
return (
Game
@@ -32,11 +55,20 @@ class Game extends Component {
{ exampleFormat }
-
-
+ {!this.state.poemFinished &&
+
+ }
-
+
);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..f3b8d385 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,28 +1,136 @@
import React, { Component } from 'react';
import './PlayerSubmissionForm.css';
+import RecentSubmission from './RecentSubmission';
class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+
+ playerNumber: 1,
+ lastPoemLine: '',
+
+ updatePoemLinesCallback: props.updatePoemLines,
+ incrementPlayerNumberCallback: props.incrementPlayerNumberCallback
+ }
}
+incrementPlayerNumber = () => {
+ const newPlayerNumber = this.state.playerNumber + 1;
+ this.setState({
+ playerNumber: newPlayerNumber
+ })
+ }
+
+onFieldTyping = (event) => {
+ const field = {};
+ field[event.target.name] = event.target.value;
+ event.target.className=''
+ this.setState(field);
+}
+
+// CURRENTLY THE FEILD WON'T TURN BACK TO WHITE IF YOU TYPE THEN DELETE ITS CONTENTS
+// check that the state of the field matches /[x-y]/
+// assign a class name to a variable
+// update class on input field based on conditional
+
+onSubmitLine = (event) => {
+ event.preventDefault();
+
+ const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`;
+
+ this.setState ({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ lastPoemLine: newPoemLine,
+ })
+
+ this.incrementPlayerNumber();
+
+ this.props.updatePoemLinesCallback(newPoemLine);
+}
+// variable name for class of pink and for empty string
+// ternary for each input Line
+
render() {
+
return (
-
Player Submission Form for Player #{ }
-