diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..5042d9a2 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,47 @@
-import React from 'react';
-import './FinalPoem.css';
+import React, { useState } from "react";
+import "./FinalPoem.css";
-const FinalPoem = (props) => {
+const FinalPoem = ({ poem, onSubmitCallBack }) => {
+ // hooks/state organized here // used another help in this section
+ const [revealPoem, setRevealPoem] = useState("");
+ const [showFinalPoemButton, setShowFinalPoemButton] = useState(true);
+ let finalPoemSentence = [];
+
+ poem.forEach((poemLine) => {
+ finalPoemSentence.push(Object.values(poemLine).join(" ").concat("."));
+ });
+
+ const onFinalPoemButtonClick = (event) => {
+ // prevent default behavior
+ event.preventDefault();
+
+ // creates final poem
+ let finalPoem = finalPoemSentence.join("\n");
+ setRevealPoem(finalPoem);
+ onSubmitCallBack(false);
+ setShowFinalPoemButton(false);
+ };
return (
);
-}
+};
export default FinalPoem;
diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..f2696d3c 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -1,10 +1,18 @@
-import React, { useState } from 'react';
-import './Game.css';
-import PlayerSubmissionForm from './PlayerSubmissionForm';
-import FinalPoem from './FinalPoem';
-import RecentSubmission from './RecentSubmission';
+import React, { useState } from "react";
+import "./Game.css";
+import PlayerSubmissionForm from "./PlayerSubmissionForm";
+import FinalPoem from "./FinalPoem";
+import RecentSubmission from "./RecentSubmission";
const Game = () => {
+ // keep track of current sentence
+ const [currentSentence, nextSentence] = useState([]);
+ // holds subs or all sentences
+ const [submissions, setSubmissions] = useState(false);
+
+ //reveal poem
+ const [showPoem, changeShowPoem] = useState(true);
+
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,55 +21,80 @@ const Game = () => {
}
}).join(" ");
+ // used hold a list of sentence that make the final poem
+ const showRecentSubmission = (sentence) => {
+ const newSentenceList = [...currentSentence];
+
+ newSentenceList.push(sentence);
+
+ nextSentence(newSentenceList);
+ setSubmissions(true);
+ };
+
+ const hidePlayerSubmissionForm = (value) => {
+ changeShowPoem(value);
+ setSubmissions(false);
+ };
+
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:
-
-
- { exampleFormat }
+
+ 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:
-
+
{exampleFormat}
+ {/* keeps all subs an recent sub together */}
+ {submissions &&
}
-
+ {showPoem && (
+
+ )}
+
);
-}
-
+};
const FIELDS = [
"The",
{
- key: 'adj1',
- placeholder: 'adjective',
+ key: "adj1",
+ placeholder: "adjective",
},
{
- key: 'noun1',
- placeholder: 'noun',
+ key: "noun1",
+ placeholder: "noun",
},
{
- key: 'adv',
- placeholder: 'adverb',
+ key: "adv",
+ placeholder: "adverb",
},
{
- key: 'verb',
- placeholder: 'verb',
+ key: "verb",
+ placeholder: "verb",
},
"the",
{
- key: 'adj2',
- placeholder: 'adjective',
+ key: "adj2",
+ placeholder: "adjective",
},
{
- key: 'noun2',
- placeholder: 'noun',
+ key: "noun2",
+ placeholder: "noun",
},
".",
];
diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css
index 7cded5d9..47d8525b 100644
--- a/src/components/PlayerSubmissionForm.css
+++ b/src/components/PlayerSubmissionForm.css
@@ -32,9 +32,13 @@
}
.PlayerSubmissionFormt__input--invalid {
- background-color: #FFE9E9;
+ background-color: #ffe9e9;
}
.PlayerSubmissionForm__input--invalid::placeholder {
color: black;
}
+
+.InputColor {
+ color: pink;
+}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..eb15244d 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,31 +1,100 @@
-import React, { useState } from 'react';
-import './PlayerSubmissionForm.css';
+import React, { useState } from "react";
+import "./PlayerSubmissionForm.css";
+import PropTypes from "prop-types";
+
+const PlayerSubmissionForm = (props) => {
+ const initialState = {
+ the1: "The ",
+ adj1: "",
+ noun1: "",
+ adv: "",
+ verb: "",
+ the2: "the ",
+ adj2: "",
+ noun2: "",
+ };
+ const [sentence, setSentence] = useState(initialState);
+
+ const onInputChange = (event) => {
+ // console.log(`Changing field ${event.target.name} to ${event.target.value}`);
+ const setNewSentence = {
+ ...sentence,
+ };
+ setNewSentence[event.target.name] = event.target.value;
+ setSentence(setNewSentence);
+ };
+
+ const onSentenceSubmit = (event) => {
+ event.preventDefault();
+ props.callbackSentenceForm(sentence);
+ setSentence({
+ ...initialState,
+ });
+ };
-const PlayerSubmissionForm = () => {
return (
-
Player Submission Form for Player #{ }
-
-
);
-}
+};
+PlayerSubmissionForm.propTypes = {
+ player: PropTypes.number.isRequired,
+ callbackSentenceForm: PropTypes.func.isRequired,
+};
export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..b620cb71 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,24 @@
-import React from 'react';
-import './RecentSubmission.css';
+import React from "react";
+import "./RecentSubmission.css";
+
+const RecentSubmission = ({ poem }) => {
+ let submission = [];
+ const recentSubmission = poem.slice(-1)[0];
+
+ //recentSubmission will be undefined
+ if (recentSubmission === null) {
+ submission.push(" ");
+ } else {
+ // push to submission object values of the poem and spliting
+ submission.push(Object.values(recentSubmission).join(" ").concat("."));
+ }
-const RecentSubmission = (props) => {
return (
The Most Recent Submission
-
{ }
+
{submission}
);
-}
+};
export default RecentSubmission;