diff --git a/apps/www/components/LaunchWeek/7/ReferralIndicator.tsx b/apps/www/components/LaunchWeek/7/ReferralIndicator.tsx index c4ad96a0871..22ae524aa6e 100644 --- a/apps/www/components/LaunchWeek/7/ReferralIndicator.tsx +++ b/apps/www/components/LaunchWeek/7/ReferralIndicator.tsx @@ -1,5 +1,4 @@ import React from 'react' -import useConfData from '~/components/LaunchWeek/hooks/use-conf-data' import useWinningChances from '../hooks/useWinningChances' export default function ReferralIndicator() { diff --git a/apps/www/components/LaunchWeek/X/LWXBackground.tsx b/apps/www/components/LaunchWeek/X/LWXBackground.tsx index dbdc207fcad..f3d6e03e896 100644 --- a/apps/www/components/LaunchWeek/X/LWXBackground.tsx +++ b/apps/www/components/LaunchWeek/X/LWXBackground.tsx @@ -6,9 +6,10 @@ import { useBreakpoint } from 'common' interface Props { className?: string + isGameMode?: boolean } -const LWXBackground = ({ className }: Props) => { +const LWXBackground = ({ className, isGameMode = false }: Props) => { const { ticketState } = useConfData() const containerRef = useRef(null) const isMobile = useBreakpoint() @@ -20,7 +21,7 @@ const LWXBackground = ({ className }: Props) => { const handleGlow = (event: any) => { if (isMobile) return setGradientPos({ x: 70, y: 40 }) - if (!ref.current || !containerRef.current || hasTicket) return null + if (!ref.current || !containerRef.current || hasTicket || isGameMode) return null const containerRefElement = containerRef.current as HTMLDivElement @@ -74,7 +75,8 @@ const LWXBackground = ({ className }: Props) => { md:w-[247px] md:h-[247px] md:translate-y-3 md:mt-auto xl:w-[285px] xl:h-[285px] xl:translate-y-2 2xl:w-[342px] 2xl:h-[342px] 2xl:translate-y-px - ` + `, + isGameMode && 'hidden' )} viewBox="0 0 186 185" fill="none" @@ -157,7 +159,10 @@ const LWXBackground = ({ className }: Props) => { > +} + +const LWXGame = ({ setIsGameMode }: Props) => { + const { supabase, userData: user } = useConfData() + const word = process.env.NEXT_PUBLIC_LWX_GAME_WORD ?? 'database' + const winningWord = word?.split('') + const [currentWord, setCurrentWord] = useState(Array(winningWord.length)) + const [gameState, setGameState] = useState<'playing' | 'winner' | 'loading'>('playing') + const [hasKeyDown, setHasKeyDown] = useState(false) + const [attempts, setAttempts] = useState(1) + const hasWon = currentWord.join('') === winningWord.join('') + const winningCompliment = useMemo( + () => COMPLIMENTS[Math.floor(Math.random() * COMPLIMENTS.length)], + [] + ) + + const searchAndAddToCurrentWord = (key: string) => { + setAttempts(attempts + 1) + + for (let index = 0; index < winningWord?.length; index++) { + const isAlreadyPresent = key === currentWord[index] + if (isAlreadyPresent) return + + const isMatch = key === winningWord[index] + + if (isMatch) { + const newCurrentWord = currentWord + newCurrentWord[index] = key + + setCurrentWord(newCurrentWord) + if (hasWon) setGameState('winner') + } + } + } + + function onKeyDown(event: KeyboardEvent) { + const newKey = event.key.toLocaleLowerCase() + + if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) { + setHasKeyDown(true) + searchAndAddToCurrentWord(newKey) + } + + setTimeout(() => { + setHasKeyDown(false) + }, 100) + } + + useEffect(() => { + window.addEventListener('keydown', onKeyDown) + + return () => window.removeEventListener('keydown', onKeyDown) + }, [onKeyDown]) + + async function handleGithubSignIn() { + const redirectTo = `${SITE_ORIGIN}/launch-week/${ + user.username ? '?referral=' + user.username : '' + }` + + supabase?.auth.signInWithOAuth({ + provider: 'github', + options: { + redirectTo, + }, + }) + } + const handleClaimTicket = async (e: any) => { + e.preventDefault() + + setGameState('loading') + + if (supabase) { + if (user.id) { + await supabase + .from('lwx_tickets') + .update({ metadata: { ...user.metadata, hasSecretTicket: hasWon } }) + .eq('username', user.username) + .then((res) => { + if (res.error) return console.log('error', res.error) + setIsGameMode(false) + }) + } else { + localStorage.setItem('lwx_hasSecretTicket', 'true') + + handleGithubSignIn() + } + } + } + + if (gameState === 'loading') + return ( +
+ + + +
+ ) + + return ( +
+
+
+

+ {winningCompliment} +

+

+ Claim and share the secret ticket to boost your chances of winning swag. +

+
+
+ Guess the word +
+
+
+ {winningWord.map((letter, i) => { + const isMatch = letter === currentWord[i] + return ( +
+ {currentWord[i]} +
+ ) + })} +
+
+ +
+
+
+ + Play +
+
+ + Exit +
+
+
+ ) +} + +export default LWXGame diff --git a/apps/www/components/LaunchWeek/X/Ticket/Ticket.tsx b/apps/www/components/LaunchWeek/X/Ticket/Ticket.tsx index 0e24a3204fa..54f06507d7f 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/Ticket.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/Ticket.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' import Image from 'next/image' -import { IconEdit, IconEdit2, IconX, cn } from 'ui' +import { IconEdit2, IconX, cn } from 'ui' import Panel from '~/components/Panel' import useConfData from '~/components/LaunchWeek/hooks/use-conf-data' @@ -11,14 +11,13 @@ import { useBreakpoint, useParams } from 'common' export default function Ticket() { const { userData: user, showCustomizationForm, setShowCustomizationForm } = useConfData() const isMobile = useBreakpoint() - const { golden = false, bg_image_id: bgImageId = '1' } = user + const { golden = false, bg_image_id: bgImageId = '1', metadata } = user const [imageHasLoaded, setImageHasLoaded] = useState(false) const params = useParams() const sharePage = !!params.username + const ticketType = metadata?.hasSecretTicket ? 'secret' : golden ? 'platinum' : 'regular' - const fallbackImg = `/images/launchweek/lwx/tickets/lwx_ticket_bg_${ - golden ? 'platinum' : 'regular' - }.png` + const fallbackImg = `/images/launchweek/lwx/tickets/lwx_ticket_bg_${ticketType}.png` const ticketBg = { regular: { @@ -29,6 +28,10 @@ export default function Ticket() { background: `/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png`, background_mobile: `/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png`, }, + secret: { + background: `/images/launchweek/lwx/tickets/lwx_ticket_bg_secret.png`, + background_mobile: `/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile.png`, + }, } function handleCustomizeTicket() { @@ -56,14 +59,12 @@ export default function Ticket() { )} -
+
{`Launch() const link = `${SITE_URL}/tickets/${username}?lw=x${golden ? `&platinum=true` : ''}` const permalink = encodeURIComponent(link) - const text = golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT + const hasSecretTicket = metadata?.hasSecretTicket + const text = hasSecretTicket ? TWEET_TEXT_SECRET : golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT 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}` diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketCopy.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketCopy.tsx index 5d651e43ec4..9e53f2050a8 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketCopy.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketCopy.tsx @@ -5,11 +5,14 @@ import { IconCheck, IconCopy, cn } from 'ui' export default function TicketCopy({ sharePage }: { sharePage: boolean }) { const { userData } = useConfData() - const { username, golden } = userData + const { username, golden, metadata } = userData const [copyEnabled, setCopyEnabled] = useState(false) const [copied, setCopied] = useState(false) const buttonRef = useRef(null) - const url = `${SITE_URL}/tickets/${username}?lw=x${golden ? `&platinum=true` : ''}` + const hasSecretTicket = metadata?.hasSecretTicket + const url = `${SITE_URL}/tickets/${username}?lw=x${ + hasSecretTicket ? '&secret=true' : golden ? `&platinum=true` : '' + }` useEffect(() => { if (navigator.clipboard) { diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketCustomizationForm.tsx index dbce1d4c185..26566a84290 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketCustomizationForm.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketCustomizationForm.tsx @@ -30,7 +30,12 @@ const TicketCustomizationForm = ({ className }: { className?: string }) => { const handleFormSubmit = async () => { setFormState('saving') - const payload = { metadata: formData } + const payload = { + metadata: { + ...user.metadata, + ...formData, + }, + } if (supabase) { await supabase diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketFooter.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketFooter.tsx index 1b94d6239a9..126aa9139c2 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketFooter.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketFooter.tsx @@ -7,8 +7,10 @@ import { cn } from 'ui' export default function TicketFooter() { const { userData: user } = useConfData() - const { ticketNumber, golden } = user - const SupabaseLogo = golden + const { ticketNumber, golden, metadata } = user + const hasLightTicket = golden || metadata?.hasSecretTicket + + const SupabaseLogo = hasLightTicket ? '/images/launchweek/lwx/logos/supabase_lwx_logo_light.png' : '/images/launchweek/lwx/logos/supabase_lwx_logo_dark.png' @@ -16,7 +18,7 @@ export default function TicketFooter() {
Supabase Logo for Launch Week X diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketForm.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketForm.tsx index f2b57a047c7..9220fad3666 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketForm.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketForm.tsx @@ -15,7 +15,7 @@ export default function TicketForm() { SupabaseClient['channel'] > | null>(null) const [errorMsg] = useState('') - const { supabase, session, setUserData, ticketState, setTicketState, userData } = useConfData() + const { supabase, session, setUserData, setTicketState, userData } = useConfData() const router = useRouter() // Triggered on session @@ -24,9 +24,17 @@ export default function TicketForm() { const username = session.user.user_metadata.user_name const name = session.user.user_metadata.full_name const email = session.user.email + const hasSecretTicket = localStorage.getItem('lwx_hasSecretTicket') === 'true' + await supabase .from('lwx_tickets') - .insert({ email, name, username, referred_by: router.query?.referral ?? null }) + .insert({ + email, + name, + username, + referred_by: router.query?.referral ?? null, + ...(hasSecretTicket && { metadata: { hasSecretTicket: true } }), + }) .eq('email', email) .select() .single() diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketProfile.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketProfile.tsx index fa00383cd79..c8445118863 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketProfile.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketProfile.tsx @@ -4,6 +4,7 @@ import useConfData from '~/components/LaunchWeek/hooks/use-conf-data' export default function TicketProfile() { const { userData: user } = useConfData() const { username, name, metadata, golden } = user + const hasLightTicket = golden || metadata?.hasSecretTicket const HAS_ROLE = !!metadata?.role const HAS_COMPANY = !!metadata?.company @@ -13,14 +14,14 @@ export default function TicketProfile() {

{name || username || 'Your Name'} diff --git a/apps/www/components/LaunchWeek/X/Ticket/TicketingFlow.tsx b/apps/www/components/LaunchWeek/X/Ticket/TicketingFlow.tsx index 1ba52de3741..27f4155b12e 100644 --- a/apps/www/components/LaunchWeek/X/Ticket/TicketingFlow.tsx +++ b/apps/www/components/LaunchWeek/X/Ticket/TicketingFlow.tsx @@ -16,14 +16,18 @@ import CountdownComponent from '../Countdown' import LaunchWeekPrizeSection from '../LaunchWeekPrizeSection' import TicketPresence from './TicketPresence' import TicketActions from './TicketActions' +import useLwxGame from '../../hooks/useLwxGame' +import LWXGame from './LWXGame' const TicketingFlow = () => { - const { ticketState, userData } = useConfData() + const { ticketState, userData, showCustomizationForm } = useConfData() + const { isGameMode, setIsGameMode } = useLwxGame(showCustomizationForm) - const isLoading = ticketState === 'loading' - const isRegistering = ticketState === 'registration' - const hasTicket = ticketState === 'ticket' + const isLoading = !isGameMode && ticketState === 'loading' + const isRegistering = !isGameMode && ticketState === 'registration' + const hasTicket = !isGameMode && ticketState === 'ticket' const hasPlatinumTicket = userData.golden + const hasSecretTicket = userData.metadata?.hasSecretTicket const transition = DEFAULT_TRANSITION const initial = INITIAL_BOTTOM @@ -36,20 +40,24 @@ const TicketingFlow = () => { <>

Supabase Launch Week X | {LWX_DATE}

- {!hasTicket && ( -
-

- Launch Week{' '} - Supabase Launch Week X icon -

- -
- )} + +
+

+ Launch Week{' '} + Supabase Launch Week X icon +

+ +
@@ -113,9 +121,14 @@ const TicketingFlow = () => {
- {hasPlatinumTicket ? ( + {hasSecretTicket ? (

- Congrats! You've maximized + You got the secret ticket.{' '} + Share it to increase your chances of winning even more. +

+ ) : hasPlatinumTicket ? ( +

+ Congrats! You maximized your chances and have a platinum ticket now.

) : winningChances !== 2 ? ( @@ -129,6 +142,7 @@ const TicketingFlow = () => { Keep sharing to increase your chances.

)} + {!hasPlatinumTicket && }
@@ -162,6 +176,17 @@ const TicketingFlow = () => {
)} + {!showCustomizationForm && isGameMode && ( + + + + )}
@@ -171,6 +196,7 @@ const TicketingFlow = () => { 'absolute z-0 top-0 left-0 right-0 bottom-0 w-full flex items-center justify-center opacity-100 transition-opacity', hasTicket && 'opacity-20' )} + isGameMode={isGameMode as boolean} /> diff --git a/apps/www/components/LaunchWeek/hooks/use-conf-data.ts b/apps/www/components/LaunchWeek/hooks/use-conf-data.ts index af69a659ff5..1f348a0aa3f 100644 --- a/apps/www/components/LaunchWeek/hooks/use-conf-data.ts +++ b/apps/www/components/LaunchWeek/hooks/use-conf-data.ts @@ -1,7 +1,7 @@ import { Session, SupabaseClient } from '@supabase/supabase-js' import { createContext, useContext } from 'react' -export type TicketState = 'registration' | 'ticket' | 'loading' +export type TicketState = 'registration' | 'ticket' | 'loading' | 'game' export type UserData = { id?: string @@ -16,6 +16,7 @@ export type UserData = { role?: string company?: string location?: string + hasSecretTicket?: boolean } sharedOnTwitter?: string sharedOnLinkedIn?: string diff --git a/apps/www/components/LaunchWeek/hooks/useLwxGame.tsx b/apps/www/components/LaunchWeek/hooks/useLwxGame.tsx new file mode 100644 index 00000000000..bc4c4e63f2a --- /dev/null +++ b/apps/www/components/LaunchWeek/hooks/useLwxGame.tsx @@ -0,0 +1,60 @@ +import { useEffect, useState } from 'react' +import useConfData from './use-conf-data' + +export const VALID_KEYS = [ + 'a', + 'b', + 'c', + 'd', + 'e', + 'f', + 'g', + 'h', + 'i', + 'j', + 'k', + 'l', + 'm', + 'n', + 'o', + 'p', + 'q', + 'r', + 's', + 't', + 'u', + 'v', + 'w', + 'x', + 'y', + 'z', +] + +const useLwxGame = (showCustomizationForm?: boolean) => { + const [isGameMode, setIsGameMode] = useState(false) + const { ticketState } = useConfData() + + function onKeyDown(event: KeyboardEvent) { + if (showCustomizationForm) return + + if (event.key === 'Escape') { + setIsGameMode(false) + } + + const newKey = event.key.toLocaleLowerCase() + + if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) { + if (!isGameMode) setIsGameMode(true) + } + } + + useEffect(() => { + if (!showCustomizationForm) window.addEventListener('keydown', onKeyDown) + + return () => window.removeEventListener('keydown', onKeyDown) + }, [showCustomizationForm]) + + return { isGameMode, setIsGameMode } +} + +export default useLwxGame diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts index 1a70d73d9af..288053121c5 100644 --- a/apps/www/lib/constants.ts +++ b/apps/www/lib/constants.ts @@ -43,4 +43,5 @@ export const LWX_LAUNCH_DATE = '2023-12-11T08:00:00.000-08:00' export const TWEET_TEXT = '#SupaLaunchWeek πŸ†‡ is coming December 11-15 πŸš€\n\nClaim your ticket for a chance to win @supabase swag:\n' export const TWEET_TEXT_GOLDEN = `I turned my #SupaLaunchWeek πŸ†‡ ticket Platinum! 🩢😎\n\nClaim your own ticket to win @supabase swag:\n` +export const TWEET_TEXT_SECRET = `I found a secret #SupaLaunchWeek πŸ†‡ ticket! \n\nGuess the word at supabase.com/launch-week to get yours:\n` export const SITE_NAME = 'Supabase' diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx index efd29b07ee2..b304d1e5f42 100644 --- a/apps/www/pages/launch-week/index.tsx +++ b/apps/www/pages/launch-week/index.tsx @@ -11,7 +11,7 @@ import { TicketState, ConfDataContext, UserData } from '~/components/LaunchWeek/ import TicketingFlow from '~/components/LaunchWeek/X/Ticket/TicketingFlow' export default function TicketHome() { - const { basePath, query } = useRouter() + const { query } = useRouter() const TITLE = 'Supabase Launch Week X | 11-15 December 2023' const DESCRIPTION = @@ -40,7 +40,7 @@ export default function TicketHome() { supabase.auth.getSession().then(({ data: { session } }) => setSession(session)) const { data: { subscription }, - } = supabase.auth.onAuthStateChange((event, session) => { + } = supabase.auth.onAuthStateChange((_event, session) => { setSession(session) }) diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx index 5d12797356e..219b2db1922 100644 --- a/apps/www/pages/launch-week/tickets/[username].tsx +++ b/apps/www/pages/launch-week/tickets/[username].tsx @@ -143,9 +143,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { user = data } - const ogImageUrl = `https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/og/${ - user?.golden ? 'platinum' : 'regular' - }/${username}.png` + const ticketType = user?.metadata?.hasSecretTicket + ? 'secret' + : user?.golden + ? 'platinum' + : 'regular' + + const ogImageUrl = `https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/og/${ticketType}/${username}.png` return { props: { diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png index f082f63e7e1..ca28aaf991f 100644 Binary files a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.svg b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.svg deleted file mode 100644 index 4a2edbb5303..00000000000 --- a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.svg +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.png index 302efb67be2..0fa41b478fa 100644 Binary files a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.png and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.svg b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.svg deleted file mode 100644 index 0914f6a7239..00000000000 --- a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_regular.svg +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret.png new file mode 100644 index 00000000000..a0b952e5ae9 Binary files /dev/null and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret_a.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret_a.png new file mode 100644 index 00000000000..33ce83d0808 Binary files /dev/null and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_bg_secret_a.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png index 10883513fa3..d48a282ce04 100644 Binary files a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_regular_mobile.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_regular_mobile.png index d2bdabe59da..5070689ea16 100644 Binary files a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_regular_mobile.png and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_regular_mobile.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile.png new file mode 100644 index 00000000000..e9b38377fcd Binary files /dev/null and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile.png differ diff --git a/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile_a.png b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile_a.png new file mode 100644 index 00000000000..863ba12eb4f Binary files /dev/null and b/apps/www/public/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile_a.png differ diff --git a/apps/www/supabase/functions/lwx-og/handler.tsx b/apps/www/supabase/functions/lwx-og/handler.tsx index 579322d5083..cfc34459248 100644 --- a/apps/www/supabase/functions/lwx-og/handler.tsx +++ b/apps/www/supabase/functions/lwx-og/handler.tsx @@ -20,13 +20,19 @@ const LW_TABLE = 'lwx_tickets' const LW_MATERIALIZED_VIEW = 'lwx_tickets_golden' const STYLING_CONGIF = { - REG: { + regular: { BACKGROUND: '#303030', FOREGROUND: '#F8F9FA', FOREGROUND_LIGHT: '#8B9092', BORDER: '#303030', }, - PLATINUM: { + platinum: { + BACKGROUND: '#f1f1f1', + FOREGROUND: '#11181C', + FOREGROUND_LIGHT: '#6c7277', + BORDER: '#CFCFCF', + }, + secret: { BACKGROUND: '#f1f1f1', FOREGROUND: '#11181C', FOREGROUND_LIGHT: '#6c7277', @@ -78,21 +84,28 @@ export async function handler(req: Request) { const platinum = (!!data?.sharedOnTwitter && !!data?.sharedOnLinkedIn) ?? false if (assumePlatinum && !platinum) return await fetch(`${STORAGE_URL}/assets/golden_no_meme.png`) + const ticketType = data.metadata?.hasSecretTicket ? 'secret' : platinum ? 'platinum' : 'regular' // Else, generate image and upload to storage. const BACKGROUND = { - REG: { + regular: { OG: `${STORAGE_URL}/assets/og_bg_regular.png?t=2023-11-27T22%3A32%3A21.973Z`, BG: `${STORAGE_URL}/assets/lwx_ticket_bg_regular.png`, LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_reg.png`, // LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_dark.png`, }, - PLATINUM: { + platinum: { OG: `${STORAGE_URL}/assets/og_bg_platinum.png?t=2023-11-27T22%3A31%3A58.719Z`, BG: `${STORAGE_URL}/assets/lwx_ticket_bg_platinum.png`, LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`, // LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_light.png`, }, + secret: { + OG: `${STORAGE_URL}/assets/og_bg_secret.png?t=2023-11-27T22%3A31%3A58.719Z`, + BG: `${STORAGE_URL}/assets/lwx_ticket_bg_secret.png`, + LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`, + // LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_light.png`, + }, } const fontData = await font @@ -121,7 +134,7 @@ export async function handler(req: Request) { height: '628px', position: 'relative', fontFamily: '"Circular"', - color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND, + color: STYLING_CONGIF[ticketType].FOREGROUND, overflow: 'hidden', display: 'flex', flexDirection: 'column', @@ -141,7 +154,7 @@ export async function handler(req: Request) { right: '-1px', zIndex: '0', }} - src={platinum ? BACKGROUND.PLATINUM.OG : BACKGROUND.REG.OG} + src={BACKGROUND[ticketType].OG} /> {/* Ticket */} {/* Name & username */} @@ -182,7 +195,7 @@ export async function handler(req: Request) { >

- +
{/* Ticket No */}

{/* Name & username */} @@ -151,7 +161,7 @@ export async function handler(req: Request) { >

- +
{/* Ticket No */}