diff --git a/src/App.js b/src/App.js index 8e1f9446..b8572ca0 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import Game from './components/Game.js'; class App extends Component { + render() { return (
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..6da53f11 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,43 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const revealPoemButton = +
+ +
+ + const submissionsCollection = props.poem.map((submission, i) => { + const { adjective, noun, adverb, verb, adjective2, noun2 } = submission + const sentence = `The ${adjective} ${noun} ${adverb} ${verb} the ${adjective2} ${noun2}.` + return

{sentence}

; + } + ); - return ( + const Poem =

Final Poem

- +
    + {submissionsCollection} +
+
; + + return ( + props.showPoem ? Poem : revealPoemButton + ); +}; -
- -
-
- ); +FinalPoem.propTypes = { + poem: PropTypes.array.isRequired, + revealPoem: PropTypes.func.isRequired, + showPoem: PropTypes.bool.isRequired } - -export default FinalPoem; + +export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..47625b9c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,10 +6,51 @@ import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { - super(props); + constructor() { + super(); + + this.state = { + submissions: [], + lastSubmission: {}, + player: 1, + showPoem: false, + showSubm: false + } + }; + + addSubmission = (submission) => { + + const submissions = this.state.submissions; + + submissions.push(submission); + this.setState({ + submissions, + player: this.state.player + 1, + showSubm: true, + }) + }; + + lastSubmission = (submission) => { + + let { lastSubmission } = this.state.lastSubmission; + + lastSubmission = submission + this.setState({ + lastSubmission, + }); } + revealPoem = (event) => { + event.preventDefault(); + if (this.state.submissions.length > 0) { + this.setState({ + showPoem: true, + showSubm: false, + }); + }; + }; + + render() { const exampleFormat = FIELDS.map((field) => { @@ -32,12 +73,23 @@ class Game extends Component { { exampleFormat }

- - - + - + + ); } @@ -46,15 +98,15 @@ class Game extends Component { const FIELDS = [ "The", { - key: 'adj1', + key: 'adjective', placeholder: 'adjective', }, { - key: 'noun1', + key: 'noun', placeholder: 'noun', }, { - key: 'adv', + key: 'adverb', placeholder: 'adverb', }, { @@ -63,7 +115,7 @@ const FIELDS = [ }, "the", { - key: 'adj2', + key: 'adjective2', placeholder: 'adjective', }, { diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..dd4d8811 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,6 @@ background-color: #FFE9E9; } -.PlayerSubmissionForm__input--invalid::placeholder { +.PlayerSubmissionFormt__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..f1770d0f 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,38 +1,122 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); - } - render() { + this.state = STATE + + this.validators = { + adjective: /.+/, + noun: /.+/, + adverb: /.+/, + verb: /.+/, + adjective2: /.+/, + noun2: /.+/, + } + }; - return ( -
-

Player Submission Form for Player #{ }

+ onFieldChange = (event) => { + const { placeholder, value } = event.target; + + const updatedState = {}; + updatedState[placeholder] = value; -
+ this.setState(updatedState); + }; -
+ validate = (fieldName) => { + const value = this.state[fieldName]; + const validation = this.validators[fieldName]; - { - // Put your form inputs here... We've put in one below as an example - } - + if (value.match(validation)) { + return 'PlayerSubmissionFormt__input'; + } + return 'PlayerSubmissionFormt__input--invalid'; + }; -
+ onSubmit = (event) => { + // Stop the default page reload + event.preventDefault(); + + let allValid = true; + + Object.keys(this.validators).forEach((key) => { + if (!this.state[key].match(this.validators[key])) { + allValid = false; + } + }); + + if (!allValid) { + return; + } + + let newSubmission = {} + Object.keys(this.state).forEach((key) => { + newSubmission[key] = this.state[key] + }); + + this.props.addSubmissionCallback(newSubmission); + this.props.lastSubmissionCallback(newSubmission); + + this.setState( + STATE + ); + }; + + render() { + let form = this.props.fields.map((field) => { + if (field['key']) { + return + } else { + return field + } + }); + + if (this.props.showPoem !== true) + { + return ( +
+

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

+ +
+ { form } +
- +
-
- ); +
); + } else { + return ('') + } } +}; + +const STATE = { + adjective: '', + noun: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '' +}; + +PlayerSubmissionForm.propTypes = { + addSubmissionCallback: PropTypes.func.isRequired, + lastSubmissionCallback: PropTypes.func.isRequired, + player: PropTypes.number.isRequired, + showPoem: PropTypes.bool.isRequired, + fields: PropTypes.array.isRequired } export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..d8bab38b 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,28 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { - return ( + const { adjective, noun, adverb, verb, adjective2, noun2 } = props.submission; + + const lastSubmission = `The ${adjective} ${noun} ${adverb} ${verb} + the ${adjective2} ${noun2}.`; + + const showSubmission =

The Most Recent Submission

-

{ }

-
+

{ lastSubmission }

+ ; + + return ( + props.showSubm ? showSubmission : ("") ); +}; + +RecentSubmission.propTypes = { + showSubmission: PropTypes.bool.isRequired, + showPoem: PropTypes.bool.isRequired, + submission: PropTypes.object.isRequired } export default RecentSubmission;