-
+ const poemInfo =
+
+ Final Poem
+ { tonyStanza }
+
+
+ const submitPoemButton =
+
+
+
+
+ const displayPoemContent =
+
+ { props.isFinal ? poemInfo : '' }
+ { props.isFinal ? '' : submitPoemButton }
+
+ return (
+
+ { displayPoemContent }
);
}
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..507f87c3 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,32 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ finalPoem: [],
+ isFinal: false,
+ };
+ }
+
+ recentSubmission = (poem) => {
+ const poemLength = poem.length - 1
+ const lastLine = poem[poemLength]
+ return lastLine
+ }
+
+ addSubmission = (line) => {
+ const currentPoem = this.state.finalPoem;
+ currentPoem.push(line);
+ this.setState({
+ finalPoem: currentPoem,
+ })
+ }
+
+ displayFinalPoem = (event) => {
+ event.preventDefault();
+ this.setState({
+ isFinal: true,
+ })
}
render() {
@@ -20,6 +46,10 @@ class Game extends Component {
}
}).join(" ");
+ const displaySubmission = this.state.finalPoem.length > 0 && !this.state.isFinal ?
: '';
+
+ const displaySubmissionForm = !this.state.isFinal ? : '';
+
return (
Game
@@ -32,12 +62,12 @@ class Game extends Component {
{ exampleFormat }
-
-
-
+ { displaySubmission }
-
+ { displaySubmissionForm }
+
+
);
}
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..e3e0a5d2 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,30 +5,85 @@ class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ const allPoemFields = {};
+ props.fields.forEach((field) => {
+ if (field.key) {
+ allPoemFields[ field.key ] = '';
+ }
+ });
+ this.state = {...allPoemFields, player: 1, addSubmissionCallback: this.addSubmission};
+ }
+
+ onChangeHandler = (value, id) => {
+ this.setState({
+ [id]: value,
+ })
+ }
+
+ increasePlayerCount = (value) => {
+ value += 1;
+ return value;
+ }
+
+ isValid = (field) => {
+ return field.length > 0 ? true : false;
}
+ handleSubmit = (event) => {
+ event.preventDefault();
+ const poemLine = this.props.fields.map((field) => {
+ if (field.key) {
+ return this.state[field.key];
+ } else {
+ return field;
+ }
+ });
+
+ this.props.addSubmissionCallback(poemLine.join(" "));
+
+ this.setState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ player: this.increasePlayerCount(this.state.player),
+ });
+}
+
render() {
+ const formContent = this.props.fields.map( (field, i) => {
+ if (field.key) {
+ return { this.onChangeHandler(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 #{ }
+
Player Submission Form for Player #{ this.state.player }
-
);
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..21d7239e 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
return (