diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b466d849..7744c259 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -4,18 +4,24 @@ import './FinalPoem.css';
const FinalPoem = (props) => {
- return (
-
-
-
-
-
+ if (props.isSubmitted) {
+ return (
+
+
+ Final Poem
+ {props.submissions.map((line, i) => {line}
)}
+
-
- );
+ );
+ } 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..a1fb178c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -13,6 +13,25 @@ const Game = () => {
}
}).join(' ');
+ const [playerNumber, setPlayerNumber] = useState(1);
+ const [submissionList, setSubmissionList] = useState([]);
+ const [isSubmitted, setIsSubmitted] = useState(false);
+
+ const addPlayerSubmission = submission => {
+ const newSubmissionList = [...submissionList];
+
+ newSubmissionList.push(submission);
+
+ setSubmissionList(newSubmissionList);
+ setPlayerNumber(playerNumber + 1);
+ };
+
+ const lastSubmission = submissionList[submissionList.length - 1];
+
+ const revealPoem = () => {
+ setIsSubmitted(true);
+ };
+
return (
Game
@@ -25,11 +44,11 @@ const Game = () => {
{ exampleFormat }
-
+ {(!isSubmitted && submissionList.length > 0) ?
: ''}
-
+ {(!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.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..1d4bc537 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,22 +3,77 @@ import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+ const [formFields, setFormFields] = useState({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ });
+
+ const onInputChange = event => {
+ const newFormFields = {
+ ...formFields
+ };
+
+ const { name, value } = event.target;
+
+ newFormFields[name] = value;
+
+ setFormFields(newFormFields);
+ };
+
+ const onFormSubmit = event => {
+ event.preventDefault();
+
+ const playerSubmission = props.fields.map(field => {
+ const submittedFields = {...formFields};
+ if (field.key) {
+ return submittedFields[field.key]
+ } else {
+ return field
+ }
+ }).join(' ');
+
+ props.sendSubmission(playerSubmission);
+
+ setFormFields({
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: ''
+ });
+ }
+
+ const generateFormFields = props.fields.map(field => {
+ if (field.key) {
+ return (
+
+ );
+ } else {
+ return field;
+ }
+ });
+
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ props.index }
-