hot fix

aura-nw · Aug 30, 2024 · 003648b · 003648b
1 parent f9e4933
commit 003648b
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 79 deletions.
diff --git a/src/components/pages/artist/Artworks.tsx b/src/components/pages/artist/Artworks.tsx
@@ -1,19 +1,16 @@
 import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
+import Modal from 'components/Modal'
 import Image from 'next/image'
-import { useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getArtistArtworks } from 'src/services'
 import useSWR from 'swr'
-import Manga from '../homepage/manga'
-import Modal from 'components/Modal'
 
 import 'swiper/css'
 import 'swiper/css/grid'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Controller } from 'swiper/modules'
 export default function ArtworkList({ id }) {
   const [page, setPage] = useState(1)
   const [open, setOpen] = useState(false)
@@ -35,11 +32,21 @@ export default function ArtworkList({ id }) {
     }
   }
   const nextHandler = () => {
-     const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
-     if (data?.artworks[idx + 1]) {
-       setSelectedArtwork(data?.artworks[idx + 1])
-     }
+    const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
+    if (data?.artworks[idx + 1]) {
+      setSelectedArtwork(data?.artworks[idx + 1])
+    }
   }
+  useEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.key == 'ArrowRight') {
+        ;(document.querySelector('#next') as any)?.click()
+      }
+      if (e.key == 'ArrowLeft') {
+        ;(document.querySelector('#prev') as any)?.click()
+      }
+    })
+  }, [])
   if (isLoading) {
     return (
       <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
@@ -73,6 +80,7 @@ export default function ArtworkList({ id }) {
               <div>
                 <div
                   onClick={prevHandler}
+                  id='prev'
                   className='absolute -bottom-14 lg:top-1/2 -scale-x-100 left-[calc(50%-20px)] lg:-left-[98px] -translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
                   <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
                     <path
@@ -86,6 +94,7 @@ export default function ArtworkList({ id }) {
                 </div>
                 <div
                   onClick={nextHandler}
+                  id='next'
                   className='absolute -bottom-14 lg:top-1/2 right-[calc(50%-20px)] lg:-right-[98px] translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
                   <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
                     <path

diff --git a/src/components/pages/artist/Contests.tsx b/src/components/pages/artist/Contests.tsx
@@ -5,7 +5,7 @@ import moment from 'moment'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getContestMangaAndArtwork, getContests } from 'src/services'
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -35,25 +35,35 @@ export default function Contests({ id }) {
     },
     ({ id, selectedContestId }) => (id && selectedContestId ? getContestMangaAndArtwork(id, selectedContestId) : null)
   )
+  useEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.key == 'ArrowRight') {
+        ;(document.querySelector('#next') as any)?.click()
+      }
+      if (e.key == 'ArrowLeft') {
+        ;(document.querySelector('#prev') as any)?.click()
+      }
+    })
+  }, [])
   if (isLoading)
     return (
       <div className='space-y-4'>
         <Skeleton className='w-full aspect-[343/256]' />
         <Skeleton className='w-full aspect-[343/256]' />
       </div>
     )
