diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..644ae5a9 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,32 @@ import React from 'react'; +import PropTypes from 'prop-types' import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => { + + const fullPoem = () => ( + allLines.map(line =>

{line}

) + ); return (
-
-

Final Poem

- -
- -
- -
+ { showPoem ? + (
+

Final Poem

+ {fullPoem()} +
) : + (
+ { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" /> +
) + }
- ); + ) +} + +FinalPoem.propTypes = { + allLines: PropTypes.array.isRequired, + showPoem: PropTypes.bool.isRequired, + onClickShowPoemCallback: PropTypes.func.isRequired, } export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..5f6796a1 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types' import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; @@ -8,9 +9,35 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + recentSubmission: '', + allSubmissions: [], + showPoem: false, + } + } + + addLine = (newLine) => { + const makeSentence = `The ${newLine.adjective} ${newLine.noun} ${newLine.adverb} ${newLine.verb} the ${newLine.adjective2} ${newLine.noun2}.` + + this.state.allSubmissions.push(makeSentence); + + this.setState({ + recentSubmission: makeSentence, + allSubmissions: this.state.allSubmissions, + }) + + console.log(this.state.allSubmissions) + } + + onClickShowPoem = () => { + this.setState({ + showPoem: true, + }); } render() { + const showPoem = this.state.showPoem; const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -21,6 +48,7 @@ class Game extends Component { }).join(" "); return ( +

Game

@@ -32,12 +60,11 @@ class Game extends Component { { exampleFormat }

- + { (this.state.allSubmissions.length > 0 && !showPoem) ? : ''} - - - + { (!showPoem ? : '') } +
); } @@ -73,4 +100,8 @@ const FIELDS = [ ".", ]; +Game.propTypes = { + newLine: PropTypes.object.isRequired, +} + export default Game; 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..e2388019 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,33 +1,146 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + count: 1, + } + + this.validators = { + adjective: /.+/, + noun: /.+/, + adverb: /.+/, + verb: /.+/, + adjective2: /.+/, + noun2: /.+/, + }; + } + + validate = (fieldName) => { + const value = this.state[fieldName]; + const validation = this.validators[fieldName]; + + if (value.match(validation)) { + return true; + } + + return false; + } + + + resetState = () => { + this.setState({ + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + count: this.state.count + 1 + }); + } + + onFormChange = (event) => { + + const field = event.target.name; + const value = event.target.value; + + const updatedState = {}; + updatedState[field] = value; + this.setState(updatedState); + } + + onSubmit = (event) => { + event.preventDefault(); + let allValid = true; + + Object.keys(this.validators).forEach((key) => { + if (!this.state[key].match(this.validators[key])) { + allValid = false; + } + }); + + if (!allValid) { + return; + } + console.log(event); + + this.props.addLineCallback(this.state); + this.resetState(); } render() { return (
-

Player Submission Form for Player #{ }

- -
+

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

+ +
+
{"The "} + + +
+ +
+ + +
+ +
+ + +
- { - // Put your form inputs here... We've put in one below as an example - } - +
+ + +
+ +
{"the "} + + +
+ +
+ + . +
- +
@@ -35,4 +148,8 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + addLineCallback: PropTypes.func.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..29ac3a6e 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.newLine }

); }