From 53bdfab10aaab32311c7768c778b4ca83c913c64 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Tue, 21 Apr 2020 23:00:03 -0700 Subject: [PATCH 1/7] Sub Form- submit and Change event --- src/components/PlayerSubmissionForm.js | 86 ++++++++++++++++++++++---- 1 file changed, 73 insertions(+), 13 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..221ff6b4 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,91 @@ -import React, { useState } from 'react'; -import './PlayerSubmissionForm.css'; +import React, { useState } from "react"; +import "./PlayerSubmissionForm.css"; const PlayerSubmissionForm = () => { + const initialState = { + adjective: "", + noun: "", + adverb: "", + verb: "", + adjectiveTwo: "", + nounTwo: "", + }; + const [formFields, setFormFields] = useState(initialState); + + const onInputChange = (event) => { + console.log(`Changing field ${event.target.name} to ${event.target.value}`); + const newFormField = { + ...formFields, + }; + newFormField[event.target.name] = event.target.value; + setFormFields(newFormField); + }; + + const onFormSubmit = (event) => { + event.preventDefault(); + setFormFields({ + ...initialState, + }); + }; + return (
-

Player Submission Form for Player #{ }

- -
+

Player Submission Form for Player #{}

+
- { // Put your form inputs here... We've put in one below as an example } + The - + name="adjective" + placeholder="adjective" + onChange={onInputChange} + value={formFields.adjective} + /> + + + + the + +
-
- +
); -} - +}; export default PlayerSubmissionForm; From 47902af1e5277dfad17d0624265562200e0c1485 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Wed, 22 Apr 2020 12:41:23 -0700 Subject: [PATCH 2/7] updated the varible names to match --- src/components/PlayerSubmissionForm.js | 34 +++++++++++++------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 221ff6b4..8dec46bf 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,27 +3,27 @@ import "./PlayerSubmissionForm.css"; const PlayerSubmissionForm = () => { const initialState = { - adjective: "", + adj1: "", noun: "", - adverb: "", + adv: "", verb: "", - adjectiveTwo: "", - nounTwo: "", + adj2: "", + noun2: "", }; - const [formFields, setFormFields] = useState(initialState); + const [sentence, setSentence] = useState(initialState); const onInputChange = (event) => { console.log(`Changing field ${event.target.name} to ${event.target.value}`); const newFormField = { - ...formFields, + ...sentence, }; newFormField[event.target.name] = event.target.value; - setFormFields(newFormField); + setSentence(newFormField); }; const onFormSubmit = (event) => { event.preventDefault(); - setFormFields({ + setSentence({ ...initialState, }); }; @@ -39,40 +39,40 @@ const PlayerSubmissionForm = () => { } The the
From 7d928de64e6d6816a4eabeda6f7fed95dae37109 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Wed, 22 Apr 2020 17:59:46 -0700 Subject: [PATCH 3/7] updated Player Subform --- src/components/PlayerSubmissionForm.js | 39 +++++++++++++++++--------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 8dec46bf..fa1d0fd5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,10 +1,11 @@ import React, { useState } from "react"; import "./PlayerSubmissionForm.css"; +import PropTypes from "prop-types"; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { const initialState = { adj1: "", - noun: "", + noun1: "", adv: "", verb: "", adj2: "", @@ -14,23 +15,27 @@ const PlayerSubmissionForm = () => { const onInputChange = (event) => { console.log(`Changing field ${event.target.name} to ${event.target.value}`); - const newFormField = { + const setNewSentence = { ...sentence, }; - newFormField[event.target.name] = event.target.value; - setSentence(newFormField); + setNewSentence[event.target.name] = event.target.value; + setSentence(setNewSentence); }; - const onFormSubmit = (event) => { + const [player, nextPlayer] = useState(1); + + const onSentenceSubmit = (event) => { event.preventDefault(); + props.callbackSentenceForm(sentence); setSentence({ ...initialState, }); + nextPlayer(player + 1); }; return ( -
-

Player Submission Form for Player #{}

+
+

Player Submission Form for Player #{props.player}

@@ -45,20 +50,21 @@ const PlayerSubmissionForm = () => { value={sentence.adj1} /> the @@ -69,7 +75,7 @@ const PlayerSubmissionForm = () => { value={sentence.adj2} /> {
{ ); }; +PlayerSubmissionForm.propTypes = { + player: PropTypes.number.isRequired, + fields: PropTypes.object.isRequired, + callbackSentenceForm: PropTypes.func.isRequired, +}; + export default PlayerSubmissionForm; From c23b2cab9dd796b83ccfaf09a41e26df9b55a6d8 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Thu, 23 Apr 2020 00:07:36 -0700 Subject: [PATCH 4/7] changed vars names & rem proptypes minus Playsub --- src/components/FinalPoem.js | 42 ++++++++++--- src/components/Game.js | 82 +++++++++++++++++--------- src/components/PlayerSubmissionForm.js | 11 ++-- src/components/RecentSubmission.js | 19 ++++-- 4 files changed, 108 insertions(+), 46 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..98405905 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,46 @@ -import React from 'react'; -import './FinalPoem.css'; +import React, { useState } from "react"; +import "./FinalPoem.css"; -const FinalPoem = (props) => { +const FinalPoem = ({ poem, onSubmitCallBack }) => { + // hooks/state organized here + const [showPoem, setShowPoem] = useState(""); + const [showFinalPoemButton, setShowFinalPoemButton] = useState(true); + let finalPoemSentence = []; + + poem.forEach((poemLine) => { + finalPoemSentence.push(Object.values(poemLine).join(" ").concat(".")); + }); + + const onFinalPoemButtonClick = (event) => { + // prevent default behavior + event.preventDefault(); + + let finalPoem = finalPoemSentence.join("\n"); + setShowPoem(finalPoem); + onSubmitCallBack(false); + setShowFinalPoemButton(false); + }; return (
-
+

Final Poem

+ {showPoem}
-
- -
+ {showFinalPoemButton && ( +
+ +
+ )}
); -} +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..9958edcd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,10 +1,14 @@ -import React, { useState } from 'react'; -import './Game.css'; -import PlayerSubmissionForm from './PlayerSubmissionForm'; -import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; +import React, { useState } from "react"; +import "./Game.css"; +import PlayerSubmissionForm from "./PlayerSubmissionForm"; +import FinalPoem from "./FinalPoem"; +import RecentSubmission from "./RecentSubmission"; const Game = () => { + const [currentSentence, nextSentence] = useState([]); + const [submissions, setSubmissions] = useState(false); + const [showPoem, changeShowPoem] = useState(true); + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,55 +17,79 @@ const Game = () => { } }).join(" "); + const showRecentSubmission = (sentence) => { + const newSentenceList = [...currentSentence]; + + newSentenceList.push(sentence); + + nextSentence(newSentenceList); + setSubmissions(true); + }; + + const hidePlayerSubmissionForm = (value) => { + changeShowPoem(value); + setSubmissions(false); + }; + 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 } -

- - +

{exampleFormat}

- + {submissions && } - + {showPoem && ( + + )} +
); -} - +}; const FIELDS = [ "The", { - key: 'adj1', - placeholder: 'adjective', + key: "adj1", + placeholder: "adjective", }, { - key: 'noun1', - placeholder: 'noun', + key: "noun1", + placeholder: "noun", }, { - key: 'adv', - placeholder: 'adverb', + key: "adv", + placeholder: "adverb", }, { - key: 'verb', - placeholder: 'verb', + key: "verb", + placeholder: "verb", }, "the", { - key: 'adj2', - placeholder: 'adjective', + key: "adj2", + placeholder: "adjective", }, { - key: 'noun2', - placeholder: 'noun', + key: "noun2", + placeholder: "noun", }, ".", ]; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index fa1d0fd5..cf7cdf91 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -4,17 +4,19 @@ import PropTypes from "prop-types"; const PlayerSubmissionForm = (props) => { const initialState = { + the1: "The ", adj1: "", noun1: "", adv: "", verb: "", + the2: "the ", adj2: "", noun2: "", }; const [sentence, setSentence] = useState(initialState); const onInputChange = (event) => { - console.log(`Changing field ${event.target.name} to ${event.target.value}`); + // console.log(`Changing field ${event.target.name} to ${event.target.value}`); const setNewSentence = { ...sentence, }; @@ -22,22 +24,19 @@ const PlayerSubmissionForm = (props) => { setSentence(setNewSentence); }; - const [player, nextPlayer] = useState(1); - const onSentenceSubmit = (event) => { event.preventDefault(); props.callbackSentenceForm(sentence); setSentence({ ...initialState, }); - nextPlayer(player + 1); }; return ( -
+

Player Submission Form for Player #{props.player}

- +
{ // Put your form inputs here... We've put in one below as an example diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..e30f14f6 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,22 @@ -import React from 'react'; -import './RecentSubmission.css'; +import React from "react"; +import "./RecentSubmission.css"; + +const RecentSubmission = ({ poem }) => { + let submission = []; + const recentSubmission = poem.slice(-1)[0]; + + if (recentSubmission === undefined) { + submission.push(" "); + } else { + submission.push(Object.values(recentSubmission).join(" ").concat(".")); + } -const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{submission}

); -} +}; export default RecentSubmission; From c020e0fb200dd4ee0fe541bb92b07446e125af6c Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Thu, 23 Apr 2020 00:31:51 -0700 Subject: [PATCH 5/7] updated & added comments & removed fields proptype --- src/components/FinalPoem.js | 9 +++++---- src/components/Game.js | 7 ++++++- src/components/PlayerSubmissionForm.js | 1 - src/components/RecentSubmission.js | 2 ++ 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 98405905..5042d9a2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,8 +2,8 @@ import React, { useState } from "react"; import "./FinalPoem.css"; const FinalPoem = ({ poem, onSubmitCallBack }) => { - // hooks/state organized here - const [showPoem, setShowPoem] = useState(""); + // hooks/state organized here // used another help in this section + const [revealPoem, setRevealPoem] = useState(""); const [showFinalPoemButton, setShowFinalPoemButton] = useState(true); let finalPoemSentence = []; @@ -15,8 +15,9 @@ const FinalPoem = ({ poem, onSubmitCallBack }) => { // prevent default behavior event.preventDefault(); + // creates final poem let finalPoem = finalPoemSentence.join("\n"); - setShowPoem(finalPoem); + setRevealPoem(finalPoem); onSubmitCallBack(false); setShowFinalPoemButton(false); }; @@ -26,7 +27,7 @@ const FinalPoem = ({ poem, onSubmitCallBack }) => {

Final Poem

- {showPoem} + {revealPoem}
{showFinalPoemButton && ( diff --git a/src/components/Game.js b/src/components/Game.js index 9958edcd..f2696d3c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,8 +5,12 @@ import FinalPoem from "./FinalPoem"; import RecentSubmission from "./RecentSubmission"; const Game = () => { + // keep track of current sentence const [currentSentence, nextSentence] = useState([]); + // holds subs or all sentences const [submissions, setSubmissions] = useState(false); + + //reveal poem const [showPoem, changeShowPoem] = useState(true); const exampleFormat = FIELDS.map((field) => { @@ -17,6 +21,7 @@ const Game = () => { } }).join(" "); + // used hold a list of sentence that make the final poem const showRecentSubmission = (sentence) => { const newSentenceList = [...currentSentence]; @@ -46,7 +51,7 @@ const Game = () => {

Please follow the following format for your poetry submission:

{exampleFormat}

- + {/* keeps all subs an recent sub together */} {submissions && } {showPoem && ( diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index cf7cdf91..eb15244d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -94,7 +94,6 @@ const PlayerSubmissionForm = (props) => { PlayerSubmissionForm.propTypes = { player: PropTypes.number.isRequired, - fields: PropTypes.object.isRequired, callbackSentenceForm: PropTypes.func.isRequired, }; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index e30f14f6..bad3f2d1 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,9 +5,11 @@ const RecentSubmission = ({ poem }) => { let submission = []; const recentSubmission = poem.slice(-1)[0]; + //recentSubmission will be undefined if (recentSubmission === undefined) { submission.push(" "); } else { + // push to submission object values of the poem and spliting submission.push(Object.values(recentSubmission).join(" ").concat(".")); } From 486e1d17244c16d1215775eda66952432fdc6a27 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Thu, 23 Apr 2020 19:30:33 -0700 Subject: [PATCH 6/7] working on css --- src/components/PlayerSubmissionForm.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..47d8525b 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -32,9 +32,13 @@ } .PlayerSubmissionFormt__input--invalid { - background-color: #FFE9E9; + background-color: #ffe9e9; } .PlayerSubmissionForm__input--invalid::placeholder { color: black; } + +.InputColor { + color: pink; +} From 0c29f6f7f48f49baab4b606092f075254f0d0757 Mon Sep 17 00:00:00 2001 From: Shonda860 Date: Thu, 23 Apr 2020 19:31:35 -0700 Subject: [PATCH 7/7] update to null per mosh --- src/components/RecentSubmission.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index bad3f2d1..b620cb71 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -6,7 +6,7 @@ const RecentSubmission = ({ poem }) => { const recentSubmission = poem.slice(-1)[0]; //recentSubmission will be undefined - if (recentSubmission === undefined) { + if (recentSubmission === null) { submission.push(" "); } else { // push to submission object values of the poem and spliting