diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css
index 67dda943..953ff9d5 100644
--- a/src/components/FinalPoem.css
+++ b/src/components/FinalPoem.css
@@ -19,3 +19,7 @@
.FinalPoem__poem {
border-bottom: 2px gray dashed;
}
+
+.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index b466d849..c1f0712d 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -3,16 +3,29 @@ import PropTypes from 'prop-types';
import './FinalPoem.css';
const FinalPoem = (props) => {
+ // variables
+ const revealState = props.revealState
+ // creat list of all submissions
+ const finalPoem = props.submissions.map(sentence => {
+ return
{sentence}
+ })
+
+// event handler
+ const onPoemReveal = () => {
+ props.onRevealPoemCallback(revealState)
+ }
+
+
return (
);
diff --git a/src/components/Game.css b/src/components/Game.css
index 8ff58e42..a65847df 100644
--- a/src/components/Game.css
+++ b/src/components/Game.css
@@ -2,3 +2,7 @@
text-align: center;
font-style: italic;
}
+
+.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/components/Game.js b/src/components/Game.js
index ef28c693..68aa0427 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -5,6 +5,11 @@ import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
const Game = () => {
+ // state
+ const [allSubmissions, setAllSubmissions] = useState([])
+ const [revealed, setRevealed] = useState(false)
+
+ // dynamically make example sentence
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,6 +18,17 @@ const Game = () => {
}
}).join(' ');
+ // helper functions
+ const addLineToPoem = (line) => {
+ const newSubmission = [...allSubmissions];
+ newSubmission.push(line);
+ setAllSubmissions(newSubmission);
+ }
+
+ const revealFinalPoem = () => {
+ setRevealed(true)
+ }
+
return (
Game
@@ -24,13 +40,15 @@ const Game = () => {
{ exampleFormat }
-
-
-
-
-
-
-
+
+
+
);
}
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index 370a1f75..733c55d6 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -3,22 +3,107 @@ import PropTypes from 'prop-types';
import './PlayerSubmissionForm.css';
-const PlayerSubmissionForm = () => {
+// initial values for formFields
+const emptySentence = {
+ articleOne: 'The',
+ adj1: '',
+ noun1: '',
+ adv: '',
+ verb: '',
+ articleTwo:'the',
+ adj2: '',
+ noun2: '',
+ puncOne: '.'
+}
+
+const PlayerSubmissionForm = (props) => {
+ // states
+ const [formFields, setFormFields] = useState({...emptySentence});
+ const [currentPlayer, setCurrentPlayer] = useState(1)
+
+ // event handlers
+ const onInputChange = (event) => {
+ const newFormFields = {...formFields}
+ newFormFields[event.target.id] = event.target.value;
+ setFormFields(newFormFields);
+ }
+
+ const onFormSubmit = (event) => {
+ event.preventDefault();
+
+ const newSentence = Object.values(formFields).join(' ');
+
+ props.sendSubmission(newSentence);
+
+ setCurrentPlayer(currentPlayer + 1)
+ setFormFields({...emptySentence})
+ };
+
+
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{ currentPlayer }
-