diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..59ef321f 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,36 @@
import React from 'react';
import './FinalPoem.css';
-const FinalPoem = (props) => {
+class FinalPoem extends React.Component {
- return (
-
-
- Final Poem
+ onButtonClick = () => {
+ this.props.onFinalButtonClickCallback();
+ }
+
+ render() {
+ const poemLines = this.props.lines.map((line, i) => {
+ return (
+
+ )
+ });
-
+ const gameResult = this.props.gameOver ?
+ (
+ Final Poem
+ {poemLines}
+ ) :
+ (
+
+
)
-
-
+ return (
+
+ {gameResult}
-
- );
+ );
+ }
}
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..25a36f82 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,13 +5,36 @@ import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
class Game extends Component {
+
constructor(props) {
super(props);
+ this.state = {
+ submissions: [],
+ lastSubmission: '',
+ gameOver: false,
+ }
}
- render() {
+ addSubmission = (submission) => {
+ const string = `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}`
+
+ const subs = this.state.submissions;
+ subs.push(string)
+
+ this.setState({
+ submissions: subs,
+ lastSubmission: string,
+ })
+ }
+
+ onFinalButtonClick = () => {
+ this.setState({
+ gameOver: true,
+ })
+ }
+ render() {
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -20,6 +43,13 @@ class Game extends Component {
}
}).join(" ");
+ console.log(this.state.submissions)
+
+ const mostRecentSubmission = (!this.state.gameOver && this.state.submissions.length !== 0) ? (
) : null;
+
+
+ const submissionForm = (!this.state.gameOver) ? (
) : null;
+
return (
Game
@@ -32,11 +62,12 @@ class Game extends Component {
{ exampleFormat }
-
-
+ {mostRecentSubmission}
+
+ {submissionForm}
-
+
);
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..9648cfaa 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -31,10 +31,10 @@
background-color: tomato;
}
-.PlayerSubmissionFormt__input--invalid {
+.PlayerSubmissionForm__input--invalid {
background-color: #FFE9E9;
}
.PlayerSubmissionForm__input--invalid::placeholder {
- color: black;
+ background-color: #FFE9E9;
}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 1de05095..b6af1132 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,27 +5,126 @@ 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: '',
+ });
+ }
+
+ onInputChange = (event) => {
+ const updatedState = {};
+
+ const field = event.target.name;
+ const value = event.target.value;
+
+ updatedState[field] = value;
+ this.setState(updatedState);
+ }
+
+ classStyle = (input) => {
+ const style = (input === "") ? "PlayerSubmissionForm__input--invalid" : "PlayerSubmissionForm__input"
+ return style;
+ }
+
+ onSubmit = (event) => {
+ event.preventDefault();
+
+ const newSubmission = {
+ adj1: this.state.adj1,
+ noun1: this.state.noun1,
+ adv: this.state.adv,
+ verb: this.state.verb,
+ adj2: this.state.adj2,
+ noun2: this.state.noun2,
+ };
+
+ this.setState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ })
+
+ this.props.addSubmissionCallback(newSubmission)
+ this.resetState();
}
render() {
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ this.props.playerNumber }
-