From 40b51de6e5662ad2aff57527f41660f6826f1316 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:38:55 -0700 Subject: [PATCH 01/23] add inputs and event listeners --- src/components/PlayerSubmissionForm.js | 103 +++++++++++++++++++++++-- 1 file changed, 97 insertions(+), 6 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..80df696f 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,21 +1,112 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; -const PlayerSubmissionForm = () => { - return ( +const PlayerSubmissionForm = (props) => { + + // User Stories + // Game component has the data of my submission, so that the Game component keeps track of all of the submissions + // As a player going after the first player, I want to have a cleared, reset form with no text in the input elements + // As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3" + + // Don't be shy about making all of the pieces of props or state that you've determined you need! + + const [sentence, setSentence] = useState({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }); + + const onInputChange = (event) => { + console.log(`Changing field ${ event.target.name } to ${ event.target.value }`); + // Duplicate user into new object + const newSentence = { + ...sentence, + } + + newSentence[event.target.name] = event.target.value; + setSentence(newSentence); + } + + const onSubmitLine = (event) => { + // prevents form from submitting by default + event.preventDefault(); + + // prevent user from submitting empty fields + if (sentence.adjective1 !== '') { + //send that data back up to App + props.onSubmit(sentence); + + setSentence({ + adjective1: '', + noun1: '', + adverb: '', + verb: '', + adjective2: '', + noun2: '', + }) + } + } + + + 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 } +

The

+ + + + +

the

+ + name="noun2" + placeholder="another noun" + type="noun" + value={sentence.noun2} + onChange={onInputChange} + /> +

.

From f884f20926cf80ba35667372848471e50efa874d Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:41:31 -0700 Subject: [PATCH 02/23] add state, callback function, and send props to components --- src/components/Game.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..118bbd63 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -12,6 +12,18 @@ const Game = () => { return field; } }).join(" "); + + const [player, setPlayer] = useState(1); + const [sentence, setSentence] = useState(''); + + // on reset + // setPlayer(1) + + const onPlayerSubmissionCallback = (sentence) => { + setSentence("The " + sentence.adjective1 + " " + sentence.noun1 + " " + sentence.adverb + " " + sentence.verb + " the " + sentence.adjective2 + " " + sentence.noun2); + // increment player + setPlayer(player + 1); + } return (
@@ -25,11 +37,11 @@ const Game = () => { { exampleFormat }

- + - + - +
); From 2713bb3ce19932f1c26aad5495f21d70eb10d75d Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:43:38 -0700 Subject: [PATCH 03/23] display recent submission via props --- 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 663da34b..d7cf787d 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.RecentSubmission }

); } From bd77365fc666f411761201e8c70f4f34e8fcc997 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:44:12 -0700 Subject: [PATCH 04/23] change prop name form currentSubmission to recentSubmission --- src/components/Game.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 118bbd63..a6fd4b21 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -37,11 +37,11 @@ const Game = () => { { exampleFormat }

- + - +
); From fd2ef801f46c1e274ac319911845ac691bc8fbbd Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:46:58 -0700 Subject: [PATCH 05/23] fix capitalization on props.recentSubmission --- 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 d7cf787d..f95a7827 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ props.RecentSubmission }

+

{ props.recentSubmission }

); } From 1bcc0b3e6e2eb0168f11f4b88a32dc1db1f40f02 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 17:47:14 -0700 Subject: [PATCH 06/23] fix reference to noun1 --- src/components/PlayerSubmissionForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 80df696f..11521e87 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -74,7 +74,7 @@ const PlayerSubmissionForm = (props) => { name="noun1" placeholder="noun" type="noun" - value={sentence.noun} + value={sentence.noun1} onChange={onInputChange} /> Date: Tue, 21 Apr 2020 18:06:22 -0700 Subject: [PATCH 07/23] add finalPoem state and update player and finalPoem on callback --- src/components/Game.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index a6fd4b21..51447bd6 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,15 +14,20 @@ const Game = () => { }).join(" "); const [player, setPlayer] = useState(1); - const [sentence, setSentence] = useState(''); + const [recentSubmission, setRecentSubmission] = useState(''); + const [finalPoem, setFinalPoem] = useState(''); // on reset // setPlayer(1) - const onPlayerSubmissionCallback = (sentence) => { - setSentence("The " + sentence.adjective1 + " " + sentence.noun1 + " " + sentence.adverb + " " + sentence.verb + " the " + sentence.adjective2 + " " + sentence.noun2); + const onPlayerSubmissionCallback = (submission) => { + const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2; + + setRecentSubmission(sentence); // increment player setPlayer(player + 1); + // add recent submission to final poem + setFinalPoem(finalPoem + sentence); } return ( @@ -37,11 +42,11 @@ const Game = () => { { exampleFormat }

