feat: sticky headers

.vscode/settings.json

@@ -118,6 +118,7 @@
     "POSITIVEX",
     "POSITIVEY",
     "POSITIVEZ",
+    "precompute",
     "Promisable",
     "protobuf",
     "protos",

src/app/tools/player-stats/[id]/page.tsx

@@ -213,7 +213,7 @@ export default function Page({ params }: { params: { id: string } }) {
                             {strings.common.bkni_percentile[percentile]}
                           </Text>
                           <Text size="1">
-                            {min} - {BKNI_PERCENTILES[index + 1]?.min ?? 200}
+                            {min}% - {BKNI_PERCENTILES[index + 1]?.min ?? 100}%
                           </Text>
                         </Flex>
                       </Button>

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

@@ -6,6 +6,7 @@ import {
   CaretUpIcon,
 } from '@radix-ui/react-icons';
 import { Flex, IconButton, Table } from '@radix-ui/themes';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
 import * as TankPerformanceSort from '../../../../stores/tankPerformanceSort';
 import {
   tankPerformanceSortTypeNames,
@@ -19,17 +20,16 @@ export function Header() {
   return (
     <Table.Header>
       <Table.Row align="center">
-        <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
+        <StickyColumnHeaderCell>Tank</StickyColumnHeaderCell>
         {tankPerformanceSortTypeNamesArray.map((type) => {
           const isSelected = sort.type === type;
 
           return (
-            <Table.ColumnHeaderCell
+            <StickyColumnHeaderCell
               px="2"
               key={type}
               width="0"
               justify="center"
-              minWidth="0px"
             >
               <Flex align="center" gap="1">
                 {tankPerformanceSortTypeNames[type]}
@@ -56,7 +56,7 @@ export function Header() {
                   )}
                 </IconButton>
               </Flex>
-            </Table.ColumnHeaderCell>
+            </StickyColumnHeaderCell>
           );
         })}
       </Table.Row>

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

@@ -13,7 +13,7 @@ export function TankTable() {
       <StickyTableRoot
         size={{ initial: '1', sm: '2' }}
         variant="surface"
-        style={{ maxWidth: '100%' }}
+        style={{ maxWidth: '100%', maxHeight: 'calc(100vh - 256px)' }}
       >
         <Header />
         <Suspense fallback={<BodyLoader />}>

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

@@ -43,7 +43,12 @@ export const Total = memo<TotalProps>(
 
     return (
       <Table.Row>
-        <StickyRowHeaderCell>Total</StickyRowHeaderCell>
+        <StickyRowHeaderCell
+          // maxWidth={{ initial: '128px', sm: '240px' }}
+          style={{ overflow: 'hidden', display: 'flex' }}
+        >
+          Total
+        </StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
         <Table.Cell align="center">{formatCompact(ratio * players)}</Table.Cell>
         <Table.Cell align="center">{formatCompact(ratio * battles)}</Table.Cell>

src/app/tools/tank-performance/page.tsx

@@ -2,13 +2,12 @@ import PageWrapper from '../../../components/PageWrapper';
 import { FilterControl } from '../tankopedia/components/FilterControl';
 import { Info } from './components/Info';
 import { TankTable } from './components/Table';
-import { TierBreakdown } from './components/TierBreakdown';
 
 export default function Page() {
   return (
     <PageWrapper color="jade" noMaxWidth>
       <Info />
-      <TierBreakdown />
+      {/* <TierBreakdown /> */}
       <FilterControl />
       <TankTable />
     </PageWrapper>

src/components/StickyColumnHeaderCell.tsx

@@ -0,0 +1,20 @@
+import { Table } from '@radix-ui/themes';
+import { ColumnHeaderCellProps } from '@radix-ui/themes/dist/cjs/components/table';
+
+export function StickyColumnHeaderCell({
+  style,
+  ...props
+}: ColumnHeaderCellProps) {
+  return (
+    <Table.ColumnHeaderCell
+      style={{
+        position: 'sticky',
+        top: 0,
+        background: 'var(--gray-3)',
+        zIndex: 1,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

src/components/StickyRowHeaderCell.tsx

@@ -8,7 +8,6 @@ export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
         position: 'sticky',
         left: 0,
         backgroundColor: 'var(--color-panel)',
-        boxShadow: 'var(--shadow-6)',
         ...style,
       }}
       {...props}

src/components/TankRowHeaderCell.tsx

@@ -14,14 +14,8 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
 
   return (
     <StickyRowHeaderCell
-      maxWidth={{
+      maxWidth={{ initial: '144px', sm: '240px' }}
-        initial: '180px',
+      style={{ overflow: 'hidden', display: 'flex' }}
-        sm: '240px',
-      }}
-      style={{
-        overflow: 'hidden',
-        display: 'flex',
-      }}
     >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img
@@ -58,14 +52,12 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}
+        size={{ initial: '1', sm: '2' }}
       >
         <Icon
           width="1em"
           height="1em"
-          style={{
+          style={{ minWidth: '1em', minHeight: '1em' }}
-            minWidth: '1em',
-            minHeight: '1em',
-          }}
         />
 
         {tank.name}

src/core/statistics/getBkniPercentile.ts

@@ -1,17 +1,3 @@
-/**
- * (10)   0 -  10: super malum
- * (10)  10 -  20: malum
- * (20)  20 -  40: very bad
- * (20)  40 -  60: bad
- * (20)  60 -  80: below average
- * (40)  80 - 120: average
- * (20) 120 - 140: above average
- * (20) 140 - 160: good
- * (20) 160 - 180: very good
- * (10) 180 - 190: unicum
- * (10) 190 - 200: super unicum
- */
-
 export enum BkniPercentile {
   SuperMalum,
   Malum,
@@ -28,16 +14,16 @@ export enum BkniPercentile {
 
 export const BKNI_PERCENTILES = [
   { min: 0, percentile: BkniPercentile.SuperMalum },
-  { min: 10, percentile: BkniPercentile.Malum },
+  { min: 1, percentile: BkniPercentile.Malum },
-  { min: 20, percentile: BkniPercentile.VeryBad },
+  { min: 10, percentile: BkniPercentile.VeryBad },
-  { min: 40, percentile: BkniPercentile.Bad },
+  { min: 20, percentile: BkniPercentile.Bad },
-  { min: 60, percentile: BkniPercentile.BelowAverage },
+  { min: 30, percentile: BkniPercentile.BelowAverage },
-  { min: 80, percentile: BkniPercentile.Average },
+  { min: 40, percentile: BkniPercentile.Average },
-  { min: 120, percentile: BkniPercentile.AboveAverage },
+  { min: 60, percentile: BkniPercentile.AboveAverage },
-  { min: 140, percentile: BkniPercentile.Good },
+  { min: 70, percentile: BkniPercentile.Good },
-  { min: 160, percentile: BkniPercentile.VeryGood },
+  { min: 80, percentile: BkniPercentile.VeryGood },
-  { min: 180, percentile: BkniPercentile.Unicum },
+  { min: 90, percentile: BkniPercentile.Unicum },
-  { min: 190, percentile: BkniPercentile.SuperUnicum },
+  { min: 99, percentile: BkniPercentile.SuperUnicum },
 ];
 
 export const BKNI_COLORS = {