ticket

apps/www/components/LaunchWeek/13/Multiplayer/CanvasSingleMode.tsx

@@ -197,7 +197,7 @@ export default function InteractiveGridSingle() {
         height={CANVAS_HEIGHT}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
-        className="border border-gray-300 shadow-lg"
+        className="border border-gray-300 shadow-lg pointer-events-auto"
       />
 
       {/* Current user cursor */}

apps/www/components/LaunchWeek/13/Releases/LWHeader.tsx

@@ -1,23 +1,29 @@
 import React from 'react'
 import { cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
+import CanvasSingleMode from '../Multiplayer/CanvasSingleMode'
 // import LW12Background from '../LW12Background'
 
 const LWHeader = ({ className }: { className?: string }) => {
   return (
-    <div className={cn('relative w-full overflow-hidden pt-10 sm:pt-8', className)}>
-      <div className="absolute z-0 inset-0 w-full h-full overflow-hidden pointer-events-none">
-        <div className="absolute z-0 inset-0 w-full">
-          {/* <LW12Background className="absolute z-0 inset-0 w-full flex items-center justify-center opacity-100 transition-opacity h-full" /> */}
+    <div
+      className={cn(
+        'relative w-full pt-10 sm:pt-8 overflow-hidden lg:h-[400px] lg:min-h-[400px]',
+        className
+      )}
+    >
+      <div className="absolute z-0 inset-0 w-full h-full">
+        <div className="absolute z-0 inset-0 w-full !pointer-events-none">
+          <CanvasSingleMode />
         </div>
-        <div className="absolute inset-0 w-full h-full bg-[linear-gradient(to_top,#060809)_0%,transparent_100%)]" />
+        <div className="absolute inset-0 w-full h-full bg-gradient-to-t from-background to-transparent !pointer-events-none" />
       </div>
-      <SectionContainer className="h-full flex flex-col items-start gap-3 !max-w-none lg:!container !pb-4 md:!pb-10">
-        <h1 className="text-3xl uppercase tracking-wide">
+      <SectionContainer className="h-full flex flex-col items-start justify-end gap-3 !max-w-none lg:!container !pb-4 md:!pb-10 !pointer-events-none">
+        <h1 className="text-3xl uppercase tracking-wide pointer-events-none">
           Launch Week <span className="font-mono">13</span>
         </h1>
-        <p className="text-foreground-lighter max-w-xs md:max-w-sm">
-          Join us for a week of new features and find new ways to level up your development
+        <p className="text-foreground-lighter max-w-xs md:max-w-sm pointer-events-none">
+          A week of new features and new ways to level up your development.
         </p>
       </SectionContainer>
     </div>

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

@@ -52,7 +52,7 @@ const ThreeTicketCanvas: React.FC<{
     hasWon,
   } = useLwGame(inputRef)
 
-  const MIN_CANVAS_HEIGHT = 600
+  const CANVAS_HEIGHT = 600
   const FLIP_DELTA = 20 // Swipe px threshold for flipping
   const LINE_HEIGHT = 1.6
   const SCALE_VARIATION_ON_INTERACTION = 0.025
@@ -112,8 +112,7 @@ const ThreeTicketCanvas: React.FC<{
     targetScale.current = scale
     const calculateDesktopWidth = () => window.innerWidth
     const initialCanvasWidth = calculateDesktopWidth()
-    const initialCanvasHeight =
-      window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65
+    const initialCanvasHeight = CANVAS_HEIGHT
     const ticketYIdleRotation = 0
 
     // Initialize scene, camera, and renderer
@@ -440,14 +439,9 @@ const ThreeTicketCanvas: React.FC<{
       ticketGroup.position.x = getTicketXPosition(window.innerWidth, ALIGN_RIGHT)
       const tickeScale = getTicketScale(window.innerWidth)
       ticketGroup.scale.set(tickeScale, tickeScale, tickeScale)
-      camera.aspect =
-        newWidth /
-        (window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65)
+      camera.aspect = newWidth / CANVAS_HEIGHT
       camera.updateProjectionMatrix()
-      renderer.setSize(
-        newWidth,
-        window.innerHeight < MIN_CANVAS_HEIGHT ? MIN_CANVAS_HEIGHT - 65 : window.innerHeight - 65
-      )
+      renderer.setSize(newWidth, CANVAS_HEIGHT)
     }
 
     function onKeyDown(event: KeyboardEvent) {

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

@@ -43,7 +43,10 @@ export default function TicketForm() {
           })
           .select()
           .single()
-          .then(({ error }: any) => fetchUser({ error, username }))
+          .then(({ data, error }: any) => {
+            console.log(data, error, username, userData)
+            fetchUser({ error, username })
+          })
       }
     }
   }
@@ -125,7 +128,7 @@ export default function TicketForm() {
 
     const redirectTo = `${SITE_ORIGIN}/launch-week/${
       userData.username ? '?referral=' + userData.username : ''
-    }#ticket`
+    }`
 
     supabase?.auth.signInWithOAuth({
       provider: 'github',

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

@@ -38,25 +38,9 @@ const TicketingFlow = () => {
   const DISPLAY_NAME = userData?.name || userData?.username
   const FIRST_NAME = DISPLAY_NAME?.split(' ')[0]
 
-  const PartyModeButton = () => (
-    <Button
-      size="small"
-      onClick={() => setIsPartyMode(!isPartyMode)}
-      type="default"
-      className="sm:pl-1 pointer-events-auto"
-    >
-      <div className="flex items-center">
-        <div className="relative h-6 w-6 border rounded bg-surface-75 mr-2 uppercase hidden sm:flex items-center justify-center">
-          P
-        </div>
-        Party Mode: {isPartyMode ? 'On 🎉' : 'Off 😴'}
-      </div>
-    </Button>
-  )
-
   return (
     <>
-      <SectionContainer className="relative h-full lg:min-h-[calc(80dvh-65px)] flex-1 pointer-events-none">
+      <SectionContainer className="relative h-full lg:min-h-[600px] lg:max-h-[600px] 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}>
@@ -131,10 +115,10 @@ const TicketingFlow = () => {
                   initial={initial}
                   animate={animate}
                   exit={exit}
-                  className="w-full flex-1 lg:min-h-[400px] lg:pl-12 h-full flex flex-col lg:flex-row items-center lg:justify-start lg:items-start gap-8 md:gap-10 lg:gap-32 text-foreground text-center md:text-left"
+                  className="w-full flex-1 lg:min-h-[400px] lg:pl-12 h-full flex flex-col lg:flex-row items-center lg:justify-start gap-8 md:gap-10 lg:gap-32 text-foreground text-center md:text-left"
                 >
-                  <div className="order-first lg:h-full w-full max-w-md xl:max-w-xl gap-8 flex flex-col items-center justify-center lg:items-start lg:justify-center text-center lg:text-left">
-                    <div className="flex flex-col gap-1 max-w-sm">
+                  <div className="order-first lg:h-full w-full max-w-md xl:max-w-2xl gap-8 flex flex-col items-center justify-center lg:items-start lg:justify-center text-center lg:text-left">
+                    <div className="flex flex-col gap-1 max-w-md">
                       {/* Header */}
                       <div className="text-2xl">
                         {hasPlatinumTicket ? (
@@ -157,27 +141,7 @@ const TicketingFlow = () => {
                         Registrations are closed but you can still claim a ticket.
                       </div>
                     </div>
-                    <TicketSwagCtaBox className="w-full" />
-                    <div className="flex flex-col gap-4 mt-2 md:mt-0 items-center lg:items-start">
-                      <div className="flex flex-row gap-2 md:item-center">
-                        <PartyModeButton />
-                        <Button
-                          size="small"
-                          type="default"
-                          className="sm:pl-1 pointer-events-auto"
-                          asChild
-                        >
-                          <Link
-                            href="/events?category=meetup"
-                            className="[&>span]:flex w-full [&>span]:items-center"
-                          >
-                            <div className="relative h-6 w-6 border rounded bg-surface-75 mr-2 uppercase hidden sm:flex items-center justify-center">
-                              <Calendar strokeWidth={2} className="w-3 h-3 text-foreground-light" />
-                            </div>
-                            <span>Meetups</span>
-                          </Link>
-                        </Button>
-                      </div>
+                    <div className="flex flex-col gap-4 mt-2 md:mt-0 md:mb-12 items-center lg:items-start">
                       <TicketPresence
                         className={cn(
                           'opacity-0 invisible translate-y-1 transition-all',
@@ -197,7 +161,7 @@ const TicketingFlow = () => {
         <ThreeTicketCanvas
           username={DISPLAY_NAME ?? ''}
           ticketType={ticketType}
-          className="relative -mt-40 -mb-10 lg:my-0 lg:absolute"
+          className="relative -mt-44 -mb-10 lg:my-0 lg:absolute"
         />
       )}
     </>

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

@@ -14,10 +14,11 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
 import LWStickyNav from '~/components/LaunchWeek/13/Releases/LWStickyNav'
 import LWHeader from '~/components/LaunchWeek/13/Releases/LWHeader'
 import MainStage from '~/components/LaunchWeek/13/Releases/MainStage'
+import TicketingFlow from '~/components/LaunchWeek/13/Ticket/TicketingFlow'
 
 const BuildStage = dynamic(() => import('~/components/LaunchWeek/13/Releases/BuildStage'))
 const CTABanner = dynamic(() => import('~/components/CTABanner'))
-const TicketingFlow = dynamic(() => import('~/components/LaunchWeek/13/Ticket/TicketingFlow'))
+// const TicketingFlow = dynamic(() => import('~/components/LaunchWeek/13/Ticket/TicketingFlow'))
 // const LW13Meetups = dynamic(
 //   () => import('~/components/LaunchWeek/13/LWMeetups')
 // )