From b46782f661e45494964dd0b4897ec65e5e06dfd8 Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 04:35:35 -0800 Subject: [PATCH 1/7] added form inputs and onChange and onSubmit functions --- src/components/Game.js | 6 +- src/components/PlayerSubmissionForm.js | 89 +++++++++++++++++++++++--- 2 files changed, 85 insertions(+), 10 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ef28c693..c46a481a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,10 @@ const Game = () => { } }).join(' '); + const addLineToPoem = (line) => { + return console.log(line); + } + return (

Game

@@ -27,7 +31,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 370a1f75..f95aead5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,22 +3,93 @@ import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const emptySentence = { + articleOne: 'The', + adj1: '', + noun1: '', + adv: '', + verb: '', + articleTwo:'the', + adj2: '', + noun2: '', + puncOne: '.' +} + +const PlayerSubmissionForm = (props) => { + const [formFields, setFormFields] = useState(emptySentence) + + const onFormChange = (event) => { + formFields[event.target.name] = event.target.value + console.log(formFields) + setFormFields(formFields) + } + + const onFormSubmit = (event) => { + event.preventDefault(); + console.log(formFields) + + props.addLineCallback(formFields) + setFormFields(emptySentence) + } + return (

Player Submission Form for Player #{ }

-
+
- - { - // Put your form inputs here... We've put in one below as an example - } + The - + id="adj1" + name="adj1" + placeholder="adjective" + type="text" + onChange={onFormChange} + value={formFields.adj1} + /> + + + + the + + + .
From 8f23d120608629fbf756491250a56040f6b9d39b Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 05:16:42 -0800 Subject: [PATCH 2/7] made changes based on propType --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 45 +++++++++++++++----------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index c46a481a..b0bef107 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -31,7 +31,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f95aead5..b865f6bd 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -16,25 +16,34 @@ const emptySentence = { } const PlayerSubmissionForm = (props) => { - const [formFields, setFormFields] = useState(emptySentence) - - const onFormChange = (event) => { - formFields[event.target.name] = event.target.value - console.log(formFields) - setFormFields(formFields) + // states + const [formFields, setFormFields] = useState({...emptySentence}); + const [currentPlayer, setCurrentPlayer] = useState(1) + + // event handlers + const onInputChange = (event) => { + const newFormFields = {...formFields} + newFormFields[event.target.id] = event.target.value; + setFormFields(newFormFields); + console.log(newFormFields); + console.log(Object.values(newFormFields)); } - + const onFormSubmit = (event) => { event.preventDefault(); - console.log(formFields) - - props.addLineCallback(formFields) + const newSentence = Object.values(formFields).join(' ') + + console.log(newSentence) + + props.sendSubmission(newSentence); + setCurrentPlayer(currentPlayer + 1) setFormFields(emptySentence) - } + }; + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ currentPlayer }

@@ -45,7 +54,7 @@ const PlayerSubmissionForm = (props) => { name="adj1" placeholder="adjective" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.adj1} /> { name="noun1" placeholder="noun" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.noun1} /> { name="adv" placeholder="adverb" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.adv} /> { name="verb" placeholder="verb" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.verb} /> the @@ -78,7 +87,7 @@ const PlayerSubmissionForm = (props) => { name="adj2" placeholder="adjective" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.adj2} /> { name="noun2" placeholder="noun" type="text" - onChange={onFormChange} + onChange={onInputChange} value={formFields.noun2} /> . From f6698f3b5abfada1b46cc2ecd41ac319bae2074b Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 06:18:33 -0800 Subject: [PATCH 3/7] added finished wave 0 solution --- src/components/Game.js | 5 ++++- src/components/PlayerSubmissionForm.js | 10 ++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index b0bef107..55a90214 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,7 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + const [allSubmissions, setAllSubmissions] = useState([]) const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -14,7 +15,9 @@ const Game = () => { }).join(' '); const addLineToPoem = (line) => { - return console.log(line); + const newSubmission = [...allSubmissions]; + newSubmission.push(line) + setAllSubmissions(newSubmission) } return ( diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index b865f6bd..b4b41a70 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -25,19 +25,17 @@ const PlayerSubmissionForm = (props) => { const newFormFields = {...formFields} newFormFields[event.target.id] = event.target.value; setFormFields(newFormFields); - console.log(newFormFields); - console.log(Object.values(newFormFields)); } const onFormSubmit = (event) => { event.preventDefault(); - const newSentence = Object.values(formFields).join(' ') - - console.log(newSentence) + + const newSentence = Object.values(formFields).join(' '); props.sendSubmission(newSentence); + setCurrentPlayer(currentPlayer + 1) - setFormFields(emptySentence) + setFormFields({...emptySentence}) }; From e152e04dbde953e9f413200881a5a6843ab74157 Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 06:26:09 -0800 Subject: [PATCH 4/7] added solution for wave 1 --- src/components/FinalPoem.js | 6 +++++- src/components/Game.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index b466d849..522db2b5 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,12 +3,16 @@ import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = (props) => { + const finalPoem = props.submissions.map(sentence => { + return

{sentence}

+ }) + return (

Final Poem

- + {finalPoem}
diff --git a/src/components/Game.js b/src/components/Game.js index 55a90214..7f3a7ad1 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -36,7 +36,7 @@ const Game = () => { - +
); From 628d2a688a4d7f410ebf476160434401981755de Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 06:31:49 -0800 Subject: [PATCH 5/7] added the recentSubmissions solution --- src/components/Game.js | 2 +- src/components/RecentSubmission.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 7f3a7ad1..7674185e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -32,7 +32,7 @@ const Game = () => { { exampleFormat }

- + diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 4cf7b542..7b00c2ed 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -6,7 +6,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.mostRecentSubmission }

); } From d2cd31900b5a978ee18d8b4f067bdbd86b7e7471 Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 07:32:55 -0800 Subject: [PATCH 6/7] added solution to wave 3 --- src/components/FinalPoem.css | 4 ++++ src/components/FinalPoem.js | 13 ++++++++++-- src/components/Game.css | 4 ++++ src/components/Game.js | 29 ++++++++++++++++++-------- src/components/PlayerSubmissionForm.js | 1 + 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..953ff9d5 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -19,3 +19,7 @@ .FinalPoem__poem { border-bottom: 2px gray dashed; } + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 522db2b5..c1f0712d 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,20 +3,29 @@ import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = (props) => { + // variables + const revealState = props.revealState + + // creat list of all submissions const finalPoem = props.submissions.map(sentence => { return

{sentence}

}) +// event handler + const onPoemReveal = () => { + props.onRevealPoemCallback(revealState) + } + return (
-
+

Final Poem

{finalPoem}
- +
); diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..a65847df 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,7 @@ text-align: center; font-style: italic; } + +.hide { + display: none; +} \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 7674185e..68aa0427 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,7 +5,11 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + // state const [allSubmissions, setAllSubmissions] = useState([]) + const [revealed, setRevealed] = useState(false) + + // dynamically make example sentence const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -14,10 +18,15 @@ const Game = () => { } }).join(' '); + // helper functions const addLineToPoem = (line) => { const newSubmission = [...allSubmissions]; - newSubmission.push(line) - setAllSubmissions(newSubmission) + newSubmission.push(line); + setAllSubmissions(newSubmission); + } + + const revealFinalPoem = () => { + setRevealed(true) } return ( @@ -31,13 +40,15 @@ const Game = () => {

{ exampleFormat }

- - - - - - - +
+ +
+
+ +
+
+ +
); } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index b4b41a70..28bd0892 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; +// initial values for formFields const emptySentence = { articleOne: 'The', adj1: '', From fed82b658aa91906aeed47ffb2c546a67b0c91ec Mon Sep 17 00:00:00 2001 From: Marj E Date: Fri, 8 Jan 2021 07:39:46 -0800 Subject: [PATCH 7/7] added input styling for empty fields --- src/components/PlayerSubmissionForm.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 28bd0892..733c55d6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -55,6 +55,7 @@ const PlayerSubmissionForm = (props) => { type="text" onChange={onInputChange} value={formFields.adj1} + className={formFields.adj1 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> { type="text" onChange={onInputChange} value={formFields.noun1} + className={formFields.noun1 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> { type="text" onChange={onInputChange} value={formFields.adv} + className={formFields.adv === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> { type="text" onChange={onInputChange} value={formFields.verb} + className={formFields.verb === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> the { type="text" onChange={onInputChange} value={formFields.adj2} + className={formFields.adj2 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> { type="text" onChange={onInputChange} value={formFields.noun2} + className={formFields.noun2 === '' ? 'PlayerSubmissionFormt__input--invalid' : ''} /> .