ultrawide testing

src/components/Overlay/InGameOverlays.tsx

@@ -1,10 +1,14 @@
-import { NotablePlayers } from '@/components/Overlay/NotablePlayers'
+import {
+  type NotablePlayer,
+  NotablePlayers,
+} from '@/components/Overlay/NotablePlayers'
 import { SpectatorText } from '@/components/Overlay/SpectatorText'
 import { AnimatedAegis } from '@/components/Overlay/aegis/AnimatedAegis'
 import { AnimatedRankBadge } from '@/components/Overlay/rank/AnimatedRankBadge'
 import { AnimateRosh } from '@/components/Overlay/rosh/AnimateRosh'
 import { AnimatedWL } from '@/components/Overlay/wl/AnimatedWL'
 import { Settings } from '@/lib/defaultSettings'
+import type { blockType } from '@/lib/devConsts'
 import { useOverlayPositions } from '@/lib/hooks/useOverlayPositions'
 import { useTransformRes } from '@/lib/hooks/useTransformRes'
 import { useUpdateSetting } from '@/lib/hooks/useUpdateSetting'
@@ -21,6 +25,16 @@ export const InGameOverlays = ({
   setAegis,
   aegis,
   notablePlayers,
+}: {
+  wl: { lose: number; type: string; win: number }[]
+  block: blockType
+  rankImageDetails: { image: string; leaderboard: boolean; rank: number }
+  paused: any
+  roshan: any
+  setRoshan: any
+  setAegis: any
+  aegis: any
+  notablePlayers: NotablePlayer[] | null
 }) => {
   const res = useTransformRes()
   const { wlPosition } = useOverlayPositions()

src/components/Overlay/NotablePlayers.tsx

@@ -1,5 +1,6 @@
 import { PlayerTopbar } from '@/components/Overlay/PlayerTopbar'
 import { Settings } from '@/lib/defaultSettings'
+import type { blockType } from '@/lib/devConsts'
 import { useTransformRes } from '@/lib/hooks/useTransformRes'
 import { useUpdateSetting } from '@/lib/hooks/useUpdateSetting'
 import clsx from 'clsx'
@@ -21,7 +22,7 @@ export const NotablePlayers = ({
   block,
 }: {
   players: NotablePlayer[] | null
-  block: any
+  block: blockType
 }) => {
   const res = useTransformRes()
   const { data: isEnabled } = useUpdateSetting(Settings.notablePlayersOverlay)

src/components/Overlay/PollOverlay.tsx

@@ -2,9 +2,8 @@ import { useTransformRes } from '@/lib/hooks/useTransformRes'
 import { useGetSettings } from '@/lib/hooks/useUpdateSetting'
 import { motionProps } from '@/ui/utils'
 import { Center, Progress } from '@mantine/core'
-import { captureException } from '@sentry/nextjs'
 import { motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import Countdown, { zeroPad } from 'react-countdown'
 import TwitchFetcher from 'twitch-fetcher'
 import { TextWithEmotes } from './TextWithEmotes'
@@ -27,6 +26,7 @@ const PollColors = [
   '#c46300',
   '#c60000',
 ]
+
 const PollTimer = ({ minutes, seconds, completed }) =>
   completed ? (
     <></>
@@ -46,22 +46,30 @@ export const PollOverlay = ({
   const { data } = useGetSettings()
   const res = useTransformRes()
 
+  const providerAccountId = useMemo(
+    () => data?.Account?.providerAccountId,
+    [data?.Account?.providerAccountId]
+  )
+
   useEffect(() => {
-    if (!data?.Account?.providerAccountId) return
+    if (!providerAccountId) return
 
     const emoteFetcher = new TwitchFetcher()
     emoteFetcher
-      .getEmotesByID(data?.Account?.providerAccountId, {
+      .getEmotesByID(providerAccountId, {
         '7tv': true,
         bttv: true,
       })
       .then(setEmotes)
       .catch((e) => {
         // Don't need to report on users that don't have a 7tv or bttv account
       })
-  }, [data?.Account?.providerAccountId])
+  }, [providerAccountId])
 
-  const totalVotes = choices.reduce((acc, choice) => acc + choice.totalVotes, 0)
+  const totalVotes = choices.reduce(
+    (acc, choice) => acc + (choice.totalVotes || 0),
+    0
+  )
   const choicesWithPercent = choices.map((choice) => {
     const percent = !totalVotes
       ? Math.round(100 / choices.length)

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/devConsts.ts

@@ -1,6 +1,6 @@
 import type { PollData } from '@/components/Overlay/PollOverlay'
 
-export const isDev = false //|| process.env.VERCEL_ENV === 'development'
+export const isDev = false || process.env.NODE_ENV === 'development'
 
 export type blockType = {
   matchId: number | null
@@ -10,7 +10,7 @@ export type blockType = {
 export const devBlockTypes: blockType = {
   matchId: 123456789,
   team: 'radiant',
-  type: null,
+  type: 'playing',
 }
 export const devPoll: PollData = {
   endDate: new Date().getTime() + 300000,

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
 }