tiger init follow up (supabase#30659)

* meetups link

* max-height

* fix cursor and update share text

Author: fsansalvadore

apps/www/app/api-v2/ticket-og/route.tsx

@@ -97,7 +97,7 @@ export async function GET(req: Request, res: Response) {
     const OG_WIDTH = 1200
     const OG_HEIGHT = 628
     const USERNAME_LEFT = 400
-    const USERNAME_BOTTOM = 60
+    const USERNAME_BOTTOM = 100
     const USERNAME_WIDTH = 400
     const DISPLAY_NAME = name || username
 

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

@@ -15,28 +15,17 @@ import { Coordinates, Payload, User } from './types'
 import { cloneDeep, throttle } from 'lodash'
 import Cursor from './Cursor'
 
-/**
- * [x] multiplayer cursors
- * [x] show own cursor
- * [x] show own trail
- * [x] show other users cursors
- * [x] brand color for current user
- * [x] gray for online users
- * [x] offset cursor position by scroll offset Y
- * [ ] hide own cursor on touch devices
- */
-
-const GRID_SIZE = 100
-const CELL_SIZE = 35
-const CANVAS_WIDTH = 1800
-const CANVAS_HEIGHT = 1600
-const HOVER_DURATION = 100
-const FADE_DURATION = 300
+export const GRID_SIZE = 100
+export const CELL_SIZE = 40
+export const CANVAS_WIDTH = 1800
+export const CANVAS_HEIGHT = 1600
+export const HOVER_DURATION = 100
+export const FADE_DURATION = 300
 
 const MAX_ROOM_USERS = 50
 const MAX_EVENTS_PER_SECOND = 10
-const X_THRESHOLD = 25
-const Y_THRESHOLD = 65
+export const X_THRESHOLD = 25
+export const Y_THRESHOLD = 65
 
 interface CellState {
   isHovered: boolean
@@ -72,6 +61,7 @@ export default function InteractiveGrid() {
   const [users, setUsers] = useState<{ [key: string]: User }>({})
 
   const setMousePosition = (coordinates: Coordinates) => {
+    // if (!mousePositionRef.current) return
     mousePositionRef.current = coordinates
     _setMousePosition(coordinates)
   }
@@ -110,7 +100,7 @@ export default function InteractiveGrid() {
         Client is joining 'rooms' channel to examine existing rooms and their users
         and then the channel is removed once a room is selected
       */
-      roomChannel = supabase?.channel('rooms')!
+      roomChannel = supabase?.channel('lw13_rooms')!
 
       roomChannel
         .on(REALTIME_LISTEN_TYPES.PRESENCE, { event: REALTIME_PRESENCE_LISTEN_EVENTS.SYNC }, () => {
@@ -133,7 +123,7 @@ export default function InteractiveGrid() {
         .subscribe()
     } else {
       // When user has been placed in a room
-      roomChannel = supabase?.channel('rooms', { config: { presence: { key: roomId } } })!
+      roomChannel = supabase?.channel('lw13_rooms', { config: { presence: { key: roomId } } })!
       roomChannel.on(
         REALTIME_LISTEN_TYPES.PRESENCE,
         { event: REALTIME_PRESENCE_LISTEN_EVENTS.SYNC },
@@ -155,7 +145,7 @@ export default function InteractiveGrid() {
   }, [supabase, roomId])
 
   useEffect(() => {
-    if (!roomId || !isInitialStateSynced) return
+    // if (!roomId || !isInitialStateSynced) return
 
     let messageChannel: RealtimeChannel
     let setMouseEvent: (e: MouseEvent) => void = () => {}
@@ -190,28 +180,28 @@ export default function InteractiveGrid() {
       }
     )
 
-    messageChannel.subscribe((status: `${REALTIME_SUBSCRIBE_STATES}`) => {
-      if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {
-        // Lodash throttle will be removed once realtime-js client throttles on the channel level
-        const sendMouseBroadcast = throttle(({ x, y }) => {
-          messageChannel
-            .send({
-              type: 'broadcast',
-              event: 'POS',
-              payload: { user_id: userId, x, y },
-            })
-            .catch(() => {})
-        }, 1000 / MAX_EVENTS_PER_SECOND)
-
-        setMouseEvent = (e: MouseEvent) => {
-          const top = window.pageYOffset || document.documentElement.scrollTop
-          const [x, y] = [e.clientX, e.clientY - Y_THRESHOLD + top]
+    messageChannel?.subscribe((status: `${REALTIME_SUBSCRIBE_STATES}`) => {
+      // Lodash throttle will be removed once realtime-js client throttles on the channel level
+      const sendMouseBroadcast = throttle(({ x, y }) => {
+        messageChannel
+          .send({
+            type: 'broadcast',
+            event: 'POS',
+            payload: { user_id: userId, x, y },
+          })
+          .catch(() => {})
+      }, 1000 / MAX_EVENTS_PER_SECOND)
+
+      setMouseEvent = (e: MouseEvent) => {
+        const top = window.pageYOffset || document.documentElement.scrollTop
+        const [x, y] = [e.clientX, e.clientY - Y_THRESHOLD + top]
+        if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) {
           sendMouseBroadcast({ x, y })
-          setMousePosition({ x, y })
         }
-
-        window.addEventListener('mousemove', setMouseEvent)
+        setMousePosition({ x, y })
       }
+
+      window.addEventListener('mousemove', setMouseEvent)
     })
 
     return () => {
@@ -337,7 +327,7 @@ export default function InteractiveGrid() {
   }, [hoveredCells, setCellHovered, userData])
 
   return (
-    <div className="absolute inset-0 w-screen h-screen flex justify-center items-center max-w-screen max-h-screen cursor-none">
+    <div className="absolute inset-0 w-screen h-screen flex justify-center items-center max-w-screen max-h-screen">
       <canvas
         ref={canvasRef}
         width={CANVAS_WIDTH}
@@ -348,7 +338,7 @@ export default function InteractiveGrid() {
       />
 
       {/* Current user cursor */}
-      <Cursor
+      {/* <Cursor
         key={userId}
         x={mousePosition?.x}
         y={mousePosition?.y}
@@ -357,7 +347,7 @@ export default function InteractiveGrid() {
         message={''}
         isTyping={false}
         isCurrentUser={true}
-      />
+      /> */}
 
       {/* Online users cursors */}
       {Object.entries(users).reduce((acc, [userId, data]) => {

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

@@ -7,14 +7,15 @@ import { useTheme } from 'next-themes'
 import Cursor from './Cursor'
 import { getColor } from './randomColor'
 import { Coordinates } from './types'
-
-const GRID_SIZE = 100
-const CELL_SIZE = 35
-const CANVAS_WIDTH = 1800
-const CANVAS_HEIGHT = 1600
-const HOVER_DURATION = 100
-const FADE_DURATION = 300
-const Y_THRESHOLD = 65
+import {
+  HOVER_DURATION,
+  CANVAS_WIDTH,
+  CANVAS_HEIGHT,
+  GRID_SIZE,
+  CELL_SIZE,
+  FADE_DURATION,
+  Y_THRESHOLD,
+} from './CanvasPartyMode'
 
 interface CellState {
   isHovered: boolean
@@ -189,7 +190,7 @@ export default function InteractiveGridSingle() {
   }, [supabase])
 
   return (
-    <div className="absolute inset-0 w-screen h-screen flex justify-center items-center max-w-screen max-h-screen cursor-none">
+    <div className="absolute inset-0 w-screen h-screen flex justify-center items-center max-w-screen max-h-screen">
       <canvas
         ref={canvasRef}
         width={CANVAS_WIDTH}
@@ -200,15 +201,15 @@ export default function InteractiveGridSingle() {
       />
 
       {/* Current user cursor */}
-      <Cursor
+      {/* <Cursor
         x={mousePosition?.x}
         y={mousePosition?.y}
         color={getColor('brand').bg}
         hue={getColor('brand').hue}
         message={''}
         isTyping={false}
         isCurrentUser={true}
-      />
+      /> */}
     </div>
   )
 }

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

@@ -1,5 +1,5 @@
 import { useBreakpoint } from 'common'
-import { FC, FormEvent, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 
 interface Props {
@@ -15,10 +15,7 @@ interface Props {
   onUpdateMessage?: (message: string) => void
 }
 
-const MAX_MESSAGE_LENGTH = 70
 const MAX_DURATION = 4000
-const MAX_BUBBLE_WIDTH_THRESHOLD = 280 + 50
-const MAX_BUBBLE_HEIGHT_THRESHOLD = 40 + 50
 
 const Cursor: FC<Props> = ({
   x,
@@ -32,16 +29,13 @@ const Cursor: FC<Props> = ({
   isLocalClient,
   onUpdateMessage = () => {},
 }) => {
-  // Don't show cursor for the local client
   const _isLocalClient = !x || !y
   const inputRef = useRef() as any
   const timeoutRef = useRef() as any
   const chatBubbleRef = useRef() as any
   const isMobile = useBreakpoint('sm')
 
   const [isTouchDevice, setIsTouchDevice] = useState(false)
-  const [flipX, setFlipX] = useState(false)
-  const [flipY, setFlipY] = useState(false)
   const [hideInput, setHideInput] = useState(false)
   const [showMessageBubble, setShowMessageBubble] = useState(false)
 
@@ -68,14 +62,6 @@ const Cursor: FC<Props> = ({
     }
   }, [isLocalClient, isTyping, isCancelled, message, inputRef])
 
-  useEffect(() => {
-    // [Joshen] Experimental: dynamic flipping to ensure that chat
-    // bubble always stays within the viewport, comment this block
-    // out if the effect seems weird.
-    setFlipX((x || 0) + MAX_BUBBLE_WIDTH_THRESHOLD >= window.innerWidth)
-    setFlipY((y || 0) + MAX_BUBBLE_HEIGHT_THRESHOLD >= window.innerHeight)
-  }, [x, y, isTyping, chatBubbleRef])
-
   useEffect(() => {
     // touchscreen
     if (window.matchMedia('(pointer: coarse)').matches && isMobile) {
@@ -119,39 +105,9 @@ const Cursor: FC<Props> = ({
         )}
         style={{
           backgroundColor: color,
-          transform: `translateX(${
-            (x || 0) + (flipX ? -chatBubbleRef.current.clientWidth - 20 : 20)
-          }px) translateY(${(y || 0) + (flipY ? -chatBubbleRef.current.clientHeight - 20 : 20)}px)`,
+          transform: `translateX(${(x || 0) + 20}px) translateY(${(y || 0) + 20}px)`,
         }}
-      >
-        {_isLocalClient && !hideInput ? (
-          <>
-            <input
-              ref={inputRef}
-              value={message}
-              className="w-full !outline-none bg-transparent !border-none text-foreground"
-              onChange={(e: FormEvent<HTMLInputElement>) => {
-                const text = e.currentTarget.value
-                if (text.length <= MAX_MESSAGE_LENGTH) onUpdateMessage(e.currentTarget.value)
-              }}
-            />
-            <p className="text-xs" style={{ color: hue }}>
-              {message.length}/{MAX_MESSAGE_LENGTH}
-            </p>
-          </>
-        ) : message.length ? (
-          <div className="truncate text-foreground-light">{message}</div>
-        ) : (
-          <div className="flex items-center justify-center">
-            <div className="loader-dots block relative h-6 w-10">
-              <div className="absolute top-0 my-2.5 w-1.5 h-1.5 rounded-full bg-foreground opacity-75"></div>
-              <div className="absolute top-0 my-2.5 w-1.5 h-1.5 rounded-full bg-foreground opacity-75"></div>
-              <div className="absolute top-0 my-2.5 w-1.5 h-1.5 rounded-full bg-foreground opacity-75"></div>
-              <div className="absolute top-0 my-2.5 w-1.5 h-1.5 rounded-full bg-foreground opacity-75"></div>
-            </div>
-          </div>
-        )}
-      </div>
+      ></div>
     </>
   )
 }

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

@@ -503,11 +503,11 @@ const ThreeTicketCanvas: React.FC<{
   return (
     <div
       className={cn(
-        'w-screen absolute inset-0 lg:h-full lg:min-h-full flex justify-end items-center overflow-hidden pointer-events-none',
+        'w-screen absolute inset-0 lg:h-full lg:min-h-full lg:max-h-[1000px] flex justify-end items-center overflow-hidden pointer-events-none',
         className
       )}
     >
-      <div ref={canvasRef} className="w-full lg:h-full !cursor-none" />
+      <div ref={canvasRef} className="w-full lg:h-full" />
       {isGameMode && !hasWon && !sharePage && (
         <InputOTP
           ref={inputRef}

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

@@ -4,9 +4,10 @@ import { Check } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
-import { Button } from 'ui'
+import { Button, cn } from 'ui'
 import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
 import { LW_URL, TWEET_TEXT, TWEET_TEXT_PLATINUM, TWEET_TEXT_SECRET } from '~/lib/constants'
+import useLWPartyMode from '../useLWPartyMode'
 
 export default function TicketActions() {
   const { resolvedTheme } = useTheme()
@@ -74,13 +75,13 @@ export default function TicketActions() {
   }
 
   return (
-    <div className="flex flex-row flex-wrap justify-start w-full gap-2 pointer-events-auto !cursor-none">
+    <div className="flex flex-row flex-wrap justify-start w-full gap-2 pointer-events-auto">
       <Button
         onClick={() => handleShare('twitter')}
         type={userData.shared_on_twitter ? 'secondary' : 'default'}
         icon={userData.shared_on_twitter && <Check strokeWidth={2} />}
         size={isLessThanMd ? 'tiny' : 'small'}
-        className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-grow !cursor-none"
+        className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-grow"
         asChild
       >
         <Link href={tweetUrl} target="_blank">
@@ -92,7 +93,7 @@ export default function TicketActions() {
         type={userData.shared_on_linkedin ? 'secondary' : 'default'}
         icon={userData.shared_on_linkedin && <Check strokeWidth={2} />}
         size={isLessThanMd ? 'tiny' : 'small'}
-        className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-grow !cursor-none"
+        className="px-2 lg:px-3.5 h-[28px] lg:h-[34px] flex-grow"
         asChild
       >
         <Link href={linkedInUrl} target="_blank">

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

@@ -29,7 +29,7 @@ export default function TicketCopy() {
           }, 2000)
         })
       }}
-      className="font-mono w-full flex-grow px-2 lg:px-3.5 !pr-1 py-1 rounded-md bg-alternative-200 border flex gap-2 relative text-foreground-light hover:text-foreground text-xs pointer-events-auto justify-between items-center hover:border-stronger transition-all !cursor-none"
+      className="font-mono w-full flex-grow px-2 lg:px-3.5 !pr-1 py-1 rounded-md bg-alternative-200 border flex gap-2 relative text-foreground-light hover:text-foreground text-xs pointer-events-auto justify-between items-center hover:border-stronger transition-all"
     >
       <span className="truncate">{displayUrl}</span>
       <div className="w-6 min-w-6 h-6 flex items-center justify-center flex-shrink-0 border border-strong rounded bg-muted hover:bg-selection hover:border-stronger">

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

@@ -156,7 +156,7 @@ export default function TicketForm() {
         onClick={handleGithubSignIn}
         loading={formState === 'loading'}
         type="default"
-        className="sm:pl-1 cursor-none"
+        className="sm:pl-1"
       >
         <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">

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

@@ -17,7 +17,7 @@ const TicketPresence = (props: { className?: string }) => {
   useEffect(() => {
     // Listen to realtime presence
     if (!realtimeChannel && supabase) {
-      const lw13Room = supabase?.channel('lw13_online', {
+      const lw13Room = supabase?.channel('lw13_rooms', {
         config: { broadcast: { self: true, ack: true } },
       })