diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..98811967 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,38 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const sentences = props.sentences.map((sentence, i) => { + return ( +

{ sentence }

+ ); + }) return (
-
-

Final Poem

- -
- + { + props.completedGame && +
+

Final Poem

+ { sentences } +
+ }
- + { + !props.completedGame && + + }
); } +FinalPoem.propTypes = { + sentences: PropTypes.arrayOf(PropTypes.string).isRequired, + completedGame: PropTypes.bool.isRequired, + onPoemComplete: PropTypes.func.isRequired +} export default FinalPoem; + + diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..bda48852 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,24 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + sentences: [], + completed: false + } + } + + onPlayerSubmit = (submissionData) => { + this.setState({ + sentences: this.state.sentences.concat(submissionData) + }) + + } + + completePoem = () => { + this.setState({ + completed: true + }) } render() { @@ -20,6 +38,8 @@ class Game extends Component { } }).join(" "); + const lastIndex= this.state.sentences.length - 1 + return (

Game

@@ -32,11 +52,15 @@ class Game extends Component { { exampleFormat }

- + + { + !this.state.completed && + + } - + - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..7a19096e 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,28 +1,99 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + this.state = { + words: ["", "", "", "", "", ""], + count: 1 + } } + onInputChange = (event) => { + const name = event.target.name + const value = event.target.value + + const index = parseInt(name, 10); + let oldWords = this.state.words; + oldWords[index] = value + + this.setState({ + words: oldWords + }) + } + + clickedPlayerSubmission = (event) => { + event.preventDefault() + const sentence = this.state.words.join(" ") + this.props.onFormSubmit(sentence) + this.setState({ + words: ["", "", "", "", "", ""], + count: this.state.count + 1 + }) + } + + render() { return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{this.state.count }

-
+
+ The + 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[0]} + placeholder="Adjective" + type="text" + onChange={this.onInputChange} + name="0" /> + + 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[1]} + placeholder="Noun" + type="text" + onChange={this.onInputChange} + name="1" /> - { - // Put your form inputs here... We've put in one below as an example - } + className={this.state.words[2].length > 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[2]} + placeholder="Adverb" + type="text" + onChange={this.onInputChange} + name="2" /> + + 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[3]} + placeholder="Verb" + type="text" + onChange={this.onInputChange} + name="3" /> + + the + 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[4]} + placeholder="Adjective" + type="text" + onChange={this.onInputChange} + name="4" /> + + 0 ? "": "PlayerSubmissionFormt__input--invalid"} + value={this.state.words[5]} + placeholder="Noun" + type="text" + onChange={this.onInputChange} + name="5" />.
@@ -35,4 +106,8 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + onFormSubmit: PropTypes.func.isRequired, +} + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..059107d5 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,21 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { - return ( -
-

The Most Recent Submission

-

{ }

-
- ); + if (props.recentSubmission === undefined){ + return null + } else { + return ( +
+

The Most Recent Submission

+

{ props.recentSubmission }

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