diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..d7f2e7e0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,18 +1,27 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = (props) => { + + const poemContent = props.submissions.map((line,key) => { + // console.log(line) + return

{line}

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

Final Poem

- + {poemContent}
-
- -
+ const revealPoemButton = +
+ +
; + + return ( +
+ {props.completed ? revealPoem : revealPoemButton}
); } diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..d7eba94f 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,13 +5,38 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { super(props); + + this.state = { + submissions: [], + completed: false, + playerCount: 1, + } } - render() { + addSubmission = (newSubmission) => { + const submissions = this.state.submissions + submissions.push(newSubmission) + + // console.log(submissions) + this.setState({ + submissions, + playerCount: (this.state.playerCount + 1) + }) + } + + revealPoem = (event) => { + event.preventDefault(); + + this.setState({ + completed: true + }); + } + render() { + // console.log(this.state.submissions) + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -23,21 +48,20 @@ class Game extends Component { return (

Game

-

Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.

-

Please follow the following format for your poetry submission:

{ exampleFormat }

- - - - - + + +
); } 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..c7dc4cb8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,28 +2,132 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - constructor(props) { super(props); + + this.state = { + adjective: '', + noun1: '', + adverb1: '', + verb: '', + adverb2: '', + noun2: '', + } + + this.validators = { + adjective: /.+/, + noun1: /.+/, + adverb1: /.+/, + verb: /.+/, + adverb2: /.+/, + noun2: /.+/, + }; + } + + validate = (fieldName) => { + const value = this.state[fieldName]; + const validation = this.validators[fieldName]; + + if (value.match(validation)) { + return true; + } + return false; + } + + onFieldChange = (event) => { + const {placeholder, value} = event.target; + const updatedState = {}; + + updatedState[placeholder] = value; + + this.setState(updatedState); + } + + sendSubmission = (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; + } + + const newSubmission = `The ${this.state.adjective} ${this.state.noun1} ${this.state.adverb1} ${this.state.verb} the ${this.state.adverb2} ${this.state.noun2}.` + + this.setState({ + adjective: '', + noun1: '', + adverb1: '', + verb: '', + adverb2: '', + noun2: '', + }); + + this.props.addSubmissionCallback(newSubmission); } render() { + const adjectiveValid = this.validate('adjective'); + const noun1Valid = this.validate('noun1'); + const adverb1Valid = this.validate('adverb1'); + const verbValid = this.validate('verb'); + const adverb2Valid = this.validate('adverb2'); + const noun2Valid = this.validate('noun2'); return (
-

Player Submission Form for Player #{ }

- -
+

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

+
+ The + - { - // Put your form inputs here... We've put in one below as an example - } + placeholder="noun1" + value={this.state.noun1} + onChange={this.onFieldChange} + className={noun1Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'} + type="text"/> + + + + + the + + + .
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..a139f9ff 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.newSubmission}

); }