Scroll has event list now

Devsoc-BPGC · Oct 6, 2023 · 11deb8c · 11deb8c
1 parent 23b27d6
commit 11deb8c
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 26 deletions.
diff --git a/src/Components/Events/events.js b/src/Components/Events/events.js
@@ -19,11 +19,57 @@ import box from './boxclosed.png';
 import box_animated from './boxopen.png';
 // import seaweed from './seaweed.svg';
 import trans from '../../assets/1024px-HD_transparent_picture.png';
+import Scroll from '../scroll/scroll';
 
 function Events() {
   const [isHoveringSword, setIsHoveringSword] = useState(false);
   const [isHoveringBox, setIsHoveringBox] = useState(false);
   const [isHoveringHelmet, setIsHoveringHelmet] = useState(false);
+  const [showScroll, setShowScroll] = useState(false);
+  const [scrollHead, setScrollHead] = useState('');
+  const florenceEvents = [
+    'Natyanjali',
+    'Sizzle',
+    'Dancing Duo',
+    'Nritya Kala',
+    'Rangmanch',
+    'Nukkad Natak',
+    'Hear Me Out!',
+    'Rapsody',
+    'Jukebox',
+    'Solonote',
+    'Silence of the Amps',
+    'Indian Rock',
+  ];
+  const beauVistaEvents = [
+    "Let's Not Get Wasted",
+    'Kick StART',
+    'Moteef',
+    'Artathon',
+    'Blind Art',
+    'Glam Up!',
+    'La Croquis Marquee',
+    'Pixel Vista',
+  ];
+  const carpeDictumEvents = [
+    'InVerse',
+    'Cultural Gauntlet',
+    'The Lit Quiz',
+    'Word Games',
+    'Melas',
+    'Querencia',
+  ];
+  const fNPhotoEvents = ['SHo(r)t', 'Oh Snap!'];
+  const quizFestEvents = ['Waves Open', 'Mythomagic', 'Vices Quiz'];
+  const specialsEvents = [
+    'Fashion Parade',
+    'Mr and Miss Waves',
+    'Show me the Funny',
+    'Strangely Familiar',
+    'Comic Kriya',
+    'Irshaad',
+  ];
+  const [eventsList, setEventsList] = useState(['']);
   const zoomInOnHover = {
     transform: 'scale(1)',
     transition: 'transform 0.5s',
@@ -38,6 +84,12 @@ function Events() {
   const [jellyfishStyle, setJellyfishStyle] = useState(zoomInOnHover);
   return (
     <ChakraProvider theme={theme}>
+      <Scroll
+        showScroll={showScroll}
+        setShowScroll={setShowScroll}
+        scrollHead={scrollHead}
+        eventsList={eventsList}
+      />
       <Box position='relative'>
         <Image
           src={bgimage}
@@ -64,11 +116,11 @@ function Events() {
           {methods => <></>}
         </WaterWave>
         <Flex direction='column'>
-          <Box position='absolute' top='5%' left='30%'>
+          <Box position='absolute' top='5%' right='35%'>
             <div
               style={{
                 color: 'white',
-                fontSize: '7.5vw',
+                fontSize: 96,
                 fontFamily: 'Junge',
                 fontWeight: '400',
                 wordWrap: 'break-word',
@@ -77,14 +129,20 @@ function Events() {
               E V E N T S
             </div>
           </Box>
-          <Box position='absolute' top='12%' right='2%'>
+          <Box position='absolute' top='5%' right='5%'>
             <Image
               src={jellyfish}
               alt='Jellyfish'
               width='314px'
               height='221px'
               zIndex='1'
+              cursor='pointer'
               style={jellyfishStyle}
+              onClick={() => {
+                setScrollHead('FLORENCE');
+                setEventsList(florenceEvents);
+                setShowScroll(!showScroll);
+              }}
               onMouseEnter={() => {
                 setJellyfishStyle(zoomOutOnHover);
               }}
@@ -105,13 +163,19 @@ function Events() {
           </Box>
         </Flex>
         <Flex direction='column'>
-          <Box position='absolute' top='10%' left='3%'>
+          <Box position='absolute' top='2%' left='5%'>
             <Image
               src={horsewheel}
               alt='Horsewheel'
               width='135.40px'
               height='117.10px'
               zIndex='1'
+              cursor='pointer'
+              onClick={() => {
+                setScrollHead('EXTRAS');
+                setEventsList(specialsEvents);
+                setShowScroll(!showScroll);
+              }}
             />
             <Text
               fontSize='22'
@@ -126,19 +190,24 @@ function Events() {
           </Box>
         </Flex>
         <Flex>
-          <Box position='absolute' bottom='2%' right='5%' alignItems={'center'}>
+          <Box position='absolute' bottom='2%' right='5%'>
             <Image
               src={isHoveringHelmet ? helmet_animated : spartanhelmet}
               alt='Spartan'
               width='251.582px'
               height='280.858px'
               zIndex='1'
+              cursor='pointer'
+              onClick={() => {
+                setScrollHead('FILM & PHOTOGRAPHY');
+                setEventsList(fNPhotoEvents);
+                setShowScroll(!showScroll);
+              }}
               onMouseEnter={() => setIsHoveringHelmet(true)}
               onMouseLeave={() => setIsHoveringHelmet(false)}
               style={{
                 transition: '0.5s',
               }}
-              marginBottom='-4rem'
             />
             <Text
               fontSize='22'
@@ -153,7 +222,7 @@ function Events() {
           </Box>
         </Flex>
         <Flex direction='column'>
-          <Box position='absolute' bottom='30%' left='14%'>
+          <Box position='absolute' bottom='20%' left='14%'>
             <Image
               src={swords}
               opacity={isHoveringSword ? 0 : 1}
@@ -162,7 +231,7 @@ function Events() {
               pos='absolute'
               bottom='60%'
               left='-10%'
-              marginBottom='-4rem'
+              cursor='pointer'
               onMouseEnter={() => setIsHoveringSword(true)}
               onMouseLeave={() => setIsHoveringSword(false)}
               style={{
@@ -177,29 +246,32 @@ function Events() {
               pos='absolute'
               bottom='60%'
               left='-10%'
-              marginBottom='-4rem'
+              cursor='pointer'
+              onClick={() => {
+                setScrollHead('THE QUIZ FEST');
+                setEventsList(quizFestEvents);
+                setShowScroll(!showScroll);
+              }}
               onMouseEnter={() => setIsHoveringSword(true)}
               onMouseLeave={() => setIsHoveringSword(false)}
               style={{
                 transition: '0.5s',
               }}
             />
             <Text
-              position={'relative'}
               fontSize='22'
               fontWeight='400'
               fontFamily='Inknut Antiqua'
               wordBreak='break-word'
               color='white'
-              zIndex={1}
             >
               {' '}
               THE QUIZ FEST{' '}
             </Text>
           </Box>
         </Flex>
         <Flex>
-          <Box position='absolute' bottom='0%' left='30%'>
+          <Box position='absolute' bottom='0%' left='27%'>
             <Image
               src={box}
               alt='Box'
@@ -209,6 +281,7 @@ function Events() {
               pos='absolute'
               bottom='100%'
               left='-10%'
+              cursor='pointer'
               opacity={isHoveringBox ? 0 : 1}
               onMouseEnter={() => setIsHoveringBox(true)}
               onMouseLeave={() => setIsHoveringBox(false)}
@@ -225,7 +298,13 @@ function Events() {
               pos='absolute'
               bottom='100%'
               left='-10%'
+              cursor='pointer'
               opacity={isHoveringBox ? 1 : 0}
+              onClick={() => {
+                setScrollHead('BEAU VISTA');
+                setEventsList(beauVistaEvents);
+                setShowScroll(!showScroll);
+              }}
               onMouseEnter={() => setIsHoveringBox(true)}
               onMouseLeave={() => setIsHoveringBox(false)}
               style={{

diff --git a/src/Components/scroll/scroll.js b/src/Components/scroll/scroll.js
@@ -12,10 +12,13 @@ import { motion, AnimatePresence } from 'framer-motion';
 import scrollimg from './scroll.png';
 import scrollLeft from './scrollLeft.png';
 import scrollRight from './scrollRight.png';
+import teer from './teer.png';
 
 const Scroll = props => {
+  const [index, setIndex] = useState(0);
   const clickHandler = () => {
     props.setShowScroll(!props.showScroll);
+    setIndex(0);
   };
   return (
     <AnimatePresence>
@@ -74,21 +77,61 @@ const Scroll = props => {
             animate={{ height: '69vh', width: '99vh' }}
             exit={{ height: '69vh', width: '0vh', transitionDuration: '0.5s' }}
           >
-            <Flex justify='center' align='start' width='60%' height='70%'>
-              <Flex
-                style={{
-                  width: '90%',
-                  height: '90%',
-                  justifyContent: 'space-evenly',
-                  alignItems: 'center',
-                  flexDirection: 'column',
-                }}
-              >
-                <h1>{props.scrollHead}</h1>
-                <p>{props.scrollContent}</p>
+            <Flex
+              flexDir='column'
+              justify='start'
+              align='center'
+              width='60%'
+              height='70%'
+            >
+              <Flex width='100%' height='20%'>
+                <Flex
+                  style={{
+                    width: '95%',
+                    justifyContent: 'space-evenly',
+                    alignItems: 'center',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <h1>{props.scrollHead}</h1>
+                </Flex>
+                <Flex onClick={clickHandler} cursor='pointer'>
+                  &times;
+                </Flex>
               </Flex>
-              <Flex onClick={clickHandler} cursor='pointer'>
-                &times;
+              <Flex width='100%' height='80%' justify='center' align='center'>
+                <Flex
+                  width='35%'
+                  height='100%'
+                  flexDir='column'
+                  justify='start'
+                  align='center'
+                  overflowX='hidden'
+                  overflowY='scroll'
+                >
+                  {props.eventsList.map(e => {
+                    return (
+                      <Flex justify='center' align='center' flexDir='column'>
+                        <Flex
+                          width='100%'
+                          fontSize='medium'
+                          px='5'
+                          cursor='pointer'
+                          onClick={() => {
+                            setIndex(props.eventsList.indexOf(e));
+                          }}
+                        >
+                          {e}
+                        </Flex>
+                        <img width='100%' src={teer} alt='arrow'></img>
+                      </Flex>
+                    );
+                  })}
+                </Flex>
+                <Flex width='65%'>
+                  <Flex width='100%'>{props.eventsList[index]}</Flex>
+                  <Flex width='100%'></Flex>
+                </Flex>
               </Flex>
             </Flex>
           </motion.div>

diff --git a/src/Components/scroll/teer.png b/src/Components/scroll/teer.png