From 3f41a0039a6b43e803b3af5e4718e97e8a6baf34 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 00:37:36 -0700 Subject: [PATCH 01/19] added wave 1 user stories --- src/components/PlayerSubmissionForm.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..240e57ba 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -27,5 +27,14 @@ const PlayerSubmissionForm = () => { ); } +// User Stories +// As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. +// As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. +// As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. +// As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. +// As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. +// Hints +// Don't be shy about making all of the pieces of props or state that you've determined you need! + export default PlayerSubmissionForm; From dc5ba94160083c43261b577dcd664da4a7d2a597 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 00:54:59 -0700 Subject: [PATCH 02/19] added form input fields to player submissionform --- src/components/PlayerSubmissionForm.js | 44 +++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 240e57ba..66eaefb5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,6 +2,17 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = () => { + const [fields, setFields] /* destructuring array - first element is fields, second element is setFields */ = useState( + { + adj1: "", + noun1: "", + adverb: "", + verb: "", + adj2: "", + noun2: "" + }); + + return (

Player Submission Form for Player #{ }

@@ -9,13 +20,36 @@ const PlayerSubmissionForm = () => {
+ The + + + + + + + + the + - { - // Put your form inputs here... We've put in one below as an example - } + placeholder="adjective" + type="noun" + />.
From 7b5e0d5dd73127dbf9e5702390629d0bcbb532da Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 01:20:28 -0700 Subject: [PATCH 03/19] set use states in playersubmissionform --- src/components/PlayerSubmissionForm.js | 32 +++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 66eaefb5..fc5c6e98 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -12,6 +12,18 @@ const PlayerSubmissionForm = () => { noun2: "" }); + const onInputChange = event => { + const { name, value } = event.target; + + const newFields = { + ...fields, + [name]: value // [name] get value of name and use it as the key | value is the variable above + // line 46 is equivalent to: newFields[name] = value + }; + + setFields(newFields); + }; + return (
@@ -22,32 +34,50 @@ const PlayerSubmissionForm = () => {
The the . From 1f1253df158d0eb669a658174741310e430d4a16 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 01:22:16 -0700 Subject: [PATCH 04/19] added TODOs and done --- src/components/PlayerSubmissionForm.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index fc5c6e98..0a0bf8f6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -92,11 +92,11 @@ const PlayerSubmissionForm = () => { } // User Stories -// As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. -// As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. -// As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. -// As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. -// As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. +// TODO As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. +// *DONE* As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. +// TODO As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. +// TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. +// TODO As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. // Hints // Don't be shy about making all of the pieces of props or state that you've determined you need! From 0eed5e5450677d4edffb54ec11b0d96030c78492 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 01:39:32 -0700 Subject: [PATCH 05/19] started eventhandler in playersubmissionform --- src/components/PlayerSubmissionForm.js | 32 +++++++++++++++++++------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0a0bf8f6..89483875 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 = () => { +const PlayerSubmissionForm = (props) => { const [fields, setFields] /* destructuring array - first element is fields, second element is setFields */ = useState( { adj1: "", @@ -15,21 +15,33 @@ const PlayerSubmissionForm = () => { const onInputChange = event => { const { name, value } = event.target; - const newFields = { - ...fields, - [name]: value // [name] get value of name and use it as the key | value is the variable above - // line 46 is equivalent to: newFields[name] = value - }; + const newFields = { + ...fields, + [name]: value // [name] get value of name and use it as the key | value is the variable above + // line 46 is equivalent to: newFields[name] = value + }; setFields(newFields); }; + const onFormSubmit = (event) => { + // prevent browser from trying to submit form + event.preventDefault(); + + props.addLineCallback(fields); + + // ... we need to add the line to the list + setFields({ + ...fields, + }); + }; + return (

Player Submission Form for Player #{ }

- +
The @@ -84,7 +96,11 @@ const PlayerSubmissionForm = () => {
- +
From ba7301c4cd58df37e886b5f7da79e53fbabd89ac Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 02:00:46 -0700 Subject: [PATCH 06/19] worked on callback fn on game --- src/components/Game.js | 16 +++++++++++++++- src/components/PlayerSubmissionForm.js | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..777e50d3 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,10 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + const [poemList, setPoemList] = useState([]); + const [player, setPlayer] = useState(1); + + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +17,16 @@ const Game = () => { } }).join(" "); + // callback function to add students to the list + const addPoem = (poem) => { + // Duplicate the poem. + const newPoemList = [...poemList]; + setPoemList(newPoemList); + newPoemList.push(poem); + setPlayer(player + 1); + + }; + return (

Game

@@ -27,7 +41,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 89483875..f5f04c6c 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -28,7 +28,7 @@ const PlayerSubmissionForm = (props) => { // prevent browser from trying to submit form event.preventDefault(); - props.addLineCallback(fields); + props.addPoemCallback(fields); // ... we need to add the line to the list setFields({ From ab074015039b5254106d132c7fc1af3e1b77d5bf Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 20:45:56 -0700 Subject: [PATCH 07/19] reset form fields on submit --- src/components/PlayerSubmissionForm.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index f5f04c6c..d7e60b86 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -30,9 +30,14 @@ const PlayerSubmissionForm = (props) => { props.addPoemCallback(fields); - // ... we need to add the line to the list + // reset fields setFields({ - ...fields, + adj1: "", + noun1: "", + adverb: "", + verb: "", + adj2: "", + noun2: "" }); }; @@ -108,7 +113,7 @@ const PlayerSubmissionForm = (props) => { } // User Stories -// TODO As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. +// *DONE* As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. // *DONE* As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. // TODO As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. // TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. From 301a7c360afc68cfe54d1084de193a49555ddf25 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 20:50:43 -0700 Subject: [PATCH 08/19] added props to recent submission --- 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..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 }

); } From 61e06092ff00f118e4f5556838c457cea0c5a8d0 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 22:17:12 -0700 Subject: [PATCH 09/19] recent submission displaying --- src/components/Game.js | 18 ++++++++++-------- src/components/PlayerSubmissionForm.js | 14 +++++++------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 777e50d3..a462e314 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -19,12 +19,14 @@ const Game = () => { // callback function to add students to the list const addPoem = (poem) => { - // Duplicate the poem. - const newPoemList = [...poemList]; - setPoemList(newPoemList); - newPoemList.push(poem); - setPlayer(player + 1); + const newPoemList = [...poemList]; // copy PoemList + + const newLine = "The " + poem.adj1 + " " + poem.noun1 + " " + poem.adv + " " + poem.verb + " the " + poem.adj2 + " " + poem.noun2 + "."; + + newPoemList.push(newLine); + setPoemList(newPoemList); + setPlayer(player + 1); }; return ( @@ -39,9 +41,9 @@ const Game = () => { { exampleFormat }

- + - + @@ -62,7 +64,7 @@ const FIELDS = [ }, { key: 'adv', - placeholder: 'adverb', + placeholder: 'adv', }, { key: 'verb', diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d7e60b86..81de2bdc 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -6,7 +6,7 @@ const PlayerSubmissionForm = (props) => { { adj1: "", noun1: "", - adverb: "", + adv: "", verb: "", adj2: "", noun2: "" @@ -28,13 +28,13 @@ const PlayerSubmissionForm = (props) => { // prevent browser from trying to submit form event.preventDefault(); - props.addPoemCallback(fields); + props.onSubmit(fields); // reset fields setFields({ adj1: "", noun1: "", - adverb: "", + adv: "", verb: "", adj2: "", noun2: "" @@ -44,7 +44,7 @@ const PlayerSubmissionForm = (props) => { return (
-

Player Submission Form for Player #{ }

+

Player Submission Form for Player #{ props.player }

@@ -67,9 +67,9 @@ const PlayerSubmissionForm = (props) => { /> @@ -116,7 +116,7 @@ const PlayerSubmissionForm = (props) => { // *DONE* As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. // *DONE* As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. // TODO As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. -// TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. +// *DONE* TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. // TODO As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. // Hints // Don't be shy about making all of the pieces of props or state that you've determined you need! From 9a3c2feaed801d461258dbb3516d8909cfa93085 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 22:26:53 -0700 Subject: [PATCH 10/19] player number finally displaying! --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index a462e314..e9c9ba24 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -43,7 +43,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 81de2bdc..655a648d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -44,7 +44,7 @@ const PlayerSubmissionForm = (props) => { return (
-

Player Submission Form for Player #{ props.player }

+

Player Submission Form for Player #{props.player}

From a6be3c38d7ab27849d077845c3ad6de483eab23e Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 22:28:07 -0700 Subject: [PATCH 11/19] All wave 1 user stories complete! Praise dog! --- src/components/PlayerSubmissionForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 655a648d..959c26e3 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -115,9 +115,9 @@ const PlayerSubmissionForm = (props) => { // User Stories // *DONE* As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. // *DONE* As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. -// TODO As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. +// *DONE* As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. // *DONE* TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. -// TODO As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. +// *DONE* As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. // Hints // Don't be shy about making all of the pieces of props or state that you've determined you need! From cdd382f3ad87631fa18a4e6c5f9f51e2b6f9cd74 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 22:36:06 -0700 Subject: [PATCH 12/19] notes about refactor needed to recent submission --- src/components/RecentSubmission.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index f95a7827..29af19e3 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -4,8 +4,8 @@ import './RecentSubmission.css'; const RecentSubmission = (props) => { return (
-

The Most Recent Submission

-

{ props.recentSubmission }

+

The Most Recent Submission

// TODO need to refactor so this doesn't sow +

{ props.recentSubmission }

// TODO should probably generate sentence here, not in Game
); } From 1157985adffdcdbf9d53d73ec2c8d44ae049ac41 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 22:38:41 -0700 Subject: [PATCH 13/19] added wave 2 user stories --- src/components/FinalPoem.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..ebd4bf72 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -17,4 +17,9 @@ const FinalPoem = (props) => { ); } + +// User Stories +// 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. + export default FinalPoem; From 88de02988f2b6b8e144bb23d07c012e24f6b4f0d Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 23:31:16 -0700 Subject: [PATCH 14/19] final poem submits - but always --- src/components/FinalPoem.js | 14 +++++++++++--- src/components/Game.js | 11 +++++++++-- src/components/RecentSubmission.js | 8 ++++++-- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ebd4bf72..f1a76432 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,13 +1,21 @@ -import React from 'react'; +import React, {useState} from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { + let increment = 0; + let finalPoem = props.poemList.map(sentence => { + increment += 1 + return (

{sentence}

) + }); + + + return (

Final Poem

- + {finalPoem}
@@ -22,4 +30,4 @@ 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. -export default FinalPoem; +export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index e9c9ba24..66415a9e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -7,6 +7,7 @@ import RecentSubmission from './RecentSubmission'; const Game = () => { const [poemList, setPoemList] = useState([]); const [player, setPlayer] = useState(1); + const [showFinal, setShowFinal] = useState(false); const exampleFormat = FIELDS.map((field) => { @@ -29,6 +30,10 @@ const Game = () => { setPlayer(player + 1); }; + const finishedPoem = () => { + setShowFinal(true); + }; + return (

Game

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

+ {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} - + + {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} - +
); diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 29af19e3..cdd6ef69 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,17 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { return (
-

The Most Recent Submission

// TODO need to refactor so this doesn't sow -

{ props.recentSubmission }

// TODO should probably generate sentence here, not in Game +

The Most Recent Submission

+

{ props.recentSubmission }

+ {/* // ? generate sentence here, not in Game ? */}
); } export default RecentSubmission; + +// TODO Need to add propTypes From d321c73d27051e7bcb093bfb91a5be6cef56068a Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 23:42:02 -0700 Subject: [PATCH 15/19] Final poem shows only on button click --- src/components/FinalPoem.js | 28 ++++++++++++++------------ src/components/Game.js | 1 + src/components/PlayerSubmissionForm.js | 1 + 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index f1a76432..2b61123a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,25 +1,27 @@ import React, {useState} from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { - let increment = 0; - let finalPoem = props.poemList.map(sentence => { - increment += 1 - return (

{sentence}

) - }); - - + let increment = 0; + let finalPoem = props.poemList.map(sentence => { + increment += 1 + return (

{sentence}

) + }); return (
-
-

Final Poem

+ { props.showFinal ? +
+

Final Poem

{finalPoem} -
+
: + null + }
- +
); @@ -27,7 +29,7 @@ const FinalPoem = (props) => { // User Stories -// 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. +// *DONE* 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". +// *DONE* 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. export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 66415a9e..416d07fa 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -3,6 +3,7 @@ import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; +import PropTypes from 'prop-types'; const Game = () => { const [poemList, setPoemList] = useState([]); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 959c26e3..35320bd8 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; const PlayerSubmissionForm = (props) => { const [fields, setFields] /* destructuring array - first element is fields, second element is setFields */ = useState( From 72dffd00ad34145ea5f17c3e86e8d5b6a0c5784e Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 23:44:04 -0700 Subject: [PATCH 16/19] wave 2 clean up --- src/components/FinalPoem.js | 1 + src/components/Game.js | 3 ++- src/components/PlayerSubmissionForm.js | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 2b61123a..5fb26c54 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -27,6 +27,7 @@ const FinalPoem = (props) => { ); } +// TODO Need to add propTypes // User Stories // *DONE* 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". diff --git a/src/components/Game.js b/src/components/Game.js index 416d07fa..a2a746ed 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -23,7 +23,6 @@ const Game = () => { const addPoem = (poem) => { const newPoemList = [...poemList]; // copy PoemList - const newLine = "The " + poem.adj1 + " " + poem.noun1 + " " + poem.adv + " " + poem.verb + " the " + poem.adj2 + " " + poem.noun2 + "."; newPoemList.push(newLine); @@ -90,4 +89,6 @@ const FIELDS = [ ".", ]; +// TODO Need to add propTypes + export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 35320bd8..ab6e0b8a 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -122,5 +122,7 @@ const PlayerSubmissionForm = (props) => { // Hints // Don't be shy about making all of the pieces of props or state that you've determined you need! +// TODO Need to add propTypes + export default PlayerSubmissionForm; From 9c833d132872296dcc00928da99b594bf0cc471e Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 23:53:25 -0700 Subject: [PATCH 17/19] added wave 3 user stories & conditional for recent --- src/components/Game.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index a2a746ed..43839776 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -47,7 +47,12 @@ const Game = () => {

{/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} - + + { + player > 1 ? + : + null + } {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} @@ -91,4 +96,19 @@ const FIELDS = [ // TODO Need to add propTypes + +// User Stories +// *DONE* As a player, I want to see only the most recent submission of poetry in the section "The Most Recent Submission" (RecentSubmission component), so that I can be inspired, just like the Dadaists were when they invented the original Exquisite Corpse game. +// TODO As a player, I only want to see the "The Most Recent Submission" section if there has already been at least one submission. +// TODO As players playing this game, we want a button to click to finalize our poem and reveal the entire final poem, so that we don't see the previous lines until we are finished. +// TODO As players playing this game, we want to hide the Player Submission Form after the final poem has been revealed, so that we don't add any more lines after the game is over. +// TODO As a player, I want the form text inputs to be light pink when they are blank, so I have a visual way of seeing that it's invalid when it's blank. + +// Hints +// Remember, you can have conditionals outside of JSX code +// You'll probably want to make a variable with the JSX code or empty string you want, and then use {} (curly brackets) to put it inside of other JSX +// You can actually also do one-line ternaries in JSX... +// Don't be afraid of using conditionals, and making more props if needed! + + export default Game; From ebf1bdf12a5132eae83e4cf911960a6915344345 Mon Sep 17 00:00:00 2001 From: thenora Date: Thu, 23 Apr 2020 23:59:51 -0700 Subject: [PATCH 18/19] wave 3 close to complete - gotta call it --- src/components/Game.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 43839776..12c62523 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -46,16 +46,14 @@ const Game = () => { { exampleFormat }

- {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} - { - player > 1 ? - : - null + player > 1 && showFinal !== true ? : null } {/* TODO add conditional logic to display only if finished poem is not true and player > 1 */} - + { + showFinal ? null : + } @@ -99,9 +97,9 @@ const FIELDS = [ // User Stories // *DONE* As a player, I want to see only the most recent submission of poetry in the section "The Most Recent Submission" (RecentSubmission component), so that I can be inspired, just like the Dadaists were when they invented the original Exquisite Corpse game. -// TODO As a player, I only want to see the "The Most Recent Submission" section if there has already been at least one submission. -// TODO As players playing this game, we want a button to click to finalize our poem and reveal the entire final poem, so that we don't see the previous lines until we are finished. -// TODO As players playing this game, we want to hide the Player Submission Form after the final poem has been revealed, so that we don't add any more lines after the game is over. +// *DONE* As a player, I only want to see the "The Most Recent Submission" section if there has already been at least one submission. +// *DONE* As players playing this game, we want a button to click to finalize our poem and reveal the entire final poem, so that we don't see the previous lines until we are finished. +// *DONE* As players playing this game, we want to hide the Player Submission Form after the final poem has been revealed, so that we don't add any more lines after the game is over. // TODO As a player, I want the form text inputs to be light pink when they are blank, so I have a visual way of seeing that it's invalid when it's blank. // Hints From 10ae5ec5f0333972808ff4389ce5b2de0dc60423 Mon Sep 17 00:00:00 2001 From: thenora Date: Fri, 24 Apr 2020 00:01:32 -0700 Subject: [PATCH 19/19] midnight pumpkin time: no propTypes or pink fields - cleaned up notes --- src/components/FinalPoem.js | 4 ---- src/components/Game.js | 13 ------------- src/components/PlayerSubmissionForm.js | 10 ---------- src/components/RecentSubmission.js | 2 +- 4 files changed, 1 insertion(+), 28 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 5fb26c54..66bacce3 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -29,8 +29,4 @@ const FinalPoem = (props) => { // TODO Need to add propTypes -// User Stories -// *DONE* 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". -// *DONE* 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. - export default FinalPoem; \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 12c62523..8bbc6810 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -94,19 +94,6 @@ const FIELDS = [ // TODO Need to add propTypes - -// User Stories -// *DONE* As a player, I want to see only the most recent submission of poetry in the section "The Most Recent Submission" (RecentSubmission component), so that I can be inspired, just like the Dadaists were when they invented the original Exquisite Corpse game. -// *DONE* As a player, I only want to see the "The Most Recent Submission" section if there has already been at least one submission. -// *DONE* As players playing this game, we want a button to click to finalize our poem and reveal the entire final poem, so that we don't see the previous lines until we are finished. -// *DONE* As players playing this game, we want to hide the Player Submission Form after the final poem has been revealed, so that we don't add any more lines after the game is over. // TODO As a player, I want the form text inputs to be light pink when they are blank, so I have a visual way of seeing that it's invalid when it's blank. -// Hints -// Remember, you can have conditionals outside of JSX code -// You'll probably want to make a variable with the JSX code or empty string you want, and then use {} (curly brackets) to put it inside of other JSX -// You can actually also do one-line ternaries in JSX... -// Don't be afraid of using conditionals, and making more props if needed! - - export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ab6e0b8a..3b29e1bb 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -113,16 +113,6 @@ const PlayerSubmissionForm = (props) => { ); } -// User Stories -// *DONE* As a player, I want to be able to fill out the six text input fields that mimic the poetry format and press a submit button, so that I fill out the line of poetry. -// *DONE* As a player, I want to be able to see placeholder text in each text input that describes what kind of word I should fill in. -// *DONE* As a player, I want the Game component to have the data of my submission, so that the Game component keeps track of all of the submissions. -// *DONE* TODO As a player who is going after the first player, I want to be able to have a cleared, reset form with no text in the input elements after the first player submitted, so that I can enter in my own submission easily. -// *DONE* As the third player, I want to see that the header for the submission form is "Player Submission Form for Player #3", so that I know that I am the third player. -// Hints -// Don't be shy about making all of the pieces of props or state that you've determined you need! - // TODO Need to add propTypes - export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index cdd6ef69..5edd3a3a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -7,7 +7,7 @@ const RecentSubmission = (props) => {

The Most Recent Submission

{ props.recentSubmission }

- {/* // ? generate sentence here, not in Game ? */} + {/* // ? refactor generate sentence here, not in Game ? */}
); }