diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..1befd8bd 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -2,19 +2,33 @@ import React from 'react';
import './FinalPoem.css';
const FinalPoem = (props) => {
-
- return (
-
-
-
+ const revealPoem = () => {
+ props.revealPoemCallback();
+ }
+ const poemDisplay = props.finalPoem.map((stanza, i) => {
+ return (
+
+ {stanza}
+
+ )
+ })
+
+ if (props.displayPoem === true) {
+ return (
+
+
+ Final Poem
+ {poemDisplay}
+
+
+ )
+ } else {
+ return (
-
+
-
- );
+ );
+ }
}
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..b5086f02 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,8 +8,27 @@ class Game extends Component {
constructor(props) {
super(props);
+ this.state = {
+ currentSubmission: '',
+ finalPoem: [],
+ displayPoem: false,
+ }
+ }
+ addRecentSubmission = (stanza) => {
+ // add stanza to Game state
+ const {finalPoem} = this.state;
+ finalPoem.push(stanza);
+ this.setState({
+ currentSubmission: stanza,
+ finalPoem,
+ })
}
+ revealPoem = () => {
+ this.setState({
+ displayPoem: true
+ })
+ }
render() {
const exampleFormat = FIELDS.map((field) => {
@@ -20,6 +39,14 @@ class Game extends Component {
}
}).join(" ");
+ if (this.state.displayPoem === true) {
+ return (
+
+
+
+ )
+ } else {
+
return (
Game
@@ -32,14 +59,16 @@ class Game extends Component {
{ exampleFormat }
-
+
-
+
{ this.addRecentSubmission(stanza) }} />
-
+
- );
+ )
+ }
+
}
}
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..eeaf7dd3 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -4,30 +4,77 @@ import './PlayerSubmissionForm.css';
class PlayerSubmissionForm extends Component {
constructor(props) {
- super(props);
+ super(props);
+ this.addRecentSubmission = props.addRecentSubmission;
+ this.playerNum = 1;
+ this.state = {
+ // words live in state until submit is clicked
+ prefix: 'The',
+ adjectiveA: '',
+ nounA: '',
+ adverbA: '',
+ verbA: '',
+ midfix: 'the',
+ adjectiveB: '',
+ nounB: ''
+ };
+ this.inputs = Object.keys(this.state);
+
+ }
+
+ updateWord = (event) => {
+ console.log(this.inputs);
+ const value = event.target.value
+ this.setState({
+ [event.target.name]: value
+ })
+ }
+
+ onSubmitForm = (event) => {
+ event.preventDefault();
+ let submission = '';
+ Object.keys(this.state).forEach((key) => {
+ submission += ' ' + this.state[key];
+ });
+ this.setState({
+ adjectiveA: '',
+ nounA: '',
+ adverbA: '',
+ verbA: '',
+ adjectiveB: '',
+ nounB: ''
+ })
+
+ this.addRecentSubmission(submission);
+ this.playerNum += 1;
}
render() {
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ this.playerNum }
-
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..e4a9a130 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -2,12 +2,22 @@ import React from 'react';
import './RecentSubmission.css';
const RecentSubmission = (props) => {
+ if (props.recentSubmission === '') {
+ return (
+
+
+
+ );
+ } else {
+
return (
The Most Recent Submission
-
{ }
+
{ props.recentSubmission }
- );
+ )
+}
+
}
export default RecentSubmission;