diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..1744ef37 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,38 @@
import React from 'react';
+import PropTypes from 'prop-types';
import './FinalPoem.css';
-const FinalPoem = (props) => {
+const FinalPoem = ({isDone, poem, onClickCallback}) => {
return (
);
}
+FinalPoem.propTypes = {
+ isDone: PropTypes.bool.isRequired,
+ poem: PropTypes.array.isRequired,
+ onClickCallback: PropTypes.func.isRequired,
+};
+
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..cf0adaca 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,25 @@ import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
const Game = () => {
+ const [poem, setPoem] = useState([])
+ const [player, setPlayer] = useState(1)
+ const [gameOn, setGameOn] = useState(true)
+
+ const onSubmitFormClickCallback = (line) => {
+ const newPoem = [...poem];
+ const {adj1, noun1, adv, verb, adj2, noun2} = line;
+ newPoem.push(`The ${adj1} ${noun1} ${adv} ${verb} the ${adj2} ${noun2}.`)
+ // newPoem.push(Object.values(line).join(" "));
+ setPoem(newPoem);
+ console.log(newPoem);
+ const newPlayer = player + 1
+ setPlayer(newPlayer);
+ }
+
+ const onFinishPoem = () => {
+ setGameOn(false);
+ };
+
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,6 +32,14 @@ const Game = () => {
}
}).join(" ");
+ const lastLine = () => {
+ if (poem.length === 0 ) {
+ return "";
+ }
+
+ return poem[poem.length - 1];
+ };
+
return (
Game
@@ -25,11 +52,11 @@ const Game = () => {
{ exampleFormat }
-
+
-
+
-
+
);
@@ -67,3 +94,5 @@ const FIELDS = [
];
export default Game;
+
+
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..ff3c9b42 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,31 +1,131 @@
import React, { useState } from 'react';
+import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = ({isDone, player, onClickCallback}) => {
+ const [line, setLine] = useState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ });
+
+ const {adj1, noun1, adv, verb, adj2, noun2} = line
+
+ const onInputChange = (e) => {
+ const newSubmission = {
+ ...line,
+ }
+ newSubmission[e.target.name] = e.target.value;
+ // console.log(e.target.value);
+ setLine(newSubmission);
+ };
+
+ const onFormSubmit = (event) => {
+ event.preventDefault();
+
+ if (
+ adj1 !== '' &&
+ noun1 !== '' &&
+ adv !== '' &&
+ verb !== '' &&
+ adj2 !== '' &&
+ noun2 !== ''
+ ) {
+ onClickCallback(line);
+ console.log(line);
+
+ setLine({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ });
+ };
+ };
+
+ const inputDisplay = (name) => {
+ return (name !== "") ? "PlayerSubmissionFormt__input--valid" : "PlayerSubmissionFormt__input--invalid";
+ }
+
return (
-
-
Player Submission Form for Player #{ }
+ !isDone && (
+
+
Player Submission Form for Player #{player}
+ )
+
);
}
+PlayerSubmissionForm.propTypes = {
+ isDone: PropTypes.bool.isRequired,
+ player: PropTypes.number.isRequired,
+ onClickCallback: PropTypes.func.isRequired,
+};
export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..dc697ee1 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,25 @@
import React from 'react';
+import PropTypes from 'prop-types';
import './RecentSubmission.css';
-const RecentSubmission = (props) => {
+const RecentSubmission = ({isDone, lastLine}) => {
+ const shouldDisplay = () => {
+ return (!isDone && lastLine);
+ }
return (
-
-
The Most Recent Submission
-
{ }
-
+ shouldDisplay() && (
+
+
The Most Recent Submission
+
{ lastLine }
+
+ )
);
}
+RecentSubmission.propTypes = {
+ isDone: PropTypes.bool.isRequired,
+ lastLine: PropTypes.string.isRequired,
+};
+
export default RecentSubmission;
+