-    const prevHandler = () => {
-      const idx = contestData?.artworks?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
-      if (contestData?.artworks?.artworks[idx - 1]) {
-        setSelectedArtwork(contestData?.artworks?.artworks[idx - 1])
-      }
+  const prevHandler = () => {
+    const idx = contestData?.artworks?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
+    if (contestData?.artworks?.artworks[idx - 1]) {
+      setSelectedArtwork(contestData?.artworks?.artworks[idx - 1])
     }
-    const nextHandler = () => {
-      const idx = contestData?.artworks?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
-      if (contestData?.artworks?.artworks[idx + 1]) {
-        setSelectedArtwork(contestData?.artworks?.artworks[idx + 1])
-      }
+  }
+  const nextHandler = () => {
+    const idx = contestData?.artworks?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
+    if (contestData?.artworks?.artworks[idx + 1]) {
+      setSelectedArtwork(contestData?.artworks?.artworks[idx + 1])
     }
+  }
   if (contestData) {
     return (
       <div className='-mt-4 lg:mt-0'>
@@ -132,6 +142,7 @@ export default function Contests({ id }) {
             <div>
               <div
                 onClick={prevHandler}
+                id='prev'
                 className='absolute -bottom-14 lg:top-1/2 -scale-x-100 left-[calc(50%-20px)] lg:-left-[98px] -translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
                 <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
                   <path
@@ -145,6 +156,7 @@ export default function Contests({ id }) {
               </div>
               <div
                 onClick={nextHandler}
+                id='next'
                 className='absolute -bottom-14 lg:top-1/2 right-[calc(50%-20px)] lg:-right-[98px] translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
                 <svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
                   <path

diff --git a/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx b/src/components/pages/event/pudgy-asia-tour/FooterAnimationSection.tsx
@@ -16,65 +16,114 @@ export default function FooterAnimationSection() {
   const yPosition = Math.cos((Math.PI * hours) / 6) + 1
   const xPosition = ((hours + 6) % 12 || 12) / 12
   return (
-    <div
-      className={`pt-[10%] relative ${
-        isDay ? '' : 'bg-[linear-gradient(180deg,#F5FDFF_0%,#36485B_38.4%,#000_100%)]'
-      }`}>
-      <Image
-        src={isDay ? Sun : Moon}
-        alt=''
-        className={`absolute top-0 left-1/2 z-10 -translate-x-1/2 w-[7%]`}
-        style={{
-          top: `${10 + 20 * (1 - yPosition / 2)}%`,
-          left: `${xPosition * 100}%`,
-        }}
-      />
+    <>
+      <style jsx>
+        {`
+          @keyframes plane-kf {
+            0% {
+              right: -50%;
+              top: 100%;
+            }
+            100% {
+              right: 150%;
+              top: -50%;
+            }
+          }
+          .plane-animation {
+            animation: plane-kf 35s linear infinite;
+          }
+          @keyframes car-kf {
+            0% {
+              right: -50%;
+            }
+            100% {
+              right: 150%;
+            }
+          }
+          .car-animation {
+            animation: car-kf 17s linear infinite;
+          }
+          @keyframes taxi-kf {
+            0% {
+              left: -50%;
+            }
+            100% {
+              left: 150%;
+            }
+          }
+          .taxi-animation {
+            animation: taxi-kf 14s linear infinite;
+          }
+          @keyframes bus2-kf {
+            0% {
+              left: -50%;
+            }
+            100% {
+              left: 150%;
+            }
+          }
+          .bus2-animation {
+            animation: bus2-kf 20s linear infinite;
+          }
+          @keyframes bus1-kf {
+            0% {
+              right: -50%;
+            }
+            60% {
+              right: 78%;
+            }
+            68% {
+              right: 78%;
+            }
+            100% {
+              right: 150%;
+            }
+          }
+          .bus1-animation {
+            animation: bus1-kf 25s ease-in-out infinite;
+          }
+        `}
+      </style>
+      <div
+        className={`pt-[10%] relative ${
+          isDay ? '' : 'bg-[linear-gradient(180deg,#F5FDFF_0%,#36485B_38.4%,#000_100%)]'
+        }`}>
+        <Image
+          src={isDay ? Sun : Moon}
+          alt=''
+          className={`absolute top-0 left-1/2 z-10 -translate-x-1/2 w-[7%]`}
+          style={{
+            top: `${10 + 20 * (1 - yPosition / 2)}%`,
+            left: `${xPosition * 100}%`,
+          }}
+        />
 
-      <Image src={Scenery} alt='' className={`w-full relative z-20`} />
-      {/* {isDay ? <></> : <div className='absolute inset-0 bg-black/25 z-[21]'></div>} */}
-      <motion.div
-        className='absolute z-[15] w-[10%]'
-        initial={{ right: '-50%', top: '100%' }}
-        animate={{ right: '150%', top: '-50%' }}
-        transition={{ duration: 35, repeat: Infinity, ease: 'linear' }}>
-        <Image src={Plane} alt='' />
-      </motion.div>
-      <motion.div
-        className='absolute z-30 bottom-[14%] w-[14%]'
-        initial={{ right: '-50%' }}
-        animate={{ right: ['-50%', '78%', '78%', '150%'] }}
-        transition={{ duration: 25, repeat: Infinity, ease: 'easeInOut', times: [0, 0.6, 0.68, 1] }}>
-        <Image src={Bus1} alt='' />
-        {!isDay && (
-          <Image src={Light} alt='' className='absolute right-[94%] bottom-[2%] rotate-180 w-1/2 opacity-70' />
-        )}
-      </motion.div>
-      <motion.div
-        className='absolute z-30 bottom-[10%] w-[8%]'
-        initial={{ right: '-50%' }}
-        animate={{ right: '150%' }}
-        transition={{ duration: 17, repeat: Infinity, ease: 'linear' }}>
-        <Image src={Car} alt='' />
-        {!isDay && (
-          <Image src={Light} alt='' className='absolute right-[85%] bottom-[15%] rotate-180 w-1/2 opacity-80' />
-        )}
-      </motion.div>
-      <motion.div
-        className='absolute z-30 bottom-[4%] w-[12%]'
-        initial={{ left: '-50%' }}
-        animate={{ left: '150%' }}
-        transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}>
-        <Image src={Bus2} alt='' />
-        {!isDay && <Image src={Light} alt='' className='absolute left-[97%] bottom-[15%] w-1/2 opacity-80' />}
-      </motion.div>
-      <motion.div
-        className='absolute z-30 bottom-[1%] w-[9%]'
-        initial={{ left: '-50%' }}
-        animate={{ left: '150%' }}
-        transition={{ duration: 14, repeat: Infinity, ease: 'linear' }}>
-        <Image src={Taxi} alt='' />
-        {!isDay && <Image src={Light} alt='' className='absolute left-[90%] bottom-[15%] w-1/2 opacity-80' />}
-      </motion.div>
-    </div>
+        <Image src={Scenery} alt='' className={`w-screen relative z-20`} />
+        {/* {isDay ? <></> : <div className='absolute inset-0 bg-black/25 z-[21]'></div>} */}
+        <div className='absolute z-[15] w-[10%] plane-animation'>
+          <Image src={Plane} alt='' />
+        </div>
+        <div className='absolute z-30 bottom-[14%] w-[14%] bus1-animation'>
+          <Image src={Bus1} alt='' />
+          {!isDay && (
+            <Image src={Light} alt='' className='absolute right-[94%] bottom-[2%] rotate-180 w-1/2 opacity-70' />
+          )}
+        </div>
+        <div className='absolute z-30 bottom-[10%] w-[8%] car-animation'>
+          <Image src={Car} alt='' />
+          {!isDay && (
+            <Image src={Light} alt='' className='absolute right-[85%] bottom-[15%] rotate-180 w-1/2 opacity-80' />
+          )}
+        </div>
+        <div className='absolute z-30 bottom-[4%] w-[12%] bus2-animation'>
+          <Image src={Bus2} alt='' />
+          {!isDay && <Image src={Light} alt='' className='absolute left-[97%] bottom-[15%] w-1/2 opacity-80' />}
+        </div>
+        <div className='absolute z-30 bottom-[1%] w-[9%] taxi-animation'>
+          <Image src={Taxi} alt='' />
+          {!isDay && <Image src={Light} alt='' className='absolute left-[90%] bottom-[15%] w-1/2 opacity-80' />}
+        </div>
+      </div>
+    </>
   )
 }