From 792630eb220eaa1328a60a474689020f3349056a Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Wed, 22 Apr 2020 22:17:37 -0700 Subject: [PATCH 1/9] first draft of wave 1 Submission form --- src/components/Game.js | 13 +++- src/components/PlayerSubmissionForm.js | 84 ++++++++++++++++++++++---- 2 files changed, 83 insertions(+), 14 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..1cf94990 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,7 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; -const Game = () => { +const Game = (props) => { const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -12,6 +12,15 @@ const Game = () => { return field; } }).join(" "); + const [mostRecent, setMostRecent] = useState(''); + const [finalPoem, setFinalPoem] = useState([]); + + const onSubmit = (sentence) => { + // Store it in an all sentence array - located where? + // Store it in most recent submission var as a string + setFinalPoem([...finalPoem, sentence]); + setMostRecent(sentence); + } return (
@@ -27,7 +36,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..f3ed043f 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,24 +1,84 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { + + const[formFields, setFormFields] = useState({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + + const fieldComponents = () => { + return ( + props.fields.map(field => { + if (typeof field === 'string') { + return ( +
{field}
+ ) + } else { + return ( + + ) + } + }) + ) + } + + + const onInputChange = (event) => { + console.log(event.target); + const newFormField = { + ...formFields + } + + newFormField[event.target.name] = event.target.value; + setFormFields(newFormField); + } + + const onFormSubmit = (event) => { + event.preventDefault(); + let sentence = ''; + props.fields.forEach(field => { + if (typeof field === 'string') { + sentence += field; + } else { + sentence += formFields[field.key] + } + }); + // Put all the words together in a sentence. + props.onSubmitCallback(sentence); + // reset state + setFormFields({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }) + + + } + return (

Player Submission Form for Player #{ }

-
- +
- - { - // Put your form inputs here... We've put in one below as an example - } - - + {fieldComponents()}
-
From 71e566e2c9a09a5629a35ee477f4639e34512815 Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Wed, 22 Apr 2020 22:43:21 -0700 Subject: [PATCH 2/9] got the most recent submission to work --- src/components/Game.js | 3 ++- src/components/PlayerSubmissionForm.js | 7 ++++--- src/components/RecentSubmission.js | 6 ++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 1cf94990..a4b7c1b7 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -12,6 +12,7 @@ const Game = (props) => { return field; } }).join(" "); + const [mostRecent, setMostRecent] = useState(''); const [finalPoem, setFinalPoem] = useState([]); @@ -34,7 +35,7 @@ const Game = (props) => { { exampleFormat }

- + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f3ed043f..f8e162b6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -48,15 +48,16 @@ const PlayerSubmissionForm = (props) => { const onFormSubmit = (event) => { event.preventDefault(); - let sentence = ''; + let sentence_array = []; props.fields.forEach(field => { if (typeof field === 'string') { - sentence += field; + sentence_array.push(field); } else { - sentence += formFields[field.key] + sentence_array.push(formFields[field.key]); } }); // Put all the words together in a sentence. + let sentence = sentence_array.join(' ') props.onSubmitCallback(sentence); // reset state setFormFields({ diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..9d0296a6 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,11 +1,13 @@ import React from 'react'; import './RecentSubmission.css'; -const RecentSubmission = (props) => { +const RecentSubmission = ({mostRecentSubmitted}) => { + + return (

The Most Recent Submission

-

{ }

+

{mostRecentSubmitted}

); } From ba06fdc6e6fa92949a3538dd81a4ae2549cdbece Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Wed, 22 Apr 2020 22:49:04 -0700 Subject: [PATCH 3/9] first draft for final poem display --- src/components/FinalPoem.js | 10 +++++++--- src/components/Game.js | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..fc1ae72a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,13 +1,17 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { - +const FinalPoem = ({finalPoemSubmitted}) => { + const finalPoemDisplayed = finalPoemSubmitted.map((sentence) => { + return ( +

{sentence}

+ ) + }) return (

Final Poem

- + {finalPoemDisplayed}
diff --git a/src/components/Game.js b/src/components/Game.js index a4b7c1b7..517fe81a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -39,7 +39,7 @@ const Game = (props) => { - +
); From ecedcf3fb767f9875f0d4001c65bbbe20331a7fd Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 00:21:00 -0700 Subject: [PATCH 4/9] added conditional rendering/ player numbers --- src/components/FinalPoem.js | 28 +++++++++++++------ src/components/Game.js | 38 +++++++++++++++++--------- src/components/PlayerSubmissionForm.js | 14 +++++++--- 3 files changed, 55 insertions(+), 25 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index fc1ae72a..62b7d5b1 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,22 +1,34 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = ({finalPoemSubmitted}) => { +const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => { + + const finalPoemDisplayed = finalPoemSubmitted.map((sentence) => { return (

{sentence}

) }) + return (
-
-

Final Poem

- {finalPoemDisplayed} -
+ {isFinalPoemVisible && ( +
+

Final Poem

+ {finalPoemDisplayed} +
+ )} -
- -
+ {!isFinalPoemVisible && ( +
+ +
+ )}
); } diff --git a/src/components/Game.js b/src/components/Game.js index 517fe81a..6f5ff816 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -15,6 +15,7 @@ const Game = (props) => { const [mostRecent, setMostRecent] = useState(''); const [finalPoem, setFinalPoem] = useState([]); + const [isFinalPoemVisible, setIsFinalPoemVisible] = useState(false); const onSubmit = (sentence) => { // Store it in an all sentence array - located where? @@ -23,26 +24,37 @@ const Game = (props) => { setMostRecent(sentence); } + + const showFinalPoem = () => { + setIsFinalPoemVisible(true); + } + + // conditional rendering + // hide recent submission if there is none 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 f8e162b6..c6c961f3 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,7 +2,9 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; 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: '', @@ -56,10 +58,12 @@ const PlayerSubmissionForm = (props) => { sentence_array.push(formFields[field.key]); } }); + // Put all the words together in a sentence. let sentence = sentence_array.join(' ') props.onSubmitCallback(sentence); - // reset state + + // reset state of the form setFormFields({ adj1: '', noun1: '', @@ -69,12 +73,14 @@ const PlayerSubmissionForm = (props) => { noun2: '', }) - + //reset Player + console.log(currentPlayer) + setCurrentPlayer(currentPlayer + 1); } return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{currentPlayer}

From 8ee3374122e05a81754a73aec3cb06fadc27fad7 Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 00:48:22 -0700 Subject: [PATCH 5/9] minor changes/ clean up --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 62b7d5b1..ed1bf151 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -9,7 +9,7 @@ const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => {

{sentence}

) }) - + //conditional rendering depending on whether the final poem is showing or not return (
{isFinalPoemVisible && ( diff --git a/src/components/Game.js b/src/components/Game.js index 6f5ff816..a694f3a5 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -18,8 +18,8 @@ const Game = (props) => { const [isFinalPoemVisible, setIsFinalPoemVisible] = useState(false); const onSubmit = (sentence) => { - // Store it in an all sentence array - located where? - // Store it in most recent submission var as a string + // Store it in an all sentence array + // Store it in most recent submission setFinalPoem([...finalPoem, sentence]); setMostRecent(sentence); } @@ -30,7 +30,8 @@ const Game = (props) => { } // conditional rendering - // hide recent submission if there is none + // hide recent submission if there is no recent submitted or final poem is showing + // hide player submission form if final poem is showing return (
From 3b94667a2fc65eea712ae530a1021cd7328110ec Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 01:27:01 -0700 Subject: [PATCH 6/9] adding pink into blank form --- src/components/PlayerSubmissionForm.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index c6c961f3..7588081d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -25,6 +25,7 @@ const PlayerSubmissionForm = (props) => { return ( { ) } - const onInputChange = (event) => { console.log(event.target); const newFormField = { @@ -81,9 +81,8 @@ const PlayerSubmissionForm = (props) => { return (

Player Submission Form for Player #{currentPlayer}

- -
+
{fieldComponents()}
From 2f9603f93ca36a64b239bb2ed7bac66697a53bc1 Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 01:48:02 -0700 Subject: [PATCH 7/9] adding unique keys --- src/components/FinalPoem.js | 6 ++++-- src/components/PlayerSubmissionForm.js | 11 +++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ed1bf151..4530bfa0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -4,9 +4,11 @@ import './FinalPoem.css'; const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => { - const finalPoemDisplayed = finalPoemSubmitted.map((sentence) => { + const finalPoemDisplayed = finalPoemSubmitted.map((sentence , i) => { return ( -

{sentence}

+

+ {sentence} +

) }) //conditional rendering depending on whether the final poem is showing or not diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 7588081d..f37cd130 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; const PlayerSubmissionForm = (props) => { //set state for current player number @@ -16,10 +17,12 @@ const PlayerSubmissionForm = (props) => { const fieldComponents = () => { return ( - props.fields.map(field => { + props.fields.map((field , i )=> { if (typeof field === 'string') { return ( -
{field}
+
+ {field} +
) } else { return ( @@ -39,7 +42,6 @@ const PlayerSubmissionForm = (props) => { } const onInputChange = (event) => { - console.log(event.target); const newFormField = { ...formFields } @@ -74,7 +76,6 @@ const PlayerSubmissionForm = (props) => { }) //reset Player - console.log(currentPlayer) setCurrentPlayer(currentPlayer + 1); } @@ -93,5 +94,7 @@ const PlayerSubmissionForm = (props) => { ); } +PlayerSubmissionForm.propTypes = { +} export default PlayerSubmissionForm; From 8e4d9b154c0570f49d18a1ab29f5d0cfb88ca0c5 Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 01:59:30 -0700 Subject: [PATCH 8/9] added some propTypes --- src/components/FinalPoem.js | 10 ++++++++++ src/components/PlayerSubmissionForm.js | 1 + src/components/RecentSubmission.js | 5 +++++ 3 files changed, 16 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 4530bfa0..429f7965 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,5 +1,6 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => { @@ -35,4 +36,13 @@ const FinalPoem = ({finalPoemSubmitted, isFinalPoemVisible, showFinalPoem}) => { ); } + +FinalPoem.propTypes = { + finalPoemSubmitted: PropTypes.array.isRequired, + isFinalPoemVisible: PropTypes.bool.isRequired, + showFinalPoem: PropTypes.func.isRequired, +} + + + export default FinalPoem; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f37cd130..dfbfe2f2 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -95,6 +95,7 @@ const PlayerSubmissionForm = (props) => { } PlayerSubmissionForm.propTypes = { + } export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 9d0296a6..a51a37c2 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,5 +1,6 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = ({mostRecentSubmitted}) => { @@ -12,4 +13,8 @@ const RecentSubmission = ({mostRecentSubmitted}) => { ); } +RecentSubmission.propTypes = { + mostRecentSubmitted: PropTypes.string.isRequired, +} + export default RecentSubmission; From adb50c81bc619b7b3a75ca8b260ab0e5ff3c7bf5 Mon Sep 17 00:00:00 2001 From: Sharon Cheung Date: Thu, 23 Apr 2020 02:06:02 -0700 Subject: [PATCH 9/9] added more propTypes --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index a694f3a5..d8023d9c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,7 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; -const Game = (props) => { +const Game = () => { const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index dfbfe2f2..3be52fe6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -95,7 +95,8 @@ const PlayerSubmissionForm = (props) => { } PlayerSubmissionForm.propTypes = { - + fields: PropTypes.array.isRequired, + onSubmitCallback: PropTypes.func.isRequired } export default PlayerSubmissionForm;