From 5bed02f642f6611a9da12060088198a5519bda5f Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Tue, 21 Apr 2020 23:45:01 -0700 Subject: [PATCH 01/10] I have done wave one --- src/components/Game.js | 47 ++++++++++- src/components/PlayerSubmissionForm.js | 110 +++++++++++++++++++++++-- src/components/RecentSubmission.js | 2 +- 3 files changed, 147 insertions(+), 12 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..3e687701 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,7 +4,24 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; +// const poemLines = []; +// let playerNum = 1 +let recent = "" + const Game = () => { + const [poemList, setPoemList] = useState([]) + const [player, setPlayer] = useState(1) + + // const recentCall = () => { + // if (player > 1){ + // const recentFormat = poemList[player -1].map((field) => { + // return field + // }).join(" "); + // }else { + // return (" ") + // } + // } + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -13,6 +30,32 @@ const Game = () => { } }).join(" "); + const addLine = (line) => { + const newPoemList = [...poemList]; + // const nextId = Math.max(...newPoemList.map ((student) => student.id)) + 1 + newPoemList.push({ ...line + // id: nextId, + // the1: 'The', + // adj1: line.adj1, + // noun1: line.noun1, + // adv: line.adv, + // verb: line.verb, + // the2: 'the', + // adj2: line.adj2, + // noun2: line.noun2, + }); + + setPoemList(newPoemList); + + setPlayer(player + 1) + + console.log(line) + + recent = (Object.values(line)).join(" "); + console.log(recent) + } + + return (

Game

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

- + - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..646d366d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,21 +1,102 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; + + +const PlayerSubmissionForm = (props) => { + + const [line, setLine] = useState({ + the1: 'The', + adj1: '', + noun1: '', + adv: '', + verb: '', + the2: 'the', + adj2: '', + noun2: '', + + }); + + const onInputChange = (event) => { + console.log(`Changing field ${ event.target.name } to ${ event.target.value }`); + + const newLine = { + ...line + } + + newLine[event.target.name] = event.target.value; + setLine(newLine); + console.log(line) + }; + + const onFormSubmit = (event) => { + event.preventDefault(); + console.log('Submitting form'); + + if (line.adj1 !== '' && line.noun1 !== '' && line.adv !== '' && line.verb !== '' && line.adj2 !== '' && line.noun2 !== '') { + props.onSubmitCallback(line); + console.log(line) + setLine ({ //Clearing Fields + the1: 'The', + adj1: '', + noun1: '', + adv: '', + verb: '', + the2: 'the', + adj2: '', + noun2: '', + }); + } + console.log(line) + } -const PlayerSubmissionForm = () => { 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

+ + + placeholder="adverb" + type="text" + name='adv' + value={line.adv} + onChange={onInputChange}/> + +

the

+ +
@@ -27,5 +108,16 @@ const PlayerSubmissionForm = () => { ); } - +PlayerSubmissionForm.propTypes = { + onSubmitCallback: PropTypes.func.isRequired, +}; export default PlayerSubmissionForm; + + + // const baseInput = props.fields.forEach((field) => { + // return ( + // + // ) + // }); \ No newline at end of file diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..d21fac2a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{props.line}

); } From 7d8ae743522dab673e12f6d2ad9455beb12936f8 Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 10:51:07 -0700 Subject: [PATCH 02/10] got array of poemLine array made and working --- src/components/Game.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index 3e687701..c8780989 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -6,11 +6,12 @@ import RecentSubmission from './RecentSubmission'; // const poemLines = []; // let playerNum = 1 -let recent = "" +let recent = ""; +let poemLines = []; const Game = () => { - const [poemList, setPoemList] = useState([]) - const [player, setPlayer] = useState(1) + const [poemList, setPoemList] = useState([]); + const [player, setPlayer] = useState(1); // const recentCall = () => { // if (player > 1){ @@ -52,7 +53,8 @@ const Game = () => { console.log(line) recent = (Object.values(line)).join(" "); - console.log(recent) + poemLines.push(recent); + console.log(poemLines); } From 9d4d5e94df953b1add838da8c57487b54e8b43e0 Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 13:25:24 -0700 Subject: [PATCH 03/10] got final Poem to show at the right time not in a pretty way though --- src/components/FinalPoem.css | 11 ++++++++++- src/components/FinalPoem.js | 25 +++++++++++++++++++++++-- src/components/Game.js | 24 +----------------------- src/components/PlayerSubmissionForm.js | 4 +--- 4 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 67dda943..83ba8889 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -7,7 +7,7 @@ flex: 0.8; padding: 1rem; - border: 2px black solid; + border: 2px rgb(0, 0, 0) solid; box-shadow: 5px 10px black; transition: 0.25s; } @@ -16,6 +16,15 @@ background-color: tomato; } +.noShow{ + display:none; +} + +.show{ + + background-color: rgb(7, 189, 89); +} + .FinalPoem__poem { border-bottom: 2px gray dashed; } diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..f40a61fa 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,8 +1,26 @@ -import React from 'react'; +import React, { useState } from 'react'; import './FinalPoem.css'; + const FinalPoem = (props) => { + const [show, setShow] = useState(false) + + const onButtonClick = () => { + setShow(true) + + }; + + const lineComponents = props.props.map((line) => { + return ( +

+ {line} +

+ ); + }); + + + return (
@@ -11,7 +29,10 @@ const FinalPoem = (props) => {
- + +

+ {lineComponents} +

); diff --git a/src/components/Game.js b/src/components/Game.js index c8780989..1f645e8e 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -13,16 +13,6 @@ const Game = () => { const [poemList, setPoemList] = useState([]); const [player, setPlayer] = useState(1); - // const recentCall = () => { - // if (player > 1){ - // const recentFormat = poemList[player -1].map((field) => { - // return field - // }).join(" "); - // }else { - // return (" ") - // } - // } - const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -33,25 +23,13 @@ const Game = () => { const addLine = (line) => { const newPoemList = [...poemList]; - // const nextId = Math.max(...newPoemList.map ((student) => student.id)) + 1 newPoemList.push({ ...line - // id: nextId, - // the1: 'The', - // adj1: line.adj1, - // noun1: line.noun1, - // adv: line.adv, - // verb: line.verb, - // the2: 'the', - // adj2: line.adj2, - // noun2: line.noun2, }); setPoemList(newPoemList); setPlayer(player + 1) - console.log(line) - recent = (Object.values(line)).join(" "); poemLines.push(recent); console.log(poemLines); @@ -74,7 +52,7 @@ const Game = () => { - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 646d366d..263aed6e 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -26,7 +26,7 @@ const PlayerSubmissionForm = (props) => { newLine[event.target.name] = event.target.value; setLine(newLine); - console.log(line) + }; const onFormSubmit = (event) => { @@ -35,7 +35,6 @@ const PlayerSubmissionForm = (props) => { if (line.adj1 !== '' && line.noun1 !== '' && line.adv !== '' && line.verb !== '' && line.adj2 !== '' && line.noun2 !== '') { props.onSubmitCallback(line); - console.log(line) setLine ({ //Clearing Fields the1: 'The', adj1: '', @@ -47,7 +46,6 @@ const PlayerSubmissionForm = (props) => { noun2: '', }); } - console.log(line) } return ( From f8aa69b078f05233cb3066602183bec0db17e69d Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 21:04:25 -0700 Subject: [PATCH 04/10] saving before i go get help in the middle of getting components to dissapear --- src/components/FinalPoem.css | 1 + src/components/FinalPoem.js | 12 +++++++----- src/components/Game.css | 4 ++++ src/components/Game.js | 14 +++++++++++--- src/components/PlayerSubmissionForm.js | 2 +- src/components/RecentSubmission.js | 2 +- 6 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 83ba8889..6a9cfeec 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -18,6 +18,7 @@ .noShow{ display:none; + } .show{ diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index f40a61fa..8bef3ee4 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -9,6 +9,7 @@ const FinalPoem = (props) => { const onButtonClick = () => { setShow(true) + props.componentDissapear() }; const lineComponents = props.props.map((line) => { @@ -28,12 +29,13 @@ const FinalPoem = (props) => { -
- -

- {lineComponents} -

+
+ +
+

+ {lineComponents} +

); } diff --git a/src/components/Game.css b/src/components/Game.css index 8ff58e42..e6825de6 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -2,3 +2,7 @@ text-align: center; font-style: italic; } + +.noShow{ + display:none; +} \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 1f645e8e..a2e87479 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -9,10 +9,18 @@ import RecentSubmission from './RecentSubmission'; let recent = ""; let poemLines = []; + + const Game = () => { const [poemList, setPoemList] = useState([]); const [player, setPlayer] = useState(1); + const [show, setShow] = useState(true) + + const componentDissapear = () => { + setShow(false) + }; + const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -48,11 +56,11 @@ const Game = () => { { exampleFormat }

- + - + - +
); diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 263aed6e..2c1b12ce 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -49,7 +49,7 @@ const PlayerSubmissionForm = (props) => { } return ( -
+

Player Submission Form for Player #{props.player}

{ return ( -
+

The Most Recent Submission

{props.line}

From ba84483ebaff199dae33fcc4f6dda2af2c2493d5 Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 21:13:46 -0700 Subject: [PATCH 05/10] Everything but the reveal poem button is dissapearing correctly --- src/components/Game.js | 2 +- src/components/PlayerSubmissionForm.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Game.js b/src/components/Game.js index a2e87479..54caf5f3 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -58,7 +58,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 2c1b12ce..1ce070b0 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -49,10 +49,10 @@ const PlayerSubmissionForm = (props) => { } return ( -
+

Player Submission Form for Player #{props.player}

-
From 2ead86802f80a6e80ee2036aabf6ee98f2747f1f Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 21:18:59 -0700 Subject: [PATCH 06/10] The button has disappeared --- src/components/FinalPoem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 8bef3ee4..bd0d9ce8 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -30,7 +30,7 @@ const FinalPoem = (props) => {
- +

From 1adff2ed184d33c0c834c4c6f0e3d1b76751f94c Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 21:27:02 -0700 Subject: [PATCH 07/10] updated css so whole poem is with bigger text in a nice green box --- src/components/FinalPoem.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/FinalPoem.css b/src/components/FinalPoem.css index 6a9cfeec..36627782 100644 --- a/src/components/FinalPoem.css +++ b/src/components/FinalPoem.css @@ -22,8 +22,11 @@ } .show{ - + font-size: 32px; background-color: rgb(7, 189, 89); + text-align: center; + margin: 0px 300px; + border-radius: 20px; } .FinalPoem__poem { From 6c22295f882c9ca8a0eb76d1296fec082025b6db Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 22:32:21 -0700 Subject: [PATCH 08/10] box color working --- src/components/PlayerSubmissionForm.css | 10 +++++++++- src/components/PlayerSubmissionForm.js | 12 ++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..a54fbef9 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -10,7 +10,11 @@ display: flex; flex-wrap: wrap; justify-content: space-around; -} + } + +.boxColor { + color: pink; + } .PlayerSubmissionForm__submit { display: flex; @@ -35,6 +39,10 @@ background-color: #FFE9E9; } +.valid { + background-color: white; +} + .PlayerSubmissionForm__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1ce070b0..642dae67 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -3,6 +3,7 @@ import './PlayerSubmissionForm.css'; import PropTypes from 'prop-types'; + const PlayerSubmissionForm = (props) => { const [line, setLine] = useState({ @@ -48,6 +49,11 @@ const PlayerSubmissionForm = (props) => { } } + const boxColor = (name) => { + return (name === "") ? "PlayerSubmissionFormt__input--invalid" : "valid"; + }; + + return (

Player Submission Form for Player #{props.player}

@@ -59,24 +65,28 @@ const PlayerSubmissionForm = (props) => {

The

{ onChange={onInputChange}/>

the

Date: Wed, 22 Apr 2020 22:59:46 -0700 Subject: [PATCH 09/10] added proptypes --- src/components/FinalPoem.js | 6 ++++++ src/components/Game.js | 3 ++- src/components/PlayerSubmissionForm.js | 10 +++------- src/components/RecentSubmission.js | 5 +++++ 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index bd0d9ce8..ed669aba 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { @@ -40,4 +41,9 @@ const FinalPoem = (props) => { ); } +FinalPoem.propTypes = { + props: PropTypes.array, + componentDissapear: PropTypes.func.isRequired, +}; + export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index 54caf5f3..b7cc0bbb 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 poemLines = []; // let playerNum = 1 @@ -58,7 +59,7 @@ const Game = () => { - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 642dae67..9909e0bc 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -120,14 +120,10 @@ const PlayerSubmissionForm = (props) => { PlayerSubmissionForm.propTypes = { onSubmitCallback: PropTypes.func.isRequired, + player: PropTypes.number, + className: PropTypes.string, }; export default PlayerSubmissionForm; - // const baseInput = props.fields.forEach((field) => { - // return ( - // - // ) - // }); \ No newline at end of file + \ No newline at end of file diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index e8f0889e..f0a0e045 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) => { return ( @@ -10,4 +11,8 @@ const RecentSubmission = (props) => { ); } +RecentSubmission.propTypes = { + line: PropTypes.string, + className: PropTypes.string, +}; export default RecentSubmission; From 68980d6042206ba039d3eb3826d2f8db6fa3fd15 Mon Sep 17 00:00:00 2001 From: ChelseaC13 Date: Wed, 22 Apr 2020 23:04:41 -0700 Subject: [PATCH 10/10] cleaned up to turn in --- src/components/FinalPoem.js | 6 ------ src/components/Game.js | 7 ------- src/components/PlayerSubmissionForm.js | 5 ----- 3 files changed, 18 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index ed669aba..4a94d13a 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -2,9 +2,7 @@ import React, { useState } from 'react'; import './FinalPoem.css'; import PropTypes from 'prop-types'; - const FinalPoem = (props) => { - const [show, setShow] = useState(false) const onButtonClick = () => { @@ -21,18 +19,14 @@ const FinalPoem = (props) => { ); }); - - return (

Final Poem

-
-

{lineComponents} diff --git a/src/components/Game.js b/src/components/Game.js index b7cc0bbb..dd659cc5 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -3,15 +3,10 @@ import './Game.css'; import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; -import PropTypes from 'prop-types'; -// const poemLines = []; -// let playerNum = 1 let recent = ""; let poemLines = []; - - const Game = () => { const [poemList, setPoemList] = useState([]); const [player, setPlayer] = useState(1); @@ -41,10 +36,8 @@ const Game = () => { recent = (Object.values(line)).join(" "); poemLines.push(recent); - console.log(poemLines); } - return (

Game

diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 9909e0bc..4a507263 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -2,8 +2,6 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; import PropTypes from 'prop-types'; - - const PlayerSubmissionForm = (props) => { const [line, setLine] = useState({ @@ -15,7 +13,6 @@ const PlayerSubmissionForm = (props) => { the2: 'the', adj2: '', noun2: '', - }); const onInputChange = (event) => { @@ -27,7 +24,6 @@ const PlayerSubmissionForm = (props) => { newLine[event.target.name] = event.target.value; setLine(newLine); - }; const onFormSubmit = (event) => { @@ -53,7 +49,6 @@ const PlayerSubmissionForm = (props) => { return (name === "") ? "PlayerSubmissionFormt__input--invalid" : "valid"; }; - return (

Player Submission Form for Player #{props.player}