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 (
-
-
+ 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 #{ }
-
);
}
-}
+};
+
+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 }
);
}