- + - + ); From e6ab498611b02ffddfef893d1d384a6acdf12968 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 18:06:53 -0700 Subject: [PATCH 08/23] remove wave 1 comments --- src/components/PlayerSubmissionForm.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 11521e87..5f173f68 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,13 +3,6 @@ import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = (props) => { - // User Stories - // Game component has the data of my submission, so that the Game component keeps track of all of the submissions - // As a player going after the first player, I want to have a cleared, reset form with no text in the input elements - // As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3" - - // Don't be shy about making all of the pieces of props or state that you've determined you need! - const [sentence, setSentence] = useState({ adjective1: '', noun1: '', @@ -20,8 +13,6 @@ const PlayerSubmissionForm = (props) => { }); const onInputChange = (event) => { - console.log(`Changing field ${ event.target.name } to ${ event.target.value }`); - // Duplicate user into new object const newSentence = { ...sentence, } @@ -59,9 +50,6 @@ const PlayerSubmissionForm = (props) => {
- { - // Put your form inputs here... We've put in one below as an example - }

The

Date: Tue, 21 Apr 2020 18:42:55 -0700 Subject: [PATCH 09/23] change structure of Game to keep track of all submissions as objects --- src/components/Game.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 51447bd6..ddd5eb54 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -12,24 +12,28 @@ const Game = () => { return field; } }).join(" "); - - const [player, setPlayer] = useState(1); - const [recentSubmission, setRecentSubmission] = useState(''); - const [finalPoem, setFinalPoem] = useState(''); - // on reset - // setPlayer(1) + const submissions = []; + const [player, setPlayer] = useState(1); + const [submissionsList, setsubmissionsList] = useState(submissions); + - const onPlayerSubmissionCallback = (submission) => { - const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2; + const onPlayerSubmissionCallback = (playerSubmission) => { + // const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2; + // make a copy of submissionsList + const newSubmissions = [...submissionsList]; - setRecentSubmission(sentence); + // add playerSubmission to submissions list + newSubmissions.push(playerSubmission); + // update state of submissionsList to new list + setsubmissionsList(newSubmissions); // increment player setPlayer(player + 1); - // add recent submission to final poem - setFinalPoem(finalPoem + sentence); } + // on reset + // setPlayer(1) + return (

Game

@@ -42,11 +46,11 @@ const Game = () => { { exampleFormat }

- + - +
); From 09cc277f27a9754a5f0b0f9f2f01326a2475d4ec Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 19:00:15 -0700 Subject: [PATCH 10/23] loop through submissions and add to an array --- src/components/FinalPoem.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..b9bd8cd8 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,11 +3,21 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + // const completedPoem = props.submissions.map(submission => submission.); + const sentences = []; + + props.submissions.forEach((submission) => { + const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2 + "."; + sentences.push(sentence) + }); + return (

Final Poem

