diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..a8d4d0c2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,17 +2,25 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { + + const finalPoem = props.poem.map((verse, index) => { + return (

{verse}

) + }) return (
-
-

Final Poem

+ { props.finalized && +
+

Final Poem

+ {finalPoem} +
+ } -
- -
- -
+ { !props.finalized && finalPoem.length >= 1 && +
+ +
+ }
); } diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..68959ce1 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,10 +8,38 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + poem: [], + finalized: false, + } + } + + addVerse = (newVerse) => { + const newState = {...this.state} + const updatedPoem = newState.poem + updatedPoem.push(newVerse) + this.setState(updatedPoem) } + finalizePoem = () => { + if (this.state.poem.length >= 1) { + this.setState({finalized: true}) + } + } + render() { + const showMostRecent = () => { + if (this.state.poem.length >= 1 && !this.state.finalized) { + return + } + } + + const playerNumber = this.state.poem.length + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -32,11 +60,22 @@ class Game extends Component { { exampleFormat }

- - - + { showMostRecent() } - + + { !this.state.finalized && + + } + + ); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..bad28c6b 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,28 +1,94 @@ 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: '', + } + } + + resetState = () => { + this.setState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }) + } + + onFormChange = (event) => { + const field = event.target.name; + const value = event.target.value; + + const updatedState = {}; + updatedState[field] = value; + this.setState(updatedState); + } + + onSubmit = (event) => { + event.preventDefault() + // const {adjective1, noun1, adverb, verb, adjective2, noun2} = this.state + + const newVerse = this.props.fields.map((field) => { + if (field.key) { + return this.state[field.key] + } else { + return field + } + }) + console.log(event) + this.props.formCallback(newVerse.join(" ")) + + this.resetState() } + isInputValid = (input) => { + const className = input.length > 0 ? '' : 'PlayerSubmissionFormt__input--invalid' + return className + } + + + render() { return (
-

Player Submission Form for Player #{ }

+ {/* Add 1 so it does not start from player #0 */} +

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

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } - +
+ The +
+
+ +
+
+ +
+
+ +
+
+ the +
+
+ +
@@ -35,4 +101,10 @@ class PlayerSubmissionForm extends Component { } } + +PlayerSubmissionForm.propTypes = { + formCallback: PropTypes.func.isRequired, + playerNumber: PropTypes.number.isRequired, +} + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..83b90ea2 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,14 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + const finalPoem = props.poem.map((verse, index) => { + return (

{verse}

) + }) + return (

The Most Recent Submission

-

{ }

+
{finalPoem.pop()}
); }