-
+const poemButton =
+
+
+
+
-
-
+const display = props.isSubmitted ? finishedPoem : poemButton
+
+return (
+
+ {display}
-
);
}
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..6a27cc5d 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,8 @@ import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
const Game = () => {
+ const [submittedLines, setSubmittedLines] = useState([])
+ const [submitted, setSubmitted] = useState(false)
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,6 +15,19 @@ const Game = () => {
}
}).join(' ');
+ const onSubmitLine = (submittedLine) => {
+ const newLineList = [...submittedLines, submittedLine];
+ setSubmittedLines(newLineList);
+
+ }
+ const getLastLine = () => {
+ return( (submittedLines.length > 0) ? submittedLines[submittedLines.length - 1] : '');
+ }
+ const finishGame = () => {
+ setSubmitted(!submitted);
+ }
+ const showRecentSubmission = (!submitted && submittedLines.length > 0) ?
: ''
+ const showSubmissionForm = (!submitted) ?
: ''
return (
Game
@@ -25,11 +40,11 @@ const Game = () => {
{ exampleFormat }
-
-
-
+ {showRecentSubmission}
-
+ {showSubmissionForm}
+
+
);
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..3e1f1402 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -17,6 +17,10 @@
justify-content: center;
}
+input.empty {
+ background: gray;
+}
+
.PlayerSubmissionForm__submit-btn {
flex: 0.5;
margin: 2rem;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..317c72ea 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,21 +3,62 @@ import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
-const PlayerSubmissionForm = () => {
+const PlayerSubmissionForm = (props) => {
+ const blankFields = {
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ adj2: '',
+ noun2: '',
+ }
+
+ const [player, setPlayer] = useState(1);
+ const [playerSubmission, setPlayerSubmission] = useState(blankFields)
+ const onInputChange = (event) => {
+
+ const updatedField = {...playerSubmission}
+ updatedField[event.target.name] = event.target.value
+ setPlayerSubmission(updatedField)
+
+ }
+ const makeSentence = () => {
+ const words = props.fields.map((element) => {
+ if (element.key) {
+ return playerSubmission[`${element.key}`]
+ } else {
+ return element
+ }
+ })
+ return words.join(' ')
+ }
+ const onSubmitNewLine = (event) => {
+ event.preventDefault();
+
+ setPlayer(player + 1);
+ console.log(player);
+
+ props.sendSubmission(makeSentence());
+
+ setPlayerSubmission(blankFields);
+ }
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{player}
-