.

apps/www/components/LaunchWeek/13/InteractiveGridParty.tsx

@@ -51,7 +51,7 @@ export default function InteractiveGrid() {
     (userId: string | undefined) => {
       if (!userId) {
         console.log('userId is undefined, returning black as fallback.')
-        return '#ffffff' // fallback color
+        return INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER // fallback color
       }
 
       // If userId already has a color, return it; otherwise, assign one
@@ -256,16 +256,6 @@ export default function InteractiveGrid() {
         className="border border-gray-300 shadow-lg"
       />
       <div className="absolute top-4 right-4 text-foreground w-40 h-full flex flex-col gap-2 pointer-events-none">
-        <div className="bg-default w-full h-full p-4 rounded-lg border shadow-lg max-h-60 overflow-hidden pointer-events-auto">
-          <h3 className="">Hovered Cells:</h3>
-          <ul className="mt-2 h-full overflow-hidden overflow-y-scroll">
-            {Array.from(hoveredCells.entries()).map(([cell, state]) => (
-              <li key={cell}>
-                {cell} - {state.isHovered ? 'Hovered' : 'Fading'}
-              </li>
-            ))}
-          </ul>
-        </div>
         <div className="text-foreground-lighter text-xs flex items-center transition-opacity">
           <Dot className="text-brand animate-pulse -ml-2" />
           {onlineUsers.length} user{isSingular ? '' : 's'} online

apps/www/components/LaunchWeek/13/InteractiveGridSingle.tsx

@@ -47,7 +47,7 @@ export default function InteractiveGridSingle() {
     (userId: string | undefined) => {
       if (!userId) {
         console.log('userId is undefined, returning black as fallback.')
-        return '#ffffff' // fallback color
+        return INTERACTIVE_GRID_COLORS(isDarkTheme).CURRENT_USER_HOVER // fallback color
       }
 
       // If userId already has a color, return it; otherwise, assign one
@@ -216,16 +216,6 @@ export default function InteractiveGridSingle() {
         className="border border-gray-300 shadow-lg"
       />
       <div className="absolute top-4 right-4 text-foreground w-40 h-full flex flex-col gap-2 pointer-events-none">
-        <div className="bg-default w-full h-full p-4 rounded-lg border shadow-lg max-h-60 overflow-hidden pointer-events-auto">
-          <h3 className="">Hovered Cells:</h3>
-          <ul className="mt-2 h-full overflow-hidden overflow-y-scroll">
-            {Array.from(hoveredCells.entries()).map(([cell, state]) => (
-              <li key={cell}>
-                {cell} - {state.isHovered ? 'Hovered' : 'Fading'}
-              </li>
-            ))}
-          </ul>
-        </div>
         <div className="text-foreground-lighter text-xs flex items-center transition-opacity">
           <Dot className="text-brand animate-pulse -ml-2" />
           {onlineUsers.length} user{isSingular ? '' : 's'} online

apps/www/components/LaunchWeek/13/Ticket/TicketActions2.tsx

@@ -15,7 +15,7 @@ export default function TicketActions2() {
   const [_loading, setLoading] = useState(false)
   const isLessThanMd = useBreakpoint()
   const downloadLink = useRef<HTMLAnchorElement>()
-  const link = `${LW_URL}/tickets/${username}?lw=12${
+  const link = `${LW_URL}/tickets/${username}?lw=13${
     hasSecretTicket ? '&secret=true' : platinum ? `&platinum=true` : ''
   }&t=${dayjs(new Date()).format('DHHmmss')}`
   const permalink = encodeURIComponent(link)
@@ -23,7 +23,7 @@ export default function TicketActions2() {
   const encodedText = encodeURIComponent(text)
   const tweetUrl = `https://twitter.com/intent/tweet?url=${permalink}&text=${encodedText}`
   const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${permalink}&text=${encodedText}`
-  const downloadUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/lw12-og?username=${encodeURIComponent(
+  const downloadUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/lw13-og?username=${encodeURIComponent(
     username ?? ''
   )}`
   const params = useParams()
@@ -57,7 +57,7 @@ export default function TicketActions2() {
             shared_on_twitter: 'now',
             metadata: { ...metadata, hasSharedSecret: hasSecretTicket },
           })
-          .eq('launch_week', 'lw12')
+          .eq('launch_week', 'lw13')
           .eq('username', username)
       } else if (social === 'linkedin') {
         await supabase
@@ -66,7 +66,7 @@ export default function TicketActions2() {
             shared_on_linkedin: 'now',
             metadata: { ...metadata, hasSharedSecret: hasSecretTicket },
           })
-          .eq('launch_week', 'lw12')
+          .eq('launch_week', 'lw13')
           .eq('username', username)
       }
 

apps/www/components/LaunchWeek/13/Ticket/TicketingFlow.tsx

@@ -1,28 +1,27 @@
 import React, { useState } from 'react'
-import dynamic from 'next/dynamic'
 import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion'
-import { Badge, Button, cn } from 'ui'
+import { Button, cn } from 'ui'
 import { DEFAULT_TRANSITION, INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
 import { LW13_DATE, LW13_LAUNCH_DATE } from '~/lib/constants'
-import useWinningChances from '../../hooks/useWinningChances'
 
+import useWinningChances from '~/components/LaunchWeek/hooks/useWinningChances'
 import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import TicketForm from './TicketForm'
-import CountdownComponent from '../Countdown'
-import TicketPresence from './TicketPresence'
-import TicketActions from './TicketActions'
-// import LW13Background from '../LW13Background'
-import TicketCopy from './TicketCopy'
-import TicketActions2 from './TicketActions2'
-import useLWShortcuts from '../useLWShortcuts'
+import CountdownComponent from '~/components/LaunchWeek/13/Countdown'
+import useLWPartyMode from '~/components/LaunchWeek/13/useLWPartyMode'
 import MetalTicket from '~/components/LaunchWeek/13/MetalTicket'
 import InteractiveGridParty from '~/components/LaunchWeek/13/InteractiveGridParty'
 import InteractiveGridSingle from '~/components/LaunchWeek/13/InteractiveGridSingle'
 
+import TicketForm from '~/components/LaunchWeek/13/Ticket/TicketForm'
+import TicketPresence from '~/components/LaunchWeek/13/Ticket/TicketPresence'
+import TicketActions from '~/components/LaunchWeek/13/Ticket/TicketActions'
+import TicketCopy from '~/components/LaunchWeek/13/Ticket/TicketCopy'
+import TicketActions2 from '~/components/LaunchWeek/13/Ticket/TicketActions2'
+
 const TicketingFlow = () => {
   const { ticketState, userData, showCustomizationForm } = useConfData()
-  const { isPartyMode, setIsPartyMode } = useLWShortcuts()
+  const { isPartyMode, setIsPartyMode } = useLWPartyMode()
 
   const isLoading = ticketState === 'loading'
   const isRegistering = ticketState === 'registration'
@@ -42,8 +41,8 @@ const TicketingFlow = () => {
 
   return (
     <>
-      <SectionContainer className="relative h-full flex-1 pointer-events-none">
-        <div className="relative z-10 flex h-full">
+      <SectionContainer className="relative h-full min-h-[calc(100dvh-65px)] flex-1 pointer-events-none">
+        <div className="relative z-10 flex items-center h-full">
           <h1 className="sr-only">Supabase Launch Week 13 | {LW13_DATE}</h1>
 
           <LazyMotion features={domAnimation}>
@@ -54,7 +53,7 @@ const TicketingFlow = () => {
                   initial={exit}
                   animate={animate}
                   exit={exit}
-                  className="relative w-full min-h-[400px] mx-auto py-16 md:py-24 flex flex-col items-center gap-6 text-foreground"
+                  className="relative w-full min-h-[400px] max-h-[400px] mx-auto py-16 md:py-24 flex flex-col items-center gap-6 text-foreground"
                 >
                   <div className="hidden">
                     <TicketForm />
@@ -82,23 +81,23 @@ const TicketingFlow = () => {
                   animate={animate}
                   exit={exit}
                   className={cn(
-                    'w-full min-h-[400px] text-left grid md:grid-cols-2 justify-center gap-6 lg:gap-8 opacity-0 invisible',
+                    'w-full min-h-[400px] max-h-[400px] h-full text-left grid md:grid-cols-2 justify-center gap-8 opacity-0 invisible',
                     !hasTicket && 'opacity-100 visible'
                   )}
                 >
-                  <div className="h-full max-w-sm flex flex-col justify-center gap-6">
+                  <div className="h-full max-w-sm flex flex-col justify-center gap-2 md:gap-6">
                     <CountdownComponent
                       date={LW13_LAUNCH_DATE}
                       showCard={false}
                       className="[&_*]:leading-4 text-foreground-lighter"
                       size="large"
                     />
-                    <div className="flex flex-col gap-6">
+                    <div className="flex flex-col gap-2 md:gap-6">
                       <div className="flex flex-col flex-wrap uppercase text-2xl tracking-wider">
                         <h2 className="text-foreground">Launch Week 13</h2>
                         <p className="text-foreground-lighter text-base">{LW13_DATE}</p>
                       </div>
-                      <p className="text-foreground-lighter text-lg ">
+                      <p className="text-foreground-lighter text-sm md:text-lg">
                         Join us for a week of new features and level up your development
                       </p>
                       <div>
@@ -195,7 +194,8 @@ const TicketingFlow = () => {
           </LazyMotion>
         </div>
       </SectionContainer>
-      {isPartyMode ? <InteractiveGridParty /> : <InteractiveGridSingle />}
+      {/* {isPartyMode ? <InteractiveGridParty /> : <InteractiveGridSingle />} */}
+      <InteractiveGridParty />
       {hasTicket && <div className="absolute inset-8">HAS_TICKET</div>}
     </>
   )

apps/www/components/LaunchWeek/13/useLWPartyMode.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+import { useKey } from 'react-use'
+
+const useLWPartyMode = (disabled?: boolean) => {
+  const [isPartyMode, setIsPartyMode] = useState<boolean>(true)
+
+  useKey('p', () => setIsPartyMode(!isPartyMode), {}, [isPartyMode])
+  useKey('Escape', () => setIsPartyMode(false), {}, [isPartyMode])
+
+  return { isPartyMode, setIsPartyMode }
+}
+
+export default useLWPartyMode

apps/www/components/LaunchWeek/13/useLWShortcuts.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const useLWShortcuts = (disabled?: boolean) => {
-  const [isPartyMode, setIsPartyMode] = useState<boolean>(true)
-
-  function onKeyDown(event: KeyboardEvent) {
-    if (disabled) return
-
-    if (event.key === 'Escape') {
-      setIsPartyMode(false)
-    }
-
-    const newKey = event.key.toLocaleLowerCase()
-
-    if (!(event.metaKey || event.ctrlKey) && newKey === 'p') {
-      console.log('P!')
-      setIsPartyMode(true)
-    }
-  }
-
-  useEffect(() => {
-    if (!disabled) window.addEventListener('keydown', onKeyDown)
-
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [disabled])
-
-  return { isPartyMode, setIsPartyMode }
-}
-
-export default useLWShortcuts

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

@@ -82,7 +82,7 @@ export default function LaunchWeekIndex() {
           setShowCustomizationForm,
         }}
       >
-        <DefaultLayout>
+        <DefaultLayout className="md:h-[calc(100dvh-65px)] min-h-[calc(100dvh-65px)]">
           <TicketingFlow />
         </DefaultLayout>
       </ConfDataContext.Provider>