From 86a61507f3b48365dcf53eca94771e9da18f9b49 Mon Sep 17 00:00:00 2001 From: Vera Date: Mon, 20 Apr 2020 19:05:46 -0700 Subject: [PATCH 01/27] onChange function, and state for new poem, HTML form --- src/components/PlayerSubmissionForm.js | 80 ++++++++++++++++++++++---- 1 file changed, 70 insertions(+), 10 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..27f76149 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,23 +2,83 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const PlayerSubmissionForm = () => { + + const [poemPiece, setPoemPiece] = useState({ + adj1:'', + noun1:'', + adv:'', + verb:'', + adj2:'', + noun2:'' + }); + + const onChange =(event) => { + + const newPoem = { + ...poemPiece + } + console.log(newPoem); + newPoem[event.target.name] = event.target.value; + setPoemPiece(newPoem); + } + + + return (

Player Submission Form for Player #{ }

-
- - { - // Put your form inputs here... We've put in one below as an example - } - - + The + + + + the + + .
-
From a06e82d35a95a4361d7b929da5dada6701dff3bc Mon Sep 17 00:00:00 2001 From: Vera Date: Tue, 21 Apr 2020 15:46:37 -0700 Subject: [PATCH 02/27] addPoemPiece from the form function and send it to the RecentSubmission component --- src/components/Game.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..28786b19 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,6 +5,11 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { + + const poemPieces = [] + + const [poemPiece, setPoemPiece] = useState(poemPieces); + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +18,27 @@ const Game = () => { } }).join(" "); + const addPoemPiece= (poem)=> { + const newPoemPiece = [...poemPieces]; + + console.log(poem) + newPoemPiece.push({ + ...poem, + adj1: poem.adj1, + noun1: poem.noun1, + adv: poem.adv, + verb: poem.verb, + adj2: poem.adj2, + noun2: poem.noun2, + }); + + setPoemPiece(newPoemPiece); + + console.log(newPoemPiece); + } + + // console.log(poemPieces); + return (

Game

@@ -25,9 +51,9 @@ const Game = () => { { exampleFormat }

- + - + From 493ce8eeb3528227705a9694337d54aed7773a71 Mon Sep 17 00:00:00 2001 From: Vera Date: Tue, 21 Apr 2020 15:50:20 -0700 Subject: [PATCH 03/27] PlayerSubmissionForm take props to use the callback to send back the poem data --- src/components/PlayerSubmissionForm.js | 31 +++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 27f76149..05fe0a7e 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 [poemPiece, setPoemPiece] = useState({ adj1:'', @@ -17,18 +17,43 @@ const PlayerSubmissionForm = () => { const newPoem = { ...poemPiece } + console.log(newPoem); newPoem[event.target.name] = event.target.value; setPoemPiece(newPoem); } - + const onFormSubmit = (event) => { + event.preventDefault(); + console.log("submitting form") + if ( poemPiece.adj1 !== '' && + poemPiece.noun1 !== '' && + poemPiece.adv !== '' && + poemPiece.verb !== '' && + poemPiece.adj2 !== '' && + poemPiece.noun2 !== '' ) + { + // send that data back up to app. + props.onFormSubmitCallback(poemPiece) + // Clear the form afert to submit the data back to the game. + setPoemPiece({ + adj1 :'', + noun1 :'', + adv :'', + verb :'', + adj2 :'', + noun2 :'', + }); + } + }; return (

Player Submission Form for Player #{ }

- +
The Date: Tue, 21 Apr 2020 23:02:50 -0700 Subject: [PATCH 04/27] Passing the fields props to PlayerSubmissionForm to create components --- src/components/Game.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 28786b19..f2382a38 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -18,10 +18,13 @@ const Game = () => { } }).join(" "); + + const addPoemPiece= (poem)=> { const newPoemPiece = [...poemPieces]; console.log(poem) + newPoemPiece.push({ ...poem, adj1: poem.adj1, @@ -32,9 +35,10 @@ const Game = () => { noun2: poem.noun2, }); - setPoemPiece(newPoemPiece); + // const format = exampleFormat(newPoemPiece) + // console.log(format) - console.log(newPoemPiece); + setPoemPiece(newPoemPiece); } // console.log(poemPieces); @@ -53,7 +57,7 @@ const Game = () => { - + From 98cbb4cb2186d1f85808ee1265bbb50bb54cba70 Mon Sep 17 00:00:00 2001 From: Vera Date: Tue, 21 Apr 2020 23:05:17 -0700 Subject: [PATCH 05/27] generateFormComponents to create input form dynamically --- src/components/PlayerSubmissionForm.js | 73 ++++++++------------------ 1 file changed, 23 insertions(+), 50 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 05fe0a7e..d0c201fa 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -17,7 +17,7 @@ const PlayerSubmissionForm = (props) => { const newPoem = { ...poemPiece } - + console.log(newPoem); newPoem[event.target.name] = event.target.value; setPoemPiece(newPoem); @@ -37,7 +37,7 @@ const PlayerSubmissionForm = (props) => { props.onFormSubmitCallback(poemPiece) // Clear the form afert to submit the data back to the game. setPoemPiece({ - adj1 :'', + adj1 :'', noun1 :'', adv :'', verb :'', @@ -47,6 +47,26 @@ const PlayerSubmissionForm = (props) => { } }; + // Getting the fields from the parent (Game) Props.field object. + const generateFormComponents = props.fields.map((field, i) => { + // Initialize the place holder value to empty string. + const valueHolder = poemPiece[field.key]; + if (field.key){ + return ( + + ); + } else { + return field; + } + }); + return (

Player Submission Form for Player #{ }

@@ -55,54 +75,7 @@ const PlayerSubmissionForm = (props) => { onSubmit={onFormSubmit} className="PlayerSubmissionForm__form" >
- The - - - - the - - . + {generateFormComponents}
From d69b2fc80f49cfbf67224311b0f4d0729afb3212 Mon Sep 17 00:00:00 2001 From: Vera Date: Tue, 21 Apr 2020 23:50:17 -0700 Subject: [PATCH 06/27] New player state to track the player number, add 1 everytime addPoemPiece called, pass as props to form --- src/components/Game.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index f2382a38..38c1640e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -5,18 +5,22 @@ import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; const Game = () => { - + + // data of form submission, so that the Game component keeps track of all of the submissions. const poemPieces = [] const [poemPiece, setPoemPiece] = useState(poemPieces); - const exampleFormat = FIELDS.map((field) => { - if (field.key) { - return field.placeholder; - } else { - return field; - } - }).join(" "); + // State to add up 1 to the next player. + const [player, setPlayer] = useState(1) + + // const exampleFormat = FIELDS.map((field) => { + // if (field.key) { + // return field.placeholder; + // } else { + // return field; + // } + // }).join(" "); @@ -37,7 +41,7 @@ const Game = () => { // const format = exampleFormat(newPoemPiece) // console.log(format) - + setPlayer(player + 1) setPoemPiece(newPoemPiece); } @@ -52,12 +56,12 @@ const Game = () => {

Please follow the following format for your poetry submission:

- { exampleFormat } + {/* { exampleFormat } */}

- + From 4ed617b136e1d0ea6a151a0861389b5e2959ec9f Mon Sep 17 00:00:00 2001 From: Vera Date: Tue, 21 Apr 2020 23:51:32 -0700 Subject: [PATCH 07/27] CLEARINPUTS constant to store the input empty string and some comments --- src/components/PlayerSubmissionForm.js | 52 +++++++++++++------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d0c201fa..d9a9bcf7 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,19 +1,22 @@ -import React, { useState } from 'react'; +import React, { useState, useReducer } from 'react'; import './PlayerSubmissionForm.css'; +const CLEARINPUTS = { + adj1:'', + noun1:'', + adv:'', + verb:'', + adj2:'', + noun2:'' +}; + const PlayerSubmissionForm = (props) => { - const [poemPiece, setPoemPiece] = useState({ - adj1:'', - noun1:'', - adv:'', - verb:'', - adj2:'', - noun2:'' - }); + // State to handle the pieces of poems. + // CLEARINPUTS = use constant to set the input to empty strings. + const [poemPiece, setPoemPiece] = useState(CLEARINPUTS); const onChange =(event) => { - const newPoem = { ...poemPiece } @@ -26,25 +29,18 @@ const PlayerSubmissionForm = (props) => { const onFormSubmit = (event) => { event.preventDefault(); console.log("submitting form") - if ( poemPiece.adj1 !== '' && + if (poemPiece.adj1 !== '' && poemPiece.noun1 !== '' && poemPiece.adv !== '' && poemPiece.verb !== '' && poemPiece.adj2 !== '' && poemPiece.noun2 !== '' ) - { - // send that data back up to app. - props.onFormSubmitCallback(poemPiece) - // Clear the form afert to submit the data back to the game. - setPoemPiece({ - adj1 :'', - noun1 :'', - adv :'', - verb :'', - adj2 :'', - noun2 :'', - }); - } + { + // send that data back up to app. + props.onFormSubmitCallback(poemPiece) + // reseting form with no text in the input elements after the first player submitted + setPoemPiece(CLEARINPUTS); + } }; // Getting the fields from the parent (Game) Props.field object. @@ -56,6 +52,7 @@ const PlayerSubmissionForm = (props) => { { } }); + console.log(props) + return (
-

Player Submission Form for Player #{ }

+ {/* Displaying the number of the current player. props.currentPlayer from Game.js */} +

Player Submission Form for Player #{props.currentPlayer}

+ {/* Invoking the function to generate dynamicly the Input form. */} {generateFormComponents}
From d0ceb46bf44e45a456dc049857670376004b0720 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 10:57:35 -0700 Subject: [PATCH 08/27] Setting the empty array inside of poemPiece state, and refactoring poem newPoemPiece funtion, player props --- src/components/Game.js | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 38c1640e..a9fd6d4a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -7,9 +7,8 @@ import RecentSubmission from './RecentSubmission'; const Game = () => { // data of form submission, so that the Game component keeps track of all of the submissions. - const poemPieces = [] - const [poemPiece, setPoemPiece] = useState(poemPieces); + const [poemPiece, setPoemPiece] = useState([]); // State to add up 1 to the next player. const [player, setPlayer] = useState(1) @@ -23,30 +22,17 @@ const Game = () => { // }).join(" "); - + // CallBack func to get the info from the form. const addPoemPiece= (poem)=> { - const newPoemPiece = [...poemPieces]; + const newPoemPiece = [...poemPiece]; console.log(poem) - newPoemPiece.push({ - ...poem, - adj1: poem.adj1, - noun1: poem.noun1, - adv: poem.adv, - verb: poem.verb, - adj2: poem.adj2, - noun2: poem.noun2, - }); - - // const format = exampleFormat(newPoemPiece) - // console.log(format) + newPoemPiece.push(poem) setPlayer(player + 1) setPoemPiece(newPoemPiece); } - // console.log(poemPieces); - return (

Game

@@ -61,9 +47,13 @@ const Game = () => { - + - +
); From 4d094a8face47bb82f609611cc555efc0bb55494 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 10:58:30 -0700 Subject: [PATCH 09/27] get rid off useReducer typo --- src/components/PlayerSubmissionForm.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d9a9bcf7..d99d22b5 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,4 +1,4 @@ -import React, { useState, useReducer } from 'react'; +import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; const CLEARINPUTS = { @@ -63,9 +63,6 @@ const PlayerSubmissionForm = (props) => { return field; } }); - - console.log(props) - return (
{/* Displaying the number of the current player. props.currentPlayer from Game.js */} From 9e991ac8361feec1c6e41a34d69d267cac836f21 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 12:40:54 -0700 Subject: [PATCH 10/27] FinalPoem func to display each part of the poem inside of a

--- src/components/FinalPoem.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..d2493a44 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,13 +3,23 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + console.log(props) + + // Each submission in the final poem section on a different line or paragraph. + const showingPoemLines = props.poems.map((poem, i) => { + return ( +

{poem}

+ ) + }); + return (

Final Poem

- +
- + {/* See all of the submissions of poetry lines in the section named "Final Poem". */} + {showingPoemLines}
From b6b38e10096199dec12a30e3e56c48e2b786426f Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 12:42:03 -0700 Subject: [PATCH 11/27] onFormSubmit func, poem formated before send it to Game Component. --- src/components/PlayerSubmissionForm.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index d99d22b5..6d7fde5b 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -36,8 +36,23 @@ const PlayerSubmissionForm = (props) => { poemPiece.adj2 !== '' && poemPiece.noun2 !== '' ) { - // send that data back up to app. - props.onFormSubmitCallback(poemPiece) + // Format the poem once the submit event happens. + // One line compact everything before to send it to game Component. + const formatPoem = [ + "The", + poemPiece.adj1, + poemPiece.noun1, + poemPiece.adv, + poemPiece.verb, + "the", + poemPiece.adj2, + poemPiece.noun2, + "." + ].join(" ") + + console.log(formatPoem) + // send that data back up to app. + props.onFormSubmitCallback(formatPoem) // reseting form with no text in the input elements after the first player submitted setPoemPiece(CLEARINPUTS); } From 6ee926a97dbadf2d3a16d04c42630ae8a73b004c Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 13:32:16 -0700 Subject: [PATCH 12/27] Formating RecentSubmition return comp --- src/components/Game.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index a9fd6d4a..8e82c51a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -45,7 +45,9 @@ const Game = () => { {/* { exampleFormat } */}

- + Date: Wed, 22 Apr 2020 13:32:54 -0700 Subject: [PATCH 13/27] showingLastPoemePiece func to show the last piece of the poem --- src/components/RecentSubmission.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..f5ebea32 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -2,10 +2,20 @@ import React from 'react'; import './RecentSubmission.css'; const RecentSubmission = (props) => { + + const showingLastPoemePiece =() => { + // + const lastPoemIdx = props.poems.length - 1 + return ( +

{props.poems[lastPoemIdx]}

+ ) + }; + return (

The Most Recent Submission

-

{ }

+ { showingLastPoemePiece() } +

{ }

); } From 77cd6bf5e76c8093c28aed292123164e857257d6 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 18:48:19 -0700 Subject: [PATCH 14/27] Using state playing to display the poem at the end and hide the button --- src/components/FinalPoem.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d2493a44..f1369526 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,17 +12,26 @@ const FinalPoem = (props) => { ) }); + return (
-
-

Final Poem

- -
- {/* See all of the submissions of poetry lines in the section named "Final Poem". */} - {showingPoemLines} -
- -
+ { + props.playing || ( +
+

Final Poem

+ {/* See all of the submissions of poetry lines in the section named "Final Poem". */} + {showingPoemLines} +
+ ) + } + { + props.playing && ( +
+ +
+ ) + } +
); } From 3298b1e0184cfafea86e70ed093760b6400eda44 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 18:50:28 -0700 Subject: [PATCH 15/27] Set playing state to know when the game is over, passing into the child components --- src/components/Game.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 8e82c51a..fabc8e00 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -9,6 +9,7 @@ const Game = () => { // data of form submission, so that the Game component keeps track of all of the submissions. const [poemPiece, setPoemPiece] = useState([]); + const [playing, setPlaying] = useState(true); // State to add up 1 to the next player. const [player, setPlayer] = useState(1) @@ -33,6 +34,10 @@ const Game = () => { setPoemPiece(newPoemPiece); } + const gameOver =()=> { + setPlaying(false); + } + return (

Game

@@ -44,18 +49,24 @@ const Game = () => {

{/* { exampleFormat } */}

- + {/* // playing={playing} */} - +
); From f23193f28e7fdcf4e5846b59f301f2d876424344 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 18:51:27 -0700 Subject: [PATCH 16/27] shouldDisplay func to display based on the playing state, to know when the game is over or not --- src/components/RecentSubmission.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index f5ebea32..f66a5849 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -11,12 +11,23 @@ const RecentSubmission = (props) => { ) }; + + const shouldDisplay =() => { + if (props.poems.length === 0) { + return false; + } else { + return props.playing; + } + } + return ( + shouldDisplay() && (

The Most Recent Submission

{ showingLastPoemePiece() }

{ }

+ ) ); } From 6b4a0d64ea3e4ec45b5d68f9800093a770fff560 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 19:54:36 -0700 Subject: [PATCH 17/27] comments on display info --- src/components/FinalPoem.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index f1369526..5018ed30 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -27,6 +27,8 @@ const FinalPoem = (props) => { { props.playing && (
+ {/* A button to click to finalize the poem and reveal the entire final poem, + it does not show the previous lines until the poem is finished. */}
) From 1896dbd7052f729c8342e22421c1345667077f41 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 19:55:10 -0700 Subject: [PATCH 18/27] Uncomment the exampleFormat --- src/components/Game.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index fabc8e00..f3e1eebd 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -14,13 +14,13 @@ const Game = () => { // State to add up 1 to the next player. const [player, setPlayer] = useState(1) - // const exampleFormat = FIELDS.map((field) => { - // if (field.key) { - // return field.placeholder; - // } else { - // return field; - // } - // }).join(" "); + const exampleFormat = FIELDS.map((field) => { + if (field.key) { + return field.placeholder; + } else { + return field; + } + }).join(" "); // CallBack func to get the info from the form. @@ -47,7 +47,7 @@ const Game = () => {

Please follow the following format for your poetry submission:

- {/* { exampleFormat } */} + { exampleFormat }

{/* // playing={playing} */} Date: Wed, 22 Apr 2020 19:56:19 -0700 Subject: [PATCH 19/27] .empty class to highlight the pink content --- src/components/PlayerSubmissionForm.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..c16bedc2 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -38,3 +38,11 @@ .PlayerSubmissionForm__input--invalid::placeholder { color: black; } + +.empty { + background-color: lightpink; +} + +h3 { + text-align: center; +} \ No newline at end of file From bcf8a6940b9027c2ca2c82c66e1bfcdbb54a0a93 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 19:57:25 -0700 Subject: [PATCH 20/27] className ,empty to highligh or not when is filled --- src/components/PlayerSubmissionForm.js | 42 ++++++++++++++++---------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 6d7fde5b..effe40df 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -59,7 +59,7 @@ const PlayerSubmissionForm = (props) => { }; // Getting the fields from the parent (Game) Props.field object. - const generateFormComponents = props.fields.map((field, i) => { + const generateFormComponents = props.fields.map((field, i) => { // Initialize the place holder value to empty string. const valueHolder = poemPiece[field.key]; if (field.key){ @@ -71,30 +71,40 @@ const PlayerSubmissionForm = (props) => { placeholder= {field.placeholder} value={valueHolder} onChange={onChange} - // className={isEmpty(sentence[`${field.key}`]) ? "empty" : "filled"} + // Form text inputs to be light pink when they are empty. + // A visual way of seeing that it's invalid when it's blank. + className={valueHolder === "" ? "empty" : "filled"} /> ); } else { return field; } }); + + // {/* Displaying the number of the current player. props.currentPlayer from Game.js */} return (
- {/* Displaying the number of the current player. props.currentPlayer from Game.js */} -

Player Submission Form for Player #{props.currentPlayer}

- - -
- {/* Invoking the function to generate dynamicly the Input form. */} - {generateFormComponents} -
-
- + {/* Hide the Player Submission Form after the final poem has been revealed. */} + { + props.playing && + ( +
+

Player Submission Form for Player #{props.currentPlayer}

+ +
+ {/* Invoking the function to generate dynamicly the Input form. */} + {generateFormComponents} +
+
+ +
+
- + ) + }
); } From 73e846a167ed5569c35f6b84b70eeb521ec9c23e Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 19:58:04 -0700 Subject: [PATCH 21/27] See only the most recent submission comment --- src/components/RecentSubmission.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index f66a5849..5790ee42 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -23,6 +23,7 @@ const RecentSubmission = (props) => { return ( shouldDisplay() && (
+ {/* See only the most recent submission of poetry in the section */}

The Most Recent Submission

{ showingLastPoemePiece() }

{ }

From 582c1d1b824e15a5c0261499b098fd4df6750e85 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 21:29:36 -0700 Subject: [PATCH 22/27] Background button color green --- src/components/FinalPoem.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..c9c2f7df 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -13,7 +13,7 @@ } .FinalPoem__reveal-btn:hover { - background-color: tomato; + background-color: rgb(54, 236, 197); } .FinalPoem__poem { From c51b8084e70472203738776087c6261626f02034 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 21:30:34 -0700 Subject: [PATCH 23/27] Syling game and playerSubmittionForm --- src/components/Game.css | 8 ++++++++ src/components/PlayerSubmissionForm.css | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..b85331d2 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,11 @@ text-align: center; font-style: italic; } +.btn { + display: flex; + justify-content: space-around; +} + +h2 { + padding: 20px; +} diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index c16bedc2..707d4b9c 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -28,7 +28,7 @@ } .PlayerSubmissionForm__submit-btn:hover { - background-color: tomato; + background-color: rgb(54, 236, 197); } .PlayerSubmissionFormt__input--invalid { From 4dbbe9c2e24d4a0c3776fe82d6617476b6f93d22 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 21:31:06 -0700 Subject: [PATCH 24/27] resetGame func and OnClick event listener --- src/components/Game.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Game.js b/src/components/Game.js index f3e1eebd..abcec9ef 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -22,6 +22,14 @@ const Game = () => { } }).join(" "); + // Function to start over the game! Anytime + const resetGame =()=> { + setPoemPiece([]); + setPlaying(true); + setPlayer(1); + console.log("resetig") + } + // CallBack func to get the info from the form. const addPoemPiece= (poem)=> { @@ -41,6 +49,9 @@ const Game = () => { return (

Game

+
+ +

Each player should take turns filling out and submitting the form below. Each turn should be done individually and in secret! Take inspiration from the revealed recent submission. When all players are finished, click the final button on the bottom to reveal the entire poem.

@@ -67,7 +78,6 @@ const Game = () => { onGameOverCallback={gameOver} {...{playing}} /> -
); } From a68ff2ffa3a5901c735ff18dceffd743826e89c3 Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 21:47:51 -0700 Subject: [PATCH 25/27] Adding PropTypes to the components --- src/components/FinalPoem.js | 7 +++++++ src/components/Game.js | 2 ++ src/components/PlayerSubmissionForm.js | 10 +++++++++- src/components/RecentSubmission.js | 7 +++++++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 5018ed30..f74af460 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,5 +1,6 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { @@ -38,4 +39,10 @@ const FinalPoem = (props) => { ); } +FinalPoem.propTypes = { + poems: PropTypes.array.isRequired, + playing: PropTypes.bool.isRequired, + onGameOverCallback: PropTypes.func.isRequired +}; + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index abcec9ef..e470a78a 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,6 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; + const Game = () => { // data of form submission, so that the Game component keeps track of all of the submissions. @@ -113,4 +114,5 @@ const FIELDS = [ ".", ]; + export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index effe40df..40b58afd 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 CLEARINPUTS = { adj1:'', @@ -15,7 +16,7 @@ const PlayerSubmissionForm = (props) => { // State to handle the pieces of poems. // CLEARINPUTS = use constant to set the input to empty strings. const [poemPiece, setPoemPiece] = useState(CLEARINPUTS); - + console.log(props); const onChange =(event) => { const newPoem = { ...poemPiece @@ -109,5 +110,12 @@ const PlayerSubmissionForm = (props) => { ); } +PlayerSubmissionForm.propTypes = { + currentPlayer: PropTypes.number.isRequired, + fields: PropTypes.array.isRequired, + onFormSubmitCallback: PropTypes.func.isRequired, + playing: PropTypes.bool.isRequired, +}; + export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 5790ee42..4aa0b2aa 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,5 +1,6 @@ import React from 'react'; import './RecentSubmission.css'; +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { @@ -32,4 +33,10 @@ const RecentSubmission = (props) => { ); } +RecentSubmission.propTypes = { + poems: PropTypes.array.isRequired, + playing: PropTypes.bool.isRequired, +}; + + export default RecentSubmission; From fa5f1261d26566de6c398b8e00a3a1ebca53ffca Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 21:50:43 -0700 Subject: [PATCH 26/27] Formatting the document --- src/components/FinalPoem.js | 18 ++-- src/components/Game.js | 28 +++--- src/components/PlayerSubmissionForm.js | 113 ++++++++++++------------- src/components/RecentSubmission.js | 16 ++-- 4 files changed, 87 insertions(+), 88 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index f74af460..d52a84db 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -16,15 +16,15 @@ const FinalPoem = (props) => { return (
- { - props.playing || ( -
-

Final Poem

- {/* See all of the submissions of poetry lines in the section named "Final Poem". */} - {showingPoemLines} -
+ { + props.playing || ( +
+

Final Poem

+ {/* See all of the submissions of poetry lines in the section named "Final Poem". */} + {showingPoemLines} +
) - } + } { props.playing && (
@@ -34,7 +34,7 @@ const FinalPoem = (props) => {
) } - +
); } diff --git a/src/components/Game.js b/src/components/Game.js index e470a78a..b5049418 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,7 +6,7 @@ import RecentSubmission from './RecentSubmission'; const Game = () => { - + // data of form submission, so that the Game component keeps track of all of the submissions. const [poemPiece, setPoemPiece] = useState([]); @@ -24,7 +24,7 @@ const Game = () => { }).join(" "); // Function to start over the game! Anytime - const resetGame =()=> { + const resetGame = () => { setPoemPiece([]); setPlaying(true); setPlayer(1); @@ -33,7 +33,7 @@ const Game = () => { // CallBack func to get the info from the form. - const addPoemPiece= (poem)=> { + const addPoemPiece = (poem) => { const newPoemPiece = [...poemPiece]; console.log(poem) @@ -43,7 +43,7 @@ const Game = () => { setPoemPiece(newPoemPiece); } - const gameOver =()=> { + const gameOver = () => { setPlaying(false); } @@ -59,26 +59,26 @@ const Game = () => {

Please follow the following format for your poetry submission:

- { exampleFormat } + {exampleFormat}

{/* // playing={playing} */} - - - + {...{ playing }} + />
); } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 40b58afd..a4051ce4 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,12 +3,12 @@ import './PlayerSubmissionForm.css'; import PropTypes from 'prop-types'; const CLEARINPUTS = { - adj1:'', - noun1:'', - adv:'', - verb:'', - adj2:'', - noun2:'' + adj1: '', + noun1: '', + adv: '', + verb: '', + adj2: '', + noun2: '' }; const PlayerSubmissionForm = (props) => { @@ -17,7 +17,7 @@ const PlayerSubmissionForm = (props) => { // CLEARINPUTS = use constant to set the input to empty strings. const [poemPiece, setPoemPiece] = useState(CLEARINPUTS); console.log(props); - const onChange =(event) => { + const onChange = (event) => { const newPoem = { ...poemPiece } @@ -30,25 +30,24 @@ const PlayerSubmissionForm = (props) => { const onFormSubmit = (event) => { event.preventDefault(); console.log("submitting form") - if (poemPiece.adj1 !== '' && - poemPiece.noun1 !== '' && - poemPiece.adv !== '' && - poemPiece.verb !== '' && - poemPiece.adj2 !== '' && - poemPiece.noun2 !== '' ) - { + if (poemPiece.adj1 !== '' && + poemPiece.noun1 !== '' && + poemPiece.adv !== '' && + poemPiece.verb !== '' && + poemPiece.adj2 !== '' && + poemPiece.noun2 !== '') { // Format the poem once the submit event happens. // One line compact everything before to send it to game Component. const formatPoem = [ "The", - poemPiece.adj1, - poemPiece.noun1, - poemPiece.adv, - poemPiece.verb, - "the", - poemPiece.adj2, - poemPiece.noun2, - "." + poemPiece.adj1, + poemPiece.noun1, + poemPiece.adv, + poemPiece.verb, + "the", + poemPiece.adj2, + poemPiece.noun2, + "." ].join(" ") console.log(formatPoem) @@ -60,50 +59,50 @@ const PlayerSubmissionForm = (props) => { }; // Getting the fields from the parent (Game) Props.field object. - const generateFormComponents = props.fields.map((field, i) => { + const generateFormComponents = props.fields.map((field, i) => { // Initialize the place holder value to empty string. const valueHolder = poemPiece[field.key]; - if (field.key){ - return ( - - ); - } else { - return field; - } + if (field.key) { + return ( + + ); + } else { + return field; + } }); - + // {/* Displaying the number of the current player. props.currentPlayer from Game.js */} return (
{/* Hide the Player Submission Form after the final poem has been revealed. */} - { + { props.playing && ( -
-

Player Submission Form for Player #{props.currentPlayer}

-
-
- {/* Invoking the function to generate dynamicly the Input form. */} - {generateFormComponents} -
-
- -
-
-
+
+

Player Submission Form for Player #{props.currentPlayer}

+
+
+ {/* Invoking the function to generate dynamicly the Input form. */} + {generateFormComponents} +
+
+ +
+
+
) }
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 4aa0b2aa..c6b8058a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; const RecentSubmission = (props) => { - const showingLastPoemePiece =() => { + const showingLastPoemePiece = () => { // const lastPoemIdx = props.poems.length - 1 return ( @@ -13,7 +13,7 @@ const RecentSubmission = (props) => { }; - const shouldDisplay =() => { + const shouldDisplay = () => { if (props.poems.length === 0) { return false; } else { @@ -23,12 +23,12 @@ const RecentSubmission = (props) => { return ( shouldDisplay() && ( -
- {/* See only the most recent submission of poetry in the section */} -

The Most Recent Submission

- { showingLastPoemePiece() } -

{ }

-
+
+ {/* See only the most recent submission of poetry in the section */} +

The Most Recent Submission

+ {showingLastPoemePiece()} +

{}

+
) ); } From ef5a3c33759ec22b930548929fb673732d92a82a Mon Sep 17 00:00:00 2001 From: Vera Date: Wed, 22 Apr 2020 22:20:53 -0700 Subject: [PATCH 27/27] Final comments and rename poemPiece to poems and SetPoemPiece to setPoemPieces --- src/components/FinalPoem.js | 5 +++++ src/components/Game.js | 19 ++++++++++--------- src/components/RecentSubmission.js | 5 +++-- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d52a84db..61811e49 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -13,10 +13,13 @@ const FinalPoem = (props) => { ) }); + // It shows each part depends on playing state. return (
{ + // props.playing || === !props.playing + // It shows final poem if playing is false. props.playing || (

Final Poem

@@ -26,6 +29,8 @@ const FinalPoem = (props) => { ) } { + // It shows the button if playing is true. + // Means the game is not over. props.playing && (
{/* A button to click to finalize the poem and reveal the entire final poem, diff --git a/src/components/Game.js b/src/components/Game.js index b5049418..3589fc15 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -9,9 +9,9 @@ const Game = () => { // data of form submission, so that the Game component keeps track of all of the submissions. - const [poemPiece, setPoemPiece] = useState([]); + const [poems, setPoemPieces] = useState([]); + // SetPlaying false when the game is over. const [playing, setPlaying] = useState(true); - // State to add up 1 to the next player. const [player, setPlayer] = useState(1) @@ -25,22 +25,21 @@ const Game = () => { // Function to start over the game! Anytime const resetGame = () => { - setPoemPiece([]); + setPoemPieces([]); setPlaying(true); setPlayer(1); - console.log("resetig") } // CallBack func to get the info from the form. const addPoemPiece = (poem) => { - const newPoemPiece = [...poemPiece]; + const newPoemPiece = [...poems]; console.log(poem) newPoemPiece.push(poem) setPlayer(player + 1) - setPoemPiece(newPoemPiece); + setPoemPieces(newPoemPiece); } const gameOver = () => { @@ -61,9 +60,10 @@ const Game = () => {

{exampleFormat}

- {/* // playing={playing} */} + @@ -75,8 +75,9 @@ const Game = () => { />
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index c6b8058a..efca69e9 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,14 +5,13 @@ import PropTypes from 'prop-types'; const RecentSubmission = (props) => { const showingLastPoemePiece = () => { - // const lastPoemIdx = props.poems.length - 1 return (

{props.poems[lastPoemIdx]}

) }; - + // It returns false if there is not poems within the array. const shouldDisplay = () => { if (props.poems.length === 0) { return false; @@ -22,6 +21,8 @@ const RecentSubmission = (props) => { } return ( + // If the result of sholdDisplay is true -> Display the Most Recent. + // React does not render anything if the return of our func is false. shouldDisplay() && (
{/* See only the most recent submission of poetry in the section */}