ultrawide testing

src/components/Overlay/index.tsx

@@ -281,14 +281,14 @@ const OverlayPage = (props) => {
             width={width}
             height={height}
             alt={`${block.type} dev screenshot`}
-            src={`/images/dev/${
-              block.type === 'spectator' ? 'playing' : block.type
-            }.png`}
+            src={`/images/dev/21-9-playing.png`}
           />
         )}
       </AnimatePresence>
     </>
   )
 }
 
+OverlayPage.whyDidYouRender = true
+
 export default OverlayPage

src/lib/hooks/useTransformRes.tsx

@@ -3,27 +3,52 @@ import { useRouter } from 'next/router'
 
 export const useTransformRes = () => {
   const windowSize = useWindowSize()
-  const href = useRouter()
+  const router = useRouter()
 
+  /**
+   * Transforms the input height or width based on the current window size.
+   *
+   * @param {Object} params - The parameters for transformation.
+   * @param {number} [params.h=0] - The height to transform.
+   * @param {number} [params.w=0] - The width to transform.
+   * @returns {number} - The transformed height or width.
+   */
   const res = ({ h = 0, w = 0 }) => {
+    // If the current path doesn't include 'overlay', return the height or width as is
     if (
-      href?.asPath &&
-      typeof href.asPath === 'string' &&
-      !href.asPath.includes('overlay')
-    )
+      router?.asPath &&
+      typeof router.asPath === 'string' &&
+      !router.asPath.includes('overlay')
+    ) {
       return h || w
+    }
+
+    const { width, height } = windowSize || {}
+    if (!width || !height) {
+      // If window size is not available, return the original value
+      return h || w
+    }
 
-    const defaultWidth = 1920
-    const defaultHeight = 1080
+    // Define base dimensions (you can adjust these as needed)
+    const baseWidth = 1920
+    const baseHeight = 1080
 
-    const widthRatio = (windowSize?.width || defaultWidth) / defaultWidth
-    const heightRatio = (windowSize?.height || defaultHeight) / defaultHeight
+    // Calculate scaling ratios based on base dimensions
+    const widthRatio = width / baseWidth
+    const heightRatio = height / baseHeight
 
+    // Transform the input height or width based on the scaling ratios
     if (h) {
-      return h * heightRatio || h
+      return h * heightRatio
     }
 
-    return w * widthRatio || w
+    if (w) {
+      return w * widthRatio
+    }
+
+    // If neither h nor w is provided, return 0 or handle as needed
+    return 0
   }
+
   return res
 }

src/lib/hooks/useWindowSize.ts

@@ -6,28 +6,29 @@ export interface Size {
 }
 
 export const useWindowSize = (): Size => {
-  // Initialize state with undefined width/height so server and client renders match
-  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
   const [windowSize, setWindowSize] = useState<Size>({
     width: 1920,
     height: 1080,
   })
+
   useEffect(() => {
-    // Handler to call on window resize
     function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
+      const newWidth = window.innerWidth
+      const newHeight = window.innerHeight
+
+      // Update state only if the size has changed
+      if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
+        setWindowSize({
+          width: newWidth,
+          height: newHeight,
+        })
+      }
     }
 
-    // Add event listener
     window.addEventListener('resize', handleResize)
-    // Call handler right away so state gets updated with initial window size
     handleResize()
-    // Remove event listener on cleanup
     return () => window.removeEventListener('resize', handleResize)
-  }, []) // Empty array ensures that effect is only run on mount
+  }, [windowSize]) // Add windowSize as a dependency
+
   return windowSize
 }