diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..597b4056 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,16 +3,30 @@ import './FinalPoem.css'; const FinalPoem = (props) => { - return ( -
-
-

Final Poem

+ const tonyStanza = props.poem.map( (line, i) => { + return

{line}

+ }); -
- -
- + const poemInfo = +
+

Final Poem

+ { tonyStanza } +
+ + const submitPoemButton = +
+ +
+ + const displayPoemContent = +
+ { props.isFinal ? poemInfo : '' } + { props.isFinal ? '' : submitPoemButton }
+ + return ( +
+ { displayPoemContent }
); } diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..507f87c3 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,32 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + finalPoem: [], + isFinal: false, + }; + } + + recentSubmission = (poem) => { + const poemLength = poem.length - 1 + const lastLine = poem[poemLength] + return lastLine + } + + addSubmission = (line) => { + const currentPoem = this.state.finalPoem; + currentPoem.push(line); + this.setState({ + finalPoem: currentPoem, + }) + } + + displayFinalPoem = (event) => { + event.preventDefault(); + this.setState({ + isFinal: true, + }) } render() { @@ -20,6 +46,10 @@ class Game extends Component { } }).join(" "); + const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isFinal ? : ''; + + const displaySubmissionForm = !this.state.isFinal ? : ''; + return (

Game

@@ -32,12 +62,12 @@ class Game extends Component { { exampleFormat }

- - - + { displaySubmission } - + { displaySubmissionForm } + +
); } 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..e3e0a5d2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,30 +5,85 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + const allPoemFields = {}; + props.fields.forEach((field) => { + if (field.key) { + allPoemFields[ field.key ] = ''; + } + }); + this.state = {...allPoemFields, player: 1, addSubmissionCallback: this.addSubmission}; + } + + onChangeHandler = (value, id) => { + this.setState({ + [id]: value, + }) + } + + increasePlayerCount = (value) => { + value += 1; + return value; + } + + isValid = (field) => { + return field.length > 0 ? true : false; } + handleSubmit = (event) => { + event.preventDefault(); + const poemLine = this.props.fields.map((field) => { + if (field.key) { + return this.state[field.key]; + } else { + return field; + } + }); + + this.props.addSubmissionCallback(poemLine.join(" ")); + + this.setState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + player: this.increasePlayerCount(this.state.player), + }); +} + render() { + const formContent = this.props.fields.map( (field, i) => { + if (field.key) { + return { this.onChangeHandler(event.target.value, field.key) } } + type="text" + className={this.isValid(this.state[field.key]) ? "PlayerSubmissionForm__input" : "PlayerSubmissionForm__input--invalid"} + />; + } else { + return field; + } + }) + return (
-

Player Submission Form for Player #{ }

+

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

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

The Most Recent Submission

-

{ }

+

{ props.recentLine }

); }