From 46a02aad075aa32d606afe2d47fa369f9c05b490 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Mon, 6 Mar 2023 17:04:55 -0330
Subject: [PATCH] Grab a random image for the ticket bg

---
 .../LaunchWeek/Ticket/TicketVisual.tsx        | 27 ++++++++++++++++---
 apps/www/pages/launch-week/index.tsx          |  2 +-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx b/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx
index 01359b0d930..40200e9b875 100644
--- a/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx
+++ b/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
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index e3b92133afd..f044aacff77 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/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'