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 ( -
-
-

Final Poem

- -
- -
- + 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 }

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } - - + {generateFormFields}
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 4cf7b542..e1a14366 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -6,7 +6,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.submission }

); } diff --git a/src/components/RecentSubmission.test.js b/src/components/RecentSubmission.test.js index 3eee278c..0bbeb345 100644 --- a/src/components/RecentSubmission.test.js +++ b/src/components/RecentSubmission.test.js @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import RecentSubmission from './RecentSubmission'; -describe.skip('Wave 2: RecentSubmission', () => { +describe('Wave 2: RecentSubmission', () => { test('It renders with a submission and shows the text', () => { // Act render();