diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..429f7965 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,48 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; -const FinalPoem = (props) => { +const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => { + + const finalPoemDisplayed = finalPoemSubmitted.map((sentence , i) => { + return ( +

+ {sentence} +

+ ) + }) + //conditional rendering depending on whether the final poem is showing or not return (
-
-

Final Poem

+ {isFinalPoemVisible && ( +
+

Final Poem

+ {finalPoemDisplayed} +
+ )} -
- -
- -
+ {!isFinalPoemVisible && ( +
+ +
+ )}
); } + +FinalPoem.propTypes = { + finalPoemSubmitted: PropTypes.array.isRequired, + isFinalPoemVisible: PropTypes.bool.isRequired, + showFinalPoem: PropTypes.func.isRequired, +} + + + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..d8023d9c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,26 +13,49 @@ const Game = () => { } }).join(" "); + const [mostRecent, setMostRecent] = useState(''); + const [finalPoem, setFinalPoem] = useState([]); + const [isFinalPoemVisible, setIsFinalPoemVisible] = useState(false); + + const onSubmit = (sentence) => { + // Store it in an all sentence array + // Store it in most recent submission + setFinalPoem([...finalPoem, sentence]); + setMostRecent(sentence); + } + + + const showFinalPoem = () => { + setIsFinalPoemVisible(true); + } + + // conditional rendering + // hide recent submission if there is no recent submitted or final poem is showing + // hide player submission form if final poem is showing 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.

- +

+ 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 }

- - - - - - - -
- ); +
+ {mostRecent && !isFinalPoemVisible && } + {!isFinalPoemVisible && } + + + ) } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..3be52fe6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,24 +1,91 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { + //set state for current player number + const[currentPlayer, setCurrentPlayer] = useState(1); + // set state for the form input + const[formFields, setFormFields] = useState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); -
+ const fieldComponents = () => { + return ( + props.fields.map((field , i )=> { + if (typeof field === 'string') { + return ( +
+ {field} +
+ ) + } else { + return ( + + ) + } + }) + ) + } -
+ const onInputChange = (event) => { + const newFormField = { + ...formFields + } - { - // Put your form inputs here... We've put in one below as an example - } - + newFormField[event.target.name] = event.target.value; + setFormFields(newFormField); + } -
+ const onFormSubmit = (event) => { + event.preventDefault(); + let sentence_array = []; + props.fields.forEach(field => { + if (typeof field === 'string') { + sentence_array.push(field); + } else { + sentence_array.push(formFields[field.key]); + } + }); + + // Put all the words together in a sentence. + let sentence = sentence_array.join(' ') + props.onSubmitCallback(sentence); + + // reset state of the form + setFormFields({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }) + //reset Player + setCurrentPlayer(currentPlayer + 1); + } + + return ( +
+

Player Submission Form for Player #{currentPlayer}

+ +
+ {fieldComponents()} +
@@ -27,5 +94,9 @@ const PlayerSubmissionForm = () => { ); } +PlayerSubmissionForm.propTypes = { + fields: PropTypes.array.isRequired, + onSubmitCallback: PropTypes.func.isRequired +} export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..a51a37c2 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,20 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; + +const RecentSubmission = ({mostRecentSubmitted}) => { + -const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{mostRecentSubmitted}

); } +RecentSubmission.propTypes = { + mostRecentSubmitted: PropTypes.string.isRequired, +} + export default RecentSubmission;