diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..3a564011 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,36 @@
import React from 'react';
+import PropTypes from 'prop-types';
import './FinalPoem.css';
const FinalPoem = (props) => {
+ let formattedPoem = props.poem.map((line, i) => {
+ return
{line}
;
+ })
+
+ const onClickTogglePoem = () => {
+ props.togglePoemCallback();
+ }
return (
-
+ (props.showPoem ?
+ (
Final Poem
-
+ {formattedPoem}
+
)
+ :
+ (
+
+
)
+ )
+ )
+}
-
-
-
-
- );
+FinalPoem.propTypes = {
+ poem: PropTypes.arrayOf(PropTypes.string),
+ showPoem: PropTypes.func.isRequired,
+ togglePoemCallback: PropTypes.func.isRequired,
}
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..89b0abd0 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,36 @@ class Game extends Component {
constructor(props) {
super(props);
+ this.state = {
+ latestSentence: '',
+ wholePoem: [],
+ showPoem: false
+ }
+ }
+
+ makeOneSentence = (words) => {
+ const sentence = `The ${words.adj1} ${words.noun1} ${words.adv} ${words.verb} the ${words.adj2} ${words.noun2}.`;
+ this.addToPoem(sentence);
+ this.setState({
+ latestSentence: sentence,
+ });
+ console.log(sentence);
+ }
+// Moved this out of makeOneSentence and made it a helper method for clarity
+ addToPoem = (toAdd) => {
+ this.state.wholePoem.push(toAdd);
+ this.setState({
+ wholePoem: this.state.wholePoem
+ })
+ }
+
+ togglePoem = () => {
+ let curStatus = this.state.showPoem
+ curStatus = !curStatus
+ this.setState({
+ showPoem: curStatus,
+ })
+ console.log(`showPoem changed to ${curStatus}`)
}
render() {
@@ -29,15 +59,20 @@ class Game extends Component {
Please follow the following format for your poetry submission:
- { exampleFormat }
+ { exampleFormat }
-
-
-
+ {
+ this.state.wholePoem.length > 0 &&
+
+ }
-
+ {
+ this.state.showPoem === false &&
+
+ }
+
);
}
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..3ad2d758 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,28 +1,113 @@
import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+ this.state = {
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ playerCount: 1,
+ }
+ }
+
+ onInputChange = (event) => {
+ const updatedState = {};
+ const field = event.target.name;
+ const value = event.target.value;
+ updatedState[field] = value;
+ this.setState(updatedState)
+ console.log(this.state)
+ }
+
+ onFormSubmit = (event) => {
+ event.preventDefault();
+ const words = {
+ adj1: this.state.adj1,
+ noun1: this.state.noun1,
+ adv: this.state.adv,
+ verb: this.state.verb,
+ adj2: this.state.adj2,
+ noun2: this.state.noun2
+ }
+ const newPlayerCount = this.state.playerCount + 1;
+ console.log(words)
+
+
+ this.setState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ // does playercount state live in form or game? change this to a functional component and take away state?
+ playerCount: newPlayerCount
+ })
+ this.props.makeOneSentenceCallback(words);
}
render() {
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ this.state.playerCount }
-