From 0e9765ce6889122799c143e33aa0ab0a4f6ea0c8 Mon Sep 17 00:00:00 2001 From: anchen9 Date: Tue, 12 Nov 2024 16:54:22 -0500 Subject: [PATCH] add firebase calls for banner elements & fix slide logic --- src/components/includes/Wrapped.tsx | 186 +++++++++++++++++++--------- src/media/wrapped/arm.svg | 2 +- src/media/wrapped/body.svg | 2 +- src/media/wrapped/couple&girl.svg | 41 ++++++ src/media/wrapped/couple.svg | 4 +- src/media/wrapped/girl.svg | 1 + src/media/wrapped/group.svg | 2 +- src/media/wrapped/head.svg | 2 +- src/media/wrapped/small_girl.svg | 9 ++ src/styles/Wrapped.scss | 82 ++++++------ 10 files changed, 226 insertions(+), 105 deletions(-) create mode 100644 src/media/wrapped/couple&girl.svg create mode 100644 src/media/wrapped/small_girl.svg diff --git a/src/components/includes/Wrapped.tsx b/src/components/includes/Wrapped.tsx index 5890a4f9..155e2bea 100644 --- a/src/components/includes/Wrapped.tsx +++ b/src/components/includes/Wrapped.tsx @@ -16,6 +16,7 @@ import asterik from "../../media/wrapped/asterik.svg"; import head from "../../media/wrapped/head.svg"; import body from "../../media/wrapped/body.svg"; import arm from "../../media/wrapped/arm.svg"; +import smallGirl from "../../media/wrapped/small_girl.svg"; import ConsistentPersonality from "../../media/wrapped/consistent_personality.svg" import ResourcefulPersonality from "../../media/wrapped/resourceful_personality.svg" import IndependentPersonality from "../../media/wrapped/independent_personality.svg" @@ -44,16 +45,35 @@ const Wrapped = (props: Props) => { totalMinutes: 0, favTaId: "", favClass:"", + favDay: 0, + favMonth: 0, + numStudentsHelped: 0, }); + const [taName, setTaName] = useState({ firstName: "", lastName: "", }); + const [favClass, setFavClass] = useState({ + code: "", + }); + + + const [totalStages, setTotalStages] = useState(0); + + // add these to useEffect? const semester = "FALL 2024"; - const month = "FEBRUARY"; - const favClass = "CS 1110"; - const favDay = "FRIDAYS"; + const months : string[] = [ + "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", + "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER" + ] + const days : string[] = [ + "SUNDAYS", "MONDAYS", "TUESDAYS", "WEDNESDAYS", "THURSDAYS", "FRIDAYS", "SATURDAYS" + ] + const month : string = months[wrappedData.favMonth]; + const day : string = days[wrappedData.favDay]; + const Asterik = () => ( @@ -62,22 +82,18 @@ const Wrapped = (props: Props) => { const [showBanner, setShowBanner] = useState(false); /* TA's only see 4 slides, TA + Student see 7, Only student see 6 */ - const totalStages = (wrappedData.timeHelpingStudents === undefined || wrappedData.timeHelpingStudents === 0) ? - (6) : (wrappedData.favTaId === "" || wrappedData.favTaId === undefined ) ? 4 : 7; - - const RenderStudent = () => { - if (loading) return null; - - return ( - <> - {stage === 1 && } - {stage === 2 && } - {stage === 3 && } - {stage === 4 && } - {stage === 5 && } - - ); - }; + // const totalStages = (wrappedData.timeHelpingStudents === undefined || wrappedData.timeHelpingStudents == 0) ? + // (6) : (wrappedData.favTaId == "" || wrappedData.favTaId === undefined ) ? 4 : 7; + + const RenderStudent = () => ( + <> + {stage === 1 && } + {stage === 2 && } + {stage === 3 && } + {stage === 4 && } + {stage === 5 && } + + ); const RenderTA = () => ( <> @@ -87,22 +103,19 @@ const Wrapped = (props: Props) => { ) - const RenderStudentTA = () => { - if (loading) return null; - - return( - <> - {stage === 1 && } - {stage === 2 && } - {stage === 3 && } - {stage === 4 && } - {stage === 5 && } - {stage === 6 && } - - ); - }; + const RenderStudentTA = () => ( + <> + {stage === 1 && } + {stage === 2 && } + {stage === 3 && } + {stage === 4 && } + {stage === 5 && } + {stage === 6 && } + + ); useEffect(() => { + // add usestate for totalstages calculate it in useEffect const wrappedRef = firebase.firestore().collection('wrapped'); // eslint-disable-next-line no-console @@ -118,7 +131,22 @@ const Wrapped = (props: Props) => { totalMinutes: number; favTaId: string; favClass: string; + favDay: number; + favMonth: number; + numStudentsHelped: number; }); + + const data = doc.data(); + if (data !== undefined){ + if (data.timeHelpingStudents === undefined || data.timeHelpingStudents == 0){ + setTotalStages(6); + } else if (data.favTaId == "" || data.favTaId === undefined){ + setTotalStages(4); + } else{ + setTotalStages(7); + } + } + } else { // eslint-disable-next-line no-console console.log('No such document!'); @@ -160,6 +188,30 @@ const Wrapped = (props: Props) => { fetchData(); }, [wrappedData.favTaId]); + useEffect(() => { + const coursesRef = firebase.firestore().collection("courses"); + // eslint-disable-next-line no-console + const fetchData = async () => { + setLoading(true); + try{ + const doc = await coursesRef.doc(wrappedData.favClass).get(); + if (doc.exists){ + setFavClass(doc.data() as { + code: string; + }) + } else{ + // eslint-disable-next-line no-console + console.log('No such document!'); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error("Error fetching data: ", error); + } + setLoading(false); + }; + fetchData(); + }, [wrappedData.favClass]); + useEffect(() => { const timer = setTimeout(() => { setShowBanner(true); @@ -201,10 +253,18 @@ const Wrapped = (props: Props) => { const FavTABanner = () => (
- {favClass} ON {favDay} - {favClass} ON {favDay} - {favClass} ON {favDay} - {favClass} ON {favDay} + {favClass.code} ON {day} + {favClass.code} ON {day} + {favClass.code} ON {day} + {favClass.code} ON {day} +
+ ); + + const StudentsHelpedBanner = () => ( +
+ + YOU HAD THE MOST VISITS IN {month} + YOU HAD THE MOST VISITS IN {month}
); @@ -360,7 +420,7 @@ const Wrapped = (props: Props) => {
{
@@ -482,10 +542,10 @@ const Wrapped = (props: Props) => { <>
YOU MADE LIFE EASIER FOR... @@ -495,42 +555,46 @@ const Wrapped = (props: Props) => { top: "50%", left: "50%", transform: "translate(-50%, -50%)", - fontSize: "18rem", + fontSize: "225.97px", fontWeight: 600, color: "#080680", }} > - 70 - {/* replace with firebase call for num students helped */} + {wrappedData.numStudentsHelped}
STUDENTS
+
+ {showBanner && ( + <> +
+ +
+ + )} +
+ ) const Conclusion = () => ( <>
-
+
PAT YOURSELF ON THE BACK
diff --git a/src/media/wrapped/arm.svg b/src/media/wrapped/arm.svg index d6a25f9d..2a405c0f 100644 --- a/src/media/wrapped/arm.svg +++ b/src/media/wrapped/arm.svg @@ -1,4 +1,4 @@ - + diff --git a/src/media/wrapped/body.svg b/src/media/wrapped/body.svg index c8c4d32a..2a47048e 100644 --- a/src/media/wrapped/body.svg +++ b/src/media/wrapped/body.svg @@ -1,4 +1,4 @@ - + diff --git a/src/media/wrapped/couple&girl.svg b/src/media/wrapped/couple&girl.svg new file mode 100644 index 00000000..0bd9c5cf --- /dev/null +++ b/src/media/wrapped/couple&girl.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/media/wrapped/couple.svg b/src/media/wrapped/couple.svg index 1b2a336e..6abfa6c5 100644 --- a/src/media/wrapped/couple.svg +++ b/src/media/wrapped/couple.svg @@ -2,12 +2,12 @@ + -d="M-0.000278473 0.783203 H59.31 V105.85 H-0.000278473 V0.783203 Z" -d="M32.1852 0.783203 H91.4922 V102.907 H39.0422 V0.783203 Z" + diff --git a/src/media/wrapped/girl.svg b/src/media/wrapped/girl.svg index 9ec1ee88..8f5d3d31 100644 --- a/src/media/wrapped/girl.svg +++ b/src/media/wrapped/girl.svg @@ -1,5 +1,6 @@ + diff --git a/src/media/wrapped/group.svg b/src/media/wrapped/group.svg index 9b3fdb0b..c540a264 100644 --- a/src/media/wrapped/group.svg +++ b/src/media/wrapped/group.svg @@ -1,4 +1,4 @@ - + diff --git a/src/media/wrapped/head.svg b/src/media/wrapped/head.svg index e2a4d8d3..a0eea721 100644 --- a/src/media/wrapped/head.svg +++ b/src/media/wrapped/head.svg @@ -1,4 +1,4 @@ - + diff --git a/src/media/wrapped/small_girl.svg b/src/media/wrapped/small_girl.svg new file mode 100644 index 00000000..8b31a804 --- /dev/null +++ b/src/media/wrapped/small_girl.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/styles/Wrapped.scss b/src/styles/Wrapped.scss index 37d0c59b..92ed85a4 100644 --- a/src/styles/Wrapped.scss +++ b/src/styles/Wrapped.scss @@ -20,7 +20,7 @@ background: linear-gradient(90deg, #80B0DE 3.12%, #93A7E4 97.75%); border-radius: 8px; padding: 2rem; - position: fixed; + // position: fixed; display: flex; flex-direction: column; position: absolute; @@ -30,6 +30,7 @@ color: #FFFFFF; align-items: center; justify-content: center; + overflow: hidden; } .closeButtonContainer { @@ -173,6 +174,7 @@ left: 50%; transform: translate(-50%, -50%); font-size: 18rem; + font-weight: 600; color: #080680; } @@ -202,16 +204,11 @@ transform: translate(-100%, -100%) rotate(18.6deg); right: -50%; opacity: 0; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); - } - 20% { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 100% { transform: translate(0%, 0%) rotate(18.6deg); right: -3%; opacity: 1; - clip-path: polygon(39.5% 0, 96% 0, 98.15% 100%, 20.8% 100%); } } @@ -219,18 +216,12 @@ 0% { transform: translate(-100%, -100%) rotate(8.63deg); left: -50%; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); opacity: 0; } - 20% { - clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); - } 100% { transform: translate(0%, 0%) rotate(8.63deg); left: -1%; opacity: 1; - clip-path: polygon(0.5% 0, 99% 0, 57% 100%, 1.2% 100%); - } } @@ -251,8 +242,7 @@ right: -50%; // Start from outside the right edge transform: rotate(18.6deg); transform-origin: top right; - clip-path: polygon(39.5% 0, 96% 0, 98.15% 100%, 20.8% 100%); - animation: slideInTopRight 2s forwards; + animation: slideInTopRight 2s forwards; } &.bottom-left { @@ -260,7 +250,6 @@ left: -50%; // Start from outside the left edge transform: rotate(8.63deg); transform-origin: bottom left; - clip-path: polygon(0.5% 0, 99% 0, 57% 100%, 1.2% 100%); animation: slideInBottomLeft 2s forwards; } @@ -270,7 +259,6 @@ opacity: 1; transform: rotate(6.08deg); transform-origin: bottom left; - clip-path: polygon(0.8% 0, 77.2% 0%, 77.3% 30%, 52% 100%, 1.2% 100%); } &.bottom-favta{ @@ -279,7 +267,14 @@ opacity: 1; transform: rotate(4.47deg); transform-origin: bottom left; - clip-path: polygon(0.9% 0, 80.6% 0, 80.8% 84%, 73% 100%, 1.2% 100%); + } + + &.bottom-ta-helped{ + opacity: 1; + bottom: 0.25rem; + right: -0.25rem; + border: 0.3px 0px 0px 0px; + transform: rotate(-5.62deg); } &.bottom-conclusion{ @@ -288,7 +283,6 @@ opacity: 1; transform: rotate(16.45deg); transform-origin: bottom left; - clip-path: polygon(0.6% 0, 100% 0, 60% 100%, 4% 100%); } } @@ -318,16 +312,23 @@ } .conclusionText { - text-align: "center"; - width: 313; - + &.top-text{ + color: #080680; + font-weight: 600; + position: absolute; + width: 475px; + height: 38px; + top: 42px; + left: 40px; + font-size: 35px; + } &.center-text { font-weight: 600; width: 279px; height: 71px; position: absolute; - top: 14rem; - left: 22.5rem; + top: 195px; + left: 270px; line-height: 40px; font-size: 27px; } @@ -340,16 +341,16 @@ } 100%{ right: -50%; - opacity: 0; } - } .bus{ - width: 25rem; + width: 280px; + height: 153px; position: absolute; + top: 326.61px; right: 1rem; - bottom: 0.5rem; + transform: rotate(0.94deg); animation: slideOut 5s forwards; } @@ -357,8 +358,9 @@ width: 15.35px; height: 23.21px; position: absolute; - bottom: 11rem; - left: 5.45rem; + bottom: 12.34rem; + left: 6.5rem; + transform: rotate(4.55deg); } .body{ @@ -367,16 +369,14 @@ position: absolute; bottom: 4.9rem; left: 1.5rem; - gap: 0px; - opacity: 0px; } @keyframes wave { 0%{ - transform: rotate(-9.66deg); + transform: rotate(9.66deg); } 100%{ - bottom: 10.1rem; + bottom: 10.75rem; transform: rotate(-90deg); } } @@ -385,10 +385,16 @@ width: 42.21px; height: 33.71px; position: absolute; - bottom: 9.11rem; - left: 5.12rem; - gap: 0px; - opacity: 0px; - transform: rotate(-9.66deg); + bottom: 10rem; + left: 5.79rem; + transform: rotate(9.66deg); animation: wave 3s forwards; +} + +.smallGirl{ + position: absolute; + width: 39px; + height: 59px; + bottom: 1.7rem; + left: 8rem; } \ No newline at end of file