diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..439b11c9 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,19 +2,22 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { - - return ( -
+ if (props.render === true){ + return
-

Final Poem

- +

Final Poem

+ {props.submissions.map((submission) => { + return

{submission}

+ })}
- +
+ } + return (
- +
-
- ); + + ) } export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..6beee2d9 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,35 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + submissions:[], + finalPoem: false + } + } + + addLine = (submission) => { + const submissions = this.state.submissions; + submissions.push(submission); + this.setState({ submissions }) + console.log(submissions) + } + + finalPoemRender = () => { + this.setState({ + finalPoem: true + }); + } + + renderRecentSubmission = () => { + const submissions = this.state.submissions; + if (submissions.length === 0) { + return null; + } + return ( + + ); } render() { @@ -32,11 +61,12 @@ class Game extends Component { { exampleFormat }

- + {this.renderRecentSubmission()} + - + - + ); diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..bb566357 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -31,10 +31,10 @@ background-color: tomato; } -.PlayerSubmissionFormt__input--invalid { +.PlayerSubmissionForm__input--invalid { background-color: #FFE9E9; } .PlayerSubmissionForm__input--invalid::placeholder { color: black; -} +} \ No newline at end of file diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..4e336374 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,25 +5,114 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + this.state = { + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '' + } } - render() { + handleInput = (event) => { + this.setState({ [event.target.name]: event.target.value }); + }; + + handleOnSubmit = (event) => { + event.preventDefault(); + this.setState(this.initialState); + + const submission = `The ${this.state.adjective1} ${this.state.noun1} ${this.state.adverb} + ${this.state.verb} ${this.state.adjective2} ${this.state.noun2}.`; + this.props.addLineCallback(submission) + + this.setState ({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '' + }); +} + isInputInvalid = (input) => { + if (input === ""){ + return "PlayerSubmissionForm__input--invalid" + } + } + + render() { + if (this.props.render === true) { + return
+ } return (
-

Player Submission Form for Player #{ }

+

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

-
+
{ // Put your form inputs here... We've put in one below as an example - } - + } +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
@@ -35,4 +124,5 @@ class PlayerSubmissionForm extends Component { } } + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..0e1d3192 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,8 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.recentsubmission }

+
); }