Improve confetti

src/components/ticket-page/InnerTicketInfo.tsx

@@ -13,6 +13,8 @@ import TicketButtons from './TicketButtons';
 import Countdown from './Countdown';
 import EditTicketModal from '../modals/EditTicketModal';
 
+export type ConfettiMode = "down" | "up" | null;
+
 interface InnerTicketInfoProps {
   ticket: TicketWithNames;
   userRole: UserRole;
@@ -25,7 +27,7 @@ interface InnerTicketInfoProps {
 const InnerTicketInfo = (props: InnerTicketInfoProps) => {
   const { ticket, userRole, userId } = props;
 
-  const [showConfetti, setShowConfetti] = useState(false);
+  const [confettiMode, setConfettiMode] = useState<ConfettiMode>(null);
   const [usersInGroup, setUsersInGroup] = useState<User[]>([]);
   const [showEditTicketModal, setShowEditTicketModal] = useState(false);
 
@@ -231,7 +233,7 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => {
         isGetUsersLoading={isGetUsersLoading}
         userRole={userRole}
         isCurrentUserInGroup={isCurrentUserInGroup}
-        setShowConfetti={setShowConfetti}
+        setConfettiMode={setConfettiMode}
       />
       <StaffNotes ticket={ticket} userRole={userRole} />
       <Flex
@@ -263,9 +265,14 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => {
 
       <Confetti
         recycle={false}
-        numberOfPieces={200}
-        run={showConfetti}
-        onConfettiComplete={() => setShowConfetti(false)}
+        numberOfPieces={confettiMode ? 200 : 0}
+        confettiSource={confettiMode === "up" ? { x: 0, y: window.innerHeight, w: window.innerWidth, h: 0 } : undefined}
+        gravity={confettiMode === "up" ? -0.1 : undefined}
+        initialVelocityY={confettiMode === "up" ? -10 : undefined}
+        onConfettiComplete={(confetti) => {
+          setConfettiMode(null);
+          confetti?.reset();
+        }}
       />
 
       <EditTicketModal

src/components/ticket-page/TicketButtons.tsx

@@ -5,14 +5,15 @@ import { TicketWithNames } from '../../server/trpc/router/ticket';
 import { trpc } from '../../utils/trpc';
 import useSiteSettings from '../../utils/hooks/useSiteSettings';
 import { SiteSettings, SiteSettingsValues } from '@prisma/client';
+import { ConfettiMode } from './InnerTicketInfo';
 
 interface TicketCardProps {
   ticket: TicketWithNames;
   userId: string;
   userRole: UserRole;
   isGetUsersLoading: boolean;
   isCurrentUserInGroup: boolean;
-  setShowConfetti: (showConfetti: boolean) => void;
+  setConfettiMode: (confettiMode: ConfettiMode) => void;
 }
 
 export const BUTTONS_DISABLED_WAIT_TIME = 3000;
@@ -23,7 +24,7 @@ export const BUTTONS_DISABLED_WAIT_MSG = 'Please wait 3 seconds before clicking
  * because InnerTicketInfo was getting too big.
  */
 const TicketButtons = (props: TicketCardProps) => {
-  const { ticket, userId, userRole, isCurrentUserInGroup, isGetUsersLoading, setShowConfetti } = props;
+  const { ticket, userId, userRole, isCurrentUserInGroup, isGetUsersLoading, setConfettiMode } = props;
 
   const [areButtonsLoading, setAreButtonsLoading] = useState(false);
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
@@ -67,13 +68,14 @@ const TicketButtons = (props: TicketCardProps) => {
   const handleResolveTicket = async () => {
     onClickWrapper(async () => {
       await resolveTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
-      setShowConfetti(true);
+      setConfettiMode("down");
     })();
   };
 
   const handleRequeueTicket = async () => {
     onClickWrapper(async () => {
       await requeueTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
+      setConfettiMode("up");
     })();
   };