diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..ed0059bc 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,16 +2,43 @@ 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}

; +}); + +const onRevealFinalPoem = () => { + + props.poemFinishedCallback(true); +} return (
-

Final Poem

+ { props.poemFinished && + (

Final Poem

+ {allPoemLines}
) }
- + {!props.poemFinished && + + } + + +
); diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..9ee0122c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -2,14 +2,31 @@ import React, { Component } from 'react'; import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; class Game extends Component { constructor(props) { super(props); + + this.state = { + poemLines: [], + poemFinished: false, + } + console.log(this.poemLines); + } + + updatePoemLines = (newPoemLine) => { + const newPoemLines = this.state.poemLines + if (newPoemLine) { + newPoemLines.push(newPoemLine); + this.setState({ + poemLines: newPoemLines + }) + } + console.log(this.state.poemLines); } + render() { const exampleFormat = FIELDS.map((field) => { @@ -20,6 +37,12 @@ class Game extends Component { } }).join(" "); +const poemFinished = () => { + this.setState({ + poemFinished: true + }) +} + return (

Game

@@ -32,11 +55,20 @@ class Game extends Component { { exampleFormat }

- - + {!this.state.poemFinished && + + } - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..f3b8d385 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,28 +1,136 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import RecentSubmission from './RecentSubmission'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + + playerNumber: 1, + lastPoemLine: '', + + updatePoemLinesCallback: props.updatePoemLines, + incrementPlayerNumberCallback: props.incrementPlayerNumberCallback + } } +incrementPlayerNumber = () => { + const newPlayerNumber = this.state.playerNumber + 1; + this.setState({ + playerNumber: newPlayerNumber + }) + } + +onFieldTyping = (event) => { + const field = {}; + field[event.target.name] = event.target.value; + event.target.className='' + this.setState(field); +} + +// 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(); + + 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: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + lastPoemLine: newPoemLine, + }) + + this.incrementPlayerNumber(); + + this.props.updatePoemLinesCallback(newPoemLine); +} +// variable name for class of pink and for empty string +// ternary for each input Line + render() { + return (
-

Player Submission Form for Player #{ }

-
+ {this.state.lastPoemLine !== "" && ( + )} + +

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

+ +
+ The + + + + + + + + + the + + - { - // Put your form inputs here... We've put in one below as an example - } + className='PlayerSubmissionFormt__input--invalid' + placeholder="noun" + name="noun2" + type="text" + onChange={this.onFieldTyping} + value={this.state.noun2} />
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..f5f858da 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,11 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + return (

The Most Recent Submission

-

{ }

+

{ props.lastPoemLine }

); }