feat: remove useWideFormat

src/app/tools/session/page.tsx

@@ -44,7 +44,6 @@ import searchPlayersAcrossRegions, {
 import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
 import { tankAverages } from '../../../core/blitzstars/tankAverages';
 import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
-import { useWideFormat } from '../../../hooks/useWideFormat';
 import * as Session from '../../../stores/session';
 import { IndividualTankStats } from '../../../types/tanksStats';
 
@@ -54,7 +53,6 @@ export default function Page({
   searchParams: { id?: string };
 }) {
   const [loaded, setLoaded] = useState(false);
-  const wideFormat = useWideFormat(640);
   const awaitedTankDefinitions = use(tankDefinitions);
   const awaitedTankAvearges = use(tankAverages);
   const [showSearch, setShowSearch] = useState(false);
@@ -318,7 +316,7 @@ export default function Page({
         <Flex
           mt="2"
           mb="2"
-          direction={wideFormat ? 'row' : 'column'}
+          direction={{ initial: 'column', sm: 'row' }}
           align="center"
           justify="between"
           gap="2"

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -1,12 +1,10 @@
 import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Heading, Text } from '@radix-ui/themes';
+import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { classIcons } from '../../../../../../components/ClassIcon';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import strings from '../../../../../../lang/en-US.json';
-import { theme } from '../../../../../../stitches.config';
 import * as Duel from '../../../../../../stores/duel';
 import { TankSandbox } from './TankSandbox';
 import { Options } from './components/Options';
@@ -14,7 +12,6 @@ import { Options } from './components/Options';
 export function HeroSection() {
   const protagonist = Duel.use((state) => state.protagonist!.tank);
   const antagonist = Duel.use((state) => state.antagonist!.tank);
-  const wideFormat = useWideFormat(880);
   const compareTanks =
     protagonist.id === antagonist.id
       ? [protagonist.id]
@@ -25,41 +22,34 @@ export function HeroSection() {
   return (
     <Flex
       justify="center"
-      pt={wideFormat ? '0' : '6'}
-      style={{
-        background: 'var(--color-surface)',
-        position: 'relative',
-        height: wideFormat ? undefined : 'calc(75vh - 64px)',
-      }}
+      pt={{ initial: '6', md: '0' }}
+      style={{ background: 'var(--color-surface)', position: 'relative' }}
+      height={{ initial: 'calc(75vh - 64px)', md: undefined }}
       gap="4"
     >
       <Flex
-        direction={wideFormat ? 'row' : 'column'}
-        style={{
-          maxWidth: 1600,
-          flex: 1,
-        }}
+        direction={{ initial: 'column', md: 'row' }}
+        style={{ maxWidth: 1600, flex: 1 }}
       >
         <Flex
           align="center"
           justify="center"
-          style={{
-            flex: wideFormat ? 1 : undefined,
-          }}
+          flexGrow={{ initial: undefined, md: '1' }}
+          flexBasis="0"
         >
           <Flex
-            gap={wideFormat ? '4' : '2'}
+            gap={{ initial: '2', md: '4' }}
             direction="column"
-            ml={wideFormat ? '8' : undefined}
-            align={wideFormat ? undefined : 'center'}
+            ml={{ initial: '0', md: '8' }}
+            align={{ initial: 'center', md: undefined }}
             justify="center"
             style={{
               height: '100%',
             }}
           >
             <Heading
-              size={wideFormat ? '9' : '8'}
-              align={wideFormat ? undefined : 'center'}
+              size={{ initial: '8', md: '9' }}
+              align={{ initial: 'center', md: undefined }}
               color={
                 protagonist.treeType === 'collector'
                   ? 'blue'
@@ -100,17 +90,18 @@ export function HeroSection() {
           </Flex>
         </Flex>
 
-        <div
+        <Box
           className="tank-sandbox-container"
+          height={{ initial: undefined, md: '512px' }}
           style={{
             flex: 2,
             position: isFullScreen ? 'fixed' : 'relative',
             top: isFullScreen ? 0 : undefined,
             left: isFullScreen ? 0 : undefined,
             width: isFullScreen ? '100vw' : undefined,
-            height: isFullScreen ? '100vh' : wideFormat ? 512 : undefined,
+            height: isFullScreen ? '100vh' : 'auto',
             zIndex: isFullScreen ? 3 : undefined,
-            background: isFullScreen ? theme.colors.appBackground1 : undefined,
+            background: isFullScreen ? 'var(--color-background)' : undefined,
           }}
         >
           <div
@@ -131,7 +122,7 @@ export function HeroSection() {
 
             <Options />
           </div>
-        </div>
+        </Box>
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

@@ -1,12 +1,11 @@
 import { ChevronRightIcon } from '@radix-ui/react-icons';
-import { ChevronDownIcon, Flex, Text } from '@radix-ui/themes';
+import { Box, ChevronDownIcon, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { ComponentProps, use } from 'react';
 import PageWrapper from '../../../../../../components/PageWrapper';
 import { asset } from '../../../../../../core/blitzkit/asset';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import * as Duel from '../../../../../../stores/duel';
 
 export function TreeArrow({
@@ -51,7 +50,6 @@ export function TreeArrow({
 }
 
 export function TechTreeSection() {
-  const wideFormat = useWideFormat(720);
   const awaitedTankDefinitions = use(tankDefinitions);
   const tank = Duel.use((state) => state.protagonist!.tank);
 
@@ -139,21 +137,23 @@ export function TechTreeSection() {
       size={tank.ancestors && tank.successors ? 880 : 480}
       gap="0"
     >
-      {/* <Flex justify="center">
+      <Flex justify="center" py="2" mb="4">
         <Heading>Tech tree</Heading>
-      </Flex> */}
+      </Flex>
+
+      {/* BIG TODO: use number format to shorten currencies */}
 
       <Flex
         align="center"
         gap="6"
         style={{}}
-        direction={wideFormat ? 'row' : 'column'}
+        direction={{ initial: 'column', sm: 'row' }}
       >
         {tank.ancestors && (
           <>
             <Flex
               wrap="wrap"
-              direction={wideFormat ? 'column' : 'row'}
+              direction={{ initial: 'column', sm: 'row' }}
               align="center"
               justify="center"
               style={{
@@ -166,7 +166,12 @@ export function TechTreeSection() {
               ))}
             </Flex>
 
-            <TreeArrow down={!wideFormat} />
+            <Box display={{ initial: 'block', sm: 'none' }}>
+              <TreeArrow down />
+            </Box>
+            <Box display={{ initial: 'none', sm: 'block' }}>
+              <TreeArrow />
+            </Box>
           </>
         )}
 
@@ -196,11 +201,16 @@ export function TechTreeSection() {
 
         {tank.successors && (
           <>
-            <TreeArrow down={!wideFormat} />
+            <Box display={{ initial: 'block', sm: 'none' }}>
+              <TreeArrow down />
+            </Box>
+            <Box display={{ initial: 'none', sm: 'block' }}>
+              <TreeArrow />
+            </Box>
 
             <Flex
               wrap="wrap"
-              direction={wideFormat ? 'column' : 'row'}
+              direction={{ initial: 'column', sm: 'row' }}
               align="center"
               justify="center"
               style={{

src/hooks/useWideFormat.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * @deprecated DO NOT USE; CAUSES NEXT JS HYDRATION ISSUES
- */
-export function useWideFormat(size = 880) {
-  function hasWideFormat() {
-    return typeof window !== 'undefined' && window.innerWidth > size;
-  }
-
-  const [wideFormat, setWideFormat] = useState(hasWideFormat());
-
-  useEffect(() => {
-    function handleResize() {
-      setWideFormat(hasWideFormat());
-    }
-
-    window.addEventListener('resize', handleResize);
-  }, []);
-
-  return wideFormat;
-}