From 5f17297781009fec4f519be5f3ba387a2280e345 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Wed, 22 Apr 2020 21:29:06 -0700 Subject: [PATCH 1/3] add poem function done --- src/components/FinalPoem.js | 2 + src/components/Game.js | 53 ++++++++++++- src/components/PlayerSubmissionForm.js | 104 +++++++++++++++++++------ src/components/RecentSubmission.js | 9 ++- 4 files changed, 140 insertions(+), 28 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..5b3cacac 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -3,6 +3,8 @@ import './FinalPoem.css'; const FinalPoem = (props) => { + + return (
diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..707a322b 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,8 +4,9 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; + const Game = () => { - const exampleFormat = FIELDS.map((field) => { + const inputFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; } else { @@ -13,6 +14,50 @@ const Game = () => { } }).join(" "); + + const [player, setPlayer] = useState(1); + + const incrementPlayer = (player) =>{ + const newPlayer = player + 1; + setPlayer(newPlayer); + } + + const [poemList, setPoemList] = useState([]); + + console.log(`this comes from game`, poemList[poemList.length-1]); + + + const addPoem = (poem) => { + + const newPoemList = [...poemList]; + + // Find the max id and add 1 + // const nextId = newPoemList.reduce((accumulator, currentPoem) => { + // return Math.max(accumulator, currentPoem.id); + // }, 0) + 1; + + newPoemList.push({ + key: player, + the1: "The", + adj1: poem.adj1, + noun1: poem.noun1, + adv: poem.adv, + verb: poem.verb, + the2: "the", + adj2: poem.adj2, + noun2: poem.noun2, + dot: "." + }); + + setPoemList(newPoemList); + incrementPlayer(player); + + + } + + console.log(`this comes from game`, poemList[poemList.length-1]); + + return (

Game

@@ -22,12 +67,12 @@ const Game = () => {

Please follow the following format for your poetry submission:

- { exampleFormat } + { inputFormat }

- + - + diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index ba19e6ef..7cc9eae9 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,31 +1,91 @@ -import React, { useState } from 'react'; -import './PlayerSubmissionForm.css'; +import React, { useState } from "react"; +import "./PlayerSubmissionForm.css"; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

-
+const PlayerSubmissionForm = (props) => { + const [formFields, setFormFields] = useState({ + adj1: "", + noun1: "", + adv: "", + verb: "", + adj2: "", + noun2: "", + }); -
+ // event handlers + const onInputChange = (event) => { + console.log(event) + console.log(`Changing field ${event.target.name} to ${event.target.value}`); + const newFormFields = { + ...formFields, + }; + newFormFields[event.target.name] = event.target.value; + setFormFields(newFormFields); + }; - { - // Put your form inputs here... We've put in one below as an example - } - + const onFormSubmit = (event) => { + event.preventDefault(); -
+ props.addPoemCallback(formFields); + console.log(formFields); -
- -
-
-
- ); -} + setFormFields({ + adj1: "", + noun1: "", + adv: "", + verb: "", + adj2: "", + noun2: "", + }); + }; + + return ( +
+

Player Submission Form for Player #{props.player}

+ +
+
+

The

+ + + + +

the

+ + +

.

+
+ +
+ +
+
+
+ ); +}; + +PlayerSubmissionForm.propTypes = { + adj1: PropTypes.string.isRequired, + noun1: PropTypes.string.isRequired, + adv: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + adj2: PropTypes.string.isRequired, + noun2: PropTypes.string.isRequired, + + + +}; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..b84bd7ff 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,18 @@ import React from 'react'; import './RecentSubmission.css'; + const RecentSubmission = (props) => { + if (!props.poem){ + return '' + }else { return ( -
+

The Most Recent Submission

-

{ }

+

{props.poem.the1} {props.poem.adj1} {props.poem.noun1} {props.poem.adv} {props.poem.verb} {props.poem.the2} {props.poem.adj2} {props.poem.noun2} {props.poem.dot}

); } +} export default RecentSubmission; From 1d0d6ab51e6f835eba89df20498b57c8eec2c879 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Wed, 22 Apr 2020 23:48:55 -0700 Subject: [PATCH 2/3] added final poem --- src/components/FinalPoem.js | 14 ++++++-------- src/components/Game.js | 17 +++++++++++++---- src/components/PlayerSubmissionForm.css | 4 ++++ src/components/PlayerSubmissionForm.js | 22 +++++++++++++--------- src/components/RecentSubmission.js | 2 +- 5 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 5b3cacac..d84ac3f1 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,19 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import './FinalPoem.css'; const FinalPoem = (props) => { - return ( -
-
+
+ {props.gameon&&

Final Poem

- -
- + {props.poems.map ((poem)=>

{poem}

)} +
}
- +
); diff --git a/src/components/Game.js b/src/components/Game.js index 707a322b..36608704 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -23,10 +23,16 @@ const Game = () => { } const [poemList, setPoemList] = useState([]); + const [gameon, setGameOn]= useState(false) + // const endGame = () => {(gameon? setGameOn(true) : setGameOn(false))} console.log(`this comes from game`, poemList[poemList.length-1]); + const onPoemSubmit = () => { + setGameOn(true) + }; + const addPoem = (poem) => { const newPoemList = [...poemList]; @@ -54,6 +60,9 @@ const Game = () => { } + + + const poems = poemList.map((poem) => `${poem.the1} ${poem.adj1} ${poem.noun1} ${poem.adv} ${poem.verb} ${poem.the2} ${poem.adj2} ${poem.noun2}${poem.dot}`); console.log(`this comes from game`, poemList[poemList.length-1]); @@ -66,15 +75,15 @@ const Game = () => {

Please follow the following format for your poetry submission:

-

+

{ inputFormat }

- + - + - +
); diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..a45fec75 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -35,6 +35,10 @@ background-color: #FFE9E9; } +.PlayerSubmissionFormt__input--valid { + background-color: white; +} + .PlayerSubmissionForm__input--invalid::placeholder { color: black; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 7cc9eae9..0737d1d6 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -39,27 +39,31 @@ const PlayerSubmissionForm = (props) => { adj2: "", noun2: "", }); - }; + }; + + const makeMePink = (value) =>{ + return (value === "" ? "PlayerSubmissionFormt__input--invalid" : "PlayerSubmissionFormt__input--valid" ) + } return ( -
+ !props.gameon&& (

Player Submission Form for Player #{props.player}

The

- - - -

the

- -

.

@@ -72,7 +76,7 @@ const PlayerSubmissionForm = (props) => { />
-
+
) ); }; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index b84bd7ff..b378724b 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -3,7 +3,7 @@ import './RecentSubmission.css'; const RecentSubmission = (props) => { - if (!props.poem){ + if (!props.poem || props.gameon ){ return '' }else { return ( From f6897bf18b4e040f5bbba914d33889fd067a92d0 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Thu, 23 Apr 2020 00:01:17 -0700 Subject: [PATCH 3/3] cleaned up comments --- src/components/FinalPoem.js | 39 +++-- src/components/Game.js | 228 ++++++++++++------------- src/components/PlayerSubmissionForm.js | 134 +++++++++------ src/components/RecentSubmission.js | 32 ++-- 4 files changed, 237 insertions(+), 196 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d84ac3f1..7f7df952 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,27 @@ -import React, { useState } from 'react'; -import './FinalPoem.css'; +import React, { useState } from "react"; +import "./FinalPoem.css"; const FinalPoem = (props) => { - - - return ( -
- {props.gameon&&
-

Final Poem

- {props.poems.map ((poem)=>

{poem}

)} -
} -
- -
-
- ); -} + return ( +
+ {props.gameon && ( +
+

Final Poem

+ {props.poems.map((poem) => ( +

{poem}

+ ))} +
+ )} +
+ +
+
+ ); +}; export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index 36608704..77a3073c 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,123 +1,119 @@ -import React, { useState } from 'react'; -import './Game.css'; -import PlayerSubmissionForm from './PlayerSubmissionForm'; -import FinalPoem from './FinalPoem'; -import RecentSubmission from './RecentSubmission'; - +import React, { useState } from "react"; +import "./Game.css"; +import PlayerSubmissionForm from "./PlayerSubmissionForm"; +import FinalPoem from "./FinalPoem"; +import RecentSubmission from "./RecentSubmission"; const Game = () => { - const inputFormat = FIELDS.map((field) => { - if (field.key) { - return field.placeholder; - } else { - return field; - } - }).join(" "); - - - const [player, setPlayer] = useState(1); - - const incrementPlayer = (player) =>{ - const newPlayer = player + 1; - setPlayer(newPlayer); - } - - const [poemList, setPoemList] = useState([]); - const [gameon, setGameOn]= useState(false) - - // const endGame = () => {(gameon? setGameOn(true) : setGameOn(false))} - console.log(`this comes from game`, poemList[poemList.length-1]); - - - const onPoemSubmit = () => { - setGameOn(true) - }; - - const addPoem = (poem) => { - - const newPoemList = [...poemList]; - - // Find the max id and add 1 - // const nextId = newPoemList.reduce((accumulator, currentPoem) => { - // return Math.max(accumulator, currentPoem.id); - // }, 0) + 1; - - newPoemList.push({ - key: player, - the1: "The", - adj1: poem.adj1, - noun1: poem.noun1, - adv: poem.adv, - verb: poem.verb, - the2: "the", - adj2: poem.adj2, - noun2: poem.noun2, - dot: "." - }); - - setPoemList(newPoemList); - incrementPlayer(player); - - - } - - - const poems = poemList.map((poem) => `${poem.the1} ${poem.adj1} ${poem.noun1} ${poem.adv} ${poem.verb} ${poem.the2} ${poem.adj2} ${poem.noun2}${poem.dot}`); - - console.log(`this comes from game`, poemList[poemList.length-1]); - - - 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.

- -

Please follow the following format for your poetry submission:

- -

- { inputFormat } -

- - - - - - - -
- ); -} - + const inputFormat = FIELDS.map((field) => { + if (field.key) { + return field.placeholder; + } else { + return field; + } + }).join(" "); + + const [player, setPlayer] = useState(1); + + const incrementPlayer = (player) => { + const newPlayer = player + 1; + setPlayer(newPlayer); + }; + + const [poemList, setPoemList] = useState([]); + const [gameon, setGameOn] = useState(false); + + console.log(`this comes from game`, poemList[poemList.length - 1]); + + const onPoemSubmit = () => { + setGameOn(true); + }; + + const addPoem = (poem) => { + const newPoemList = [...poemList]; + + newPoemList.push({ + key: player, + the1: "The", + adj1: poem.adj1, + noun1: poem.noun1, + adv: poem.adv, + verb: poem.verb, + the2: "the", + adj2: poem.adj2, + noun2: poem.noun2, + dot: ".", + }); + + setPoemList(newPoemList); + incrementPlayer(player); + }; + + const poems = poemList.map( + (poem) => + `${poem.the1} ${poem.adj1} ${poem.noun1} ${poem.adv} ${poem.verb} ${poem.the2} ${poem.adj2} ${poem.noun2}${poem.dot}` + ); + + console.log(`this comes from game`, poemList[poemList.length - 1]); + + 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. +

+ +

Please follow the following format for your poetry submission:

+ +

{inputFormat}

+ + + + + + +
+ ); +}; const FIELDS = [ - "The", - { - key: 'adj1', - placeholder: 'adjective', - }, - { - key: 'noun1', - placeholder: 'noun', - }, - { - key: 'adv', - placeholder: 'adverb', - }, - { - key: 'verb', - placeholder: 'verb', - }, - "the", - { - key: 'adj2', - placeholder: 'adjective', - }, - { - key: 'noun2', - placeholder: 'noun', - }, - ".", + "The", + { + key: "adj1", + placeholder: "adjective", + }, + { + key: "noun1", + placeholder: "noun", + }, + { + key: "adv", + placeholder: "adverb", + }, + { + key: "verb", + placeholder: "verb", + }, + "the", + { + key: "adj2", + placeholder: "adjective", + }, + { + key: "noun2", + placeholder: "noun", + }, + ".", ]; export default Game; diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 0737d1d6..a6cf2150 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; import "./PlayerSubmissionForm.css"; -import PropTypes from 'prop-types'; - +import PropTypes from "prop-types"; const PlayerSubmissionForm = (props) => { const [formFields, setFormFields] = useState({ @@ -13,9 +12,8 @@ const PlayerSubmissionForm = (props) => { noun2: "", }); - // event handlers const onInputChange = (event) => { - console.log(event) + console.log(event); console.log(`Changing field ${event.target.name} to ${event.target.value}`); const newFormFields = { ...formFields, @@ -27,9 +25,8 @@ const PlayerSubmissionForm = (props) => { const onFormSubmit = (event) => { event.preventDefault(); - props.addPoemCallback(formFields); - console.log(formFields); - + props.addPoemCallback(formFields); + console.log(formFields); setFormFields({ adj1: "", @@ -39,57 +36,94 @@ const PlayerSubmissionForm = (props) => { adj2: "", noun2: "", }); - }; - - const makeMePink = (value) =>{ - return (value === "" ? "PlayerSubmissionFormt__input--invalid" : "PlayerSubmissionFormt__input--valid" ) - } + }; + + const makeMePink = (value) => { + return value === "" + ? "PlayerSubmissionFormt__input--invalid" + : "PlayerSubmissionFormt__input--valid"; + }; return ( - !props.gameon&& (
-

Player Submission Form for Player #{props.player}

+ !props.gameon && ( +
+

Player Submission Form for Player #{props.player}

-
-
-

The

- - - - -

the

- - -

.

-
+ +
+

The

+ + + + +

the

+ + +

.

+
-
- -
-
-
) +
+ +
+ +
+ ) ); }; PlayerSubmissionForm.propTypes = { - adj1: PropTypes.string.isRequired, - noun1: PropTypes.string.isRequired, - adv: PropTypes.string.isRequired, - verb: PropTypes.string.isRequired, - adj2: PropTypes.string.isRequired, - noun2: PropTypes.string.isRequired, - - - + adj1: PropTypes.string.isRequired, + noun1: PropTypes.string.isRequired, + adv: PropTypes.string.isRequired, + verb: PropTypes.string.isRequired, + adj2: PropTypes.string.isRequired, + noun2: PropTypes.string.isRequired, }; export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index b378724b..551c8da8 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,18 +1,22 @@ -import React from 'react'; -import './RecentSubmission.css'; - +import React from "react"; +import "./RecentSubmission.css"; const RecentSubmission = (props) => { - if (!props.poem || props.gameon ){ - return '' - }else { - return ( -
-

The Most Recent Submission

-

{props.poem.the1} {props.poem.adj1} {props.poem.noun1} {props.poem.adv} {props.poem.verb} {props.poem.the2} {props.poem.adj2} {props.poem.noun2} {props.poem.dot}

-
- ); -} -} + if (!props.poem || props.gameon) { + return ""; + } else { + return ( +
+

The Most Recent Submission

+

+ {" "} + {props.poem.the1} {props.poem.adj1} {props.poem.noun1}{" "} + {props.poem.adv} {props.poem.verb} {props.poem.the2} {props.poem.adj2}{" "} + {props.poem.noun2} {props.poem.dot} +

+
+ ); + } +}; export default RecentSubmission;