diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..dbc381c7 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 = props.lines; + const finalPoemReturn = finalPoem.map((line, i) => { + return ( +

{line}

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

Final Poem

- + {finalPoemReturn}
+ ) + }; + const poemButton = () => { + return (
- +
+ ) + }; + + return ( +
+ {props.gameEnded ? completePoem() : poemButton()}
); } diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..6b6c8de4 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,34 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + submissionCount: 0, + recentSubmission: '', + submissionList: [], + gameComplete: '', + }; + } + + onFormSubmission = (newSubmission) => { + const updatedSubmissionList = this.state.submissionList; + updatedSubmissionList.push(newSubmission) + + const updatedRecentSubmission = updatedSubmissionList[updatedSubmissionList.length - 1] + const updatedSubmissionCount = this.state.submissionCount + 1 + this.setState({ + submissionCount: updatedSubmissionCount, + recentSubmission: updatedRecentSubmission, + submissionList: updatedSubmissionList, + }) + } + + onEndGame = () => { + const gameCompleteUpdate = true; + this.setState({ + gameComplete: gameCompleteUpdate, + recentSubmission: '', + }) } render() { @@ -32,11 +60,11 @@ class Game extends Component { { exampleFormat }

- + {this.state.recentSubmission ? : ""} - + {this.state.gameComplete ? "" : this.onFormSubmission(newSubmission)} format={FIELDS} /> } - +
); @@ -48,27 +76,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.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..22f625be 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,28 +2,67 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { - + constructor(props) { super(props); + this.state = { fields: this.props.format } + } + + 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.fields[i]["entry"].match(/.+/); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + const newSubmission = this.state.fields.map((field) => { + if (field.key) { + return field.entry; + } else { + return field; + } + }).join(" "); + + const newFields = this.state.fields; + + newFields.forEach(field => { + if (field.entry) { + field.entry = "" + } + }); + + this.setState({ fields: newFields }); + + this.props.submitFormCallback(newSubmission); } 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}) } + }) + 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 - } - - + {formElements}
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}

); }