diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..644ae5a9 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,32 @@
import React from 'react';
+import PropTypes from 'prop-types'
import './FinalPoem.css';
-const FinalPoem = (props) => {
+const FinalPoem = ({allLines, showPoem, onClickShowPoemCallback}) => {
+
+ const fullPoem = () => (
+ allLines.map(line =>
{line}
)
+ );
return (
-
-
-
-
-
+ { showPoem ?
+ (
+ Final Poem
+ {fullPoem()}
+ ) :
+ (
+ { onClickShowPoemCallback() }} type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" />
+
)
+ }
- );
+ )
+}
+
+FinalPoem.propTypes = {
+ allLines: PropTypes.array.isRequired,
+ showPoem: PropTypes.bool.isRequired,
+ onClickShowPoemCallback: PropTypes.func.isRequired,
}
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index e99f985a..5f6796a1 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import PropTypes from 'prop-types'
import './Game.css';
import PlayerSubmissionForm from './PlayerSubmissionForm';
import FinalPoem from './FinalPoem';
@@ -8,9 +9,35 @@ class Game extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ recentSubmission: '',
+ allSubmissions: [],
+ showPoem: false,
+ }
+ }
+
+ addLine = (newLine) => {
+ const makeSentence = `The ${newLine.adjective} ${newLine.noun} ${newLine.adverb} ${newLine.verb} the ${newLine.adjective2} ${newLine.noun2}.`
+
+ this.state.allSubmissions.push(makeSentence);
+
+ this.setState({
+ recentSubmission: makeSentence,
+ allSubmissions: this.state.allSubmissions,
+ })
+
+ console.log(this.state.allSubmissions)
+ }
+
+ onClickShowPoem = () => {
+ this.setState({
+ showPoem: true,
+ });
}
render() {
+ const showPoem = this.state.showPoem;
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
@@ -21,6 +48,7 @@ class Game extends Component {
}).join(" ");
return (
+
Game
@@ -32,12 +60,11 @@ class Game extends Component {
{ exampleFormat }
-
+ { (this.state.allSubmissions.length > 0 && !showPoem) ?
: ''}
-
-
-
+ { (!showPoem ? : '') }
+
);
}
@@ -73,4 +100,8 @@ const FIELDS = [
".",
];
+Game.propTypes = {
+ newLine: PropTypes.object.isRequired,
+}
+
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..e2388019 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,33 +1,146 @@
import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
import './PlayerSubmissionForm.css';
class PlayerSubmissionForm extends Component {
constructor(props) {
super(props);
+
+ this.state = {
+ adjective: '',
+ noun: '',
+ adverb: '',
+ verb: '',
+ adjective2: '',
+ noun2: '',
+ count: 1,
+ }
+
+ this.validators = {
+ adjective: /.+/,
+ noun: /.+/,
+ adverb: /.+/,
+ verb: /.+/,
+ adjective2: /.+/,
+ noun2: /.+/,
+ };
+ }
+
+ validate = (fieldName) => {
+ const value = this.state[fieldName];
+ const validation = this.validators[fieldName];
+
+ if (value.match(validation)) {
+ return true;
+ }
+
+ return false;
+ }
+
+
+ resetState = () => {
+ this.setState({
+ adjective: '',
+ noun: '',
+ adverb: '',
+ verb: '',
+ adjective2: '',
+ noun2: '',
+ count: this.state.count + 1
+ });
+ }
+
+ onFormChange = (event) => {
+
+ const field = event.target.name;
+ const value = event.target.value;
+
+ const updatedState = {};
+ updatedState[field] = value;
+ this.setState(updatedState);
+ }
+
+ onSubmit = (event) => {
+ event.preventDefault();
+ let allValid = true;
+
+ Object.keys(this.validators).forEach((key) => {
+ if (!this.state[key].match(this.validators[key])) {
+ allValid = false;
+ }
+ });
+
+ if (!allValid) {
+ return;
+ }
+ console.log(event);
+
+ this.props.addLineCallback(this.state);
+ this.resetState();
}
render() {
return (
-
Player Submission Form for Player #{ }
-
-
@@ -35,4 +148,8 @@ class PlayerSubmissionForm extends Component {
}
}
+PlayerSubmissionForm.propTypes = {
+ addLineCallback: PropTypes.func.isRequired,
+};
+
export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..29ac3a6e 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -5,7 +5,7 @@ const RecentSubmission = (props) => {
return (
The Most Recent Submission
-
{ }
+
{ props.newLine }
);
}