diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..e2655277 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -19,3 +19,7 @@ .FinalPoem__poem { border-bottom: 2px gray dashed; } + +.hide { + display: none; +} diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..436dcb1a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,35 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + + const handleClick = () => { + props.handleClickCallback(); + } + let buttonStyle = "FinalPoem__reveal-btn-container"; + let clickStyle = "FinalPoem__reveal-btn"; + if (props.finalized) { + buttonStyle = "FinalPoem__reveal-btn-container hide"; + clickStyle = "FinalPoem__reveal-btn hide"; + } return (

Final Poem

- +
{props.lines}
-
- +
+
); } +FinalPoem.propTypes = { + lines: PropTypes.array +} + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..9fb2d8cc 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,9 +8,49 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + lines: [], + finalized: false, + }; } + addLine = (line) => { + const lines = this.state.lines; + lines.push(

{line}

); + this.setState({ + lines, + }); + } + + handleClickFinalPoem = () => { + this.setState({ + finalized: true, + }); + } + + render() { + let lines; + let submissionForm; + let recentSubmission; + let finalized; + if (this.state.finalized){ + lines = this.state.lines.reverse(); + submissionForm = ''; + finalized = true; + } else { + lines = null; + submissionForm = (); + recentSubmission = (); + finalized = false; + + } + + if (this.state.lines.length === 0) { + recentSubmission = ''; + } const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -32,11 +72,15 @@ class Game extends Component { { exampleFormat }

- + {recentSubmission} - + {submissionForm} - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..3529a305 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 { + static propTypes = { + addLineCallback: PropTypes.func, + } + constructor(props) { super(props); + this.state = { + playerNum: 1, + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '' + }; + } + + onChangeHandler = (event) => { + const field = {} + field[event.target.name] = event.target.value; + this.setState(field); + } + + handleSubmit = (event) => { + event.preventDefault(); + const line = ["The", this.state.adj1, this.state.noun1, this.state.adv, this.state.verb, "the", this.state.adj2, this.state.noun2 + "."].join(" "); + + this.props.addLineCallback(line); + + this.setState({ + playerNum: this.state.playerNum + 1, + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '' + }); } render() { return (
-

Player Submission Form for Player #{ }

+

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

-
+
+ The + + + + + + + + + the - { - // Put your form inputs here... We've put in one below as an example - } - + + + .
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..f57db2e1 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.lastLine }
); } +RecentSubmission.propTypes = { + lastLine: PropTypes.array +} + export default RecentSubmission;