From 67e23b267716dde24a394cf86e733f83ada4cfc7 Mon Sep 17 00:00:00 2001 From: Tithvorlak Mok Date: Wed, 22 Apr 2020 20:14:07 -0700 Subject: [PATCH 1/4] finished wave 2 and wave 3. --- src/App.js | 3 + src/components/FinalPoem.js | 33 ++++-- src/components/Game.js | 38 ++++-- src/components/PlayerSubmissionForm.css | 13 +- src/components/PlayerSubmissionForm.js | 150 ++++++++++++++++++++++-- src/components/RecentSubmission.js | 24 +++- 6 files changed, 223 insertions(+), 38 deletions(-) diff --git a/src/App.js b/src/App.js index 8f64627a..350445b6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,10 @@ import React from 'react'; import './App.css'; import Game from './components/Game.js'; +//Create a callback function for onSubmitCallback + const App = () => { + return (
diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index d516184e..07d2c3f0 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -1,20 +1,39 @@ import React from 'react'; import './FinalPoem.css'; +import PropTypes from 'prop-types'; const FinalPoem = (props) => { + const arrayOfStrings = props.submissions.map((input) =>{ + return ( +

The {input.adjective1} {input.noun1} {input.adverb} {input.verb} the {input.adjective2} {input.noun2}

+ ) + }) + + const onButtonClick = () =>{ + props.onClickCallback() + } return (
-
+ {props.showComponent &&

Final Poem

- -
- -
- -
+

{arrayOfStrings}

+
} + {!props.showComponent &&
+ +
}
); } +FinalPoem.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.object), + onClickCallback: PropTypes.func, + showComponent: PropTypes.bool +} export default FinalPoem; diff --git a/src/components/Game.js b/src/components/Game.js index ad27105b..eae08ce8 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -4,7 +4,7 @@ import PlayerSubmissionForm from './PlayerSubmissionForm'; import FinalPoem from './FinalPoem'; import RecentSubmission from './RecentSubmission'; -const Game = () => { +const Game = (props) => { const exampleFormat = FIELDS.map((field) => { if (field.key) { return field.placeholder; @@ -12,30 +12,42 @@ const Game = () => { return field; } }).join(" "); + const [mostRecentSubmissionText, setMostRecentSubmissionText] = useState("") + const [submissions, setSubmissions] = useState([]) + const [showComponent, setShowComponent] = useState(false) + const createPoem = (poem) =>{ + const newSubmissions = [...submissions] + newSubmissions.push({ + adjective1:poem.adjective1, + noun1: poem.noun1, + adverb: poem.adverb, + verb: poem.verb, + adjective2: poem.adjective2, + noun2:poem.noun2 + }); + setSubmissions(newSubmissions); + setMostRecentSubmissionText("The Most Recent Submission") + } + const displayFinalPoem = () =>{ + setShowComponent(!showComponent); + } + 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:

-

{ exampleFormat }

- - - - - - - + {!showComponent && } + {!showComponent && } + {}
- ); + ); } - const FIELDS = [ "The", { diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..45d91b07 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -1,17 +1,24 @@ .PlayerSubmissionForm { line-height: 3rem; + } .PlayerSubmissionForm__form { - margin: 2rem auto 3rem auto; + margin: 2rem auto 3rem auto; } .PlayerSubmissionForm__poem-inputs { display: flex; flex-wrap: wrap; justify-content: space-around; + } +.PlayerSubmissionForm__poem-inputs input { + + width: 150px; + height: 50px; +} .PlayerSubmissionForm__submit { display: flex; justify-content: center; @@ -35,6 +42,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 ba19e6ef..98ccaa20 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -1,24 +1,145 @@ import React, { useState } from 'react'; import './PlayerSubmissionForm.css'; +import PropTypes from 'prop-types'; -const PlayerSubmissionForm = () => { - return ( -
-

Player Submission Form for Player #{ }

+const PlayerSubmissionForm = (props) => { + //create a useState hook for the input changes + const [poem, setPoem] = useState({ + adjective1: "", + noun1: "", + adverb: "", + verb: "", + adjective2: "", + noun2: "" + }) + + const [currentPlayer, setPlayer] = useState(1) + //create an event handler function for the onChange event listener + const onInputChange = (event) =>{ + const newPoem = { + ...poem + } + newPoem[event.target.name] = [event.target.value] + setPoem(newPoem) + } + //create an event handler function for onSubmit event listener + const onSubmitForm = (event) =>{ + if (isEmpty()) return // to prevent the user if they miss filling out any field + event.preventDefault(); + console.log("creating a poem"); + console.log(poem); + + //send call back function to RecentSubmission + props.onSubmitCallback(poem) + setPoem({ + adjective1:"", + noun1:"", + adverb:"", + verb:"", + adjective2:"", + noun2:""}) + setPlayer(currentPlayer + 1) + } + // Field validation + const inputs = { + adjective1:{ + validation: /.+/, + message: "Field must have 1 or more letters" + }, + noun1:{ + validation: /.+/, + message: "Field must have 1 or more letters" + }, + adverb: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + verb: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + adjective2: { + validation: /.+/, + message: "Field must have 1 or more letters" + }, + noun2: { + validation: /.+/, + message: "Field must have 1 or more letters" + } + } + //Validate function + const fieldValid = (fieldName) =>{ + return inputs[fieldName].validation.test(poem[fieldName]) + } + const isEmpty = () =>{ + return( + poem.adjective1 === "" || + poem.noun1 === "" || + poem.adverb === "" || + poem.verb === "" || + poem.adjective2 === ""|| + poem.noun2 === "" + ) + } + return ( +
+

Player Submission Form for Player #{ currentPlayer }

-
- - { - // Put your form inputs here... We've put in one below as an example - } +

The

- + placeholder="adjective" + type="text" + name = "adjective1" + value = {poem.adjective1} + onChange = {onInputChange} + className = {fieldValid("adjective1")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'} + /> + + + +

the

+ +
-
@@ -27,5 +148,8 @@ const PlayerSubmissionForm = () => { ); } +PlayerSubmissionForm.proptype = { + onSubmitCallback: PropTypes.func, +} export default PlayerSubmissionForm; diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..efd986df 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -1,13 +1,29 @@ import React from 'react'; import './RecentSubmission.css'; - +import PropTypes from 'prop-types'; const RecentSubmission = (props) => { + const submissions = props.submissions.map(input =>{ + return( + `The ${input.adjective1} + ${input.noun1} + ${input.adverb} + ${input.verb} the + ${input.adjective2} + ${input.noun2}` + ) + }) + return (
-

The Most Recent Submission

-

{ }

-
+

{props.mostRecentSubmissionText}

+

{submissions[submissions.length - 1]}

+
); } +RecentSubmission.propTypes = { + submissions: PropTypes.arrayOf(PropTypes.object), + mostRecentSubmissionText: PropTypes.string +} + export default RecentSubmission; From dea2c55c2daed711e0a8104757725c8f29dc9bc3 Mon Sep 17 00:00:00 2001 From: Tithvorlak Mok Date: Wed, 22 Apr 2020 20:14:32 -0700 Subject: [PATCH 2/4] Final Cleanup --- src/components/FinalPoem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 07d2c3f0..0414bed7 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -12,7 +12,6 @@ const FinalPoem = (props) => { const onButtonClick = () =>{ props.onClickCallback() } - return (
{props.showComponent &&
From d6025533932b2abd582492132839e00d6ba0d1da Mon Sep 17 00:00:00 2001 From: Tithvorlak Mok Date: Wed, 22 Apr 2020 21:49:11 -0700 Subject: [PATCH 3/4] convert all the text to lowercase --- src/components/PlayerSubmissionForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 98ccaa20..7df7b59d 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -19,7 +19,7 @@ const PlayerSubmissionForm = (props) => { const newPoem = { ...poem } - newPoem[event.target.name] = [event.target.value] + newPoem[event.target.name] = [event.target.value.toLowerCase()] setPoem(newPoem) } //create an event handler function for onSubmit event listener From 7a3e7639131db30f200cc5d31a7e5f5c9df56250 Mon Sep 17 00:00:00 2001 From: Tithvorlak Mok Date: Wed, 22 Apr 2020 21:56:27 -0700 Subject: [PATCH 4/4] Added period --- src/components/FinalPoem.js | 2 +- src/components/PlayerSubmissionForm.js | 1 + src/components/RecentSubmission.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/FinalPoem.js b/src/components/FinalPoem.js index 0414bed7..a8396336 100644 --- a/src/components/FinalPoem.js +++ b/src/components/FinalPoem.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; const FinalPoem = (props) => { const arrayOfStrings = props.submissions.map((input) =>{ return ( -

The {input.adjective1} {input.noun1} {input.adverb} {input.verb} the {input.adjective2} {input.noun2}

+

The {input.adjective1} {input.noun1} {input.adverb} {input.verb} the {input.adjective2} {input.noun2} .

) }) diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 7df7b59d..72cb1988 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -139,6 +139,7 @@ const PlayerSubmissionForm = (props) => { onChange = {onInputChange} className = {fieldValid("noun2")? 'PlayerSubmissionFormt__input--valid':'PlayerSubmissionFormt__input--invalid'} /> +

.

diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index efd986df..348ffd9a 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -9,7 +9,7 @@ const RecentSubmission = (props) => { ${input.adverb} ${input.verb} the ${input.adjective2} - ${input.noun2}` + ${input.noun2} .` ) })