From f3054192e6651e5ec7dd73a9a0e757998980bdb3 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 7 Nov 2025 16:08:41 -0800
Subject: [PATCH] Make page dynamic and fix scroll loading on ios

---
 .../app/(modern)/scroll/Events.ts             |  6 ++++
 .../app/(modern)/scroll/SkinScroller.tsx      | 31 ++++++++++++++-----
 .../app/(modern)/scroll/page.tsx              |  3 ++
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/skin-database/app/(modern)/scroll/Events.ts b/packages/skin-database/app/(modern)/scroll/Events.ts
index ce87d360..00a233d7 100644
--- a/packages/skin-database/app/(modern)/scroll/Events.ts
+++ b/packages/skin-database/app/(modern)/scroll/Events.ts
@@ -7,6 +7,12 @@ import UserContext from "../../../data/UserContext";
 export async function logUserEvent(sessionId: string, event: UserEvent) {
   const timestamp = Date.now();
 
+  console.log("Logging user event:", {
+    sessionId,
+    timestamp,
+    event,
+  });
+
   await knex("user_log_events").insert({
     session_id: sessionId,
     timestamp: timestamp,
diff --git a/packages/skin-database/app/(modern)/scroll/SkinScroller.tsx b/packages/skin-database/app/(modern)/scroll/SkinScroller.tsx
index 97b26f9d..4e5bf1d3 100644
--- a/packages/skin-database/app/(modern)/scroll/SkinScroller.tsx
+++ b/packages/skin-database/app/(modern)/scroll/SkinScroller.tsx
@@ -36,18 +36,33 @@ export default function SkinScroller({
       return;
     }
 
-    function onSnap(e) {
-      const md5 = e.snapTargetBlock.getAttribute("skin-md5");
-      const index = parseInt(e.snapTargetBlock.getAttribute("skin-index"));
-      setVisibleSkinIndex(index);
-    }
+    // Use IntersectionObserver for cross-browser compatibility (iOS doesn't support scrollsnapchange)
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // When an element becomes mostly visible (> 50% intersecting)
+          if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
+            const index = parseInt(
+              entry.target.getAttribute("skin-index") || "0"
+            );
+            setVisibleSkinIndex(index);
+          }
+        });
+      },
+      {
+        root: containerRef,
+        threshold: 0.5, // Trigger when 50% of the element is visible
+      }
+    );
 
-    containerRef.addEventListener("scrollsnapchange", onSnap);
+    // Observe all skin page elements
+    const skinElements = containerRef.querySelectorAll("[skin-index]");
+    skinElements.forEach((element) => observer.observe(element));
 
     return () => {
-      containerRef.removeEventListener("scrollsnapchange", onSnap);
+      observer.disconnect();
     };
-  }, [containerRef]);
+  }, [containerRef, skins.length]);
 
   useEffect(() => {
     logUserEvent(sessionId, {
diff --git a/packages/skin-database/app/(modern)/scroll/page.tsx b/packages/skin-database/app/(modern)/scroll/page.tsx
index 1152ce41..25576a49 100644
--- a/packages/skin-database/app/(modern)/scroll/page.tsx
+++ b/packages/skin-database/app/(modern)/scroll/page.tsx
@@ -5,6 +5,9 @@ import SkinScroller, { ClientSkin } from "./SkinScroller";
 import { getScrollPage } from "../../../data/skins";
 import SkinModel from "../../../data/SkinModel";
 
+// Ensure each page load gets a new session
+export const dynamic = "force-dynamic";
+
 async function getClientSkins(sessionId: string): Promise<ClientSkin[]> {
   "use server";
   const ctx = new UserContext();