diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css
index 67dda943..e2655277 100644
--- a/src/components/FinalPoem.css
+++ b/src/components/FinalPoem.css
@@ -19,3 +19,7 @@
.FinalPoem__poem {
border-bottom: 2px gray dashed;
}
+
+.hide {
+ display: none;
+}
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..436dcb1a 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,35 @@
import React from 'react';
import './FinalPoem.css';
+import PropTypes from 'prop-types';
const FinalPoem = (props) => {
+
+ const handleClick = () => {
+ props.handleClickCallback();
+ }
+ let buttonStyle = "FinalPoem__reveal-btn-container";
+ let clickStyle = "FinalPoem__reveal-btn";
+ if (props.finalized) {
+ buttonStyle = "FinalPoem__reveal-btn-container hide";
+ clickStyle = "FinalPoem__reveal-btn hide";
+ }
return (
Final Poem
-
+ {props.lines}
-
);
}
+FinalPoem.propTypes = {
+ lines: PropTypes.array
+}
+
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..9fb2d8cc 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,9 +8,49 @@ class Game extends Component {
constructor(props) {
super(props);
+ this.state = {
+ lines: [],
+ finalized: false,
+ };
}
+ addLine = (line) => {
+ const lines = this.state.lines;
+ lines.push(
{line}
);
+ this.setState({
+ lines,
+ });
+ }
+
+ handleClickFinalPoem = () => {
+ this.setState({
+ finalized: true,
+ });
+ }
+
+
render() {
+ let lines;
+ let submissionForm;
+ let recentSubmission;
+ let finalized;
+ if (this.state.finalized){
+ lines = this.state.lines.reverse();
+ submissionForm = '';
+ finalized = true;
+ } else {
+ lines = null;
+ submissionForm = (
);
+ recentSubmission = ();
+ finalized = false;
+
+ }
+
+ if (this.state.lines.length === 0) {
+ recentSubmission = '';
+ }
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
@@ -32,11 +72,15 @@ class Game extends Component {
{ exampleFormat }
-
+ {recentSubmission}
-
+ {submissionForm}
-
+
);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..3529a305 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,29 +1,109 @@
import React, { Component } from 'react';
import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
class PlayerSubmissionForm extends Component {
+ static propTypes = {
+ addLineCallback: PropTypes.func,
+ }
+
constructor(props) {
super(props);
+ this.state = {
+ playerNum: 1,
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ };
+ }
+
+ onChangeHandler = (event) => {
+ const field = {}
+ field[event.target.name] = event.target.value;
+ this.setState(field);
+ }
+
+ handleSubmit = (event) => {
+ event.preventDefault();
+ const line = ["The", this.state.adj1, this.state.noun1, this.state.adv, this.state.verb, "the", this.state.adj2, this.state.noun2 + "."].join(" ");
+
+ this.props.addLineCallback(line);
+
+ this.setState({
+ playerNum: this.state.playerNum + 1,
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ });
}
render() {
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ this.state.playerNum }
-