feat: use native link

docs/changelogs/1.21.0.md

@@ -6,9 +6,13 @@ Introducing the Tank performance tool!
 
 ## Features
 
-- Added the Tank performance tool
+- Added the Tank performance tool which lists all tanks in the game and how players are performing in them
+  - This tool features the same tank filters as the Tankopedia search page
+  - The number of players in any given period can be viewed by switching the period from the dropdown
+  - This list updated daily
 - The tankopedia search page now loads much faster
-  - Not all tanks are loaded at once; rather, more tanks are loaded as you scroll down the page
+  - Not all tanks are loaded at once; rather, more tanks are loaded as you scroll down the page (the same as Tank performance)
+  - The tank pages also load lightning fast now
 
 ## Fixes
 

package.json

@@ -33,7 +33,7 @@
     "@nivo/bar": "^0.87.0",
     "@octokit/plugin-throttling": "^8.2.0",
     "@octokit/rest": "^20.1.1",
-    "@prisma/client": "^5.16.1",
+    "@prisma/client": "^5.16.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
@@ -60,7 +60,7 @@
     "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
     "markdown-to-jsx": "^7.4.7",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "parse-dds": "^1.2.1",
     "pickleparser": "^0.2.1",
     "postprocessing": "^6.35.6",
@@ -104,7 +104,7 @@
     "fast-xml-parser": "^4.4.0",
     "knip": "^3.13.2",
     "prettier": "^3.3.2",
-    "prisma": "^5.16.1",
+    "prisma": "^5.16.2",
     "typescript": "^5.5.3"
   },
   "packageManager": "[email protected]",

src/app/tools/tank-performance/components/Info.tsx

@@ -20,8 +20,12 @@ export function Info() {
         </Callout.Icon>
         <Callout.Text>
           Career stats based on {formatCompact(Math.round(samples))} players
-          with at least 5K career battles and 1 battle in the past 120 days;
+          with at least 5K career battles and 1 battle in the past 120 days.
-          updated daily.
+          Updated{' '}
+          {Math.floor(
+            (Date.now() - awaitedAverageDefinitions.time) / (1000 * 60 * 60),
+          )}{' '}
+          hours ago.
         </Callout.Text>
       </Callout.Root>
     </Flex>

src/app/tools/tankopedia/components/TankCard.css.ts

@@ -30,3 +30,12 @@ export const name = style({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
+
+export const link = style({
+  color: 'inherit',
+  textDecoration: 'none',
+
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});

src/app/tools/tankopedia/components/TankCard.tsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@radix-ui/themes';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import Link from 'next/link';
 import { use, useMemo } from 'react';
 import { classIcons } from '../../../../components/ClassIcon';
-import { Link } from '../../../../components/Link';
 import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
 import { asset } from '../../../../core/blitzkit/asset';
 import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions';
@@ -132,7 +132,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
   }, [sortBy]);
 
   return (
-    <Link
+    <Text
       tabIndex={onSelect ? 0 : undefined}
       size="1"
       color={
@@ -143,44 +143,47 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
             : 'gray'
       }
       highContrast={tank.treeType === 'researchable'}
-      underline="hover"
-      href={onSelect ? undefined : `/tools/tankopedia/${tank.id}`}
       onClick={onSelect ? () => onSelect(tank) : undefined}
       className={styles.card}
       style={assignInlineVars({
         [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(`flags/scratched/${tank.nation}.webp`)})`,
       })}
     >
-      <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
+      <Link
-
+        className={styles.link}
-      <Flex
+        href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
-        justify="center"
-        gap="1"
-        align="center"
-        overflow="hidden"
-        width="100%"
-        maxWidth="100%"
       >
-        <Icon className={styles.classIcon} />
+        <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
-        <Text align="center" className={styles.name}>
-          {tank.name}
-        </Text>
-      </Flex>
 
-      {discriminator && (
+        <Flex
-        <Text
+          justify="center"
-          mt="-2"
+          gap="1"
-          color="gray"
           align="center"
-          style={{
+          overflow="hidden"
-            whiteSpace: 'nowrap',
+          width="100%"
-            overflow: 'hidden',
+          maxWidth="100%"
-            textOverflow: 'ellipsis',
-          }}
         >
-          {discriminator}
+          <Icon className={styles.classIcon} />
-        </Text>
+          <Text align="center" className={styles.name}>
-      )}
+            {tank.name}
-    </Link>
+          </Text>
+        </Flex>
+
+        {discriminator && (
+          <Text
+            mt="-2"
+            color="gray"
+            align="center"
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {discriminator}
+          </Text>
+        )}
+      </Link>
+    </Text>
   );
 }

src/components/StickyTableRoot.tsx

@@ -4,7 +4,7 @@ import { Table } from '@radix-ui/themes';
 import { RootProps } from '@radix-ui/themes/dist/cjs/components/table';
 import { useEffect, useRef } from 'react';
 
-export function StickyTableRoot(props: RootProps) {
+export function StickyTableRoot({ style, ...props }: RootProps) {
   const table = useRef<HTMLTableElement>(null);
 
   useEffect(() => {
@@ -13,5 +13,11 @@ export function StickyTableRoot(props: RootProps) {
       ?.style.setProperty('overflow', 'auto');
   }, []);
 
-  return <Table.Root {...props} ref={table} />;
+  return (
+    <Table.Root
+      {...props}
+      ref={table}
+      style={{ overflow: 'hidden', ...style }}
+    />
+  );
 }