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 }

-
+
- { - // Put your form inputs here... We've put in one below as an example - } + The + + + + the + + + .
@@ -35,4 +120,8 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + makeOneSentenceCallback: PropTypes.func.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..62dac611 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,20 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

+ {props.sentence} +

); } +RecentSubmission.propTypes = { + sentence: PropTypes.string, +} + export default RecentSubmission;