diff --git a/.env b/.env new file mode 100644 index 00000000..7d910f14 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..abbc14b8 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,38 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { - return ( -
-
-

Final Poem

+ const showButton = +
+ +
; -
+ const finalPoemContent = props.submissions.map((line, i) => { + return

{line}

+ }) + + const finalPoem = +
+

Final Poem

+ {finalPoemContent} +
; -
- -
+ const buttonOrPoem = props.isSubmitted ? finalPoem : showButton; + + return ( +
+ {buttonOrPoem}
); -} +}; + +FinalPoem.propTypes = { + isSubmitted: PropTypes.func.isRequired, + showPoem: PropTypes.func.isRequired, + submissions: PropTypes.array, + +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..a8917356 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,8 +8,25 @@ class Game extends Component { constructor(props) { super(props); + this.state = { + submissions: [], + isSubmitted: false, + } } + addSubmission = (submission) => { + this.setState({ + submissions: [ ...this.state.submissions, submission], + }); + }; + + showPoem = (event) => { + event.preventDefault(); + this.setState({ + isSubmitted: true + }); + }; + render() { const exampleFormat = FIELDS.map((field) => { @@ -20,6 +37,13 @@ class Game extends Component { } }).join(" "); + + let submissionLength = this.state.submissions.length + + const recentSubmission = submissionLength > 0 && !this.state.isSubmitted ? : ''; + + const submissionForm = this.state.isSubmitted ? '' : ; + return (

Game

@@ -32,11 +56,19 @@ class Game extends Component { { exampleFormat }

- + { recentSubmission } + + { submissionForm } + + {/* */} - + {/* */} - +
); 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..0a466e1a 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,28 +1,87 @@ import React, { Component } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; class PlayerSubmissionForm extends Component { constructor(props) { super(props); + const stateOfFields = {}; + props.fields.forEach((field) => { + if (field.key) { + stateOfFields[ field.key ] = ''; + } + }); + + this.state = stateOfFields; + }; + + newForm () { + const emptyFields = {}; + this.props.fields.forEach((field) => { + if (field.key) { + emptyFields[ field.key ] = ''; + }; + this.setState( + emptyFields + ); + }) + } + + onInputChange = (value, key) => { + this.setState({ + [key]: value, + }); + } + + submitSubmission = (event) => { + event.preventDefault(); + const submission = this.props.fields.map((field) => { + if (field.key) { + return this.state[field.key]; + } else { + return field; + } + }); + this.props.submitSubmission(submission.join(' ')); + this.newForm(); + + } + + isValid = (input) => { + return input.length; } render() { + const input = this.props.fields.map((field, i) => { + if (field.key) { + return { + this.onInputChange(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 #{ }

-
+
- { - // Put your form inputs here... We've put in one below as an example - } - + { input }
@@ -33,6 +92,13 @@ class PlayerSubmissionForm extends Component {
); } -} +}; + +PlayerSubmissionForm.propTypes = { + submitSubmission: PropTypes.func.isRequired, + fields: PropTypes.array.isRequired, + submissionIndex: PropTypes.number + +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..bd9d70ff 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.submission }

); }