Add Fuse

app/components/Main.tsx

@@ -22,7 +22,7 @@ export const Main = ({
 	const error = useRouteError();
 	const isMinorSupporter = useHasRole("MINOR_SUPPORT");
 	const showLeaderboard =
-		import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
+		import.meta.env.VITE_FUSE_ENABLED &&
 		!isMinorSupporter &&
 		!isRouteErrorResponse(error);
 

app/components/fuse/Fuse.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+import { useLocation } from "react-router";
+
+declare global {
+	interface Window {
+		fusetag: {
+			que: Array<() => void>;
+			pageInit?: () => void;
+			registerZone?: (id: string) => void;
+		};
+	}
+}
+
+function callPageInit() {
+	window.fusetag = window.fusetag || { que: [] };
+	window.fusetag.que.push(() => {
+		window.fusetag.pageInit?.();
+	});
+}
+
+export function FusePageInit() {
+	const { pathname } = useLocation();
+	const previousPathname = useRef(pathname);
+
+	useEffect(() => {
+		callPageInit();
+	}, []);
+
+	useEffect(() => {
+		if (previousPathname.current === pathname) return;
+
+		previousPathname.current = pathname;
+		callPageInit();
+	});
+
+	return null;
+}
+
+export function FuseZone({
+	id,
+	fuseSlot,
+	className,
+}: {
+	id: string;
+	fuseSlot: string;
+	className?: string;
+}) {
+	useEffect(() => {
+		window.fusetag = window.fusetag || { que: [] };
+		window.fusetag.que.push(() => {
+			window.fusetag.registerZone?.(id);
+		});
+	}, [id]);
+
+	return <div id={id} data-fuse={fuseSlot} className={className} />;
+}

app/components/layout/index.tsx

@@ -35,6 +35,7 @@ import {
 import { Avatar } from "../Avatar";
 import { SendouButton } from "../elements/Button";
 import { SendouPopover } from "../elements/Popover";
+import { FuseZone } from "../fuse/Fuse";
 import { Image } from "../Image";
 import { MobileNav } from "../MobileNav";
 import { NotificationDot } from "../NotificationDot";
@@ -211,7 +212,7 @@ export function Layout({
 	const isFrontPage = location.pathname === "/";
 
 	const showLeaderboard =
-		import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
+		import.meta.env.VITE_FUSE_ENABLED &&
 		!data?.user?.roles.includes("MINOR_SUPPORT") &&
 		!location.pathname.includes("plans");
 
@@ -376,7 +377,13 @@ export function Layout({
 						chatUnreadCount={chatContext?.totalUnreadCount}
 					/>
 				</header>
-				{showLeaderboard ? <MyRampUnit /> : null}
+				{showLeaderboard ? (
+					<FuseZone
+						id="fuse-header"
+						fuseSlot="header"
+						className="top-leaderboard"
+					/>
+				) : null}
 				{children}
 				<Footer />
 			</div>
@@ -481,10 +488,6 @@ function PageIcon({ crumb }: { crumb: Breadcrumb }) {
 	);
 }
 
-function MyRampUnit() {
-	return <div className="top-leaderboard" id="pw-leaderboard_atf" />;
-}
-
 function SideNavUserPanel() {
 	const { t } = useTranslation();
 	const location = useLocation();

app/components/ramp/Ramp.tsx

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router";
-import { logger } from "../../utils/logger";
-
-declare global {
-	interface Window {
-		ramp: any;
-	}
-}
-
-const PUBLISHER_ID = import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID;
-const WEBSITE_ID = import.meta.env.VITE_PLAYWIRE_WEBSITE_ID;
-
-export const Ramp = () => {
-	const [rampComponentLoaded, setRampComponentLoaded] = useState(false);
-	const location = useLocation();
-
-	useEffect(() => {
-		if (!PUBLISHER_ID || !WEBSITE_ID) {
-			logger.info("RAMP: Missing Publisher Id or Website Id");
-			return;
-		}
-
-		if (!rampComponentLoaded) {
-			logger.info("RAMP: Loading");
-			setRampComponentLoaded(true);
-			window.ramp = window.ramp || {};
-			window.ramp.que = window.ramp.que || [];
-			window.ramp.passiveMode = true;
-
-			// Load the Ramp configuration script
-			const configScript = document.createElement("script");
-			configScript.src = `https://cdn.intergient.com/${PUBLISHER_ID}/${WEBSITE_ID}/ramp.js`;
-			document.body.appendChild(configScript);
-
-			configScript.onload = window.ramp.que.push(() => {
-				window.ramp.spaNewPage;
-			});
-		}
-
-		// Cleanup function to handle component unmount and updating page state
-		return () => {
-			window.ramp.que.push(() => {
-				window.ramp.spaNewPage(location.pathname);
-			});
-		};
-	}, [rampComponentLoaded, location.pathname]);
-
-	return null;
-};

app/features/map-planner/plans-global.css

@@ -62,10 +62,6 @@ body:has(.planner) header {
 	display: none;
 }
 
-#pw-oop-bottom_rail {
-	display: none;
-}
-
 .tl-canvas {
 	background-color: var(--color-bg);
 }

app/root.tsx

@@ -37,8 +37,8 @@ import type { SendouRouteHandle } from "~/utils/remix.server";
 import type { Route } from "./+types/root";
 import { Catcher } from "./components/Catcher";
 import { SendouToastRegion, toastQueue } from "./components/elements/Toast";
+import { FusePageInit } from "./components/fuse/Fuse";
 import { Layout } from "./components/layout";
-import { Ramp } from "./components/ramp/Ramp";
 import { getUser } from "./features/auth/core/user.server";
 import { userMiddleware } from "./features/auth/core/user-middleware.server";
 import { ChatProvider } from "./features/chat/ChatProvider";
@@ -180,6 +180,13 @@ function Document({
 				<meta name="apple-mobile-web-app-capable" content="yes" />
 				<meta name="mobile-web-app-capable" content="yes" />
 				<meta name="theme-color" content="#010115" />
+				{import.meta.env.VITE_FUSE_ENABLED &&
+				!data?.user?.roles.includes("MINOR_SUPPORT") ? (
+					<script
+						async
+						src="https://cdn.fuseplatform.net/publift/tags/2/4242/fuse.js"
+					/>
+				) : null}
 				<Meta />
 				<Links />
 				<ThemeHead />
@@ -193,7 +200,7 @@ function Document({
 					<RouterProvider navigate={navigate} useHref={useHref}>
 						<I18nProvider locale={i18n.language}>
 							<SendouToastRegion />
-							<MyRamp data={data} />
+							<MyFuse data={data} />
 							<ChatProvider user={data?.user}>
 								<Layout data={data}>{children}</Layout>
 							</ChatProvider>
@@ -583,14 +590,14 @@ function PWALinks() {
 	);
 }
 
-function MyRamp({ data }: { data: RootLoaderData | undefined }) {
+function MyFuse({ data }: { data: RootLoaderData | undefined }) {
 	if (!data || data.user?.roles.includes("MINOR_SUPPORT")) {
 		return null;
 	}
 
 	return (
 		<ClientErrorBoundary fallback={null}>
-			<Ramp />
+			<FusePageInit />
 		</ClientErrorBoundary>
 	);
 }

app/styles/common.css

@@ -613,10 +613,3 @@
 .top-leaderboard iframe {
 	margin: 0 auto;
 }
-
-@media screen and (max-width: 599px) {
-	#pw-oop-bottom_rail {
-		/* note actually the bottom nav is 55px */
-		bottom: 49px !important;
-	}
-}

types/vite.d.ts

@@ -1,7 +1,6 @@
 interface ImportMetaEnv {
 	VITE_SKALOP_WS_URL?: string;
-	VITE_PLAYWIRE_PUBLISHER_ID?: string;
-	VITE_PLAYWIRE_WEBSITE_ID?: string;
+	VITE_FUSE_ENABLED?: string;
 	VITE_SITE_DOMAIN: string;
 	VITE_TOURNAMENT_DEFAULT_LOGO: string;
 }