diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..7f7df952 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,27 @@
-import React from 'react';
-import './FinalPoem.css';
+import React, { useState } from "react";
+import "./FinalPoem.css";
const FinalPoem = (props) => {
-
- return (
-
-
Game
+ const [player, setPlayer] = useState(1);
-
Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.
+ const incrementPlayer = (player) => {
+ const newPlayer = player + 1;
+ setPlayer(newPlayer);
+ };
-
Please follow the following format for your poetry submission:
+ const [poemList, setPoemList] = useState([]);
+ const [gameon, setGameOn] = useState(false);
-
- { exampleFormat }
-
+ console.log(`this comes from game`, poemList[poemList.length - 1]);
-
+ const onPoemSubmit = () => {
+ setGameOn(true);
+ };
-
+ const addPoem = (poem) => {
+ const newPoemList = [...poemList];
-
+ newPoemList.push({
+ key: player,
+ the1: "The",
+ adj1: poem.adj1,
+ noun1: poem.noun1,
+ adv: poem.adv,
+ verb: poem.verb,
+ the2: "the",
+ adj2: poem.adj2,
+ noun2: poem.noun2,
+ dot: ".",
+ });
-
- );
-}
+ setPoemList(newPoemList);
+ incrementPlayer(player);
+ };
+ const poems = poemList.map(
+ (poem) =>
+ `${poem.the1} ${poem.adj1} ${poem.noun1} ${poem.adv} ${poem.verb} ${poem.the2} ${poem.adj2} ${poem.noun2}${poem.dot}`
+ );
+
+ console.log(`this comes from game`, poemList[poemList.length - 1]);
+
+ return (
+
+
Game
+
+
+ Each player should take turns filling out and submitting the form below.
+ Each turn should be done individually and in secret! Take
+ inspiration from the revealed recent submission. When all players are
+ finished, click the final button on the bottom to reveal the entire
+ poem.
+
+
+
Please follow the following format for your poetry submission:
+
+
{inputFormat}
+
+
+
+
+
+
+
+ );
+};
const FIELDS = [
- "The",
- {
- key: 'adj1',
- placeholder: 'adjective',
- },
- {
- key: 'noun1',
- placeholder: 'noun',
- },
- {
- key: 'adv',
- placeholder: 'adverb',
- },
- {
- key: 'verb',
- placeholder: 'verb',
- },
- "the",
- {
- key: 'adj2',
- placeholder: 'adjective',
- },
- {
- key: 'noun2',
- placeholder: 'noun',
- },
- ".",
+ "The",
+ {
+ key: "adj1",
+ placeholder: "adjective",
+ },
+ {
+ key: "noun1",
+ placeholder: "noun",
+ },
+ {
+ key: "adv",
+ placeholder: "adverb",
+ },
+ {
+ key: "verb",
+ placeholder: "verb",
+ },
+ "the",
+ {
+ key: "adj2",
+ placeholder: "adjective",
+ },
+ {
+ key: "noun2",
+ placeholder: "noun",
+ },
+ ".",
];
export default Game;
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..a45fec75 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -35,6 +35,10 @@
background-color: #FFE9E9;
}
+.PlayerSubmissionFormt__input--valid {
+ background-color: white;
+}
+
.PlayerSubmissionForm__input--invalid::placeholder {
color: black;
}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..a6cf2150 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,31 +1,129 @@
-import React, { useState } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { useState } from "react";
+import "./PlayerSubmissionForm.css";
+import PropTypes from "prop-types";
-const PlayerSubmissionForm = () => {
- return (
-
-
Player Submission Form for Player #{ }
+const PlayerSubmissionForm = (props) => {
+ const [formFields, setFormFields] = useState({
+ adj1: "",
+ noun1: "",
+ adv: "",
+ verb: "",
+ adj2: "",
+ noun2: "",
+ });
-
-
- );
-}
+ const makeMePink = (value) => {
+ return value === ""
+ ? "PlayerSubmissionFormt__input--invalid"
+ : "PlayerSubmissionFormt__input--valid";
+ };
+ return (
+ !props.gameon && (
+