@littlepartytime/dev-kit 1.22.3 → 1.22.4-debug.1

package/dist/webapp/pages/Mobile.tsx

@@ -21,39 +21,28 @@ const gameOuterStyle: React.CSSProperties = {
 };
 
 /**
- * Track actual visible height via VisualViewport API.
- *
- * On iOS Safari (non-PWA), 100dvh does NOT shrink when the keyboard opens.
- * We use visualViewport.height to detect the keyboard and override the
- * container height only while it's open. When the keyboard closes, we
- * revert to 100dvh so Safari toolbar/address bar changes don't leave
- * a dead zone at the bottom.
+ * Diagnostic hook — TODO: remove after debugging.
+ * Uses VisualViewport to detect keyboard and switch between
+ * pixel height (keyboard open) and 100dvh (keyboard closed).
  */
-function useViewportHeight(): string {
+function useViewportHeight() {
   const [height, setHeight] = useState('100dvh');
   const initialHeight = useRef(0);
 
   useEffect(() => {
     const vv = window.visualViewport;
     if (!vv) return;
-
-    // Capture the full viewport height on first load (no keyboard)
     initialHeight.current = vv.height;
-
-    const KEYBOARD_THRESHOLD = 100; // px — if viewport shrinks by more than this, keyboard is open
-
+    const KEYBOARD_THRESHOLD = 100;
     const update = () => {
       window.scrollTo(0, 0);
       const shrunk = initialHeight.current - vv.height;
       if (shrunk > KEYBOARD_THRESHOLD) {
-        // Keyboard is open: use exact pixel height so content compresses
         setHeight(`${vv.height}px`);
       } else {
-        // Keyboard is closed: use 100dvh to fill the screen fully
         setHeight('100dvh');
       }
     };
-
     vv.addEventListener('resize', update);
     vv.addEventListener('scroll', update);
     return () => {
@@ -65,8 +54,57 @@ function useViewportHeight(): string {
   return height;
 }
 
+/**
+ * Debug overlay that measures each container layer on every render.
+ * Ref-based: reads computed sizes of actual DOM elements.
+ */
+function DebugOverlay({ containerRef, outerRef, sandboxRef }: {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  outerRef: React.RefObject<HTMLDivElement | null>;
+  sandboxRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const [info, setInfo] = useState('');
+
+  useEffect(() => {
+    const measure = () => {
+      const c = containerRef.current;
+      const o = outerRef.current;
+      const s = sandboxRef.current;
+      const gameEl = s?.firstElementChild as HTMLElement | null;
+      const vv = window.visualViewport;
+
+      const lines = [
+        `vv:${vv ? Math.round(vv.height) : '?'} inner:${window.innerHeight} scrollY:${Math.round(window.scrollY)}`,
+        `container:${c?.clientHeight ?? '?'} computedH:${c ? getComputedStyle(c).height : '?'}`,
+        `outer:${o?.clientHeight ?? '?'} scrollTop:${o?.scrollTop ?? '?'} scrollH:${o?.scrollHeight ?? '?'}`,
+        `sandbox:${s?.clientHeight ?? '?'} game1st:${gameEl?.clientHeight ?? '?'}`,
+      ];
+      setInfo(lines.join('\n'));
+    };
+
+    measure();
+    const id = setInterval(measure, 500);
+    return () => clearInterval(id);
+  }, [containerRef, outerRef, sandboxRef]);
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 0, left: 0, right: 0,
+      background: 'rgba(0,0,0,0.85)', color: '#0f0',
+      fontSize: 10, fontFamily: 'monospace', padding: 4,
+      zIndex: 99999, pointerEvents: 'none', lineHeight: 1.4,
+      whiteSpace: 'pre',
+    }}>
+      {info}
+    </div>
+  );
+}
+
 export default function Mobile() {
   const viewportHeight = useViewportHeight();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const outerRef = useRef<HTMLDivElement>(null);
+  const sandboxRef = useRef<HTMLDivElement>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
   const [nickname, setNickname] = useState('');
   const [joined, setJoined] = useState(false);
@@ -218,14 +256,11 @@ export default function Mobile() {
     );
   }
 
-  // Game — mirrors platform container structure:
-  //   div.h-[100dvh].flex.flex-col.overflow-hidden  (root)
-  //     div.flex-1.min-h-0.overflow-y-auto           (game outer)
-  //       div.game-sandbox                            (safe area padding)
+  // Game — mirrors platform container structure
   return (
-    <div style={{ ...baseStyle, height: viewportHeight }}>
-      <div style={gameOuterStyle}>
-        <div className="game-sandbox">
+    <div ref={containerRef} style={{ ...baseStyle, height: viewportHeight }}>
+      <div ref={outerRef} style={gameOuterStyle}>
+        <div ref={sandboxRef} className="game-sandbox">
           {gameOver ? (
             <PlatformTakeover
               result={gameResult}
@@ -239,6 +274,7 @@ export default function Mobile() {
           )}
         </div>
       </div>
+      <DebugOverlay containerRef={containerRef} outerRef={outerRef} sandboxRef={sandboxRef} />
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.22.3",
+  "version": "1.22.4-debug.1",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",