From fb1b0abff86dd8fbf42ef3333e23fbf4a402f7f9 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 16:53:29 -0700 Subject: [PATCH 01/21] adds player and fieldInput default states, passes to PlayerSubmissionForm --- src/components/Game.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..9ad4e6bd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,6 +13,9 @@ const Game = () => { } }).join(" "); + const [ fieldInput, setFieldInput ] = useState(FIELDS); + const [ player, setPlayer ] = useState("1"); + return (

Game

@@ -27,7 +30,7 @@ const Game = () => { - + From 40d2aecf6cc038c8a47efda9406f354bdd3ec445 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 16:54:27 -0700 Subject: [PATCH 02/21] adds text fields, updates styling --- src/components/PlayerSubmissionForm.css | 9 +++ src/components/PlayerSubmissionForm.js | 76 ++++++++++++++++++++++--- 2 files changed, 77 insertions(+), 8 deletions(-) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..0f2c74dd 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -12,6 +12,15 @@ justify-content: space-around; } +.PlayerSubmissionForm__poem-inputs div { + display: flex; + align-content: center; +} + +.PlayerSubmissionForm__poem-inputs label { + display: none; +} + .PlayerSubmissionForm__submit { display: flex; justify-content: center; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..963d60b7 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,21 +1,81 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { +const PlayerSubmissionForm = (props) => { + return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{props.player}

- { - // Put your form inputs here... We've put in one below as an example - } - +
+ {props.fields[0]} +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {props.fields[5]} +
+ +
+ + +
+ +
+ + +
+ +
+ {props.fields[8]} +
From 0afd4a202e75e4a55acd591f0f1f97f227a26e48 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 18:18:20 -0700 Subject: [PATCH 03/21] moves fieldInput and setFieldInput to PlayerSubmissionForm, adds onInputChange event handler, simplifies return function --- src/components/Game.js | 3 +- src/components/PlayerSubmissionForm.js | 90 +++++++++++++++++--------- 2 files changed, 61 insertions(+), 32 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 9ad4e6bd..cefc5055 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,7 +13,6 @@ const Game = () => { } }).join(" "); - const [ fieldInput, setFieldInput ] = useState(FIELDS); const [ player, setPlayer ] = useState("1"); return ( @@ -30,7 +29,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 963d60b7..1fe5e5d1 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,85 +2,115 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = (props) => { - + const [ fieldInput, setFieldInput ] = useState( + { + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + } + ); + + const onInputChange = (event) => { + const { name, value } = event.target + + const newFieldInput = { + ...fieldInput, + [name]: value, + }; + + setFieldInput(newFieldInput); + }; + return (

Player Submission Form for Player #{props.player}

- +
- {props.fields[0]} + The
- +
- +
- +
- +
- {props.fields[5]} + the
- +
- +
- {props.fields[8]} + .
- +
From e8bc57a77b1d7352e18dbe09408dd7ae998eb802 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 19:03:10 -0700 Subject: [PATCH 04/21] adds onSubmit event listener and onFormSubmit event handler --- src/components/PlayerSubmissionForm.js | 41 ++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1fe5e5d1..c5093421 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,16 +2,15 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = (props) => { - const [ fieldInput, setFieldInput ] = useState( - { + + const [ fieldInput, setFieldInput ] = useState({ adj1: '', noun1: '', adv: '', verb: '', adj2: '', noun2: '', - } - ); + }); const onInputChange = (event) => { const { name, value } = event.target @@ -24,11 +23,40 @@ const PlayerSubmissionForm = (props) => { setFieldInput(newFieldInput); }; + const onFormSubmit = (event) => { + event.preventDefault(); + + const checkFields = (fields) => { + for (const key in fields) { + if (fields[key] === '') { + return false; + }; + }; + return true; + }; + + console.log(checkFields(fieldInput)); + + if (checkFields(fieldInput)) { + // add callback function here, which passes fieldInput to Game + console.log(fieldInput); + + setFieldInput({ + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + }); + }; + }; + return (

Player Submission Form for Player #{props.player}

-
+
@@ -110,7 +138,8 @@ const PlayerSubmissionForm = (props) => { + className="PlayerSubmissionForm__submit-btn" + />
From aec873133d8409d660e4b64cc5d0998fb8cedb40 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 19:54:07 -0700 Subject: [PATCH 05/21] adds onLineSubmitCallback function to Game and calls it in PlayerSubmissionForm --- src/components/Game.js | 10 ++++++++-- src/components/PlayerSubmissionForm.js | 9 +++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index cefc5055..df8fc65b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,7 +13,13 @@ const Game = () => { } }).join(" "); - const [ player, setPlayer ] = useState("1"); + const [ player, setPlayer ] = useState(1); + const [ playerSubmission, setPlayerSubmission ] = useState(null); // gonna pass formSubmission into RecentSubmission + + const onLineSubmitCallback = (formInput) => { + setPlayer(player+1); + setPlayerSubmission(formInput); + }; return (
@@ -29,7 +35,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index c5093421..d15ff3f4 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = (props) => { +const PlayerSubmissionForm = ({ player, onLineSubmitCallback }) => { const [ fieldInput, setFieldInput ] = useState({ adj1: '', @@ -35,11 +35,8 @@ const PlayerSubmissionForm = (props) => { return true; }; - console.log(checkFields(fieldInput)); - if (checkFields(fieldInput)) { - // add callback function here, which passes fieldInput to Game - console.log(fieldInput); + onLineSubmitCallback(fieldInput); setFieldInput({ adj1: '', @@ -54,7 +51,7 @@ const PlayerSubmissionForm = (props) => { return (
-

Player Submission Form for Player #{props.player}

+

Player Submission Form for Player #{player}

From 66e50a782ea238c6692fa2d451334f8098df7f64 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 21:13:41 -0700 Subject: [PATCH 06/21] expands onLineSubmitCallback, saves form data in an array, converts form data to a string for RecentSubmission --- src/components/Game.js | 18 +++++++++++++++--- src/components/RecentSubmission.js | 5 +++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index df8fc65b..8585e19a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,11 +14,23 @@ const Game = () => { }).join(" "); const [ player, setPlayer ] = useState(1); - const [ playerSubmission, setPlayerSubmission ] = useState(null); // gonna pass formSubmission into RecentSubmission + const [ playerSubmission, setPlayerSubmission ] = useState(null); + const [ submissionList, setSubmissionList ] = useState([]); const onLineSubmitCallback = (formInput) => { + + const newSubmissionList = [...submissionList]; + + newSubmissionList.push({ + id: player, + ...formInput, + }); + + setSubmissionList(newSubmissionList); + + setPlayerSubmission(`The ${formInput.adj1} ${formInput.noun1} ${formInput.adv} ${formInput.verb} the ${formInput.adj2} ${formInput.noun2}.`); + setPlayer(player+1); - setPlayerSubmission(formInput); }; return ( @@ -33,7 +45,7 @@ const Game = () => { { exampleFormat }

- + diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..81d4969c 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,11 +1,12 @@ import React from 'react'; import './RecentSubmission.css'; -const RecentSubmission = (props) => { +const RecentSubmission = ({ line }) => { + console.log(line); return (

The Most Recent Submission

-

{ }

+

{line}

); } From 277672f90cbb1a84bad7eb9f1d2cda0da6f4ed60 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 21:38:07 -0700 Subject: [PATCH 07/21] passes submissionList into FinalPoem and renders, onClick event listener not added to button yet --- src/components/FinalPoem.js | 12 +++++++++--- src/components/Game.js | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..ccb2ad4e 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,17 +1,23 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = (props) => { +const FinalPoem = ({ submissions }) => { + + const finalPoem = submissions.map(submission => `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}.`); return (

Final Poem

- + {finalPoem}
- +
); diff --git a/src/components/Game.js b/src/components/Game.js index 8585e19a..f3e992cd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -49,7 +49,7 @@ const Game = () => { - +
); From 933e6606742d2d1e3d188c00f5102272388f7813 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 22:48:46 -0700 Subject: [PATCH 08/21] adds onButtonClickCallback function for FinalPoem, displays poem when button is clicked --- src/components/FinalPoem.css | 4 ++++ src/components/FinalPoem.js | 6 +++--- src/components/Game.js | 15 ++++++++++----- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..2839ca9b 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -19,3 +19,7 @@ .FinalPoem__poem { border-bottom: 2px gray dashed; } + +.FinalPoem__noshow { + display: none; +} diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ccb2ad4e..d3adb22e 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,13 +1,12 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = ({ submissions }) => { - +const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { const finalPoem = submissions.map(submission => `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}.`); return (
-
+

Final Poem

{finalPoem}
@@ -17,6 +16,7 @@ const FinalPoem = ({ submissions }) => { type="button" value="We are finished: Reveal the Poem" className="FinalPoem__reveal-btn" + onClick={onButtonClickCallback} />
diff --git a/src/components/Game.js b/src/components/Game.js index f3e992cd..1944e1d3 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -16,13 +16,14 @@ const Game = () => { const [ player, setPlayer ] = useState(1); const [ playerSubmission, setPlayerSubmission ] = useState(null); const [ submissionList, setSubmissionList ] = useState([]); + const [ revealPoem, setRevealPoem ] = useState(false); const onLineSubmitCallback = (formInput) => { - + const newSubmissionList = [...submissionList]; newSubmissionList.push({ - id: player, + key: player, ...formInput, }); @@ -33,6 +34,10 @@ const Game = () => { setPlayer(player+1); }; + const onButtonClickCallback = () => { + setRevealPoem(true); + }; + return (

Game

@@ -45,11 +50,11 @@ const Game = () => { { exampleFormat }

- + - + - +
); From 5f4388a9dafff606385f8dc6248ceb86200bbbcd Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 23:21:36 -0700 Subject: [PATCH 09/21] hides RecentSubmission and PlayerSubmissionForm when the final poem is revealed --- src/components/PlayerSubmissionForm.js | 184 +++++++++++++------------ src/components/RecentSubmission.js | 21 +-- 2 files changed, 106 insertions(+), 99 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d15ff3f4..0a160ffb 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = ({ player, onLineSubmitCallback }) => { +const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { const [ fieldInput, setFieldInput ] = useState({ adj1: '', @@ -49,99 +49,103 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback }) => { }; }; - return ( -
-

Player Submission Form for Player #{player}

+ if (revealPoem) { + return null; + } else { + return ( +
+

Player Submission Form for Player #{player}

+ + + +
+ +
+ The +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ the +
+ +
+ + +
+ +
+ + +
+ +
+ . +
- - -
- -
- The -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- the -
- -
- -
-
- - +
+
- -
- . -
- -
- -
- -
- -
- ); -} + +
+ ); + }; +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 81d4969c..25625b8e 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,14 +1,17 @@ import React from 'react'; import './RecentSubmission.css'; -const RecentSubmission = ({ line }) => { - console.log(line); - return ( -
-

The Most Recent Submission

-

{line}

-
- ); -} +const RecentSubmission = ({ line, revealPoem }) => { + if (!line || revealPoem) { + return null; + } else { + return ( +
+

The Most Recent Submission

+

{line}

+
+ ); + }; +}; export default RecentSubmission; From 4a0bd7349dceec6ab87d3c0bffcef9e82cdc2390 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 23:22:32 -0700 Subject: [PATCH 10/21] changes className on final poem reveal from noshow to hide --- src/components/FinalPoem.css | 2 +- src/components/FinalPoem.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 2839ca9b..b166c17a 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -20,6 +20,6 @@ border-bottom: 2px gray dashed; } -.FinalPoem__noshow { +.FinalPoem__hide { display: none; } diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d3adb22e..b9540640 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -6,7 +6,7 @@ const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { return (
-
+

Final Poem

{finalPoem}
From 5483d403cf26dca06d35e854a9191668126497a1 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 23:37:48 -0700 Subject: [PATCH 11/21] adds dynamic styling to input fields, light pink background if empty --- src/components/PlayerSubmissionForm.css | 8 ++++++++ src/components/PlayerSubmissionForm.js | 10 ++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 0f2c74dd..fc110801 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -21,6 +21,14 @@ display: none; } +.PlayerSubmissionForm__input-valid { + background-color: white; +} + +.PlayerSubmissionForm__input-invalid { + background-color: lightpink; +} + .PlayerSubmissionForm__submit { display: flex; justify-content: center; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0a160ffb..c1e71151 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -12,6 +12,10 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { noun2: '', }); + const isValid = (field) => { + return (field !== '') ? "PlayerSubmissionForm__input-valid" : "PlayerSubmissionForm__input-invalid"; + } + const onInputChange = (event) => { const { name, value } = event.target @@ -70,6 +74,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="adj1" placeholder="adjective" value={fieldInput.adj1} + className={isValid(fieldInput.adj1)} onChange={onInputChange} />
@@ -80,6 +85,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="noun1" placeholder="noun" value={fieldInput.noun1} + className={isValid(fieldInput.noun1)} onChange={onInputChange} />
@@ -90,6 +96,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="adv" placeholder="adverb" value={fieldInput.adv} + className={isValid(fieldInput.adv)} onChange={onInputChange} />
@@ -100,6 +107,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="verb" placeholder="verb" value={fieldInput.verb} + className={isValid(fieldInput.verb)} onChange={onInputChange} />
@@ -114,6 +122,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="adj2" placeholder="adjective" value={fieldInput.adj2} + className={isValid(fieldInput.adj2)} onChange={onInputChange} />
@@ -124,6 +133,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { name="noun2" placeholder="noun" value={fieldInput.noun2} + className={isValid(fieldInput.noun2)} onChange={onInputChange} /> From f19205400946039ddd525282f092ce13e1438c41 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Wed, 22 Apr 2020 23:58:20 -0700 Subject: [PATCH 12/21] changes the data passed into RecentSubmission so the component handles converting it into a line of poetry, rather than Game --- src/components/Game.js | 9 ++------- src/components/RecentSubmission.js | 6 +++--- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 1944e1d3..564b7b71 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,18 +19,13 @@ const Game = () => { const [ revealPoem, setRevealPoem ] = useState(false); const onLineSubmitCallback = (formInput) => { - const newSubmissionList = [...submissionList]; - newSubmissionList.push({ key: player, ...formInput, }); - setSubmissionList(newSubmissionList); - - setPlayerSubmission(`The ${formInput.adj1} ${formInput.noun1} ${formInput.adv} ${formInput.verb} the ${formInput.adj2} ${formInput.noun2}.`); - + setPlayerSubmission(formInput); setPlayer(player+1); }; @@ -50,7 +45,7 @@ const Game = () => { { exampleFormat }

- + diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 25625b8e..e12a685a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,14 +1,14 @@ import React from 'react'; import './RecentSubmission.css'; -const RecentSubmission = ({ line, revealPoem }) => { - if (!line || revealPoem) { +const RecentSubmission = ({ submission, revealPoem }) => { + if (!submission || revealPoem) { return null; } else { return (

The Most Recent Submission

-

{line}

+

The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.adj2} {submission.noun2}.

); }; From 7afe65a8d4ab05bd73169ec2c7495fc285cccf0f Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:24:15 -0700 Subject: [PATCH 13/21] displays each line of the final poem on a new line, cleans up code --- src/components/FinalPoem.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index b9540640..b8a9e712 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,12 +1,12 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { - const finalPoem = submissions.map(submission => `The ${submission.adj1} ${submission.noun1} ${submission.adv} ${submission.verb} the ${submission.adj2} ${submission.noun2}.`); +const FinalPoem = ({submissions, onButtonClickCallback, revealPoem}) => { + const finalPoem = submissions.map(submission =>

The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.adj2} {submission.noun2}.

); return (
-
+

Final Poem

{finalPoem}
From 9e43ac119af7157ef99100039e1264dfced6c8c3 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:28:07 -0700 Subject: [PATCH 14/21] cleans up spacing --- src/components/FinalPoem.js | 4 ++-- src/components/Game.js | 1 + src/components/RecentSubmission.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index b8a9e712..e39e0b3a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,12 +1,12 @@ import React from 'react'; import './FinalPoem.css'; -const FinalPoem = ({submissions, onButtonClickCallback, revealPoem}) => { +const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { const finalPoem = submissions.map(submission =>

The {submission.adj1} {submission.noun1} {submission.adv} {submission.verb} the {submission.adj2} {submission.noun2}.

); return (
-
+

Final Poem

{finalPoem}
diff --git a/src/components/Game.js b/src/components/Game.js index 564b7b71..f037a916 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -24,6 +24,7 @@ const Game = () => { key: player, ...formInput, }); + setSubmissionList(newSubmissionList); setPlayerSubmission(formInput); setPlayer(player+1); diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index e12a685a..05761bf5 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,7 +2,7 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = ({ submission, revealPoem }) => { - if (!submission || revealPoem) { + if (!submission || revealPoem) { // if submission is null, the code on line 11 will throw a TypeError return null; } else { return ( From e1bfe2e52910e307a51c3d9b68f68f395edc3a11 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:34:22 -0700 Subject: [PATCH 15/21] cleans up spacing, refactors isValid helper function, adds comments --- src/components/PlayerSubmissionForm.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index c1e71151..ea3e55eb 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -13,17 +13,16 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { }); const isValid = (field) => { - return (field !== '') ? "PlayerSubmissionForm__input-valid" : "PlayerSubmissionForm__input-invalid"; - } + if (field === '') return "PlayerSubmissionForm__input-invalid"; + }; // helper function for changing input background color if field is empty const onInputChange = (event) => { const { name, value } = event.target - const newFieldInput = { ...fieldInput, [name]: value, }; - + setFieldInput(newFieldInput); }; @@ -37,10 +36,10 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { }; }; return true; - }; + }; // helper function that prevents submission before all the fields have been filled if (checkFields(fieldInput)) { - onLineSubmitCallback(fieldInput); + onLineSubmitCallback(fieldInput); // send data back to Game setFieldInput({ adj1: '', From 5842ab3f867659d1cbe59b5b05dbff7739670d46 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:34:36 -0700 Subject: [PATCH 16/21] removes unusued class --- src/components/PlayerSubmissionForm.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index fc110801..795b9881 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -21,10 +21,6 @@ display: none; } -.PlayerSubmissionForm__input-valid { - background-color: white; -} - .PlayerSubmissionForm__input-invalid { background-color: lightpink; } From fbdbc888e9ed3e23ba88e447f8c727bf2b1c2681 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:36:40 -0700 Subject: [PATCH 17/21] adds missing semi-colons --- src/components/FinalPoem.js | 2 +- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index e39e0b3a..2b877f17 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -21,6 +21,6 @@ const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => {
); -} +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index f037a916..4e543149 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -54,7 +54,7 @@ const Game = () => { ); -} +}; const FIELDS = [ diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ea3e55eb..d6205492 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -17,7 +17,7 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { }; // helper function for changing input background color if field is empty const onInputChange = (event) => { - const { name, value } = event.target + const { name, value } = event.target; const newFieldInput = { ...fieldInput, [name]: value, From b226b2954ea40a74579081ee21a389d2a9a99ea2 Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:52:59 -0700 Subject: [PATCH 18/21] adds PropTypes --- src/components/FinalPoem.js | 17 +++++++++++++++++ src/components/PlayerSubmissionForm.js | 6 ++++++ src/components/RecentSubmission.js | 6 ++++++ 3 files changed, 29 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 2b877f17..74d3d2c8 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { @@ -23,4 +24,20 @@ const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { ); }; +FinalPoem.propTypes = { + submissions: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.number.isRequired, + adj1: PropTypes.string.isRequired, + noun1: PropTypes.string.isRequired, + adv: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + adj2: PropTypes.string.isRequired, + noun2: PropTypes.string.isRequired, + }) + ), + onButtonClickCallback: PropTypes.func.isRequired, + revealPoem: PropTypes.bool.isRequired, +}; + export default FinalPoem; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d6205492..7858f18e 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { @@ -156,5 +157,10 @@ const PlayerSubmissionForm = ({ player, onLineSubmitCallback, revealPoem }) => { }; }; +PlayerSubmissionForm.propTypes = { + player: PropTypes.number.isRequired, + onLineSubmitCallback: PropTypes.func.isRequired, + revealPoem: PropTypes.bool.isRequired, +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 05761bf5..7177eade 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; const RecentSubmission = ({ submission, revealPoem }) => { @@ -14,4 +15,9 @@ const RecentSubmission = ({ submission, revealPoem }) => { }; }; +RecentSubmission.propTypes = { + submission: PropTypes.objectOf(PropTypes.string.isRequired), + revealPoem: PropTypes.bool.isRequired, +}; + export default RecentSubmission; From b250068b978505614ea950c9ef6b04e70295411a Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 00:56:59 -0700 Subject: [PATCH 19/21] hides FinalPoem button when the poem has been revealed --- src/components/FinalPoem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 74d3d2c8..847bedad 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,7 +12,7 @@ const FinalPoem = ({ submissions, onButtonClickCallback, revealPoem }) => { {finalPoem} -
+
Date: Thu, 23 Apr 2020 09:56:33 -0700 Subject: [PATCH 20/21] enables deployment to github pages --- package-lock.json | 91 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +++ 2 files changed, 95 insertions(+) diff --git a/package-lock.json b/package-lock.json index 46aea217..d186a875 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4565,6 +4565,11 @@ "minimalistic-crypto-utils": "^1.0.0" } }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -5528,6 +5533,30 @@ "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", "optional": true }, + "filename-reserved-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz", + "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=" + }, + "filenamify": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz", + "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=", + "requires": { + "filename-reserved-regex": "^1.0.0", + "strip-outer": "^1.0.0", + "trim-repeated": "^1.0.0" + } + }, + "filenamify-url": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz", + "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=", + "requires": { + "filenamify": "^1.0.0", + "humanize-url": "^1.0.0" + } + }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -5883,6 +5912,38 @@ "assert-plus": "^1.0.0" } }, + "gh-pages": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-2.2.0.tgz", + "integrity": "sha512-c+yPkNOPMFGNisYg9r4qvsMIjVYikJv7ImFOhPIVPt0+AcRUamZ7zkGRLHz7FKB0xrlZ+ddSOJsZv9XAFVXLmA==", + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify-url": "^1.0.0", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "dependencies": { + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" + } + } + }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -6318,6 +6379,15 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "humanize-url": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz", + "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=", + "requires": { + "normalize-url": "^1.0.0", + "strip-url-auth": "^1.0.0" + } + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -12512,6 +12582,19 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz", "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==" }, + "strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, + "strip-url-auth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz", + "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=" + }, "style-loader": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", @@ -12912,6 +12995,14 @@ "punycode": "^2.1.0" } }, + "trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "requires": { + "escape-string-regexp": "^1.0.2" + } + }, "ts-pnp": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", diff --git a/package.json b/package.json index de451c95..e059a3ff 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,12 @@ "name": "exquisite-react", "version": "0.1.0", "private": true, + "homepage": "https://peachmakkoli.github.io/exquisite-react/" "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "gh-pages": "^2.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" @@ -14,6 +16,8 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "eject": "react-scripts eject" }, "eslintConfig": { From a94d0feac76061a038aa98b0ae4414ed22db9b2d Mon Sep 17 00:00:00 2001 From: peachmakkoli Date: Thu, 23 Apr 2020 09:58:10 -0700 Subject: [PATCH 21/21] fixes comma error --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e059a3ff..ecd3a8c3 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "exquisite-react", "version": "0.1.0", "private": true, - "homepage": "https://peachmakkoli.github.io/exquisite-react/" + "homepage": "https://peachmakkoli.github.io/exquisite-react/", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0",