diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b466d849..8b237ed1 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,18 +4,28 @@ import './FinalPoem.css';
const FinalPoem = (props) => {
- return (
-
-
-
-
-
+ if (props.isSubmitted === true) {
+ return (
+
+
+ Final Poem
+ {props.submissions.map((submission, i) => (
+ {submission}
+ ))}
+
-
- );
+ )
+ } else {
+ return (
+
+
+
+ )
+ };
}
FinalPoem.propTypes = {
diff --git a/src/components/FinalPoem.test.js b/src/components/FinalPoem.test.js
index 01eb3333..987959d3 100644
--- a/src/components/FinalPoem.test.js
+++ b/src/components/FinalPoem.test.js
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
import FinalPoem from './FinalPoem';
-describe.skip('FinalPoem', () => {
+describe('FinalPoem', () => {
describe('before the poem is finished', () => {
test('it renders with a button when isSubmitted is false', () => {
// Act
diff --git a/src/components/Game.js b/src/components/Game.js
index ef28c693..1101bf20 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,7 @@ import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
const Game = () => {
+
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,6 +14,24 @@ const Game = () => {
}
}).join(' ');
+ const [player, setCurrentPlayer] = useState(1);
+ const [playerSubmission, setPlayerSubmission] = useState([]);
+ const[isSubmitted, setIsSubmitted] = useState(false);
+
+ const addPlayerSubmission = (submission) => {
+ const poem = [...playerSubmission];
+ poem.push(submission);
+ setPlayerSubmission(poem);
+ setCurrentPlayer(player + 1);
+ };
+
+
+ const revealPoem = () => {
+ setIsSubmitted(true);
+ }
+
+ const lastSubmission = playerSubmission[playerSubmission.length - 1]
+
return (
Game
@@ -25,11 +44,23 @@ const Game = () => {
{ exampleFormat }
-
+ {!isSubmitted && lastSubmission &&
+
+ }
-
+ {!isSubmitted &&
+
+ }
-
+
);
diff --git a/src/components/Game.test.js b/src/components/Game.test.js
index f90ec3bd..1c04c403 100644
--- a/src/components/Game.test.js
+++ b/src/components/Game.test.js
@@ -37,7 +37,7 @@ const FIELDS = [
const INPUT_FIELDS = FIELDS.filter((element) => typeof element !== 'string');
-describe.skip('Game', () => {
+describe('Game', () => {
describe('Wave 1: Rendering Game', () => {
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..ae3c0edc 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -38,3 +38,11 @@
.PlayerSubmissionForm__input--invalid::placeholder {
color: black;
}
+
+.invalidInput {
+ background-color: pink;
+}
+
+.validInput {
+ background-color: white;
+}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..9562cf5f 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,26 +3,79 @@ import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+
+ const newFields = {
+ adj1: '',
+ noun1: '',
+ adverb: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ };
+
+ const [currentFields, setCurrentFields] = useState (newFields);
+
+ const onFormChange = (event) => {
+ const newFormFields = {
+ ...currentFields
+ }
+
+ newFormFields[event.target.name] = event.target.value;
+ setCurrentFields(newFormFields);
+ };
+
+ const onFormSubmit = (event) => {
+ event.preventDefault();
+
+ const line = props.fields.map(field => {
+ const fieldsSubmitted = {...currentFields};
+
+ if (field.key) {
+ return fieldsSubmitted[field.key];
+ } else {
+ return field
+ }
+ }).join(' ');
+
+ props.sendSubmission(line);
+
+ setCurrentFields(newFields);
+ };
+
return (
-
Player Submission Form for Player #{ }
-
-