+ {/* As players who have submitted one or more lines, I want to see all of the submissions of poetry lines in the section named "Final Poem". + As a player, I want to see each submission in the final poem section on a different line or paragraph, so that it looks more like a structured poem. */}
From 9ddbaa659425ff0237528cc9890bb99e63912a28 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 19:01:06 -0700 Subject: [PATCH 11/23] change FinalPoem props name from finalPoem to submissions --- src/components/Game.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index ddd5eb54..677be119 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -50,7 +50,7 @@ const Game = () => { - +
); From 792ca3c41417677e9a79372526461c4e33b1695f Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 19:08:06 -0700 Subject: [PATCH 12/23] map sentences to finalPoem variable to display --- src/components/FinalPoem.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index b9bd8cd8..5328418a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -11,6 +11,12 @@ const FinalPoem = (props) => { sentences.push(sentence) }); + let finalPoem = sentences.map(sentence => { + return ( +

{sentence}

+ ) + }); + return (
@@ -18,6 +24,7 @@ const FinalPoem = (props) => { {/* As players who have submitted one or more lines, I want to see all of the submissions of poetry lines in the section named "Final Poem". As a player, I want to see each submission in the final poem section on a different line or paragraph, so that it looks more like a structured poem. */} + {finalPoem}
From edc29f42047f0a401e38b011dd6852110b9e0689 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Tue, 21 Apr 2020 19:36:21 -0700 Subject: [PATCH 13/23] add logic to show final poem with each sentence on new line when button is clicked --- src/components/FinalPoem.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 5328418a..0e68243b 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,14 +1,12 @@ -import React from 'react'; +import React, {useState} from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { - // const completedPoem = props.submissions.map(submission => submission.); - const sentences = []; - - props.submissions.forEach((submission) => { - const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2 + "."; - sentences.push(sentence) + const [display, setDisplay] = useState(false); + + const sentences = props.submissions.map((submission) => { + return "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2 + "."; }); let finalPoem = sentences.map(sentence => { @@ -17,18 +15,24 @@ const FinalPoem = (props) => { ) }); + const onReveal = () => { + setDisplay(true); + } + + return (
-
-

Final Poem

- - {/* As players who have submitted one or more lines, I want to see all of the submissions of poetry lines in the section named "Final Poem". - As a player, I want to see each submission in the final poem section on a different line or paragraph, so that it looks more like a structured poem. */} - {finalPoem} -
+ {/* if display is true, show final poem */} + { display ? +
+

Final Poem

+ {finalPoem} +
: + null + }
- +
); From c7638edc453b2ab511f7bddfc381ea20877f7035 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 14:39:32 -0700 Subject: [PATCH 14/23] change callback structure to add string instead of object to submissions array --- src/components/Game.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 677be119..3d4a295f 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,12 +19,13 @@ const Game = () => { const onPlayerSubmissionCallback = (playerSubmission) => { - // const sentence = "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2; // make a copy of submissionsList const newSubmissions = [...submissionsList]; - - // add playerSubmission to submissions list - newSubmissions.push(playerSubmission); + + // create sentence structure + const sentence = "The " + playerSubmission.adjective1 + " " + playerSubmission.noun1 + " " + playerSubmission.adverb + " " + playerSubmission.verb + " the " + playerSubmission.adjective2 + " " + playerSubmission.noun2 + "."; + + newSubmissions.push(sentence); // update state of submissionsList to new list setsubmissionsList(newSubmissions); // increment player @@ -33,7 +34,7 @@ const Game = () => { // on reset // setPlayer(1) - + return (

Game

From 252990d3276253e28f30cd4e7a45c9bea795a1b8 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 14:40:17 -0700 Subject: [PATCH 15/23] update to use submission strings from Game --- src/components/FinalPoem.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 0e68243b..ff9483e0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -5,21 +5,14 @@ const FinalPoem = (props) => { const [display, setDisplay] = useState(false); - const sentences = props.submissions.map((submission) => { - return "The " + submission.adjective1 + " " + submission.noun1 + " " + submission.adverb + " " + submission.verb + " the " + submission.adjective2 + " " + submission.noun2 + "."; - }); - - let finalPoem = sentences.map(sentence => { - return ( -

{sentence}

- ) + let finalPoem = props.submissions.map(sentence => { + return (

{sentence}

) }); const onReveal = () => { setDisplay(true); } - return (
{/* if display is true, show final poem */} From dadbbd4502e490d177f213f09cb9ae3b0184cd64 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 14:48:23 -0700 Subject: [PATCH 16/23] add logic to hide RecentSubmission component unless there is a submission --- src/components/Game.css | 4 ++++ src/components/Game.js | 7 +++---- src/components/RecentSubmission.js | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) 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 3d4a295f..f7352e4b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,9 +13,8 @@ const Game = () => { } }).join(" "); - const submissions = []; const [player, setPlayer] = useState(1); - const [submissionsList, setsubmissionsList] = useState(submissions); + const [submissionsList, setsubmissionsList] = useState([]); const onPlayerSubmissionCallback = (playerSubmission) => { @@ -34,7 +33,7 @@ const Game = () => { // on reset // setPlayer(1) - + return (

Game

@@ -47,7 +46,7 @@ const Game = () => { { exampleFormat }

- + 0 ? "show" : "hide"} recentSubmission={submissionsList[submissionsList.length - 1]}/> diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index f95a7827..1c310112 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -3,7 +3,7 @@ import './RecentSubmission.css'; const RecentSubmission = (props) => { return ( -
+

The Most Recent Submission

{ props.recentSubmission }

From 437aa9afdba62742270de72d1cc3ba7dbd59bf78 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 17:24:20 -0700 Subject: [PATCH 17/23] add submitted state to Game component; update nested components to display dependent on submitted state --- src/components/Game.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index f7352e4b..9026dcd9 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -15,6 +15,7 @@ const Game = () => { const [player, setPlayer] = useState(1); const [submissionsList, setsubmissionsList] = useState([]); + const [submitted, setSubmitted] = useState(false); const onPlayerSubmissionCallback = (playerSubmission) => { @@ -31,9 +32,13 @@ const Game = () => { setPlayer(player + 1); } + const onFinalPoemCallback = (bool) => { + setSubmitted(bool); + } + // on reset // setPlayer(1) - + return (

Game

@@ -46,11 +51,13 @@ const Game = () => { { exampleFormat }

- 0 ? "show" : "hide"} recentSubmission={submissionsList[submissionsList.length - 1]}/> +
+ 0 ? "show" : "hide"} recentSubmission={submissionsList[submissionsList.length - 1]}/> - + +
- +
); From 550343a7452c1a3d4dd85be8819cafe0f3e7f306 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 17:47:45 -0700 Subject: [PATCH 18/23] remove display state and add callback function to change submitted state in Game --- src/components/FinalPoem.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ff9483e0..8481db7a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,20 +3,20 @@ import './FinalPoem.css'; const FinalPoem = (props) => { - const [display, setDisplay] = useState(false); + // const [display, setDisplay] = useState(false); let finalPoem = props.submissions.map(sentence => { return (

{sentence}

) }); const onReveal = () => { - setDisplay(true); + props.onFinalPoemCallback(true); } return (
{/* if display is true, show final poem */} - { display ? + { props.submitted ?

Final Poem

{finalPoem} @@ -24,9 +24,12 @@ const FinalPoem = (props) => { null } -
- -
+ { props.submitted ? + null : +
+ +
+ }
); } From d23992319ac570f2df6f76936d7254629a09acf7 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 18:01:24 -0700 Subject: [PATCH 19/23] add input validation for blank fields --- src/components/PlayerSubmissionForm.js | 119 +++++++++++++------------ 1 file changed, 62 insertions(+), 57 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 5f173f68..c4c55c29 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -41,68 +41,73 @@ const PlayerSubmissionForm = (props) => { } } + return ( +
+

Player Submission Form for Player #{ props.player }

- return ( -
-

Player Submission Form for Player #{ props.player }

+ - +
-
+

The

+ + + + +

the

+ + +

.

-

The

- - - - -

the

- - -

.

+
-
- -
- -
- -
+
+ +
+ +
); } From 8028997eb313b1f41944a6b2e6b8a1f882f5d988 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 21:02:57 -0700 Subject: [PATCH 20/23] pass FIELDS to PlayerSubmissionForm --- src/components/Game.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 9026dcd9..e9168a26 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -54,7 +54,7 @@ const Game = () => {
0 ? "show" : "hide"} recentSubmission={submissionsList[submissionsList.length - 1]}/> - +
@@ -63,11 +63,10 @@ const Game = () => { ); } - const FIELDS = [ "The", { - key: 'adj1', + key: 'adjective1', placeholder: 'adjective', }, { @@ -75,7 +74,7 @@ const FIELDS = [ placeholder: 'noun', }, { - key: 'adv', + key: 'adverb', placeholder: 'adverb', }, { @@ -84,7 +83,7 @@ const FIELDS = [ }, "the", { - key: 'adj2', + key: 'adjective2', placeholder: 'adjective', }, { From 29a9ca429bcfd9e8f0cfd2cc4c72361655a4a946 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 21:03:23 -0700 Subject: [PATCH 21/23] refactor PlayerSubmissionForm to dynamically generate the input fields --- src/components/PlayerSubmissionForm.js | 71 +++++++------------------- 1 file changed, 18 insertions(+), 53 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index c4c55c29..4c01d59b 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -41,6 +41,23 @@ const PlayerSubmissionForm = (props) => { } } + const renderInputs = props.fields.map((field) => { + if (field.key) { + if (field.key) + return (); + } else { + return (

{field}

); + } + }); + + return (

Player Submission Form for Player #{ props.player }

@@ -48,59 +65,7 @@ const PlayerSubmissionForm = (props) => {
- -

The

- - - - -

the

- - -

.

- + {renderInputs}
From 6bc71c8fabfe73e669d746410fbaa8c79be393b2 Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Wed, 22 Apr 2020 21:27:30 -0700 Subject: [PATCH 22/23] cleanup code & add PropTypes --- src/components/FinalPoem.js | 15 +++++++++--- src/components/Game.js | 8 ++++-- src/components/PlayerSubmissionForm.js | 34 ++++++++++++++++++-------- src/components/RecentSubmission.js | 8 +++++- 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 8481db7a..9add2dd2 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,12 +1,13 @@ -import React, {useState} from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import './FinalPoem.css'; const FinalPoem = (props) => { - // const [display, setDisplay] = useState(false); - + let increment = 0; let finalPoem = props.submissions.map(sentence => { - return (

{sentence}

) + increment += 1 + return (

{sentence}

) }); const onReveal = () => { @@ -34,4 +35,10 @@ const FinalPoem = (props) => { ); } +FinalPoem.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.string), + submitted: PropTypes.bool.isRequired, + onFinalPoemCallback: PropTypes.func, +} + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index e9168a26..535834a9 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -52,8 +52,12 @@ const Game = () => {

- 0 ? "show" : "hide"} recentSubmission={submissionsList[submissionsList.length - 1]}/> - + { + submissionsList.length > 0 ? + : + null + } +
diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 4c01d59b..15a21693 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 = (props) => { @@ -41,19 +42,22 @@ const PlayerSubmissionForm = (props) => { } } + let increment = 0; const renderInputs = props.fields.map((field) => { + increment += 1 if (field.key) { - if (field.key) - return (); + increment += 1 + return (); } else { - return (

{field}

); + return (

{field}

); } }); @@ -76,5 +80,15 @@ const PlayerSubmissionForm = (props) => { ); } +PlayerSubmissionForm.propTypes = { + player: PropTypes.number.isRequired, + onPlayerSubmissionCallback: PropTypes.func, + fields: PropTypes.arrayOf(PropTypes.oneOfType([ + PropTypes.string, + PropTypes.object, + ]) + ), +} + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 1c310112..4b477502 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,19 @@ import React from 'react'; +import PropTypes from 'prop-types'; import './RecentSubmission.css'; const RecentSubmission = (props) => { return ( -
+

The Most Recent Submission

{ props.recentSubmission }

); } +RecentSubmission.propTypes = { + recentSubmission: PropTypes.string, +} + + export default RecentSubmission; From 2a234cb96146a4cee8eb909633559c8f5b37c0ce Mon Sep 17 00:00:00 2001 From: Jessica Stone Date: Thu, 23 Apr 2020 10:54:42 -0700 Subject: [PATCH 23/23] modify package.json to allow github page publishing --- 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..ee68ff67 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,12 @@ "name": "exquisite-react", "version": "0.1.0", "private": true, + "homepage": "https://seaweeddol.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": {