refactor(client): improve orientation detection

Author: Sp1r1tual

client/src/hooks/game/useGameScene.ts

@@ -575,7 +575,11 @@ export function useGameScene({ currentLakeId }: UseGameSceneOptions) {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(handleResize, 100);
     };
-    const orientationHandler = () => setTimeout(handleResize, 300);
+    const orientationHandler = () => {
+      handleResize();
+      setTimeout(handleResize, 100);
+      setTimeout(handleResize, 300);
+    };
 
     window.addEventListener('resize', debouncedResize);
     window.addEventListener('orientationchange', orientationHandler);

client/src/hooks/ui/useIsPortrait.ts

@@ -1,24 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export function useIsPortrait(): boolean {
   const [isPortrait, setIsPortrait] = useState(
     () => window.innerWidth < window.innerHeight,
   );
 
-  useEffect(() => {
-    let timer: number;
+  useLayoutEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
     const check = () => {
+      setIsPortrait(window.innerWidth < window.innerHeight);
+    };
+
+    const handleOrientationChange = () => {
+      check();
       window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        setIsPortrait(window.innerWidth < window.innerHeight);
-      }, 300);
+      timer = setTimeout(check, 100);
+      timer = setTimeout(check, 300);
     };
+
+    const mql = window.matchMedia('(orientation: portrait)');
+    mql.addEventListener('change', handleOrientationChange);
     window.addEventListener('resize', check);
-    window.addEventListener('orientationchange', check);
+    window.addEventListener('orientationchange', handleOrientationChange);
+
     return () => {
       window.clearTimeout(timer);
+      mql.removeEventListener('change', handleOrientationChange);
       window.removeEventListener('resize', check);
-      window.removeEventListener('orientationchange', check);
+      window.removeEventListener('orientationchange', handleOrientationChange);
     };
   }, []);