diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..97a263e7 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,37 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const finalizedPoem = props.poem.map((line, i) => { + return ( +

+ {line} +

+ ) + }); + return (
-
-

Final Poem

- -
- -
- -
+ { props.ready ? +
+

Final Poem

+ { finalizedPoem } +
+ : +
+ +
+ }
); } +FinalPoem.propTypes = { + poem: PropTypes.array.isRequired, + ready: PropTypes.bool.isRequired, + onFinalSubmit: PropTypes.func.isRequired, +} + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..ca9a5499 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,22 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + lines: [], + ready: false, + } + } + + addLine = (line) =>{ + const lines = this.state.lines; + lines.push(line); + + this.setState({ lines }); + } + + finalSubmit = () => { + this.setState({ ready: true }) } render() { @@ -32,11 +48,19 @@ class Game extends Component { { exampleFormat }

- - - + { this.state.lines.length > 0 && !this.state.ready ? + + : + '' + } - + { this.state.ready? + '' + : + + } + + ); @@ -71,6 +95,6 @@ const FIELDS = [ placeholder: 'noun', }, ".", -]; +] export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..3db1df40 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,29 +1,109 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + } + } + + onFieldChange = (event) => { + this.setState({ + [event.target.name]: event.target.value, + }); + } + + fieldValid = (fieldName) => { + return this.state[fieldName] !== ''; + } + + onFormSubmit = (event) => { + event.preventDefault(); + + // React won't render Object. Making the line a string or array here to render successfully in FinalPoem's map function on line#9 + const newLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.` + + this.setState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + + this.props.addLineCallback(newLine); } render() { return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ this.props.id }

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } + The - + onChange={this.onFieldChange} + name="adj1" + value={this.state.adj1} + type="text" + placeholder="adjective" + className={this.fieldValid("adj1")? "" : "PlayerSubmissionFormt__input--invalid"} + /> + + + + the + + .
@@ -35,4 +115,9 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + addLineCallback: PropTypes.func.isRequired, + id: PropTypes.number.isRequired, +} + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..67d10d1b 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,18 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.recentLine }

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