From 76e5260d610a85e766eb9e2ccf9ddcb29217b006 Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Wed, 16 Oct 2024 14:09:50 +0530 Subject: [PATCH 1/5] feat: updated iframe carousel videos and added carousel functionality on landing --- components/Landing/Scene/Scene.tsx | 130 ++--- components/Landing/Scene/SlotMachine2.tsx | 507 +++++++++--------- .../Landing/Scene/slotMachine2d.module.scss | 2 +- .../MobileLanding/MobileLanding.tsx | 4 +- 4 files changed, 325 insertions(+), 318 deletions(-) diff --git a/components/Landing/Scene/Scene.tsx b/components/Landing/Scene/Scene.tsx index a83556cf..0f775283 100644 --- a/components/Landing/Scene/Scene.tsx +++ b/components/Landing/Scene/Scene.tsx @@ -1,81 +1,83 @@ "use client"; -import {Canvas} from "@react-three/fiber"; +import { Canvas } from "@react-three/fiber"; -import {SlotMachine2} from "./SlotMachine2"; -import {forwardRef, useEffect, useState} from "react"; +import { SlotMachine2 } from "./SlotMachine2"; +import { forwardRef, useEffect, useState } from "react"; function detectAppleDevice() { - const userAgent = navigator.userAgent.toLowerCase(); + const userAgent = navigator.userAgent.toLowerCase(); - return userAgent.includes("iphone") || - userAgent.includes("ipad") || - userAgent.includes("ipod"); + return ( + userAgent.includes("iphone") || + userAgent.includes("ipad") || + userAgent.includes("ipod") + ); } interface Props { - setIs3dLoaded: (value: boolean) => void; - isAboutUs: boolean; - isXS: boolean; - isMobile: boolean; - iframeClick: () => void; - setCamera: (value: any) => void; - isVideoFocused: boolean; - isLanding: boolean; - isEvents: boolean; + setIs3dLoaded: (value: boolean) => void; + isAboutUs: boolean; + isXS: boolean; + isMobile: boolean; + iframeClick: () => void; + setCamera: (value: any) => void; + isVideoFocused: boolean; + isLanding: boolean; + isEvents: boolean; } const LandingScene = forwardRef(function LandingScene( - { - setIs3dLoaded, - isAboutUs, - isXS, - isMobile, - iframeClick, - isVideoFocused, - setCamera, - isLanding, - isEvents, - }: Props, - ref + { + setIs3dLoaded, + isAboutUs, + isXS, + isMobile, + iframeClick, + isVideoFocused, + setCamera, + isLanding, + isEvents, + }: Props, + ref ) { - const [isAppleDevice, setIsAppleDevice] = useState(false); + const [isAppleDevice, setIsAppleDevice] = useState(false); - useEffect(() => { - setIsAppleDevice(detectAppleDevice()); - }, []); - return ( - <> - - - - - - - - ); + useEffect(() => { + setIsAppleDevice(detectAppleDevice()); + }, []); + return ( + <> + + + + + + + + ); }); export default LandingScene; diff --git a/components/Landing/Scene/SlotMachine2.tsx b/components/Landing/Scene/SlotMachine2.tsx index 4678a6e5..fbf6cf5e 100644 --- a/components/Landing/Scene/SlotMachine2.tsx +++ b/components/Landing/Scene/SlotMachine2.tsx @@ -4,288 +4,291 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx */ -import React, {forwardRef, useEffect, useRef, useState} from "react"; -import {Html, useGLTF} from "@react-three/drei"; -import {GLTF} from "three-stdlib"; +import React, { forwardRef, useEffect, useRef, useState } from "react"; +import { Html, useGLTF } from "@react-three/drei"; +import { GLTF } from "three-stdlib"; import * as THREE from "three"; -import {Euler, useThree} from "@react-three/fiber"; +import { Euler, useThree } from "@react-three/fiber"; import ReactPlayer from "react-player/youtube"; -import {useGSAP} from "@gsap/react"; +import { useGSAP } from "@gsap/react"; import gsap from "gsap"; type GLTFResult = GLTF & { - nodes: { - Sphere014: THREE.Mesh; - Sphere015: THREE.Mesh; - Sphere018: THREE.Mesh; - Sphere010: THREE.Mesh; - Sphere011: THREE.Mesh; - Sphere013: THREE.Mesh; - Sphere019: THREE.Mesh; - Sphere008: THREE.Mesh; - Sphere009: THREE.Mesh; - Sphere012: THREE.Mesh; - }; - materials: { - Buttons: THREE.MeshStandardMaterial; - ["export"]: THREE.MeshBasicMaterial; - ["Material.001"]: THREE.MeshStandardMaterial; - }; + nodes: { + Sphere014: THREE.Mesh; + Sphere015: THREE.Mesh; + Sphere018: THREE.Mesh; + Sphere010: THREE.Mesh; + Sphere011: THREE.Mesh; + Sphere013: THREE.Mesh; + Sphere019: THREE.Mesh; + Sphere008: THREE.Mesh; + Sphere009: THREE.Mesh; + Sphere012: THREE.Mesh; + }; + materials: { + Buttons: THREE.MeshStandardMaterial; + ["export"]: THREE.MeshBasicMaterial; + ["Material.001"]: THREE.MeshStandardMaterial; + }; }; interface Props { - setIs3dLoaded: (value: boolean) => void; - iframeClick: () => void; - setCamera: (value: any) => void; - isVideoFocused: boolean; - isEvents: boolean; - isAboutUs: boolean; - isIos: boolean; + setIs3dLoaded: (value: boolean) => void; + iframeClick: () => void; + setCamera: (value: any) => void; + isVideoFocused: boolean; + isEvents: boolean; + isAboutUs: boolean; + isIos: boolean; } const rotationPropArray: Euler | undefined = [0.4510000000000003, 0, 0]; export const SlotMachine2 = forwardRef(function SlotMachine2( - { - setIs3dLoaded, - iframeClick, - setCamera, - isVideoFocused, - isEvents, - isAboutUs, - isIos, - ...props - }: Props, - ref: any + { + setIs3dLoaded, + iframeClick, + setCamera, + isVideoFocused, + isEvents, + isAboutUs, + isIos, + ...props + }: Props, + ref: any ) { - const {nodes, materials} = useGLTF("/Models/uSlotM.glb") as GLTFResult; + const { nodes, materials } = useGLTF("/Models/uSlotM.glb") as GLTFResult; - const videoUrlArrayIframe = ["ZCrClSBM1ns", "0BYgHIMnz50", "krsrGOqnAN0"]; + const videoUrlArrayIframe = ["7MHVWCrJppk", "ZCrClSBM1ns", "krsrGOqnAN0"]; - const [iframeIndex, setIframeIndex] = useState(0); - const [machineHovered, setMachineHovered] = useState(false) + const [iframeIndex, setIframeIndex] = useState(0); + const [machineHovered, setMachineHovered] = useState(false); - const handleRef: any = useRef(); - const buttonsRef: any = useRef(); + const handleRef: any = useRef(); + const buttonsRef: any = useRef(); - const nextVideoIframe = () => { - if (!isEvents) { - const tl = gsap.timeline() - tl.to(buttonsRef.current.children[0].position, { - y: 0.73, - duration: 0.2 - }).to(buttonsRef.current.children[0].position, { - y: 0.743, - duration: 0.2 - }) - setIframeIndex((prev) => { - if (prev === 2) { - return 0; - } - return prev + 1; - }); + const nextVideoIframe = () => { + if (!isEvents) { + const tl = gsap.timeline(); + tl.to(buttonsRef.current.children[0].position, { + y: 0.73, + duration: 0.2, + }).to(buttonsRef.current.children[0].position, { + y: 0.743, + duration: 0.2, + }); + setIframeIndex((prev) => { + if (prev === 2) { + return 0; } - }; + return prev + 1; + }); + } + }; - const prevVideoIframe = () => { - if (!isEvents) { - const tl = gsap.timeline() - tl.to(buttonsRef.current?.children[1].position, { - y: 0.73, - duration: 0.2 - }).to(buttonsRef.current?.children[1].position, { - y: 0.743, - duration: 0.2 - }) - setIframeIndex((prev) => { - if (prev === 0) { - return 2; - } - return prev - 1; - }); + const prevVideoIframe = () => { + if (!isEvents) { + const tl = gsap.timeline(); + tl.to(buttonsRef.current?.children[1].position, { + y: 0.73, + duration: 0.2, + }).to(buttonsRef.current?.children[1].position, { + y: 0.743, + duration: 0.2, + }); + setIframeIndex((prev) => { + if (prev === 0) { + return 2; } - }; + return prev - 1; + }); + } + }; - useGSAP( - () => { - const tl = gsap.timeline(); + useGSAP( + () => { + const tl = gsap.timeline(); - tl.to(handleRef?.current?.rotation, { - x: (7 / 6) * Math.PI, - duration: 0.75, - ease: "back.inOut(3)", - }).to( - handleRef?.current?.rotation, - { - x: Math.PI, - duration: 0.75, - ease: "back.inOut(3)", - }, - "+=0.25" - ); + tl.to(handleRef?.current?.rotation, { + x: (7 / 6) * Math.PI, + duration: 0.75, + ease: "back.inOut(3)", + }).to( + handleRef?.current?.rotation, + { + x: Math.PI, + duration: 0.75, + ease: "back.inOut(3)", }, - {dependencies: [iframeIndex]} - ); + "+=0.25" + ); + }, + { dependencies: [iframeIndex] } + ); - useGSAP(() => { - // console.log(buttonsRef.current) - // console.dir(buttonsRef.current) - for (const button of buttonsRef.current.children) { - if (machineHovered) { - gsap.to(button.position, { - y: 0.743, - duration: 0.3 - }) - } else { - gsap.to(button.position, { - y: 0.734, - duration: 0.3 - }) - } + useGSAP( + () => { + // console.log(buttonsRef.current) + // console.dir(buttonsRef.current) + for (const button of buttonsRef.current.children) { + if (machineHovered) { + gsap.to(button.position, { + y: 0.743, + duration: 0.3, + }); + } else { + gsap.to(button.position, { + y: 0.734, + duration: 0.3, + }); } - }, {dependencies: [buttonsRef.current, machineHovered]}) + } + }, + { dependencies: [buttonsRef.current, machineHovered] } + ); - const {camera} = useThree(); + const { camera } = useThree(); - useEffect(() => { - if (camera && ref.current) { - setIs3dLoaded(true); - setCamera(camera); - } - }, [camera, setIs3dLoaded, ref, ref.current]); + useEffect(() => { + if (camera && ref.current) { + setIs3dLoaded(true); + setCamera(camera); + } + }, [camera, setIs3dLoaded, ref, ref.current]); - return ( - <> - { - setMachineHovered(true) - }} - onPointerLeave={() => { - setMachineHovered(false) - }} - > - - - - { - const tl = gsap.timeline() - tl.to(buttonsRef.current.children[2].position, { - y: 0.73, - duration: 0.2 - }).to(buttonsRef.current.children[2].position, { - y: 0.7433, - duration: 0.2 - }) - iframeClick() - }} - /> - - - - - - - - - - - - - -
-
- - -
- - - - + return ( + <> + { + setMachineHovered(true); + }} + onPointerLeave={() => { + setMachineHovered(false); + }} + > + + + + { + const tl = gsap.timeline(); + tl.to(buttonsRef.current.children[2].position, { + y: 0.73, + duration: 0.2, + }).to(buttonsRef.current.children[2].position, { + y: 0.7433, + duration: 0.2, + }); + iframeClick(); + }} + /> + + + + + + + + - - ); + + + + +
+
+ + +
+ + + + + + + ); }); useGLTF.preload("/Models/uSlotM.glb"); diff --git a/components/Landing/Scene/slotMachine2d.module.scss b/components/Landing/Scene/slotMachine2d.module.scss index 39df9c5f..ba18536b 100644 --- a/components/Landing/Scene/slotMachine2d.module.scss +++ b/components/Landing/Scene/slotMachine2d.module.scss @@ -16,4 +16,4 @@ padding: 0; margin: 0; } -} \ No newline at end of file +} diff --git a/components/MobileLanding/MobileLanding/MobileLanding.tsx b/components/MobileLanding/MobileLanding/MobileLanding.tsx index 3098d4f5..e509ca17 100644 --- a/components/MobileLanding/MobileLanding/MobileLanding.tsx +++ b/components/MobileLanding/MobileLanding/MobileLanding.tsx @@ -46,7 +46,9 @@ export default function MobileLanding() { into the world of Oasis, where youth's boundless potential shines.

- + {/*0BYgHIMnz50*/} {/**/} From beb266ab7029475b1d1fb42c5b5d8d269ec5d2fa Mon Sep 17 00:00:00 2001 From: Manas Date: Wed, 16 Oct 2024 14:21:13 +0530 Subject: [PATCH 2/5] fix: contactUs page animation not working for the first time --- app/contact/page.tsx | 192 ++++++++++++++++++++++--------------------- 1 file changed, 97 insertions(+), 95 deletions(-) diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 538fe044..3375c1a0 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useLayoutEffect } from "react"; +import React, {useEffect, useRef } from "react"; import styles from "./contact.module.scss"; import Grid from "@/components/Landing/Grid/Grid"; @@ -31,100 +31,102 @@ import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; export default function Brochure() { - - useLayoutEffect(() => { - const container = document.querySelector("#contactCard") as HTMLElement; - const cards = container?.querySelectorAll( - ".card" - ) as NodeListOf; - if (cards) { - const cardCount = cards.length; - const containerWidth = container.offsetWidth; - const cardWidth = cards[1]?.offsetWidth || 0; - const cardHeight = cards[0]?.offsetHeight || 0; - - let X1, X2, X3, X4, X5, X6, X7, X8, Y1, Y2, Y3, Y6, Y7, Y8; - - if (innerWidth >= 2100 && innerWidth <= 3100) { - X1 = (containerWidth - 5 * cardWidth - 415) / 2; - X2 = X1 + cardWidth + 100; - X3 = X2 + cardWidth + 100; - X4 = X3 + cardWidth + 100; - X5 = X4 + cardWidth + 100; - Y1 = 70; - Y2 = -10; - Y3 = -35; - X6 = (containerWidth - 3 * cardWidth - 215) / 2; - X7 = X6 + cardWidth + 100; - X8 = X7 + cardWidth + 100; - Y6 = cardHeight - 15; - Y7 = cardHeight - 45; - Y8 = cardHeight - 15; - } else { - X1 = (containerWidth - 5 * cardWidth - 215) / 2; - X2 = X1 + cardWidth + 50; - X3 = X2 + cardWidth + 50; - X4 = X3 + cardWidth + 50; - X5 = X4 + cardWidth + 50; - Y1 = 50; - Y2 = -10; - Y3 = -35; - X6 = (containerWidth - 3 * cardWidth - 114) / 2; - X7 = X6 + cardWidth + 50; - X8 = X7 + cardWidth + 50; - Y6 = cardHeight - 10; - Y7 = cardHeight - 40; - Y8 = cardHeight - 10; - } - const translations = [ - { x: X1, y: Y1, rotation: -18 }, - { x: X2, y: Y2, rotation: -10 }, - { x: X3, y: Y3, rotation: 0 }, - { x: X4, y: Y2, rotation: 10 }, - { x: X5, y: Y1, rotation: 18 }, - ]; - - gsap.set(cards, { - x: X1, - y: Y1, - rotation: -18, - zIndex: (index) => index, - duration: 0, - }); - - const tl = gsap.timeline({ delay: 1 }); - - for (let i = 1; i < cardCount; i++) { - tl.to(cards[i], { - x: translations[i].x, - y: translations[i].y, - rotation: translations[i].rotation, - zIndex: cardCount - i, - transformOrigin: "center center", - duration: 0.25, - ease: "power1.inOut", - onStart: () => { - for (let j = i + 1; j < cardCount; j++) { - gsap.to(cards[j], { - x: translations[i].x, - y: translations[i].y, - rotation: translations[i].rotation, - transformOrigin: "center center", - duration: 0.25, - ease: "power1.inOut", - zIndex: j, - }); - } - }, + const contactCardRef = useRef(null); + const contactCard1Ref = useRef(null); + + useEffect(() => { + const container = contactCardRef.current; + const container1 = contactCard1Ref.current; + + if (container && container1) { + const cards = Array.from(container.querySelectorAll(".card")) as HTMLElement[]; + const cards1 = Array.from(container1.querySelectorAll(".card")) as HTMLElement[]; + + if (cards.length > 0) { + const cardCount = cards.length; + const containerWidth = container.offsetWidth; + const cardWidth = cards[1]?.offsetWidth || 0; + const cardHeight = cards[0]?.offsetHeight || 0; + + let X1, X2, X3, X4, X5, Y1, Y2, Y3; + let X6, X7, X8, Y6, Y7, Y8; + + if (innerWidth >= 2100 && innerWidth <= 3100) { + X1 = (containerWidth - 5 * cardWidth - 415) / 2; + X2 = X1 + cardWidth + 100; + X3 = X2 + cardWidth + 100; + X4 = X3 + cardWidth + 100; + X5 = X4 + cardWidth + 100; + Y1 = 70; + Y2 = -10; + Y3 = -35; + X6 = (containerWidth - 3 * cardWidth - 215) / 2; + X7 = X6 + cardWidth + 100; + X8 = X7 + cardWidth + 100; + Y6 = cardHeight - 15; + Y7 = cardHeight - 45; + Y8 = cardHeight - 15; + } else { + X1 = (containerWidth - 5 * cardWidth - 215) / 2; + X2 = X1 + cardWidth + 50; + X3 = X2 + cardWidth + 50; + X4 = X3 + cardWidth + 50; + X5 = X4 + cardWidth + 50; + Y1 = 50; + Y2 = -10; + Y3 = -35; + X6 = (containerWidth - 3 * cardWidth - 114) / 2; + X7 = X6 + cardWidth + 50; + X8 = X7 + cardWidth + 50; + Y6 = cardHeight - 10; + Y7 = cardHeight - 40; + Y8 = cardHeight - 10; + } + + const translations = [ + { x: X1, y: Y1, rotation: -18 }, + { x: X2, y: Y2, rotation: -10 }, + { x: X3, y: Y3, rotation: 0 }, + { x: X4, y: Y2, rotation: 10 }, + { x: X5, y: Y1, rotation: 18 }, + ]; + + gsap.set(cards, { + x: X1, + y: Y1, + rotation: -18, + zIndex: (index) => index, + duration: 0, }); - } - const container1 = document.querySelector("#contactCard1") as HTMLElement; - const cards1 = container1?.querySelectorAll( - ".card" - ) as NodeListOf; - if (cards1) { + const tl = gsap.timeline({ delay: 1 }); + + for (let i = 1; i < cardCount; i++) { + tl.to(cards[i], { + x: translations[i].x, + y: translations[i].y, + rotation: translations[i].rotation, + zIndex: cardCount - i, + transformOrigin: "center center", + duration: 0.25, + ease: "power1.inOut", + onStart: () => { + for (let j = i + 1; j < cardCount; j++) { + gsap.to(cards[j], { + x: translations[i].x, + y: translations[i].y, + rotation: translations[i].rotation, + transformOrigin: "center center", + duration: 0.25, + ease: "power1.inOut", + zIndex: j, + }); + } + }, + }); + } + const cardCount1 = cards1.length; const translations1 = [ @@ -183,7 +185,7 @@ export default function Brochure() { } } }, []); - + return ( <> @@ -268,7 +270,7 @@ export default function Brochure() { -
+
-
+
Date: Wed, 16 Oct 2024 14:30:18 +0530 Subject: [PATCH 3/5] feat: updated iframe videos --- components/AboutUs/Machine/Machine.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/AboutUs/Machine/Machine.tsx b/components/AboutUs/Machine/Machine.tsx index 5dfdcd39..fecaa7ba 100644 --- a/components/AboutUs/Machine/Machine.tsx +++ b/components/AboutUs/Machine/Machine.tsx @@ -18,7 +18,8 @@ const MobileSlotMachine = forwardRef(function MobileSlotMachine( const playerRef = useRef(null); const [isPlaying, setIsPlaying] = useState(true); - const videoUrlArrayIframe = ["ZCrClSBM1ns", "0BYgHIMnz50", "krsrGOqnAN0"]; + const videoUrlArrayIframe = ["7MHVWCrJppk", "ZCrClSBM1ns", "krsrGOqnAN0"]; + // Function to initialize the YouTube player useEffect(() => { From 3ba7a8369ccf889451d6fdb4952ded496f815008 Mon Sep 17 00:00:00 2001 From: Manas Date: Wed, 16 Oct 2024 14:35:30 +0530 Subject: [PATCH 4/5] fix: contact page animation issue --- app/contact/page.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 3375c1a0..42da9c85 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -25,17 +25,20 @@ import aryankhorana from "../../assets/Landing/contactUs/aryankhorana.png"; import left from "../../assets/Landing/contactUs/left.png"; import right from "../../assets/Landing/contactUs/right.png"; import gsap from "gsap"; -import { useGSAP } from "@gsap/react"; -import HamBtn from "@/components/Landing/Navbar/HamBtn/Btn"; import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; -export default function Brochure() { +export default function ContactUs() { const contactCardRef = useRef(null); const contactCard1Ref = useRef(null); useEffect(() => { + + if (!localStorage.getItem("firstVisit")) { + localStorage.setItem("firstVisit", "true"); + window.location.reload(); + } const container = contactCardRef.current; const container1 = contactCard1Ref.current; From 16b9599c8359ff985e06415f5e1b5dbc227ff29d Mon Sep 17 00:00:00 2001 From: Manas Date: Wed, 16 Oct 2024 14:42:17 +0530 Subject: [PATCH 5/5] fix: pointer events of ham button on contact page --- app/contact/contact.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss index 3036f58d..4bdc2b46 100644 --- a/app/contact/contact.module.scss +++ b/app/contact/contact.module.scss @@ -7,6 +7,7 @@ .ham { position: fixed; + z-index: 100; top: 30px; left: 20px; @media(width>1920px){