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 ( -
-
-

Final Poem

- -
- + 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 }

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } - - + {this.inputs.map((wordInput, i) => { + return ( + + ) + })}
- +
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;