@littlepartytime/dev-kit 1.22.2 → 1.22.4-debug.0

package/dist/webapp/pages/Mobile.tsx

@@ -21,23 +21,56 @@ const gameOuterStyle: React.CSSProperties = {
 };
 
 /**
- * Track actual visible height via VisualViewport API.
- * On iOS Safari, 100dvh does NOT shrink when the keyboard opens (unlike
- * PWA/Capacitor where the platform runs). VisualViewport.height gives
- * the real available space, achieving the same behavior: game content
- * compresses instead of the page being pushed off-screen.
+ * Diagnostic: track viewport values for debugging keyboard/layout issues.
+ * Shows a small overlay on screen with real-time values.
+ * TODO: Remove after debugging is complete.
  */
-function useViewportHeight(): string {
+interface ViewportDebug {
+  height: string;
+  debug: {
+    vvHeight: number;
+    vvOffsetTop: number;
+    innerHeight: number;
+    documentHeight: number;
+    scrollY: number;
+    rootHeight: number;
+  };
+}
+
+function useViewportHeight(): ViewportDebug {
   const [height, setHeight] = useState('100dvh');
+  const [debug, setDebug] = useState({
+    vvHeight: 0, vvOffsetTop: 0, innerHeight: 0,
+    documentHeight: 0, scrollY: 0, rootHeight: 0,
+  });
+  const initialHeight = useRef(0);
 
   useEffect(() => {
     const vv = window.visualViewport;
     if (!vv) return;
 
+    initialHeight.current = vv.height;
+
+    const KEYBOARD_THRESHOLD = 100;
+
     const update = () => {
-      // Pin to top: counteract Safari scrolling the page up
+      const root = document.getElementById('root');
+      setDebug({
+        vvHeight: Math.round(vv.height),
+        vvOffsetTop: Math.round(vv.offsetTop),
+        innerHeight: window.innerHeight,
+        documentHeight: document.documentElement.clientHeight,
+        scrollY: Math.round(window.scrollY),
+        rootHeight: root ? root.clientHeight : 0,
+      });
+
       window.scrollTo(0, 0);
-      setHeight(`${vv.height}px`);
+      const shrunk = initialHeight.current - vv.height;
+      if (shrunk > KEYBOARD_THRESHOLD) {
+        setHeight(`${vv.height}px`);
+      } else {
+        setHeight('100dvh');
+      }
     };
 
     update();
@@ -49,11 +82,18 @@ function useViewportHeight(): string {
     };
   }, []);
 
-  return height;
+  return { height, debug };
 }
 
+const debugOverlayStyle: React.CSSProperties = {
+  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,
+};
+
 export default function Mobile() {
-  const viewportHeight = useViewportHeight();
+  const { height: viewportHeight, debug } = useViewportHeight();
   const [socket, setSocket] = useState<Socket | null>(null);
   const [nickname, setNickname] = useState('');
   const [joined, setJoined] = useState(false);
@@ -205,10 +245,7 @@ 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}>
@@ -226,6 +263,10 @@ export default function Mobile() {
           )}
         </div>
       </div>
+      {/* DEBUG: viewport diagnostic overlay — remove after fixing */}
+      <div style={debugOverlayStyle}>
+        container: {viewportHeight} | vv: {debug.vvHeight} | vvOff: {debug.vvOffsetTop} | inner: {debug.innerHeight} | doc: {debug.documentHeight} | scrollY: {debug.scrollY} | root: {debug.rootHeight}
+      </div>
     </div>
   );
 }

package/package.json

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