From fa7f553d41e0f4772fcc52443f1c50374861f03a Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Mon, 21 Oct 2024 10:57:50 +0530 Subject: [PATCH 01/16] Update CONTRIBUTING.md: Remove unnecessary lines --- CONTRIBUTING.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 43f2d88..54fb350 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,5 +1,3 @@ - - # Contributing Guidelines Thank you for your interest in contributing to our project! To maintain consistency and quality across the codebase, please follow these guidelines when contributing. From 8cbaa29b24fd873fab29abef4facd7b000166dc5 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Mon, 21 Oct 2024 15:44:50 +0530 Subject: [PATCH 02/16] Add local deployment script and fix ref assignment in GamePlayCardList --- scripts/local.sh | 10 ++++++++++ .../src/components/landing/gamePlayMechanics/index.tsx | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 scripts/local.sh diff --git a/scripts/local.sh b/scripts/local.sh new file mode 100644 index 0000000..c3e700d --- /dev/null +++ b/scripts/local.sh @@ -0,0 +1,10 @@ +#!/bin/bash + +# Start the local replica +dfx start --background + +# Install the project dependencies +npm install + +# Deploy the project +dfx deploy \ No newline at end of file diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx index f92074b..18d199e 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx @@ -49,7 +49,7 @@ const GamePlayCardList = ({ containerRef, linesRef } : GamePlayCardListProps) => {(index < CARDS.length - 1) && ( // Validate `linesRef.current` is not null
el && (linesRef.current[index] = el)}>
// Assign ref after validating that linesRef.current is not null + ref={el => el && linesRef.current && (linesRef.current[index] = el)}> // Assign ref after validating that linesRef.current is not null )} ))} From 47126a36ab4d2ef7ed8f63ad3a3153449256d823 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Mon, 21 Oct 2024 15:48:02 +0530 Subject: [PATCH 03/16] Refactor landing page CSS: Remove unnecessary outline classes --- .../src/components/landing/GradientCover/index.css | 2 +- .../src/components/landing/gamePlayMechanics/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css index 040e4a6..0ebc7f6 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css +++ b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css @@ -1,5 +1,5 @@ .gradient-cover{ - @apply outline outline-lime-50 md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32 + @apply md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32 } .right-purple-pattern{ diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css index 61e7fcb..0a93721 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css @@ -10,7 +10,7 @@ .gameplay-mechanics-cards { @apply flex md:flex-1 flex-row md:justify-between justify-center md:items-center items-center gap-6 relative mt-2 md:w-full w-[300vw] md:h-auto h-screen - overflow-x-hidden px-2 outline outline-red-500 ; + overflow-x-hidden px-2 ; } .section-title { From 3ebb3818af3c9f08ffbe3cfa4fb9317ba6559f09 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Mon, 21 Oct 2024 16:47:59 +0530 Subject: [PATCH 04/16] Refactor landing page CSS: Remove unnecessary outline classes and fix ref assignment in GamePlayCardList --- .../landing/gamePlayMechanics/index.tsx | 87 ++++++------------- 1 file changed, 25 insertions(+), 62 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx index 18d199e..fdf40f0 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useEffect, useState } from 'react'; +import { useRef, useEffect } from 'react'; import GameplayMechanic, { CardProps } from './Cards'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; @@ -26,9 +26,9 @@ const CARDS = [ } ] as CardProps[]; -const Header = ({titleRef}:{titleRef : React.RefObject}) => { +const Header = () => { return ( -
+

Gameplay Mechanics

Explore the engaging system of Star Dust Adventures

