diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..f5f016a4 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,39 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const finalPoem = props.finalPoem.map((line, i) => { + return ( +

{line}

+ ) + }) + return (

Final Poem

- +
{finalPoem}
-
- -
+ {!props.completed ? +
+ +
: null}
); } +FinalPoem.propTypes = { + finalPoem: PropTypes.array.isRequired, + submitPoemCallback: PropTypes.func.isRequired, + completed: PropTypes.bool.isRequired +}; + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..b5415e9a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,18 +8,61 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + recentSubmission: undefined, + playerCount: 1, + currentPoem: [], + finalPoem: [], + completed: false + } } - render() { - - const exampleFormat = FIELDS.map((field) => { + generateLine = (fields) => { + return fields.map((field) => { if (field.key) { return field.placeholder; } else { return field; } }).join(" "); + } + + submitLine = (line) => { + let fields = JSON.parse(JSON.stringify(FIELDS)) + let i = 0 + let j = 0 + while (i < fields.length) { + if (fields[i]['key']) { + fields[i]['placeholder'] = Object.values(line)[j] + i++ + j++ + } else { + i++ + } + } + + const sentence = this.generateLine(fields) + let updatePoem = this.state.currentPoem + updatePoem.push(sentence) + + this.setState({ + recentSubmission: sentence, + playerCount: this.state.playerCount + 1, + currentPoem: updatePoem, + }) + } + + submitPoem = () => { + this.setState({ + finalPoem: this.state.currentPoem, + completed: true + }) + } + + render() { + const exampleFormat = this.generateLine(FIELDS) + return (

Game

@@ -32,11 +75,23 @@ class Game extends Component { { exampleFormat }

- + {(!this.state.completed && this.state.playerCount > 1) ? + : null} - + {!this.state.completed ? + : null} - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..877f5266 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,29 +1,83 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { - + + resetState = () => { + let stateKeys = {} + this.props.fields.forEach((field) => { + if (field.key) { + stateKeys[field.key] = '' + } + }); + return stateKeys + } + constructor(props) { super(props); + this.state = this.resetState() + } + + onInputChange = (event) => { + const updatedState = {}; + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + canSubmit = () => { + let complete = true + Object.values(this.state).forEach((value) => { + if (value === '') { + complete = false + } + }) + return complete + } + + onSubmitHandler = (event) => { + event.preventDefault(); + if (this.canSubmit()) { + this.props.addLineCallback(this.state); + this.setState(this.resetState()); + } } render() { + const fieldsDisplay = this.props.fields.map((field, i) => { + if (field.key) { + + let fieldColor = 'PlayerSubmissionFormt__input--invalid' + if (this.state[field.key] !== '') { + fieldColor = 'PlayerSubmissionFormt__input' + } + + return ( + + ) + } else { + return field + } + }) return (
-

Player Submission Form for Player #{ }

- -
+

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

+
- - { - // Put your form inputs here... We've put in one below as an example - } - - + {fieldsDisplay}
@@ -35,4 +89,10 @@ class PlayerSubmissionForm extends Component { } } +PlayerSubmissionForm.propTypes = { + fields: PropTypes.array.isRequired, + playerCount: PropTypes.number.isRequired, + addLineCallback: PropTypes.func.isRequired +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..b39c47cb 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,18 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.recentSubmission }

); } +RecentSubmission.propTypes = { + recentSubmission: PropTypes.string.isRequired +}; + export default RecentSubmission;