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