From e3d175579f9c3e113ec92103cdd2fc75c6640b6f Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 10 Dec 2019 20:19:12 -0800 Subject: [PATCH 1/9] Setting up the PlayerSubmissionForm --- src/components/Game.js | 17 ++++- src/components/PlayerSubmissionForm.js | 88 +++++++++++++++++++++++--- src/components/RecentSubmission.js | 2 +- 3 files changed, 94 insertions(+), 13 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..3eb35667 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,9 +5,22 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { super(props); + + this.state = { + submissions: FIELDS, + } + } + + addSubmission = (newSubmission) => { + console.log('Submit Line', newSubmission.adjective) + const submissions = this.state.submissions + submissions.push(newSubmission) + + this.setState({ + submissions + }) } render() { @@ -34,7 +47,7 @@ class Game extends Component { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..c4cd1d06 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,28 +2,96 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { + constructor() { + super(); - constructor(props) { - super(props); + this.state = { + adjective: '', + noun1: '', + adverb1: '', + verb: '', + adverb2: '', + noun2: '', + }; } - render() { + onFieldChange = (event) => { + const { placeholder, value } = event.target; + const updatedState = {}; + updatedState[placeholder] = value; + + this.setState(updatedState); + } + + onFormSubmit = (event) => { + event.preventDefautl(); + + const newSubmission = { + adjective: this.state.adjective, + noun1: this.state.noun1, + adverb1: this.state.adverb1, + verb: this.state.verb, + adverb2: this.state.adverb2, + noun2: this.state.noun2, + } + + this.setState({ + adjective: '', + noun1: '', + adverb1: '', + verb: '', + adverb2: '', + noun2: '', + }); + + this.props.addSubmissionCallback(newSubmission) + // this.resetForm(); + } + render() { return (

Player Submission Form for Player #{ }

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

The Most Recent Submission

-

{ }

+

{}

); } From 0ffcc285c3302c75f8060f6d3dcf6ac9bd43a894 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 11 Dec 2019 14:16:18 -0800 Subject: [PATCH 2/9] relationship between the Game component and the PlayerSubmissionForm --- src/components/Game.js | 27 +++++++++++++++++-------- src/components/PlayerSubmissionForm.css | 2 +- src/components/PlayerSubmissionForm.js | 12 +++++------ 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 3eb35667..8be53e14 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -9,7 +9,8 @@ class Game extends Component { super(props); this.state = { - submissions: FIELDS, + submissions: [], + isSubmitted: false, } } @@ -23,8 +24,17 @@ class Game extends Component { }) } - render() { + // revealPoem = (event) => { + // event.preventDefault(); + + // this.setState({ + // isSubmitted: true + // }); + // } + render() { + console.log(this.state.submissions) + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -33,24 +43,25 @@ class Game extends Component { } }).join(" "); + const mostRecentSubmission = this.state.submissions.last + 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 c4cd1d06..1beb17c2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { adjective: '', @@ -23,7 +23,7 @@ class PlayerSubmissionForm extends Component { this.setState(updatedState); } - onFormSubmit = (event) => { + sendSubmission = (event) => { event.preventDefautl(); const newSubmission = { @@ -44,16 +44,16 @@ class PlayerSubmissionForm extends Component { noun2: '', }); - this.props.addSubmissionCallback(newSubmission) + this.props.addSubmissionCallback(newSubmission.join(" ")); // this.resetForm(); } render() { return (
-

Player Submission Form for Player #{ }

+

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

- +
The Date: Wed, 11 Dec 2019 15:11:40 -0800 Subject: [PATCH 3/9] fixing playersubmissionform and game relationship, small typo --- src/components/Game.js | 12 ++---------- src/components/PlayerSubmissionForm.js | 10 +++++----- src/components/RecentSubmission.js | 2 +- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 8be53e14..b1e56f8c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -15,23 +15,15 @@ class Game extends Component { } addSubmission = (newSubmission) => { - console.log('Submit Line', newSubmission.adjective) const submissions = this.state.submissions submissions.push(newSubmission) - + + // console.log(submissions) this.setState({ submissions }) } - // revealPoem = (event) => { - // event.preventDefault(); - - // this.setState({ - // isSubmitted: true - // }); - // } - render() { console.log(this.state.submissions) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1beb17c2..393ae2ca 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - constructor(props) { - super(props); + constructor() { + super(); this.state = { adjective: '', @@ -16,7 +16,7 @@ class PlayerSubmissionForm extends Component { } onFieldChange = (event) => { - const { placeholder, value } = event.target; + const {placeholder, value} = event.target; const updatedState = {}; updatedState[placeholder] = value; @@ -24,7 +24,7 @@ class PlayerSubmissionForm extends Component { } sendSubmission = (event) => { - event.preventDefautl(); + event.preventDefault(); const newSubmission = { adjective: this.state.adjective, @@ -44,7 +44,7 @@ class PlayerSubmissionForm extends Component { noun2: '', }); - this.props.addSubmissionCallback(newSubmission.join(" ")); + this.props.addSubmissionCallback(newSubmission); // this.resetForm(); } diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 4a46c346..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}

); } From b49bbe01f0a2b4ba292b4c8758455a71addb42fa Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 11 Dec 2019 20:33:48 -0800 Subject: [PATCH 4/9] relationship between Game and FinalPoem components --- src/components/FinalPoem.js | 21 +++++++++++++++------ src/components/Game.js | 10 +++++++++- src/components/PlayerSubmissionForm.js | 15 ++++----------- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..7cee8ac2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,17 +2,26 @@ import React from 'react'; import './FinalPoem.css'; 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.isSubmitted ? revealPoem : revealPoemButton}
); } diff --git a/src/components/Game.js b/src/components/Game.js index b1e56f8c..46a2f845 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -24,8 +24,16 @@ class Game extends Component { }) } + revealPoem = (event) => { + event.preventDefault(); + + this.setState({ + isSubmitted: true + }); + } + render() { - console.log(this.state.submissions) + // console.log(this.state.submissions) const exampleFormat = FIELDS.map((field) => { if (field.key) { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 393ae2ca..2c424d91 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { adjective: '', @@ -26,14 +26,7 @@ class PlayerSubmissionForm extends Component { sendSubmission = (event) => { event.preventDefault(); - const newSubmission = { - adjective: this.state.adjective, - noun1: this.state.noun1, - adverb1: this.state.adverb1, - verb: this.state.verb, - adverb2: this.state.adverb2, - noun2: this.state.noun2, - } + 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: '', @@ -51,7 +44,7 @@ class PlayerSubmissionForm extends Component { render() { return (
-

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

+

Player Submission Form for Player #{}

From 1af3d8ee428dcdf4324238666250936031c02165 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 11 Dec 2019 20:40:50 -0800 Subject: [PATCH 5/9] small refactoring on game class --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 7cee8ac2..7873863f 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,7 +1,7 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = (props) => { const poemContent = props.submissions.map((line,key) => { console.log(line) diff --git a/src/components/Game.js b/src/components/Game.js index 46a2f845..27e3b4b0 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -43,8 +43,6 @@ class Game extends Component { } }).join(" "); - const mostRecentSubmission = this.state.submissions.last - return (

Game

@@ -55,7 +53,7 @@ class Game extends Component { { exampleFormat }

- + Date: Wed, 11 Dec 2019 20:45:10 -0800 Subject: [PATCH 6/9] fixed small bug in recentsubmission --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 7873863f..dd0b063c 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -4,7 +4,7 @@ import './FinalPoem.css'; const FinalPoem = (props) => { const poemContent = props.submissions.map((line,key) => { - console.log(line) + // console.log(line) return

{line}

; }); diff --git a/src/components/Game.js b/src/components/Game.js index 27e3b4b0..a7d6dec8 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -53,7 +53,7 @@ class Game extends Component { { exampleFormat }

- + Date: Thu, 12 Dec 2019 15:13:21 -0800 Subject: [PATCH 7/9] added header count for the submission form --- src/components/Game.js | 6 ++++-- src/components/PlayerSubmissionForm.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index a7d6dec8..8de93b4c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -11,6 +11,7 @@ class Game extends Component { this.state = { submissions: [], isSubmitted: false, + count: 1, } } @@ -20,7 +21,8 @@ class Game extends Component { // console.log(submissions) this.setState({ - submissions + submissions, + count: this.state.count + 1 }) } @@ -54,7 +56,7 @@ class Game extends Component {

- + -

Player Submission Form for Player #{}

+

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

From 99b5fbb8279d7bd8905024eaca788235a0ba30cf Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 12 Dec 2019 15:48:18 -0800 Subject: [PATCH 8/9] added validation for PlayerSubmissionForm --- src/components/PlayerSubmissionForm.js | 44 +++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 2eb35566..dc08637c 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -12,9 +12,28 @@ class PlayerSubmissionForm extends Component { 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 = {}; @@ -25,6 +44,17 @@ class PlayerSubmissionForm extends Component { 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}.` @@ -38,10 +68,16 @@ class PlayerSubmissionForm extends Component { }); this.props.addSubmissionCallback(newSubmission); - // this.resetForm(); } 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 #{this.props.count}

@@ -53,24 +89,28 @@ class PlayerSubmissionForm extends Component { placeholder="adjective" value={this.state.adjective} onChange={this.onFieldChange} + className={adjectiveValid ? 'valid' : 'PlayerSubmissionForm__input--invalid'} type="text"/> the @@ -78,12 +118,14 @@ class PlayerSubmissionForm extends Component { placeholder="adverb2" value={this.state.adverb2} onChange={this.onFieldChange} + className={adverb2Valid ? 'valid' : 'PlayerSubmissionForm__input--invalid'} type="text"/> .
From 7bfea15d5368b78ff010760f3d9b4d0e342189da Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 13 Dec 2019 08:01:18 -0800 Subject: [PATCH 9/9] small refactoring in variables names --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 12 ++++++------ src/components/PlayerSubmissionForm.js | 3 ++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index dd0b063c..d7f2e7e0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -21,7 +21,7 @@ const FinalPoem = (props) => { return (
- {props.isSubmitted ? revealPoem : revealPoemButton} + {props.completed ? revealPoem : revealPoemButton}
); } diff --git a/src/components/Game.js b/src/components/Game.js index 8de93b4c..d7eba94f 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -10,8 +10,8 @@ class Game extends Component { this.state = { submissions: [], - isSubmitted: false, - count: 1, + completed: false, + playerCount: 1, } } @@ -22,7 +22,7 @@ class Game extends Component { // console.log(submissions) this.setState({ submissions, - count: this.state.count + 1 + playerCount: (this.state.playerCount + 1) }) } @@ -30,7 +30,7 @@ class Game extends Component { event.preventDefault(); this.setState({ - isSubmitted: true + completed: true }); } @@ -56,10 +56,10 @@ class Game extends Component {

- +
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index dc08637c..c7dc4cb8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -37,6 +37,7 @@ class PlayerSubmissionForm extends Component { onFieldChange = (event) => { const {placeholder, value} = event.target; const updatedState = {}; + updatedState[placeholder] = value; this.setState(updatedState); @@ -80,7 +81,7 @@ class PlayerSubmissionForm extends Component { return (
-

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

+

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