diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..d6a8592b 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,18 +3,39 @@ import './FinalPoem.css';
const FinalPoem = (props) => {
+ const revealPoem = () => {
+ props.revealPoemCallback();
+ }
+
+ // format lines so they look like a poem
+ const formatPoem = props.finalPoem.map((line, i) => {
+ return (
+
+ {line}
+
+ )
+
+})
+
+ // logic for "reveal poem" button and displaying final poem: start with displayPoem value of false in game and "display poem" button visible. When button is clicked, displayPoem value turns to true and buttons is no longer visible.
+
+ if (props.displayPoem === true) {
+
return (
Final Poem
-
+ {formatPoem}
-
-
-
+ )
+ } else {
+ return (
+
+
);
+ }
}
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..5d31992e 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -8,6 +8,29 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ // game state stores current line (pushed up from player submission form), submitted lines get added to final poem array, and display poem controls whether or not finished poem is visible
+
+ this.state = {
+ currentLine: '',
+ finalPoem: [],
+ displayPoem: false,
+ } }
+
+ // the newly submitted line becomes the current line and gets added to the final poem array
+ addLine = (line) => {
+ const {finalPoem} = this.state;
+ finalPoem.push(line);
+ this.setState({
+ currentLine: line,
+ finalPoem,
+ })
+ }
+
+ revealPoem = () => {
+ this.setState({
+ displayPoem: true
+ })
}
render() {
@@ -20,28 +43,38 @@ class Game extends Component {
}
}).join(" ");
- return (
-
Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.
-
-
Please follow the following format for your poetry submission:
-
-
- { exampleFormat }
-
+} else {
+ return (
-
+
+
Game
+
+
Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.
+
+
Please follow the following format for your poetry submission:
+
+
+ { exampleFormat }
+
+
+
+
-
+ {this.addLine(line)}}/>
-
+
+
+
-
);
- }
-}
+ };
+};
+};
const FIELDS = [
"The",
@@ -73,4 +106,5 @@ const FIELDS = [
".",
];
+
export default Game;
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..278216ad 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -5,29 +5,141 @@ class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+ this.playerNumber = 1;
+ this.state = {
+ // user-inputted words are stored in state until submitted
+ article1: 'The',
+ adjective1: '',
+ noun1: '',
+ adverb: '',
+ verb: '',
+ article2: 'the',
+ adjective2: '',
+ noun2: '',
+ }
+ this.addLine = props.addLine;
}
+updateWord = (event) => {
+ let value = event.target.value
+ this.setState({
+ [event.target.name]: value
+ })
+}
+
+onSubmitForm = (event) => {
+ // captures input from state and turns it into a line of poetry
+ event.preventDefault();
+ let line = '';
+ Object.keys(this.state).forEach((key) => {
+ line += ' ' + this.state[key];
+ })
+ // addLine passes line up to Game; Game passes line down to Recent Submission and Final Poem
+ this.addLine(line)
+ // increment player number
+ this.playerNumber ++;
+ // reset state so form is back to placeholders for next player
+ this.setState({
+ adjective1: '',
+ noun1: '',
+ adverb: '',
+ verb: '',
+ adjective2: '',
+ noun2: '',
+ })
+}
+
+adjective1Valid = () => {
+ return this.state.adjective1.match(/.+/);
+};
+
+noun1Valid = () => {
+ return this.state.noun1.match(/.+/);
+};
+
+adverbValid = () => {
+ return this.state.adverb.match(/.+/);
+};
+
+verbValid = () => {
+ return this.state.verb.match(/.+/);
+};
+
+adjective2Valid = () => {
+ return this.state.adjective2.match(/.+/);
+};
+
+noun2Valid = () => {
+ return this.state.noun2.match(/.+/);
+};
+
+
render() {
return (