From eeae330bcc64490892a44f9c2f0ac12050a43186 Mon Sep 17 00:00:00 2001
From: Devin Rowan <its@autumnrowan.com>
Date: Fri, 10 Jan 2025 10:28:41 -0600
Subject: [PATCH] Fix font loading issue in social card

---
 .../wrapped/sections/wrapped-social-card.tsx  | 34 +++++++++++++------
 app/[username]/wrapped/the-run-wrapped.tsx    |  8 +++++
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/[username]/wrapped/sections/wrapped-social-card.tsx b/app/[username]/wrapped/sections/wrapped-social-card.tsx
index c0a8d690..a8e72a9b 100644
--- a/app/[username]/wrapped/sections/wrapped-social-card.tsx
+++ b/app/[username]/wrapped/sections/wrapped-social-card.tsx
@@ -11,7 +11,6 @@ import {
 import { WrappedWithData } from "~app/[username]/wrapped/wrapped-types";
 import html2canvas from "html2canvas";
 import { getUserProfilePhoto } from "~src/utils/metadata";
-import { Bangers } from "next/font/google";
 import { SectionWrapper } from "./section-wrapper";
 import { SectionTitle } from "./section-title";
 import { SectionBody } from "./section-body";
@@ -23,14 +22,10 @@ import {
     PatreonBunnySvgWithoutLink,
 } from "~app/patron/patreon-info";
 
-const bangers = Bangers({
-    weight: "400",
-    subsets: ["latin"],
-    display: "swap",
-});
-
 interface HiddenDataSummaryProps {
     gameImageUrl: string | undefined;
+    // eslint-disable-next-line
+    bangers: any;
     wrapped: WrappedWithData;
     cardRef: RefObject<HTMLDivElement>;
     profilePhoto: string | undefined;
@@ -42,7 +37,15 @@ interface HiddenDataSummaryProps {
     }[];
 }
 const HiddenDataSummary = memo<HiddenDataSummaryProps>(
-    ({ gameImageUrl, wrapped, cardRef, isPatron, profilePhoto, top3Games }) => {
+    ({
+        gameImageUrl,
+        wrapped,
+        cardRef,
+        isPatron,
+        profilePhoto,
+        top3Games,
+        bangers,
+    }) => {
         return (
             <div
                 style={{
@@ -189,7 +192,7 @@ const HiddenDataSummary = memo<HiddenDataSummaryProps>(
                                 justifyContent: "center",
                             }}
                         >
-                            <LayeredStats wrapped={wrapped} />
+                            <LayeredStats wrapped={wrapped} bangers={bangers} />
                         </div>
 
                         <div
@@ -358,6 +361,8 @@ HiddenDataSummary.displayName = "HiddenDataSummary";
 
 interface WrappedSocialCardProps {
     wrapped: WrappedWithData;
+    // eslint-disable-next-line
+    bangers: any;
     onImageGenerated?: (imageData: {
         previewUrl: string;
         blob: Blob | undefined;
@@ -372,6 +377,7 @@ interface WrappedSocialCardProps {
 
 export function WrappedSocialCard({
     wrapped,
+    bangers,
     onImageGenerated,
     onLoadingStateChange,
 }: WrappedSocialCardProps): ReactElement {
@@ -627,6 +633,7 @@ export function WrappedSocialCard({
                     )}
                     <HiddenDataSummary
                         gameImageUrl={belovedGameImageUrl}
+                        bangers={bangers}
                         wrapped={wrapped}
                         cardRef={cardRef}
                         isPatron={isPatron}
@@ -639,7 +646,14 @@ export function WrappedSocialCard({
     );
 }
 
-const LayeredStats = ({ wrapped }: { wrapped: WrappedWithData }) => {
+const LayeredStats = ({
+    wrapped,
+    bangers,
+}: {
+    wrapped: WrappedWithData;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    bangers: any;
+}) => {
     const stats = [
         { value: wrapped.totalRuns, label: "RUN", color: "#4f46e5" },
         {
diff --git a/app/[username]/wrapped/the-run-wrapped.tsx b/app/[username]/wrapped/the-run-wrapped.tsx
index d6a4cd28..27e81c9c 100644
--- a/app/[username]/wrapped/the-run-wrapped.tsx
+++ b/app/[username]/wrapped/the-run-wrapped.tsx
@@ -26,6 +26,13 @@ import { SocialShareSpeedDial } from "./social-share-dial";
 import { PatreonBunnySvg } from "~app/patron/patreon-info";
 import { WrappedSocialCard } from "./sections/wrapped-social-card";
 import { safeDecodeURI } from "~src/utils/uri";
+import { Bangers } from "next/font/google";
+
+const bangers = Bangers({
+    weight: "400",
+    subsets: ["latin"],
+    display: "swap",
+});
 
 gsap.registerPlugin(useGSAP);
 gsap.registerPlugin(ScrollTrigger);
@@ -225,6 +232,7 @@ export const TheRunWrapped = ({ wrapped, user }: TheRunWrappedProps) => {
             >
                 <WrappedSocialCard
                     wrapped={wrapped}
+                    bangers={bangers}
                     onImageGenerated={handleSocialImageGenerated}
                     onLoadingStateChange={handleSocialImageLoadingStateChange}
                 />