diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..9ab77bb4 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,17 +2,31 @@ import React from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { + const { inProgress, finishGameCallback, text} = props; + let display = undefined - return ( -
-
-

Final Poem

- -
+ const poem = text.map((sub) => { + return

{ sub }

; + }); + if (inProgress) { + display =
- + +
+ } else { + display = +
+
+

Final Poem

+ {poem} +
+ } + + return ( +
+ {display}
); } diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..41949b50 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -8,6 +8,27 @@ class Game extends Component { constructor(props) { super(props); + + this.state = { + recent: '', + playSubmissions: [], + inProgress: true + } + } + + addLine = (formText) => { + + const newSubs = this.state.playSubmissions + newSubs.push(formText) + this.setState({ + playSubmissions: newSubs, + recent: formText + }) + + } + + finishGame = () => { + this.setState({inProgress: false}) } render() { @@ -20,6 +41,7 @@ class Game extends Component { } }).join(" "); + return (

Game

@@ -32,11 +54,11 @@ class Game extends Component { { exampleFormat }

- + {this.state.inProgress && this.state.recent ? : ""} - + {this.state.inProgress ? this.addLine(formText)}/> : ""} - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..82c1538f 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,27 +5,62 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + input1: "", + input2: "", + input3: "", + input4: "", + input5: "", + input6: "", + valid: false, + player: 1 + } + } + + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + addLineCallback = (event) => { + event.preventDefault(); + const formText = "The" + " " + this.state.input1 + " " + this.state.input2 + " " + this.state.input3 + " " + this.state.input4 + " " + "the" + " " + this.state.input5 + " " + this.state.input6 + "." + this.props.addLineCallback(formText); + this.setState({ + input1: "", + input2: "", + input3: "", + input4: "", + input5: "", + input6: "",}) + this.setState({player: this.state.player + 1}) } render() { return (
-

Player Submission Form for Player #{ }

- -
+

Player Submission Form for Player #{ this.state.player }

+
- - { - // Put your form inputs here... We've put in one below as an example - } - - + The + + + + + the + + + .
-
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..8b048c3b 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.text }

); }