From 1cfbee3bfaca338e33471dd2efa62bc4e310e4aa Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 19:33:41 -0700 Subject: [PATCH 01/11] Implemented the form. Currently not saving the full string to newPoemLine. --- src/components/Game.js | 6 ++ src/components/PlayerSubmissionForm.js | 103 +++++++++++++++++++++++-- 2 files changed, 102 insertions(+), 7 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..bb0a7043 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,12 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + playerNumber: 1, + poemLines: [], + poemFinished: false, + } } render() { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..d971566e 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,28 +1,117 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; + class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + newPoemLine: '', + lastPoemLine: '', + + updatePoemLinesCallback: props.updatePoemLines, + incrementPlayerNumberCallback: props.incrementPlayerNumberCallback + } + // this.cleared = { + // + // }; + // + // this.state = {...this.cleared} } +onFieldTyping = (event) => { + console.log(`field updated: ${event.target.value}`); + + const field = {}; + field[event.target.name] = event.target.value; + + this.setState(field); +} + +onFormSubmit = (event) => { + event.preventDefault(); + console.log(this.state); + + // const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv}`; + this.setState({ + newPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv}` + }) + + this.setState ({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + lastPoemLine: this.state.newPoemLine + }) +} + render() { return (
-

Player Submission Form for Player #{ }

+

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

