diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..01b8ef8d 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,18 +3,34 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + const finishedPoem = props.poem.map((line) => { return ( -
+

{line}

+ ) + }) + + if(props.poemStatus){ + return( +

Final Poem

- + + {finishedPoem} +
+
-
- -
+ ) + }else{ + return( + +
+ + { props.showPoemCallback()} }/>
- ); + )} + + } export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..2b1ad8ac 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,9 +8,46 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + recentLine: "", + submissions: [], + poemFinished: false, + playerNum: 1 + } + } + + showPoem = () => { + + this.setState({ + poemFinished: true + } + ) + console.log(this.state) + + } + + addLine = (words) => { + + + const wordArray = Object.values(words) + const line = `The ${wordArray[0]} ${wordArray[1]} ${wordArray[2]} ${wordArray[3]} the ${wordArray[4]} ${wordArray[5]}.` + + this.setState({ + recentLine: line, + playerNum: this.state.playerNum + 1 + }) + this.state.submissions.push(line) + } render() { + let recentSubmission = "" + if (this.state.submissions.length >= 1 && !this.state.poemFinished){ + recentSubmission = + } + + const exampleFormat = FIELDS.map((field) => { if (field.key) { @@ -32,11 +69,12 @@ class Game extends Component { { exampleFormat }

- + + {recentSubmission} - + { this.state.poemFinished ? "" : } - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..ee9e68c5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,32 +2,94 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; class PlayerSubmissionForm extends Component { +fieldState = () => { + let fieldState = {} + this.props.fields.forEach((field) => { + if(field.key) { + fieldState[field.key] = "" + } + + }) + return fieldState +} constructor(props) { super(props); + + + this.state = this.fieldState() + } + + + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + checkSubmission = () => { + let check = true + this.props.fields.forEach((field) => { + if (field === ""){ + check = false + } + + }) + return check } + onSubmit = (event) => { + event.preventDefault(); + if (this.checkSubmission()) { + this.props.addLineCallback(this.state) + } + + this.setState(this.fieldState()); + + } + + render() { + + console.log(this.state) + const playerForm = this.props.fields.map((field, i) => { + if(field.key) { + return( + + ) + + }else{ + return field + } + + }) return (
-

Player Submission Form for Player #{ }

+

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

-
+
- { - // Put your form inputs here... We've put in one below as an example - } - + {playerForm} +
- +
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..ec67c8d9 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.recentSubmission}

); }