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 ( -
-
-

Final Poem

+ const showPoemButton = +
+ +
; + + const finalPoemLines = props.submissions.map((line, i) => { + return

{line}

; + }); -
+ 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); + } -
+ resetForm = () => { + const clearedState = {}; + this.props.fields.forEach((field) => { + if (field.key) { + clearedState[field.key] = ""; + } + }); + this.setState(clearedState); + } -
+ onFormSubmit = (event) => { + event.preventDefault(); - { - // Put your form inputs here... We've put in one below as an example - } - + let newSubmission = ""; + this.props.fields.forEach((field) => { + if (field.key) { + newSubmission += this.state[field.key]; + } else { + return field; + } + return newSubmission; + }); -
+ let playerNumber = this.state.player; + playerNumber += 1 + + this.setState({ + player: playerNumber + }) + this.props.addNewLineCallback(newSubmission); + this.resetForm(); + } + render() { + + const formFields = this.props.fields.map((field, i) => { + if (field.key) { + return 0 ? "" : "PlayerSubmissionForm__input--invalid"} + />; + } else { + return field; + } + }) + + + return ( +
+

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

+ + +
+ {formFields} +
- +
-
+
); } } 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 (

The Most Recent Submission

-

{ }

+

{ props.submission }

); }