-
+
+ The + + + + + + + + + the + + - { - // Put your form inputs here... We've put in one below as an example - } + placeholder="noun" + name="noun2" + type="text" + onChange={this.onFieldTyping} + value={this.state.noun2} />
From 36a65901a2b5c5f6e3b22b0e0fb93f08290d3551 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 20:08:59 -0700 Subject: [PATCH 02/11] Form takes inputs, updates state with most recent line, and renders the RecentSubmission component. --- src/components/Game.js | 4 ++-- src/components/PlayerSubmissionForm.js | 23 +++++++++++++---------- src/components/RecentSubmission.js | 3 ++- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index bb0a7043..86cfb0bd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; +// import RecentSubmission from './RecentSubmission'; class Game extends Component { @@ -38,7 +38,7 @@ class Game extends Component { { exampleFormat }

- + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d971566e..9d078cd7 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; -import PropTypes from 'prop-types'; - +// import PropTypes from 'prop-types'; +import RecentSubmission from './RecentSubmission'; class PlayerSubmissionForm extends Component { @@ -15,8 +15,8 @@ class PlayerSubmissionForm extends Component { verb: '', adj2: '', noun2: '', - newPoemLine: '', - lastPoemLine: '', + newPoemLine: 'new poem line initial value', + lastPoemLine: 'last poem line initial value', updatePoemLinesCallback: props.updatePoemLines, incrementPlayerNumberCallback: props.incrementPlayerNumberCallback @@ -37,15 +37,14 @@ onFieldTyping = (event) => { this.setState(field); } + + +// console.log('newPoemLine is ' newPoemLine); + onFormSubmit = (event) => { event.preventDefault(); console.log(this.state); - // const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv}`; - this.setState({ - newPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv}` - }) - this.setState ({ adj1: '', noun1: '', @@ -53,7 +52,8 @@ onFormSubmit = (event) => { verb: '', adj2: '', noun2: '', - lastPoemLine: this.state.newPoemLine + lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, + // lastPoemLine: this.state.newPoemLine }) } @@ -61,6 +61,9 @@ onFormSubmit = (event) => { return (
+ +

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

{ + return (

The Most Recent Submission

-

{ }

+

{ props.lastPoemLine }

); } From 5c2e65141dc879dffbcac1f67278587b34ad3163 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 20:18:13 -0700 Subject: [PATCH 03/11] The RecentSubmission component does not render if lastPoemLine is an empty string. Component is hidden until Player 1 submits an entry. --- src/components/PlayerSubmissionForm.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 9d078cd7..27b2e720 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -15,8 +15,8 @@ class PlayerSubmissionForm extends Component { verb: '', adj2: '', noun2: '', - newPoemLine: 'new poem line initial value', - lastPoemLine: 'last poem line initial value', + // newPoemLine: 'new poem line initial value', + lastPoemLine: '', updatePoemLinesCallback: props.updatePoemLines, incrementPlayerNumberCallback: props.incrementPlayerNumberCallback @@ -61,8 +61,9 @@ onFormSubmit = (event) => { return (
- + + {this.state.lastPoemLine !== "" && ()}

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

From 9c0577acee88b4ed2dfdd339679fae71c3ba5efd Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 20:47:26 -0700 Subject: [PATCH 04/11] Added counter for player number.Increments each time a new line is submitted. --- src/components/Game.js | 12 +++++++++++- src/components/PlayerSubmissionForm.js | 25 +++++++++++++++++++------ 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 86cfb0bd..95c2a88e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -16,6 +16,13 @@ class Game extends Component { } } + // incrementPlayerNumber = () => { + // const newPlayerNumber = this.state.playerNumber + 1; + // this.setState({ + // playerNumber: {newPlayerNumber} + // }) + // } + render() { const exampleFormat = FIELDS.map((field) => { @@ -40,7 +47,10 @@ class Game extends Component { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 27b2e720..5fcec7e1 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -15,7 +15,7 @@ class PlayerSubmissionForm extends Component { verb: '', adj2: '', noun2: '', - // newPoemLine: 'new poem line initial value', + playerNumber: 1, lastPoemLine: '', updatePoemLinesCallback: props.updatePoemLines, @@ -28,6 +28,14 @@ class PlayerSubmissionForm extends Component { // this.state = {...this.cleared} } +incrementPlayerNumber = () => { + const newPlayerNumber = this.state.playerNumber + 1; + console.log(`new player number ${newPlayerNumber}`); + this.setState({ + playerNumber: newPlayerNumber + }) + } + onFieldTyping = (event) => { console.log(`field updated: ${event.target.value}`); @@ -41,7 +49,7 @@ onFieldTyping = (event) => { // console.log('newPoemLine is ' newPoemLine); -onFormSubmit = (event) => { +onSubmitLine = (event) => { event.preventDefault(); console.log(this.state); @@ -55,6 +63,10 @@ onFormSubmit = (event) => { lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, // lastPoemLine: this.state.newPoemLine }) + + this.incrementPlayerNumber(); + + } render() { @@ -62,14 +74,15 @@ onFormSubmit = (event) => { return (
- {this.state.lastPoemLine !== "" && ()} + {this.state.lastPoemLine !== "" && ( + )} -

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

+

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

+ onSubmit={this.onSubmitLine} >
The From 093cc239a03d5c929079b1eb863cb80305a1f31b Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 21:45:33 -0700 Subject: [PATCH 05/11] When poem line is submitted, it gets added to the poemLines array in Game's state. --- src/components/Game.js | 20 ++++++++++++-------- src/components/PlayerSubmissionForm.js | 10 +++++----- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 95c2a88e..47f5cd14 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,14 +14,18 @@ class Game extends Component { poemLines: [], poemFinished: false, } + console.log(this.poemLines); + } + + updatePoemLines = (newPoemLine) => { + const newPoemLines = this.state.poemLines + newPoemLines.push(newPoemLine); + this.setState({ + poemLines: newPoemLines + }) + console.log(this.state.poemLines); } - // incrementPlayerNumber = () => { - // const newPlayerNumber = this.state.playerNumber + 1; - // this.setState({ - // playerNumber: {newPlayerNumber} - // }) - // } render() { @@ -48,8 +52,8 @@ class Game extends Component { diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 5fcec7e1..ee60acb8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -30,14 +30,14 @@ class PlayerSubmissionForm extends Component { incrementPlayerNumber = () => { const newPlayerNumber = this.state.playerNumber + 1; - console.log(`new player number ${newPlayerNumber}`); + // console.log(`new player number ${newPlayerNumber}`); this.setState({ playerNumber: newPlayerNumber }) } onFieldTyping = (event) => { - console.log(`field updated: ${event.target.value}`); + // console.log(`field updated: ${event.target.value}`); const field = {}; field[event.target.name] = event.target.value; @@ -51,7 +51,7 @@ onFieldTyping = (event) => { onSubmitLine = (event) => { event.preventDefault(); - console.log(this.state); + this.setState ({ adj1: '', @@ -61,11 +61,11 @@ onSubmitLine = (event) => { adj2: '', noun2: '', lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, - // lastPoemLine: this.state.newPoemLine }) - + console.log(`submit line state: ${this.state.lastPoemLine}`); this.incrementPlayerNumber(); + this.props.updatePoemLinesCallback(this.state.lastPoemLine); } From b16a453c6f9b2cd87a96c9972e70fd8c17d6d0d6 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Wed, 19 Jun 2019 22:07:10 -0700 Subject: [PATCH 06/11] Added conditional to check if line is empty before adding to poem lines array. This prevents the initial state from being added. Also played with two ways to update the submission form's state and observed asyncronous processing... FUN --- src/components/Game.js | 10 ++++++---- src/components/PlayerSubmissionForm.js | 6 +++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 47f5cd14..a2ec196a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,10 +19,12 @@ class Game extends Component { updatePoemLines = (newPoemLine) => { const newPoemLines = this.state.poemLines - newPoemLines.push(newPoemLine); - this.setState({ - poemLines: newPoemLines - }) + if (newPoemLine) { + newPoemLines.push(newPoemLine); + this.setState({ + poemLines: newPoemLines + }) + } console.log(this.state.poemLines); } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ee60acb8..4537b5bb 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -52,6 +52,7 @@ onFieldTyping = (event) => { onSubmitLine = (event) => { event.preventDefault(); + // const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`; this.setState ({ adj1: '', @@ -60,11 +61,14 @@ onSubmitLine = (event) => { verb: '', adj2: '', noun2: '', + // lastPoemLine: newPoemLine, lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, }) - console.log(`submit line state: ${this.state.lastPoemLine}`); + console.log(`last poem line in state ${this.state.lastPoemLine} - might not be done updating!`); + // console.log(`last submited line: ${newPoemLine}`); this.incrementPlayerNumber(); + // this.props.updatePoemLinesCallback(newPoemLine); this.props.updatePoemLinesCallback(this.state.lastPoemLine); } From 3370689acb48860797dab2f416dc5c27287c56a1 Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Thu, 20 Jun 2019 10:23:12 -0700 Subject: [PATCH 07/11] Fixed formatting of lines so they display on separate lines. Also confirmed lines are being saved to the array and only the last line is shown to the next player. All is in working order. --- src/components/FinalPoem.js | 20 ++++++++++++++++++-- src/components/Game.js | 10 +++++++--- src/components/PlayerSubmissionForm.js | 14 +++++++------- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..179645c0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,16 +2,32 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { + // constructor(props) { + // super(props); + // + // this.state = {...props} + // } + +const allPoemLines = props.poemLines.map((line, i) => { + return

{line}

; +}); return (
-

Final Poem

+ { props.poemFinished && + (

Final Poem

+ {allPoemLines}
) }
- + {!props.poemFinished && + + } + + {/* comment here */} +
); diff --git a/src/components/Game.js b/src/components/Game.js index a2ec196a..2c275bfa 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -10,7 +10,7 @@ class Game extends Component { super(props); this.state = { - playerNumber: 1, + // playerNumber: 1, poemLines: [], poemFinished: false, } @@ -54,11 +54,15 @@ class Game extends Component { - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 4537b5bb..f8219f09 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -52,7 +52,7 @@ onFieldTyping = (event) => { onSubmitLine = (event) => { event.preventDefault(); - // const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`; + const newPoemLine = `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`; this.setState ({ adj1: '', @@ -61,15 +61,15 @@ onSubmitLine = (event) => { verb: '', adj2: '', noun2: '', - // lastPoemLine: newPoemLine, - lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, + lastPoemLine: newPoemLine, + // lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, }) - console.log(`last poem line in state ${this.state.lastPoemLine} - might not be done updating!`); - // console.log(`last submited line: ${newPoemLine}`); + // console.log(`last poem line in state ${this.state.lastPoemLine} - might not be done updating!`); + console.log(`last submited line: ${newPoemLine}`); this.incrementPlayerNumber(); - // this.props.updatePoemLinesCallback(newPoemLine); - this.props.updatePoemLinesCallback(this.state.lastPoemLine); + this.props.updatePoemLinesCallback(newPoemLine); + // this.props.updatePoemLinesCallback(this.state.lastPoemLine); } From a5bf86d713f2043183aab0bf4b49a16f5c56484e Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Thu, 20 Jun 2019 13:55:13 -0700 Subject: [PATCH 08/11] All poem lines displayed on button click. --- src/components/FinalPoem.js | 15 +++++++++++++-- src/components/Game.js | 7 +++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 179645c0..78d1ed0c 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,6 +12,11 @@ const allPoemLines = props.poemLines.map((line, i) => { return

{line}

; }); +const onRevealFinalPoem = () => { + + props.poemFinishedCallback(true); +} + return (
@@ -23,10 +28,16 @@ const allPoemLines = props.poemLines.map((line, i) => {
{!props.poemFinished && - + onRevealFinalPoem()} + /> } - {/* comment here */} +
diff --git a/src/components/Game.js b/src/components/Game.js index 2c275bfa..63efce58 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -39,6 +39,12 @@ class Game extends Component { } }).join(" "); +const poemFinished = () => { + this.setState({ + poemFinished: true + }) +} + return (

Game

@@ -62,6 +68,7 @@ class Game extends Component { poemLines={this.state.poemLines} poemFinished={this.state.poemFinished} updatePoemLinesCallback={this.state.updatePoemLines} + poemFinishedCallback={poemFinished} />
From 43d8ad4ac9468a170868f3673214200acadc82ed Mon Sep 17 00:00:00 2001 From: Mello-Cello Date: Thu, 20 Jun 2019 14:26:59 -0700 Subject: [PATCH 09/11] Implemented conditional to hide input form when button is clicked and poemFinished state is set to true. --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 78d1ed0c..ed0059bc 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -33,7 +33,7 @@ const onRevealFinalPoem = () => { className="FinalPoem__reveal-btn" - onClick={() => onRevealFinalPoem()} + onClick={onRevealFinalPoem} /> } diff --git a/src/components/Game.js b/src/components/Game.js index 63efce58..c12e9a98 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -58,11 +58,12 @@ const poemFinished = () => {

- + {!this.state.poemFinished && + } Date: Fri, 21 Jun 2019 09:01:23 -0700 Subject: [PATCH 10/11] Added pink color to field that hasn't had an entry yet. --- src/components/PlayerSubmissionForm.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f8219f09..72ff55f2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -15,6 +15,7 @@ class PlayerSubmissionForm extends Component { verb: '', adj2: '', noun2: '', + playerNumber: 1, lastPoemLine: '', @@ -41,7 +42,7 @@ onFieldTyping = (event) => { const field = {}; field[event.target.name] = event.target.value; - + event.target.className='' this.setState(field); } @@ -72,9 +73,12 @@ onSubmitLine = (event) => { // this.props.updatePoemLinesCallback(this.state.lastPoemLine); } +// variable name for class of pink and for empty string +// ternary for each input Line render() { + return (
@@ -91,6 +95,7 @@ onSubmitLine = (event) => {
The { value={this.state.adj1}/> { value={this.state.noun1} /> { value={this.state.adv} /> { the { value={this.state.adj2} /> Date: Fri, 21 Jun 2019 13:52:28 -0700 Subject: [PATCH 11/11] Cleaned up comments. Need to implement a conditional and regex to check if field is empty. --- src/components/Game.js | 2 -- src/components/PlayerSubmissionForm.js | 22 +++++----------------- 2 files changed, 5 insertions(+), 19 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index c12e9a98..9ee0122c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; -// import RecentSubmission from './RecentSubmission'; class Game extends Component { @@ -10,7 +9,6 @@ class Game extends Component { super(props); this.state = { - // playerNumber: 1, poemLines: [], poemFinished: false, } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 72ff55f2..f3b8d385 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; -// import PropTypes from 'prop-types'; import RecentSubmission from './RecentSubmission'; class PlayerSubmissionForm extends Component { @@ -22,33 +21,26 @@ class PlayerSubmissionForm extends Component { updatePoemLinesCallback: props.updatePoemLines, incrementPlayerNumberCallback: props.incrementPlayerNumberCallback } - // this.cleared = { - // - // }; - // - // this.state = {...this.cleared} } incrementPlayerNumber = () => { const newPlayerNumber = this.state.playerNumber + 1; - // console.log(`new player number ${newPlayerNumber}`); this.setState({ playerNumber: newPlayerNumber }) } onFieldTyping = (event) => { - // console.log(`field updated: ${event.target.value}`); - const field = {}; field[event.target.name] = event.target.value; event.target.className='' this.setState(field); } - - -// console.log('newPoemLine is ' newPoemLine); +// CURRENTLY THE FEILD WON'T TURN BACK TO WHITE IF YOU TYPE THEN DELETE ITS CONTENTS +// check that the state of the field matches /[x-y]/ +// assign a class name to a variable +// update class on input field based on conditional onSubmitLine = (event) => { event.preventDefault(); @@ -63,15 +55,11 @@ onSubmitLine = (event) => { adj2: '', noun2: '', lastPoemLine: newPoemLine, - // lastPoemLine: `The ${this.state.adj1} ${this.state.noun1} ${this.state.adv} ${this.state.verb} the ${this.state.adj2} ${this.state.noun2}.`, }) - // console.log(`last poem line in state ${this.state.lastPoemLine} - might not be done updating!`); - console.log(`last submited line: ${newPoemLine}`); + this.incrementPlayerNumber(); this.props.updatePoemLinesCallback(newPoemLine); - // this.props.updatePoemLinesCallback(this.state.lastPoemLine); - } // variable name for class of pink and for empty string // ternary for each input Line