Make page dynamic and fix scroll loading on ios

Author: captbaritone

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,

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, {

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();