diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..a8d4d0c2 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,17 +2,25 @@ import React from 'react';
import './FinalPoem.css';
const FinalPoem = (props) => {
+
+ const finalPoem = props.poem.map((verse, index) => {
+ return (
{verse}
)
+ })
return (
-
- Final Poem
+ { props.finalized &&
+
+ Final Poem
+ {finalPoem}
+
+ }
-
-
-
-
-
+ { !props.finalized && finalPoem.length >= 1 &&
+
+
+
+ }
);
}
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..68959ce1 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,10 +8,38 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ poem: [],
+ finalized: false,
+ }
+ }
+
+ addVerse = (newVerse) => {
+ const newState = {...this.state}
+ const updatedPoem = newState.poem
+ updatedPoem.push(newVerse)
+ this.setState(updatedPoem)
}
+ finalizePoem = () => {
+ if (this.state.poem.length >= 1) {
+ this.setState({finalized: true})
+ }
+ }
+
render() {
+ const showMostRecent = () => {
+ if (this.state.poem.length >= 1 && !this.state.finalized) {
+ return
+ }
+ }
+
+ const playerNumber = this.state.poem.length
+
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -32,11 +60,22 @@ class Game extends Component {
{ exampleFormat }
-
-
-
+ { showMostRecent() }
-
+
+ { !this.state.finalized &&
+
+ }
+
+
);
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..bad28c6b 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,28 +1,94 @@
import React, { Component } from 'react';
import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ }
+ }
+
+ resetState = () => {
+ this.setState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ })
+ }
+
+ onFormChange = (event) => {
+ const field = event.target.name;
+ const value = event.target.value;
+
+ const updatedState = {};
+ updatedState[field] = value;
+ this.setState(updatedState);
+ }
+
+ onSubmit = (event) => {
+ event.preventDefault()
+ // const {adjective1, noun1, adverb, verb, adjective2, noun2} = this.state
+
+ const newVerse = this.props.fields.map((field) => {
+ if (field.key) {
+ return this.state[field.key]
+ } else {
+ return field
+ }
+ })
+ console.log(event)
+ this.props.formCallback(newVerse.join(" "))
+
+ this.resetState()
}
+ isInputValid = (input) => {
+ const className = input.length > 0 ? '' : 'PlayerSubmissionFormt__input--invalid'
+ return className
+ }
+
+
+
render() {
return (
-
Player Submission Form for Player #{ }
+ {/* Add 1 so it does not start from player #0 */}
+
Player Submission Form for Player #{ this.props.playerNumber + 1}
-