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 (
-
-

Final Poem

- -
+ { props.showFinal ? +
+

Final Poem

+ {finalPoem} +
: + null + }
- +
); } -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}

-
+
+ The + + + + + + + + the + - { - // Put your form inputs here... We've put in one below as an example - } + name="noun2" + onChange={onInputChange} + value={fields.noun2} + placeholder="noun" + type="noun" + />.
- +
); } +// 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