diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..1ac420e7 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,15 +3,22 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + const displayLines = props.submissions.map((line, i) => { + return

{line}

+ }) + + return (

Final Poem

+ { props.showPoem ? displayLines : "" } +
- +
); diff --git a/src/components/Game.js b/src/components/Game.js index e99f985a..ca1ef2cd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,13 +5,28 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; class Game extends Component { - constructor(props) { super(props); + this.state = { + submissions: [], + showPoem: false, + } } - render() { + addSubmission = (newSubmission) => { + const newSentence = Object.values(newSubmission).join(" ") + this.setState({ + submissions: [...this.state.submissions, newSentence], + }) + } + + showFinalPoem = (event) => { + event.preventDefault(); + this.setState({ showPoem: true }) + } + + render() { const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -20,6 +35,29 @@ class Game extends Component { } }).join(" "); + + // const newestSub = (allSubmissions) => { + // if (allSubmissions.length > 0) { + // return allSubmissions[newestSubIndex] + // } else { + // return "" + // } + // } + + // + + const mostRecentSubmission = () => { + if ((this.state.submissions).length > 0) { + const allSubmissions = this.state.submissions + const newestSubIndex = allSubmissions.length - 1 + const newestSub = allSubmissions[newestSubIndex] + + return + } else { + return '' + } + } + return (

Game

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

- + { mostRecentSubmission() } - + { this.state.showPoem ? "" : } - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..ece3b756 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,24 +5,93 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + const stateFromFields = {} + console.log(this.props.fields) + this.props.fields.forEach((field) => { + if (field.key) { + stateFromFields[field.key] = '' + } + }); + this.state = stateFromFields; + + // this.state = { + // adj1: '', + // noun1: '', + // adv: '', + // verb: '', + // adj2: '', + // noun2: '', + // } } + onInputChange = (event) => { + console.log(`Field updated ${event.target.value}`) + const updatedState = {} + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + + this.setState(updatedState); + } + + clearFields() { + const fields = {} + this.props.fields.forEach((field) => { + if (field.key) { + fields[field.key] = "" + } + this.setState(fields) + }) + } + + onFormSubmit = (event) => { + event.preventDefault(); + + const dataFromForm = {} + this.props.fields.forEach((field) => { + if (field.key) { + dataFromForm[field.key] = this.state[field.key] + } + }); + + this.props.addSubmissionCallback(dataFromForm); + this.clearFields() + } + + + toggleClassName = (field) => { + return (this.state[field.key] === '' ? 'PlayerSubmissionFormt__input--invalid' : 'PlayerSubmissionFormt__input') + } + render() { + const formInputs = this.props.fields.filter(f => f.key).map((field) => { + return + }) return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ this.props.playerID }

-
+
{ // Put your form inputs here... We've put in one below as an example } - + + { formInputs }
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..745a358c 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,12 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + console.log(props) + return (

The Most Recent Submission

-

{ }

+

{ props.newestSubmission }

); }