From fb1c090326ae92fb8e9ffb25ad369629611b8e8f Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Tue, 10 Dec 2019 21:43:42 -0800 Subject: [PATCH 01/13] working through wave 1 --- src/components/Game.js | 26 ++++++++- src/components/PlayerSubmissionForm.css | 2 +- src/components/PlayerSubmissionForm.js | 75 ++++++++++++++++++++++--- 3 files changed, 93 insertions(+), 10 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..76d83515 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,8 +8,32 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + submissionCount: 0, + recentSubmission: {}, + submissionList: [] + }; + } + + onFormSubmission = (newSubmission) => { + console.log('received new submission in Game') + //add submission + filler words to submissionList + const updatedSubmissionList = this.state.submissionList; + updatedSubmissionList.push(newSubmission) + + //adjust recentSubmission + const updatedRecentSubmission = updatedSubmissionList[updatedSubmissionList.length - 1] + + const updatedSubmissionCount = this.state.submissionCount + 1 + this.setState({ + submissionCount: updatedSubmissionCount, + recentSubmission: updatedRecentSubmission, + submissionList: updatedSubmissionList + }) } + render() { const exampleFormat = FIELDS.map((field) => { @@ -34,7 +58,7 @@ class Game extends Component { - + this.onFormSubmission(newSubmission)}/> 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..61033529 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,24 +5,83 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adjectiveOne: '', + nounOne: '', + adverb: '', + verb: '', + adjectiveTwo: '', + nounTwo: '' + } + } + + onChange = (event) => { + const { name, value } = event.target; + const newState = {}; + newState[name] = value; + this.setState(newState); + } + + validate = (name) => { + return this.state[name].match(/.+/); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + //validate + + const newSubmission = { + adjectiveOne: this.state.adjectiveOne, + nounOne: this.state.nounOne, + adverb: this.state.adverb, + verb: this.state.verb, + adjectiveTwo: this.state.adjectiveTwo, + nounTwo: this.state.nounTwo + } + + this.setState({ + adjectiveOne: '', + nounOne: '', + adverb: '', + verb: '', + adjectiveTwo: '', + nounTwo: '' + }) + + this.props.submitFormCallback(newSubmission) } render() { return (
-

Player Submission Form for Player #{ }

+

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

-
+
- { - // Put your form inputs here... We've put in one below as an example - } - + The + + + + + + + + + + the + + + + + + .
From 65f14b4880383f70c091e63301b556c5d8881ec5 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Tue, 10 Dec 2019 21:47:48 -0800 Subject: [PATCH 02/13] wave one done, game state vague --- src/components/PlayerSubmissionForm.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 61033529..bba05c76 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -65,21 +65,21 @@ class PlayerSubmissionForm extends Component { The - - + - + - + the - + - + . From 38712caf09cb7793cc53b9fd2b9404d844f40a5c Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Tue, 10 Dec 2019 22:04:16 -0800 Subject: [PATCH 03/13] wave two done, no conditional logic --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 7 +++---- src/components/PlayerSubmissionForm.js | 9 +-------- src/components/RecentSubmission.js | 2 +- 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..9c0aa926 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -7,7 +7,7 @@ const FinalPoem = (props) => {

Final Poem

- + {props.lines.map(line => (

{line}

))}
diff --git a/src/components/Game.js b/src/components/Game.js index 76d83515..551e95fb 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -11,7 +11,7 @@ class Game extends Component { this.state = { submissionCount: 0, - recentSubmission: {}, + recentSubmission: '', submissionList: [] }; } @@ -33,7 +33,6 @@ class Game extends Component { }) } - render() { const exampleFormat = FIELDS.map((field) => { @@ -56,11 +55,11 @@ class Game extends Component { { exampleFormat }

- + this.onFormSubmission(newSubmission)}/> - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index bba05c76..2e988e60 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -32,14 +32,7 @@ class PlayerSubmissionForm extends Component { //validate - const newSubmission = { - adjectiveOne: this.state.adjectiveOne, - nounOne: this.state.nounOne, - adverb: this.state.adverb, - verb: this.state.verb, - adjectiveTwo: this.state.adjectiveTwo, - nounTwo: this.state.nounTwo - } + const newSubmission = `The ${this.state.adjectiveOne} ${this.state.nounOne} ${this.state.adverb} ${this.state.verb} the ${this.state.adjectiveTwo} ${this.state.nounTwo}.` this.setState({ adjectiveOne: '', diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..32613c14 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.recentSub}

); } From 670dcfe6d2d15a2815e74d8ac146facee95e4548 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Tue, 10 Dec 2019 22:07:04 -0800 Subject: [PATCH 04/13] recent submission conditionalized --- src/components/Game.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index 551e95fb..4703b918 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -55,7 +55,7 @@ class Game extends Component { { exampleFormat }

- + {this.state.recentSubmission ? : ""} this.onFormSubmission(newSubmission)}/> From 6083be49aee59a800f8b247ebcf8463fd2eaaf05 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Tue, 10 Dec 2019 22:34:06 -0800 Subject: [PATCH 05/13] tried to adjust final poem --- src/components/FinalPoem.js | 22 ++++++++++++++++++++-- src/components/Game.js | 12 ++++++++++-- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 9c0aa926..e777b1c8 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,17 +2,35 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { - + + const finalPoem = () => { return (

Final Poem

{props.lines.map(line => (

{line}

))}
+
+ ) + }; + const poemButton = () => { + return (
- +
+ ) + }; + + return ( +
+
+

Final Poem

+ {props.lines.map(line => (

{line}

))} +
+
+ +
); } diff --git a/src/components/Game.js b/src/components/Game.js index 4703b918..6b433665 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -12,7 +12,8 @@ class Game extends Component { this.state = { submissionCount: 0, recentSubmission: '', - submissionList: [] + submissionList: [], + gameComplete: false, }; } @@ -33,6 +34,13 @@ class Game extends Component { }) } + onEndGame = () => { + const gameCompleteUpdate = true; + this.setState({ + gameComplete: gameCompleteUpdate, + }) + } + render() { const exampleFormat = FIELDS.map((field) => { @@ -59,7 +67,7 @@ class Game extends Component { this.onFormSubmission(newSubmission)}/> - +
); From b26832e71c6a7657ce62720428e36f2cee2e151c Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 12:55:51 -0800 Subject: [PATCH 06/13] everything toggling except final game button --- src/components/Game.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 6b433665..c5b5d74c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,7 +13,7 @@ class Game extends Component { submissionCount: 0, recentSubmission: '', submissionList: [], - gameComplete: false, + gameComplete: '', }; } @@ -38,7 +38,9 @@ class Game extends Component { const gameCompleteUpdate = true; this.setState({ gameComplete: gameCompleteUpdate, + recentSubmission: '', }) + console.log('game is complete') } render() { @@ -65,7 +67,7 @@ class Game extends Component { {this.state.recentSubmission ? : ""} - this.onFormSubmission(newSubmission)}/> + {this.state.gameComplete ? "" : this.onFormSubmission(newSubmission)}/> } From f95759e40d0d2b214c081ee0bbf253c91d3bfb72 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 14:15:52 -0800 Subject: [PATCH 07/13] wave three --- src/components/FinalPoem.js | 24 ++++++++++++------------ src/components/Game.js | 6 ++---- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index e777b1c8..ee8b5573 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,15 +3,21 @@ import './FinalPoem.css'; const FinalPoem = (props) => { - const finalPoem = () => { + const finalPoem = props.lines; + + const finalPoemReturn = finalPoem.map((line, i) => { + return ( +

{line}

+ ); + }); + + const completePoem = () => { return ( -

Final Poem

- {props.lines.map(line => (

{line}

))} + {finalPoemReturn}
-
- ) + ) }; const poemButton = () => { @@ -24,13 +30,7 @@ const FinalPoem = (props) => { return (
-
-

Final Poem

- {props.lines.map(line => (

{line}

))} -
-
- -
+ {props.gameEnded === true ? completePoem() : poemButton()}
); } diff --git a/src/components/Game.js b/src/components/Game.js index c5b5d74c..761927aa 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,18 +19,16 @@ class Game extends Component { onFormSubmission = (newSubmission) => { console.log('received new submission in Game') - //add submission + filler words to submissionList + const updatedSubmissionList = this.state.submissionList; updatedSubmissionList.push(newSubmission) - //adjust recentSubmission const updatedRecentSubmission = updatedSubmissionList[updatedSubmissionList.length - 1] - const updatedSubmissionCount = this.state.submissionCount + 1 this.setState({ submissionCount: updatedSubmissionCount, recentSubmission: updatedRecentSubmission, - submissionList: updatedSubmissionList + submissionList: updatedSubmissionList, }) } From d6c52230280f129a892d8481236953b2127b71a7 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 14:34:35 -0800 Subject: [PATCH 08/13] cleaned up --- src/components/FinalPoem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ee8b5573..dbc381c7 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -30,7 +30,7 @@ const FinalPoem = (props) => { return (
- {props.gameEnded === true ? completePoem() : poemButton()} + {props.gameEnded ? completePoem() : poemButton()}
); } From 3463136bed114e3fae3436dd1c090eeecd7e7c9b Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 15:35:43 -0800 Subject: [PATCH 09/13] everything broken --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 8 ++- src/components/PlayerSubmissionForm.js | 69 ++++++++++---------------- 3 files changed, 35 insertions(+), 44 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ee8b5573..dbc381c7 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -30,7 +30,7 @@ const FinalPoem = (props) => { return (
- {props.gameEnded === true ? completePoem() : poemButton()} + {props.gameEnded ? completePoem() : poemButton()}
); } diff --git a/src/components/Game.js b/src/components/Game.js index 761927aa..6cc3e644 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -65,7 +65,7 @@ class Game extends Component { {this.state.recentSubmission ? : ""} - {this.state.gameComplete ? "" : this.onFormSubmission(newSubmission)}/> } + {this.state.gameComplete ? "" : this.onFormSubmission(newSubmission)} format={FIELDS} /> } @@ -79,27 +79,33 @@ const FIELDS = [ { key: 'adj1', placeholder: 'adjective', + entry: '', }, { key: 'noun1', placeholder: 'noun', + entry: '', }, { key: 'adv', placeholder: 'adverb', + entry: '', }, { key: 'verb', placeholder: 'verb', + entry: '', }, "the", { key: 'adj2', placeholder: 'adjective', + entry: '', }, { key: 'noun2', placeholder: 'noun', + entry: '', }, ".", ]; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 2e988e60..13a95e9a 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,18 +2,11 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - + constructor(props) { super(props); - this.state = { - adjectiveOne: '', - nounOne: '', - adverb: '', - verb: '', - adjectiveTwo: '', - nounTwo: '' - } + this.state = this.props.format } onChange = (event) => { @@ -23,29 +16,39 @@ class PlayerSubmissionForm extends Component { this.setState(newState); } - validate = (name) => { - return this.state[name].match(/.+/); - } + // validate = (i) => { + // return this.state[i][entry].match(/.+/); + // } onFormSubmit = (event) => { event.preventDefault(); //validate - const newSubmission = `The ${this.state.adjectiveOne} ${this.state.nounOne} ${this.state.adverb} ${this.state.verb} the ${this.state.adjectiveTwo} ${this.state.nounTwo}.` + const newSubmission = this.state.map((field) => { + if (field.key) { + return field.placeholder; + } else { + return field; + } + }).join(" "); - this.setState({ - adjectiveOne: '', - nounOne: '', - adverb: '', - verb: '', - adjectiveTwo: '', - nounTwo: '' - }) + this.setState({ ...this.props.format }); - this.props.submitFormCallback(newSubmission) + this.props.submitFormCallback(newSubmission); } + formElements = this.props.format.map((field, i) => { + if (field.key) { + return ( + + ) + } else { + return ( {field}) } + }) + render() { return ( @@ -56,26 +59,8 @@ class PlayerSubmissionForm extends Component {
- The - - - - - - - - - - the - - - - - - . - + {formElements()} +
From a45a403462a5bcbbb43b9bd317b2483b1e364931 Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 16:51:01 -0800 Subject: [PATCH 10/13] everything working but clear form --- src/components/PlayerSubmissionForm.js | 46 ++++++++++++-------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 13a95e9a..5af2b27d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,51 +5,49 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); - - this.state = this.props.format + this.state = { fields: this.props.format } } - onChange = (event) => { - const { name, value } = event.target; - const newState = {}; - newState[name] = value; - this.setState(newState); + onChange = (event, i) => { + const { value } = event.target; + const newState = this.state.fields; + newState[i]["entry"] = value; + this.setState({fields: newState}); } - // validate = (i) => { - // return this.state[i][entry].match(/.+/); - // } + validate = (i) => { + return this.state.fields[i]["entry"].match(/.+/); + } onFormSubmit = (event) => { event.preventDefault(); - //validate + const completedLine = this.state.fields; - const newSubmission = this.state.map((field) => { + const newSubmission = completedLine.map((field) => { if (field.key) { - return field.placeholder; + return field.entry; } else { return field; } }).join(" "); - this.setState({ ...this.props.format }); + this.setState({ fields: this.props.format }); this.props.submitFormCallback(newSubmission); } - formElements = this.props.format.map((field, i) => { + render() { + + const formElements = this.props.format.map((field, i) => { if (field.key) { return ( - + this.onChange(e, i)} className={this.validate(i) ? '' : 'PlayerSubmissionForm__input--invalid'}/> ) } else { - return ( {field}) } - }) - - render() { + return ( + {field}) } + }) return (
@@ -58,9 +56,7 @@ class PlayerSubmissionForm extends Component {
- - {formElements()} - + {formElements}
From 1c0e812490598ec6a23df30f9e660b7f2486fa8c Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 17:08:55 -0800 Subject: [PATCH 11/13] adjusted input mapping --- src/components/PlayerSubmissionForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 5af2b27d..b597429c 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -32,7 +32,7 @@ class PlayerSubmissionForm extends Component { } }).join(" "); - this.setState({ fields: this.props.format }); + this.setState({ fields: this.props.format}); this.props.submitFormCallback(newSubmission); } @@ -42,7 +42,7 @@ class PlayerSubmissionForm extends Component { const formElements = this.props.format.map((field, i) => { if (field.key) { return ( - this.onChange(e, i)} className={this.validate(i) ? '' : 'PlayerSubmissionForm__input--invalid'}/> + this.onChange(e, i)} className={this.validate(i) ? '' : 'PlayerSubmissionForm__input--invalid'}/> ) } else { return ( From ae629cac913f84f728300e565605ae78a1337aee Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Wed, 11 Dec 2019 18:12:07 -0800 Subject: [PATCH 12/13] finished dynamic --- src/components/Game.js | 1 + src/components/PlayerSubmissionForm.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 6cc3e644..f0035d85 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -30,6 +30,7 @@ class Game extends Component { recentSubmission: updatedRecentSubmission, submissionList: updatedSubmissionList, }) + console.log(FIELDS) } onEndGame = () => { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index b597429c..22f625be 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -22,9 +22,7 @@ class PlayerSubmissionForm extends Component { onFormSubmit = (event) => { event.preventDefault(); - const completedLine = this.state.fields; - - const newSubmission = completedLine.map((field) => { + const newSubmission = this.state.fields.map((field) => { if (field.key) { return field.entry; } else { @@ -32,7 +30,15 @@ class PlayerSubmissionForm extends Component { } }).join(" "); - this.setState({ fields: this.props.format}); + const newFields = this.state.fields; + + newFields.forEach(field => { + if (field.entry) { + field.entry = "" + } + }); + + this.setState({ fields: newFields }); this.props.submitFormCallback(newSubmission); } From 914b49c11db62e5a4f163e7fe0dbca0e32cf96ea Mon Sep 17 00:00:00 2001 From: Emily Vomacka Date: Thu, 12 Dec 2019 21:33:32 -0800 Subject: [PATCH 13/13] final clean up --- src/components/Game.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index f0035d85..6b6c8de4 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -18,8 +18,6 @@ class Game extends Component { } onFormSubmission = (newSubmission) => { - console.log('received new submission in Game') - const updatedSubmissionList = this.state.submissionList; updatedSubmissionList.push(newSubmission) @@ -30,7 +28,6 @@ class Game extends Component { recentSubmission: updatedRecentSubmission, submissionList: updatedSubmissionList, }) - console.log(FIELDS) } onEndGame = () => { @@ -39,7 +36,6 @@ class Game extends Component { gameComplete: gameCompleteUpdate, recentSubmission: '', }) - console.log('game is complete') } render() {