diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js
index d516184e..66bacce3 100644
--- a/src/components/FinalPoem.js
+++ b/src/components/FinalPoem.js
@@ -1,20 +1,32 @@
-import React from 'react';
+import React, {useState} from 'react';
import './FinalPoem.css';
+import PropTypes from 'prop-types';
const FinalPoem = (props) => {
+ let increment = 0;
+ let finalPoem = props.poemList.map(sentence => {
+ increment += 1
+ return (
{sentence}
)
+ });
+
return (
);
}
-export default FinalPoem;
+// TODO Need to add propTypes
+
+export default FinalPoem;
\ No newline at end of file
diff --git a/src/components/Game.js b/src/components/Game.js
index ad27105b..8bbc6810 100644
--- a/src/components/Game.js
+++ b/src/components/Game.js
@@ -3,8 +3,14 @@ import './Game.css';
import PlayerSubmissionForm from './PlayerSubmissionForm';
import FinalPoem from './FinalPoem';
import RecentSubmission from './RecentSubmission';
+import PropTypes from 'prop-types';
const Game = () => {
+ const [poemList, setPoemList] = useState([]);
+ const [player, setPlayer] = useState(1);
+ const [showFinal, setShowFinal] = useState(false);
+
+
const exampleFormat = FIELDS.map((field) => {
if (field.key) {
return field.placeholder;
@@ -13,6 +19,21 @@ const Game = () => {
}
}).join(" ");
+ // callback function to add students to the list
+ const addPoem = (poem) => {
+ const newPoemList = [...poemList]; // copy PoemList
+
+ const newLine = "The " + poem.adj1 + " " + poem.noun1 + " " + poem.adv + " " + poem.verb + " the " + poem.adj2 + " " + poem.noun2 + ".";
+
+ newPoemList.push(newLine);
+ setPoemList(newPoemList);
+ setPlayer(player + 1);
+ };
+
+ const finishedPoem = () => {
+ setShowFinal(true);
+ };
+
return (
Game
@@ -25,11 +46,16 @@ const Game = () => {
{ exampleFormat }
-
-
-
+ {
+ player > 1 && showFinal !== true ?
: null
+ }
+
+ {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */}
+ {
+ showFinal ? null :
+ }
-
+
);
@@ -48,7 +74,7 @@ const FIELDS = [
},
{
key: 'adv',
- placeholder: 'adverb',
+ placeholder: 'adv',
},
{
key: 'verb',
@@ -66,4 +92,8 @@ const FIELDS = [
".",
];
+// TODO Need to add propTypes
+
+// TODO As a player, I want the form text inputs to be light pink when they are blank, so I have a visual way of seeing that it's invalid when it's blank.
+
export default Game;
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js
index ba19e6ef..3b29e1bb 100644
--- a/src/components/PlayerSubmissionForm.js
+++ b/src/components/PlayerSubmissionForm.js
@@ -1,31 +1,118 @@
import React, { useState } from 'react';
import './PlayerSubmissionForm.css';
+import PropTypes from 'prop-types';
+
+const PlayerSubmissionForm = (props) => {
+ const [fields, setFields] /* destructuring array - first element is fields, second element is setFields */ = useState(
+ {
+ adj1: "",
+ noun1: "",
+ adv: "",
+ verb: "",
+ adj2: "",
+ noun2: ""
+ });
+
+ const onInputChange = event => {
+ const { name, value } = event.target;
+
+ const newFields = {
+ ...fields,
+ [name]: value // [name] get value of name and use it as the key | value is the variable above
+ // line 46 is equivalent to: newFields[name] = value
+ };
+
+ setFields(newFields);
+ };
+
+ const onFormSubmit = (event) => {
+ // prevent browser from trying to submit form
+ event.preventDefault();
+
+ props.onSubmit(fields);
+
+ // reset fields
+ setFields({
+ adj1: "",
+ noun1: "",
+ adv: "",
+ verb: "",
+ adj2: "",
+ noun2: ""
+ });
+ };
+
-const PlayerSubmissionForm = () => {
return (
-
Player Submission Form for Player #{ }
+
Player Submission Form for Player #{props.player}
-
);
}
+// TODO Need to add propTypes
export default PlayerSubmissionForm;
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js
index 663da34b..5edd3a3a 100644
--- a/src/components/RecentSubmission.js
+++ b/src/components/RecentSubmission.js
@@ -1,13 +1,17 @@
import React from 'react';
import './RecentSubmission.css';
+import PropTypes from 'prop-types';
const RecentSubmission = (props) => {
return (
-
The Most Recent Submission
-
{ }
+
The Most Recent Submission
+
{ props.recentSubmission }
+ {/* // ? refactor generate sentence here, not in Game ? */}
);
}
export default RecentSubmission;
+
+// TODO Need to add propTypes