Grab a random image for the ticket bg

apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx

@@ -2,13 +2,13 @@ import styles from './ticket-visual.module.css'
 import TicketProfile from './TicketProfile'
 import TicketNumber from './TicketNumber'
 import TicketMono from './ticket-mono'
-import TicketInfoFooter from './ticket-info-footer'
 import TicketMonoMobile from './ticket-mono-mobile'
-import cn from 'classnames'
 import { useRouter } from 'next/router'
-import { DATE } from '~/lib/constants'
 import useConfData from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
 import TicketHeader from './TicketHeader'
+import { useState } from 'react'
+import { SupabaseClient } from '@supabase/supabase-js'
+import Image from 'next/image'
 
 type TicketGenerationState = 'default' | 'loading'
 type Props = {
@@ -35,6 +35,11 @@ export default function TicketVisual({
 
   const router = useRouter()
   const basePath = router.basePath
+  const [supabase, setSupabase] = useState<SupabaseClient | null>(null)
+  const [imageIsLoading, setImageIsLoading] = useState(true)
+  const randomNumber = Math.floor(Math.random() * 200) + 1
+  const goldRandomNumber = Math.floor(Math.random() * 56) + 1
+  const storageBaseFilepath = `https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw7/tickets_bg/`
 
   return (
     <div
@@ -49,6 +54,22 @@ export default function TicketVisual({
       }}
       id="wayfinding--ticket-visual-inner-container"
     >
+      <div id="wayfinding--ticket-dynamic-bg-image">
+        <Image
+          src={
+            golden
+              ? `${storageBaseFilepath}/reg_bg_${randomNumber}.png`
+              : `${storageBaseFilepath}/gold/gold_bg_${goldRandomNumber}.png`
+          }
+          layout="fill"
+          objectFit="cover"
+          className={[
+            'duration-700 ease-in-out',
+            imageIsLoading ? 'grayscale blur-2xl scale-110' : 'grayscale-0 blur-0 scale-100',
+          ].join(' ')}
+          onLoadingComplete={() => setImageIsLoading(false)}
+        />
+      </div>
       <div className="flex flex-col items-center justify-between w-full h-full flex-1 md:pr-[110px]">
         {username && <TicketHeader />}
         <div

apps/www/pages/launch-week/index.tsx

@@ -1,5 +1,5 @@
 import { NextSeo } from 'next-seo'
-import { GetStaticProps, GetStaticPaths } from 'next'
+import { GetStaticProps } from 'next'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import TicketContainer from '~/components/LaunchWeek/Ticket/TicketContainer'