@@ -36,11 +36,11 @@ const Header = ({titleRef}:{titleRef : React.RefObject}) => { } type GamePlayCardListProps = { - containerRef : React.RefObject, - linesRef : React.RefObject + containerRef: React.RefObject, + linesRef: React.RefObject } -const GamePlayCardList = ({ containerRef, linesRef } : GamePlayCardListProps) => { +const GamePlayCardList = ({ containerRef, linesRef }: GamePlayCardListProps) => { return (
{CARDS.map((card, index) => ( @@ -48,8 +48,8 @@ const GamePlayCardList = ({ containerRef, linesRef } : GamePlayCardListProps) => {(index < CARDS.length - 1) && ( // Validate `linesRef.current` is not null
el && linesRef.current && (linesRef.current[index] = el)}>
// Assign ref after validating that linesRef.current is not null + className="w-1/4 h-0.5 bg-white bg-opacity-50 transform origin-left" + ref={el => el && linesRef.current && (linesRef.current[index] = el)}>
// Assign ref after validating that linesRef.current is not null )} ))} @@ -61,71 +61,34 @@ const GamePlayMechanics = () => { const containerRef = useRef(null); const sectionRef = useRef(null); const linesRef = useRef>([]); - const titleRef = useRef(null); - - const [isMobile,setIsMobile] = useState(window.innerWidth < 768); - - useEffect(()=>{ - window.addEventListener('resize',()=>{ - setIsMobile(window.innerWidth < 768); - }); - return () => { - window.removeEventListener('resize',()=>{}); - } - },[]); useEffect(() => { - if (!containerRef.current || !sectionRef.current || !titleRef.current) return; + if (!containerRef.current || !sectionRef.current) return; const cards = containerRef.current.querySelectorAll('.gameplay-card'); const lines = linesRef.current; - console.log(cards) - - - - // Screen based Animation - if(!isMobile){ - gsap.set(cards, { opacity: 0, scale: 0.8 }); - gsap.set(lines, { scaleX: 0 }); - const tl = gsap.timeline({ - scrollTrigger: { - trigger: sectionRef.current, - start: 'top top', - end: 'bottom top', - pin: true, - pinSpacing: true, - scrub: 1, - }, - }); - // Desktop Animation - tl.to(cards, { opacity: 1, scale: 1, stagger: 0.2, duration: 0.5 }) + gsap.set(cards, { opacity: 0, scale: 0.8 }); + gsap.set(lines, { scaleX: 0 }); + const tl = gsap.timeline({ + scrollTrigger: { + trigger: sectionRef.current, + start: 'top top', + end: 'bottom top', + pin: true, + pinSpacing: true, + scrub: 1, + }, + }); + tl.to(cards, { opacity: 1, scale: 1, stagger: 0.2, duration: 0.5 }) .to(lines, { scaleX: 1, duration: 0.5, stagger: 0.2 }, '<'); - } else{ - // Cards Scroll based Animation - - gsap.to(cards,{ - xPercent: - 100 * (cards.length -1), - scale:1.2, - ease : "none", - scrollTrigger:{ - trigger:sectionRef.current, - pin:true, - scrub : 1, - // snap : 1 / (cards.length - 1), - end : () => sectionRef.current ? "+=" + sectionRef.current.offsetWidth / 3 : "+=0", - markers:true - } - }) - - } return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; - }, [isMobile]); + }, []); return (
-
- +
+
); }; From 9668e9fe575f6ace0a88e0e98df19c4d0fe42cd9 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:13:25 +0530 Subject: [PATCH 05/16] Refactor CSS: Update landing page styles and add mobile gameplay mechanics --- .../gameplayMechanics/Card/index.css | 3 + .../gameplayMechanics/Card/index.tsx | 12 ++ .../gameplayMechanics/index.css | 12 ++ .../gameplayMechanics/index.tsx | 84 ++++++++ .../landing/GradientCover/index.css | 3 +- .../landing/gamePlayMechanics/Cards/index.css | 2 +- .../landing/gamePlayMechanics/Cards/index.tsx | 2 +- .../landing/gamePlayMechanics/index.css | 5 +- .../landing/gamePlayMechanics/index.tsx | 197 +++++++++++------- src/StarDustAdventures_frontend/src/index.css | 3 +- 10 files changed, 237 insertions(+), 86 deletions(-) create mode 100644 src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.css create mode 100644 src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx create mode 100644 src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.css create mode 100644 src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.tsx diff --git a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.css b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.css new file mode 100644 index 0000000..bbaf704 --- /dev/null +++ b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.css @@ -0,0 +1,3 @@ +.mob-gameplay-card{ + @apply w-screen flex flex-col justify-start items-center gap-8 +} \ No newline at end of file diff --git a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx new file mode 100644 index 0000000..3031183 --- /dev/null +++ b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx @@ -0,0 +1,12 @@ +import { CardProps } from "../../../landing/gamePlayMechanics/Cards"; +import './index.css'; + +export default function Card({title, description,image}:CardProps) { + return( +
+ {title} +

{title}

+

{description}

+
+ ) +} \ No newline at end of file diff --git a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.css b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.css new file mode 100644 index 0000000..a8ba482 --- /dev/null +++ b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.css @@ -0,0 +1,12 @@ +.mob-gameplay-container{ + @apply min-h-screen h-auto relative; +} + +.mob-gameplay-header{ + @apply relative h-screen min-h-fit flex flex-col justify-center z-[100]; + scroll-snap-align:center; +} + +.gameplay-mechanics-cards-list{ + @apply mt-4 flex justify-between items-center w-[300vw] +} \ No newline at end of file diff --git a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.tsx new file mode 100644 index 0000000..9edb877 --- /dev/null +++ b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/index.tsx @@ -0,0 +1,84 @@ +import { useEffect, useRef } from "react"; +import { CARDS } from "../../landing/gamePlayMechanics"; +import Card from "./Card"; +import './index.css'; +import gsap from "gsap"; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; + +gsap.registerPlugin(ScrollTrigger); + +/** + * Renders the header for gameplay mechanics. + * @param {Object} props - Component props + * @param {React.RefObject} props.headerRef - Ref for the header container + */ +const Header = ({ headerRef }: { headerRef: React.RefObject }) => { + return ( +
+

Gameplay Mechanics

+

Explore the engaging system of Star Dust Adventures

+
+ ); +}; + +/** + * Renders a list of gameplay mechanic cards. + * @param {Object} props - Component props + * @param {React.RefObject} props.cardsRef - Ref for the cards container + */ +const CardList = ({ cardsRef }: { cardsRef: React.RefObject }) => { + return ( +
+ {CARDS.map((card, index) => ( + + ))} +
+ ); +}; + +/** + * Renders the Gameplay Mechanics section with GSAP animations and ScrollTrigger. + */ +const GameplayMechanics = () => { + const headerRef = useRef(null); + const containerRef = useRef(null); + const cardsRef = useRef(null); + + useEffect(() => { + if (headerRef.current && containerRef.current && cardsRef.current) { + const tl = gsap.timeline({ + scrollTrigger: { + trigger: containerRef.current, + start: "top top", + end: "bottom bottom", + scrub: true, + pin: true, + anticipatePin: 1, + } + }); + + // Header animation + tl.fromTo(headerRef.current, { x: '100%', height: '100vh' }, { x: 0, height: 0, duration: 1 }); + + // Cards animation + const cards = cardsRef.current.querySelectorAll(".mob-gameplay-card"); + tl.fromTo(cards, + { opacity: 0.8, scale: 0.8 }, + { xPercent: -100 * (cards.length - 1), ease: "none", opacity: 1, scale: 1 } + ); + + return () => { + ScrollTrigger.getAll().forEach(trigger => trigger.kill()); + }; + } + }, []); + + return ( +
+
+ +
+ ); +}; + +export default GameplayMechanics; diff --git a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css index 0ebc7f6..c37c38e 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css +++ b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.css @@ -1,5 +1,6 @@ .gradient-cover{ - @apply md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32 + @apply md:min-h-screen h-auto w-screen relative bg-black flex flex-col justify-between lg:gap-32; + scroll-snap-type: y mandatory; } .right-purple-pattern{ diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.css b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.css index c725681..6db89d1 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.css +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.css @@ -1,6 +1,6 @@ .gameplay-card{ @apply relative flex flex-col lg:px-3 lg:py-4 justify-start items-center - bg-transparent lg:gap-7 text-white lg:h-[50vh] z-[1] md:w-auto w-screen + bg-transparent lg:gap-7 text-white lg:h-[50vh] z-[1] w-auto } .card-title{ diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx index 01dcf71..d0caab8 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx @@ -15,7 +15,7 @@ export type CardProps = { const Card = ({title, description,image}:CardProps)=>{ return( -
+
{title}

{title}

{description}

diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css index 0a93721..ef6a55e 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.css @@ -1,6 +1,5 @@ .gameplay-mechanics { - @apply w-full bg-transparent lg:mt-24 mt-12 text-white flex flex-col items-center justify-center py-3 md:min-h-min min-h-screen md:max-h-screen h-auto relative - + @apply w-full bg-transparent lg:mt-24 mt-12 text-white flex flex-col items-center justify-center py-3 max-h-screen h-auto relative ; } @@ -9,7 +8,7 @@ } .gameplay-mechanics-cards { - @apply flex md:flex-1 flex-row md:justify-between justify-center md:items-center items-center gap-6 relative mt-2 md:w-full w-[300vw] md:h-auto h-screen + @apply flex md:flex-1 flex-row md:justify-between justify-center md:items-center items-center gap-6 relative mt-2 w-full h-auto overflow-x-hidden px-2 ; } diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx index fdf40f0..070e40d 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx @@ -1,5 +1,6 @@ -import { useRef, useEffect } from 'react'; +import { useRef, useEffect, useState, useCallback } from 'react'; import GameplayMechanic, { CardProps } from './Cards'; +import MobileGameplayView from '../../landing-mobile/gameplayMechanics'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './index.css'; @@ -8,89 +9,127 @@ import React from 'react'; gsap.registerPlugin(ScrollTrigger); // Card Static Data -const CARDS = [ - { - title: "Core Gameplay Loop", - description: 'Players tap to mine StarDust, with oxygen consumption renewed every 8 hours.', - image: '/assets/images/mars.svg' - }, - { - title: "Progression Opportunities", - description: "Upgrade astronaut's oxygen tank, mining tool, & storage to unlock richer resources.", - image: '/assets/images/moon.svg' - }, - { - title: "Play-to-Earn System", - description: "Accumulate StarDust, converting it to a future token tradable on exchanges for financial rewards.", - image: '/assets/images/earth.svg' - } -] as CardProps[]; +export const CARDS: CardProps[] = [ + { + title: "Core Gameplay Loop", + description: 'Players tap to mine StarDust, with oxygen consumption renewed every 8 hours.', + image: '/assets/images/mars.svg', + }, + { + title: "Progression Opportunities", + description: "Upgrade astronaut's oxygen tank, mining tool, & storage to unlock richer resources.", + image: '/assets/images/moon.svg', + }, + { + title: "Play-to-Earn System", + description: "Accumulate StarDust, converting it to a future token tradable on exchanges for financial rewards.", + image: '/assets/images/earth.svg', + }, +]; -const Header = () => { - return ( -
-

Gameplay Mechanics

-

Explore the engaging system of Star Dust Adventures

-
- ) -} +/** + * Renders the header section for the gameplay mechanics. + * @returns {JSX.Element} The header with a title and caption. + */ +const Header = (): JSX.Element => { + return ( +
+

Gameplay Mechanics

+

Explore the engaging system of Star Dust Adventures

+
+ ); +}; + +export type GamePlayCardListProps = { + containerRef: React.RefObject; + linesRef: React.MutableRefObject; +}; + +/** + * Renders a list of gameplay cards with connecting lines. + * @param {GamePlayCardListProps} props - Props containing container and lines refs. + * @returns {JSX.Element} A list of cards with animated lines. + */ +const GamePlayCardList = ({ containerRef, linesRef }: GamePlayCardListProps): JSX.Element => { + return ( +
+ {CARDS.map((card, index) => ( + + + {index < CARDS.length - 1 && ( +
el && linesRef.current && (linesRef.current[index] = el)} // Validate `linesRef.current` + >
+ )} + + ))} +
+ ); +}; + +/** + * Main component for rendering the gameplay mechanics section, handling both desktop and mobile views. + * @returns {JSX.Element} The gameplay mechanics section with animations. + */ +const GamePlayMechanics = (): JSX.Element => { + const containerRef = useRef(null); + const sectionRef = useRef(null); + const linesRef = useRef([]); + const [isMobile, setIsMobile] = useState(false); + + // GSAP Animation Hook + useEffect(() => { + if (!containerRef.current || !sectionRef.current) return; + + const cards = containerRef.current.querySelectorAll('.gameplay-card'); + const lines = linesRef.current; + + // Set initial animation properties + gsap.set(cards, { opacity: 0, scale: 0.8 }); + gsap.set(lines, { scaleX: 0 }); + + // Timeline for animation + const tl = gsap.timeline({ + scrollTrigger: { + trigger: sectionRef.current, + start: 'top top', + end: 'bottom top', + pin: true, + pinSpacing: true, + scrub: 1, + }, + }); + tl.to(cards, { opacity: 1, scale: 1, stagger: 0.2, duration: 0.5 }) + .to(lines, { scaleX: 1, duration: 0.5, stagger: 0.2 }, '<'); -type GamePlayCardListProps = { - containerRef: React.RefObject, - linesRef: React.RefObject -} + // Cleanup ScrollTriggers on unmount + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, [containerRef, sectionRef, linesRef]); -const GamePlayCardList = ({ containerRef, linesRef }: GamePlayCardListProps) => { - return ( -
- {CARDS.map((card, index) => ( - - - {(index < CARDS.length - 1) && ( // Validate `linesRef.current` is not null -
el && linesRef.current && (linesRef.current[index] = el)}>
// Assign ref after validating that linesRef.current is not null - )} - - ))} -
- ) -} + // Handle window resize to toggle mobile view + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; -const GamePlayMechanics = () => { - const containerRef = useRef(null); - const sectionRef = useRef(null); - const linesRef = useRef>([]); + handleResize(); // Check on mount + window.addEventListener('resize', handleResize); - useEffect(() => { - if (!containerRef.current || !sectionRef.current) return; - const cards = containerRef.current.querySelectorAll('.gameplay-card'); - const lines = linesRef.current; - gsap.set(cards, { opacity: 0, scale: 0.8 }); - gsap.set(lines, { scaleX: 0 }); - const tl = gsap.timeline({ - scrollTrigger: { - trigger: sectionRef.current, - start: 'top top', - end: 'bottom top', - pin: true, - pinSpacing: true, - scrub: 1, - }, - }); - tl.to(cards, { opacity: 1, scale: 1, stagger: 0.2, duration: 0.5 }) - .to(lines, { scaleX: 1, duration: 0.5, stagger: 0.2 }, '<'); - return () => { - ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); - }; - }, []); + return () => window.removeEventListener('resize', handleResize); + }, []); - return ( -
-
- -
- ); + // Render based on screen size + return isMobile ? ( + + ) : ( +
+
+ +
+ ); }; -export default GamePlayMechanics; \ No newline at end of file +export default GamePlayMechanics; diff --git a/src/StarDustAdventures_frontend/src/index.css b/src/StarDustAdventures_frontend/src/index.css index 9d0ba16..ff20f1b 100644 --- a/src/StarDustAdventures_frontend/src/index.css +++ b/src/StarDustAdventures_frontend/src/index.css @@ -22,13 +22,14 @@ html{ scroll-behavior: smooth; + scrollbar-width: none; } body { overflow-x: hidden; min-height: 100vh; font-family: 'SF-Pro-Display', sans-serif; -} + } .app{ @apply min-h-screen bg-red-200 } From 880f9e4bebe9248c4545ed7cfd58aeead7ae84e4 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:15:08 +0530 Subject: [PATCH 06/16] Refactor Card component: Improve code readability and add JSDoc comments --- .../gameplayMechanics/Card/index.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx index 3031183..e88613b 100644 --- a/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing-mobile/gameplayMechanics/Card/index.tsx @@ -1,12 +1,22 @@ import { CardProps } from "../../../landing/gamePlayMechanics/Cards"; import './index.css'; -export default function Card({title, description,image}:CardProps) { - return( +/** + * A Card component that displays a gameplay mechanic. + * It includes an image, title, and description. + * + * @param {CardProps} props - The card properties. + * @param {string} props.title - The title of the card. + * @param {string} props.description - The description of the gameplay mechanic. + * @param {string} props.image - The image URL representing the gameplay mechanic. + * @returns {JSX.Element} A styled card with an image, title, and description. + */ +export default function Card({ title, description, image }: CardProps): JSX.Element { + return (
- {title} + {title}

{title}

{description}

- ) -} \ No newline at end of file + ); +} From 030d6a2e640cefee3ce4695c234580c32dac87b9 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:17:01 +0530 Subject: [PATCH 07/16] Refactor Card component: Improve JSDoc comments and code readability --- .../landing/gamePlayMechanics/Cards/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx index d0caab8..061865e 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/Cards/index.tsx @@ -6,13 +6,16 @@ export type CardProps = { image : string; } -/* - * Card Component - * - Component that renders a card with an image, title, and description - * - Returns a div with an image, title, and description - * - Used in Landing Page -*/ - +/** + * A Card component that displays a gameplay mechanic for desktop view. + * It includes an image, title, and description. + * + * @param {CardProps} props - The card properties. + * @param {string} props.title - The title of the card. + * @param {string} props.description - The description of the gameplay mechanic. + * @param {string} props.image - The image URL representing the gameplay mechanic. + * @returns {JSX.Element} A styled card with an image, title, and description for large screen sizes ( > 768px). + */ const Card = ({title, description,image}:CardProps)=>{ return(
From 584b574e2ba8dd20f9c46c960b9ead98f9b55e6c Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:18:26 +0530 Subject: [PATCH 08/16] Refactor Cover component: Improve code readability and add JSDoc comments --- .../landing/GradientCover/index.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.tsx index defc1e7..d24ebfa 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/GradientCover/index.tsx @@ -1,17 +1,25 @@ import React from 'react'; -import './index.css' -export default function Cover({children} : React.PropsWithChildren<{}>){ - return( +import './index.css'; + +/** + * A Cover component that wraps its children with a gradient background and patterned decorations. + * + * @param {React.PropsWithChildren<{}>} props - The props containing children elements. + * @param {React.ReactNode} props.children - The content to be rendered inside the cover. + * @returns {JSX.Element} A styled cover with children content. + */ +export default function Cover({ children }: React.PropsWithChildren<{}>): JSX.Element { + return (
- purple-pattern -
+ purple-pattern +
- blue-pattern -
+ blue-pattern +
{children}
- ) -} \ No newline at end of file + ); +} From 318cafdc20f336c8d2aaeb71c068d13a1b5e8443 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:34:45 +0530 Subject: [PATCH 09/16] Refactor landing page: Update GamePlayMechanics component and handle window resize --- .../landing/gamePlayMechanics/index.tsx | 8 +++----- .../src/pages/Landing.jsx | 16 +++++++++++++--- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx index 070e40d..73940dc 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx @@ -1,6 +1,5 @@ import { useRef, useEffect, useState, useCallback } from 'react'; import GameplayMechanic, { CardProps } from './Cards'; -import MobileGameplayView from '../../landing-mobile/gameplayMechanics'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './index.css'; @@ -107,7 +106,7 @@ const GamePlayMechanics = (): JSX.Element => { return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; - }, [containerRef, sectionRef, linesRef]); + }, []); // Handle window resize to toggle mobile view useEffect(() => { @@ -122,9 +121,8 @@ const GamePlayMechanics = (): JSX.Element => { }, []); // Render based on screen size - return isMobile ? ( - - ) : ( + + return(
diff --git a/src/StarDustAdventures_frontend/src/pages/Landing.jsx b/src/StarDustAdventures_frontend/src/pages/Landing.jsx index 299ba66..73b7dd5 100644 --- a/src/StarDustAdventures_frontend/src/pages/Landing.jsx +++ b/src/StarDustAdventures_frontend/src/pages/Landing.jsx @@ -1,17 +1,27 @@ -import React, { useEffect, useState } from 'react' +import React, { lazy, useEffect, useState } from 'react' import '../components/landing/landing.css' import Hero from '../components/landing/hero/Hero' import Footer from '../components/landing/footer' -import GamePlayMechanics from '../components/landing/gamePlayMechanics' import GameConcept from '../components/landing/gameConcept/GameConcept' import Lore from '../components/landing/loreStoryline/Lore' import GradientCover from '../components/landing/GradientCover' import GameConceptM from '../components/landing-mobile/gameConcept/GameConceptM' +const GamePlayMechanics = lazy(()=>import('../components/landing/gamePlayMechanics')) +const MobileGameplayView = lazy(()=>import('../components/landing-mobile/gameplayMechanics')) + const PatternCover = () => { + const [width,setWidth]=useState(window.innerWidth) + + useEffect(()=>{ + window.addEventListener("resize", ()=>setWidth(window.innerWidth)); + return () => window.removeEventListener("resize", ()=>setWidth(window.innerWidth)); + },[]) + + return( - + {width > 768 ? : } ) From 87622172b45e8a57d617ac0a2b643f3d1810975f Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:37:42 +0530 Subject: [PATCH 10/16] Refactor landing page: Remove unused state and optimize window resize handling --- .../components/landing/gamePlayMechanics/index.tsx | 14 -------------- .../src/pages/Landing.jsx | 8 +++++--- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx index 73940dc..36f2755 100644 --- a/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx +++ b/src/StarDustAdventures_frontend/src/components/landing/gamePlayMechanics/index.tsx @@ -75,7 +75,6 @@ const GamePlayMechanics = (): JSX.Element => { const containerRef = useRef(null); const sectionRef = useRef(null); const linesRef = useRef([]); - const [isMobile, setIsMobile] = useState(false); // GSAP Animation Hook useEffect(() => { @@ -108,19 +107,6 @@ const GamePlayMechanics = (): JSX.Element => { }; }, []); - // Handle window resize to toggle mobile view - useEffect(() => { - const handleResize = () => { - setIsMobile(window.innerWidth < 768); - }; - - handleResize(); // Check on mount - window.addEventListener('resize', handleResize); - - return () => window.removeEventListener('resize', handleResize); - }, []); - - // Render based on screen size return(
diff --git a/src/StarDustAdventures_frontend/src/pages/Landing.jsx b/src/StarDustAdventures_frontend/src/pages/Landing.jsx index 73b7dd5..7758964 100644 --- a/src/StarDustAdventures_frontend/src/pages/Landing.jsx +++ b/src/StarDustAdventures_frontend/src/pages/Landing.jsx @@ -1,4 +1,4 @@ -import React, { lazy, useEffect, useState } from 'react' +import React, { lazy, Suspense, useEffect, useState } from 'react' import '../components/landing/landing.css' import Hero from '../components/landing/hero/Hero' import Footer from '../components/landing/footer' @@ -21,8 +21,10 @@ const PatternCover = () => { return( - {width > 768 ? : } - + Loading...

}> + {width > 768 ? : } + + ) } From cbe4cca72500fd3b1bf69fd7d82a7e19bf004604 Mon Sep 17 00:00:00 2001 From: ArjunQBTech Date: Tue, 22 Oct 2024 23:39:27 +0530 Subject: [PATCH 11/16] Refactor Landing and PatternCover components: Improve code readability and handle window resize --- .../src/pages/Landing.jsx | 85 +++++++++++-------- 1 file changed, 50 insertions(+), 35 deletions(-) diff --git a/src/StarDustAdventures_frontend/src/pages/Landing.jsx b/src/StarDustAdventures_frontend/src/pages/Landing.jsx index 7758964..da61ebc 100644 --- a/src/StarDustAdventures_frontend/src/pages/Landing.jsx +++ b/src/StarDustAdventures_frontend/src/pages/Landing.jsx @@ -1,50 +1,65 @@ -import React, { lazy, Suspense, useEffect, useState } from 'react' -import '../components/landing/landing.css' -import Hero from '../components/landing/hero/Hero' -import Footer from '../components/landing/footer' -import GameConcept from '../components/landing/gameConcept/GameConcept' -import Lore from '../components/landing/loreStoryline/Lore' -import GradientCover from '../components/landing/GradientCover' -import GameConceptM from '../components/landing-mobile/gameConcept/GameConceptM' +import React, { lazy, Suspense, useEffect, useState } from 'react'; +import '../components/landing/landing.css'; +import Hero from '../components/landing/hero/Hero'; +import Footer from '../components/landing/footer'; +import GameConcept from '../components/landing/gameConcept/GameConcept'; +import Lore from '../components/landing/loreStoryline/Lore'; +import GradientCover from '../components/landing/GradientCover'; +import GameConceptM from '../components/landing-mobile/gameConcept/GameConceptM'; -const GamePlayMechanics = lazy(()=>import('../components/landing/gamePlayMechanics')) -const MobileGameplayView = lazy(()=>import('../components/landing-mobile/gameplayMechanics')) +const GamePlayMechanics = lazy(() => import('../components/landing/gamePlayMechanics')); +const MobileGameplayView = lazy(() => import('../components/landing-mobile/gameplayMechanics')); -const PatternCover = () => { - const [width,setWidth]=useState(window.innerWidth) +/** + * PatternCover component dynamically renders gameplay mechanics based on screen width, + * displaying a mobile or desktop view inside a gradient cover. It also includes the Lore component. + * + * @returns {JSX.Element} The PatternCover component wrapped in a GradientCover with dynamic content. + */ +const PatternCover = ()=> { + const [width, setWidth] = useState(window.innerWidth); - useEffect(()=>{ - window.addEventListener("resize", ()=>setWidth(window.innerWidth)); - return () => window.removeEventListener("resize", ()=>setWidth(window.innerWidth)); - },[]) + useEffect(() => { + const handleResize = () => setWidth(window.innerWidth); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); - return( + return ( Loading...

}> - {width > 768 ? : } - + {width > 768 ? : } + - ) -} + ); +}; + +/** + * Landing component renders the main landing page, including the Hero, Game Concept, and Footer sections. + * It dynamically switches between mobile and desktop versions of the GameConcept component based on screen width. + * + * @returns {JSX.Element} The complete landing page layout. + */ +const Landing = ()=>{ + const [width, setWidth] = useState(window.innerWidth); -const Landing = () => { - const [width,setWidth]=useState(window.innerWidth) + useEffect(() => { + const handleResize = () => setWidth(window.innerWidth); + window.addEventListener('resize', handleResize); - useEffect(()=>{ - window.addEventListener("resize", ()=>setWidth(window.innerWidth)); - return () => window.removeEventListener("resize", ()=>setWidth(window.innerWidth)); - },[]) + return () => window.removeEventListener('resize', handleResize); + }, []); return ( -
- - {width>1024?:} - -