diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..1c1be527 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,16 +3,31 @@ import './FinalPoem.css';
const FinalPoem = (props) => {
- return (
-
-
+ const finalPoem =
+
+ Final Poem
+ {finalPoemLines}
+ ;
-
-
-
+ const gameDisplay = props.poemFinished ? finalPoem : showPoemButton;
+
+ return (
+
+ {gameDisplay}
);
}
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..ea78c4a7 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,10 +8,31 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ submissions: [],
+ poemFinished: false
+ };
}
- render() {
+ addNewLine = (line) => {
+ const newSubmission = this.state.submissions;
+ newSubmission.push(line);
+
+ this.setState({
+ submissions: newSubmission,
+ })
+ };
+
+ showFinalPoem = (event) => {
+ event.preventDefault();
+ this.setState({
+ poemFinished: true
+ })
+ }
+
+ render() {
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -29,14 +50,23 @@ class Game extends Component {
Please follow the following format for your poetry submission:
- { exampleFormat }
+ {exampleFormat}
-
+
-
+
-
+
);
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..7d4347bf 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,32 +5,98 @@ class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ const initialState = {
+ player: 1
+ };
+ props.fields.forEach((field) => {
+ if (field.key) {
+ initialState[field.key] = "";
+ }
+ });
+ this.state = initialState;
}
- render() {
+ onValueChange = (event) => {
+ console.log(`${event.target} Updated ${event.target.value}`);
- return (
-
-
Player Submission Form for Player #{ }
+ const fields = {};
+ fields[event.target.name] = event.target.value;
+ this.setState(fields);
+ }
-
);
}
}
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 (