feat: generalize colored delta cells

.github/workflows/assets.yml

@@ -37,8 +37,8 @@ env:
   WOTB_GLOSSARY: ${{ secrets.WOTB_GLOSSARY }}
   WOTB_DLC_CDN: ${{ secrets.WOTB_DLC_CDN }}
   PUBLIC_WARGAMING_APPLICATION_ID: ${{ secrets.PUBLIC_WARGAMING_APPLICATION_ID }}
-  PUBLIC_ASSET_REPO: ${{ github.event.inputs.asset_repo }}
-  PUBLIC_ASSET_BRANCH: main
+  PUBLIC_ASSET_REPO: ${{ github.event.inputs.asset_repo != '' && github.event.inputs.asset_repo || secrets.PUBLIC_ASSET_REPO }}
+  PUBLIC_ASSET_BRANCH: ${{ secrets.PUBLIC_ASSET_BRANCH }}
   WOTB_GLOSSARY_DOMAIN: ${{ secrets.WOTB_GLOSSARY_DOMAIN }}
   WOTB_GLOSSARY_PATH: ${{ secrets.WOTB_GLOSSARY_PATH }}
   PUBLIC_PROMOTE_OPENTEST: ${{ secrets.PUBLIC_PROMOTE_OPENTEST }}
@@ -104,10 +104,13 @@ jobs:
         run: |
           chmod +x ./temp/depotDownloader/DepotDownloader
           ./temp/depotDownloader/DepotDownloader -q -os windows -app 444200 -username ${{ secrets.DEPOT_DOWNLOADER_USERNAME }} -password "${{ secrets.DEPOT_DOWNLOADER_PASSWORD }}"
+          mkdir -p temp/game
+          mv depots/444202/*/* temp/game
+          rm -rf depots
 
       - name: (Steam) Apply patches
         if: github.event.inputs.archive_url == ''
-        run: bun setup:patches --depot
+        run: bun setup:patches --manual
 
       - name: (ZIP) Download client
         if: github.event.inputs.archive_url != '' && endsWith(github.event.inputs.archive_url, '.zip')
@@ -184,5 +187,5 @@ jobs:
       - name: AppArmor hack
         run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns
 
-      - name: Start server and build assets
+      - name: Build assets
         run: bun run build:assets --all-targets --manual

packages/website/src/components/Compare/Body.tsx

@@ -3,6 +3,7 @@ import { Flex, Heading, IconButton, Table } from "@radix-ui/themes";
 import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
 import { useLocale } from "../../hooks/useLocale";
 import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { CompareCellDirection } from "../CompareCell";
 import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 import { CompareRow } from "./CompareRow";
 import { CompareSectionTitle } from "./CompareSectionTitle";
@@ -79,7 +80,7 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           name={strings.website.tools.tankopedia.characteristics.values.reload}
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           value={(stats) =>
             stats.shellReload ??
             stats.shellReloads!.reduce((a, b) => a + b, 0) /
@@ -95,7 +96,7 @@ export function Body({ stats }: BodyProps) {
           <>
             <CompareRow
               stats={stats}
-              deltaType="lowerIsBetter"
+              deltaType={CompareCellDirection.LOWER_IS_BETTER}
               value="intraClip"
               decimals={2}
             />
@@ -107,7 +108,7 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           value="shellRicochet"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={0}
         />
         <CompareRow stats={stats} value="shellVelocity" decimals={0} />
@@ -116,48 +117,48 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           value="aimTime"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={2}
         />
         <CompareRow
           stats={stats}
           value="dispersion"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow
           stats={stats}
           indent
           value="dispersionMoving"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow
           stats={stats}
           indent
           value="dispersionHullTraversing"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow
           stats={stats}
           indent
           value="dispersionTurretTraversing"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow
           stats={stats}
           indent
           value="dispersionShooting"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow
           stats={stats}
           indent
           value="dispersionGunDamaged"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={3}
         />
         <CompareRow stats={stats} value="gunDepression" decimals={1} />
@@ -186,21 +187,21 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           value="hardTerrainCoefficientRaw"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={2}
         />
         <CompareRow
           stats={stats}
           indent
           value="mediumTerrainCoefficientRaw"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={2}
         />
         <CompareRow
           stats={stats}
           indent
           value="softTerrainCoefficientRaw"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={2}
         />
         <CompareRow
@@ -246,7 +247,7 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           value="fireChance"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           display={(stats) => (stats.fireChance * 100).toFixed(0)}
           deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
         />
@@ -288,28 +289,28 @@ export function Body({ stats }: BodyProps) {
         <CompareRow
           stats={stats}
           value="volume"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={1}
         />
         <CompareRow
           stats={stats}
           indent
           value="width"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={1}
         />
         <CompareRow
           stats={stats}
           indent
           value="height"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={1}
         />
         <CompareRow
           stats={stats}
           indent
           value="length"
-          deltaType="lowerIsBetter"
+          deltaType={CompareCellDirection.LOWER_IS_BETTER}
           decimals={1}
         />
       </Table.Body>

packages/website/src/components/Compare/CompareRow.tsx

@@ -6,17 +6,17 @@ import {
 import { Flex, IconButton, Table, Text } from "@radix-ui/themes";
 import { useRef } from "react";
 import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
-import { Var } from "../../core/radix/var";
 import { useLocale } from "../../hooks/useLocale";
 import { CompareEphemeral } from "../../stores/compareEphemeral";
 import { ComparePersistent } from "../../stores/comparePersistent";
+import { CompareCell, CompareCellDirection } from "../CompareCell";
 import { StickyRowHeaderCell } from "../StickyRowHeaderCell";
 
 type CompareRowProps = {
   display?: (
     member: Awaited<TankCharacteristics>
   ) => number | string | undefined;
-  deltaType?: "higherIsBetter" | "lowerIsBetter";
+  deltaType?: CompareCellDirection;
   decimals?: number;
   deltaNominalDisplay?: (delta: number) => string | number;
   indent?: boolean;
@@ -33,7 +33,7 @@ type CompareRowProps = {
 
 export function CompareRow({
   display,
-  deltaType = "higherIsBetter",
+  deltaType = CompareCellDirection.HIGHER_IS_BETTER,
   decimals,
   deltaNominalDisplay,
   indent,
@@ -108,33 +108,18 @@ export function CompareRow({
       {values.map((value, index) => {
         const delta = value - values[0];
         const deltaPercentage = value / values[0] - 1;
-        const normalizedDeltaPercentage = Math.round(
-          Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25)
-        );
         const resolvedDisplayValue = display
           ? display(stats[index])
           : decimals === undefined
-            ? value
-            : value?.toFixed(decimals);
+          ? value
+          : value?.toFixed(decimals);
 
         return (
-          <Table.Cell
+          <CompareCell
             key={index}
-            style={{
-              backgroundColor:
-                index === 0 ||
-                value === undefined ||
-                values[0] === undefined ||
-                value === values[0]
-                  ? undefined
-                  : (
-                        deltaType === "higherIsBetter"
-                          ? value > values[0]
-                          : value < values[0]
-                      )
-                    ? `color-mix(in srgb, ${Var("green-7")} ${normalizedDeltaPercentage}%, ${Var("green-3")})`
-                    : `color-mix(in srgb, ${Var("red-7")} ${normalizedDeltaPercentage}%, ${Var("red-3")})`,
-            }}
+            truth={values[0]}
+            value={value}
+            direction={deltaType}
           >
             <Flex
               align="center"
@@ -160,8 +145,8 @@ export function CompareRow({
                           deltaNominalDisplay
                             ? deltaNominalDisplay(delta)
                             : decimals === undefined
-                              ? delta
-                              : delta.toFixed(decimals)
+                            ? delta
+                            : delta.toFixed(decimals)
                         }`}
                         )
                       </Text>
@@ -179,7 +164,7 @@ export function CompareRow({
                   </>
                 )}
             </Flex>
-          </Table.Cell>
+          </CompareCell>
         );
       })}
     </Table.Row>

packages/website/src/components/Compare/CompareTable.tsx

@@ -107,8 +107,8 @@ export function CompareTable({ stats }: CompareTableProps) {
                                     crewSkills[skill] === 0
                                       ? Var("gray-11")
                                       : permanentSkills.includes(skill)
-                                        ? Var("crimson-11")
-                                        : Var("amber-11"),
+                                      ? Var("crimson-11")
+                                      : Var("amber-11"),
                                 }}
                               />
                             ))}

packages/website/src/components/CompareCell.tsx

@@ -0,0 +1,41 @@
+import { Table } from "@radix-ui/themes";
+import type { CellProps } from "@radix-ui/themes/components/table";
+
+export enum CompareCellDirection {
+  HIGHER_IS_BETTER,
+  LOWER_IS_BETTER,
+}
+
+interface CompareCellProps extends CellProps {
+  value: number;
+  truth: number;
+  direction?: CompareCellDirection;
+}
+
+export function CompareCell({
+  value,
+  truth,
+  style,
+  direction,
+  ...props
+}: CompareCellProps) {
+  const percentage = value / truth - 1;
+  const shiftedPercentage = Math.round(
+    Math.min(100, Math.abs(percentage) * 2 * 100 + 25)
+  );
+
+  return (
+    <Table.Cell
+      style={{
+        backgroundColor:
+          value === truth
+            ? undefined
+            : (direction === CompareCellDirection.HIGHER_IS_BETTER) ===
+              value > truth
+            ? `color-mix(in srgb, var(--green-7) ${shiftedPercentage}%, var(--green-3))`
+            : `color-mix(in srgb, var(--red-7) ${shiftedPercentage}%, var(--red-3))`,
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/PlaylistActions.tsx

@@ -37,26 +37,26 @@ export function PlaylistActions() {
           {strings.website.tools.playlist.shuffle}
         </Button>
 
+        <Button
+          size={{ initial: "1", xs: "2" }}
+          variant="outline"
+          onClick={() => {
+            Playlist.mutate((draft) => {
+              draft.list = draft.list?.filter(
+                (entry) =>
+                  (!entry.now ||
+                    !entry.then ||
+                    entry.now.battles === entry.then.battles) &&
+                  !entry.checked
+              );
+            });
+          }}
+        >
+          {strings.website.tools.playlist.remove}
+        </Button>
+
         {wargaming && (
           <>
-            <Button
-              size={{ initial: "1", xs: "2" }}
-              variant="outline"
-              onClick={() => {
-                Playlist.mutate((draft) => {
-                  draft.list = draft.list?.filter(
-                    (entry) =>
-                      (!entry.now ||
-                        !entry.then ||
-                        entry.now.battles === entry.then.battles) &&
-                      !entry.checked
-                  );
-                });
-              }}
-            >
-              {strings.website.tools.playlist.remove}
-            </Button>
-
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 <Button size={{ initial: "1", xs: "2" }}>

packages/website/src/components/TankSearch/components/FilterControl.tsx

@@ -5,11 +5,7 @@ import {
   TankType,
   TIER_ROMAN_NUMERALS,
 } from "@blitzkit/core";
-import {
-  ComponentBooleanIcon,
-  LockClosedIcon,
-  LockOpen2Icon,
-} from "@radix-ui/react-icons";
+import { LockClosedIcon, LockOpen2Icon } from "@radix-ui/react-icons";
 import {
   Box,
   Flex,
@@ -71,7 +67,9 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
             <img
               style={{ width: "1em", height: "1em" }}
               src={asset(
-                `icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`
+                `icons/shells/${shellTypeIcons[shells[index]]}${
+                  premium ? "_premium" : ""
+                }.webp`
               )}
             />
           )}
@@ -107,7 +105,9 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
                 >
                   <img
                     src={asset(
-                      `icons/shells/${shellTypeIcons[shellType]}${premium ? "_premium" : ""}.webp`
+                      `icons/shells/${shellTypeIcons[shellType]}${
+                        premium ? "_premium" : ""
+                      }.webp`
                     )}
                     style={{ width: "1em", height: "1em" }}
                   />
@@ -135,29 +135,13 @@ function OwnershipFilter(props: FlexProps) {
       <IconButton
         size={size}
         disabled={!wargaming}
-        variant={tankFilters.ownership === "all" ? "solid" : "soft"}
+        variant={tankFilters.showOwned ? "solid" : "soft"}
         radius="none"
-        color={tankFilters.ownership === "all" ? undefined : "gray"}
+        color={tankFilters.showOwned ? undefined : "gray"}
         highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
-            draft.ownership = "all";
-          });
-        }}
-      >
-        <ComponentBooleanIcon />
-      </IconButton>
-
-      <IconButton
-        size={size}
-        disabled={!wargaming}
-        variant={tankFilters.ownership === "owned" ? "solid" : "soft"}
-        radius="none"
-        color={tankFilters.ownership === "owned" ? undefined : "gray"}
-        highContrast
-        onClick={() => {
-          TankFilters.mutate((draft) => {
-            draft.ownership = "owned";
+            draft.showOwned = !draft.showOwned;
           });
         }}
       >
@@ -167,13 +151,13 @@ function OwnershipFilter(props: FlexProps) {
       <IconButton
         size={size}
         disabled={!wargaming}
-        variant={tankFilters.ownership === "unowned" ? "solid" : "soft"}
+        variant={tankFilters.showUnowned ? "solid" : "soft"}
         radius="none"
-        color={tankFilters.ownership === "unowned" ? undefined : "gray"}
+        color={tankFilters.showUnowned ? undefined : "gray"}
         highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
-            draft.ownership = "unowned";
+            draft.showUnowned = !draft.showUnowned;
           });
         }}
       >
@@ -579,27 +563,13 @@ export function FilterControl() {
         >
           <IconButton
             size={size}
-            variant={tankFilters.testing === "include" ? "solid" : "soft"}
+            variant={tankFilters.showNonTesting ? "solid" : "soft"}
             radius="none"
-            color={tankFilters.testing === "include" ? undefined : "gray"}
+            color={tankFilters.showNonTesting ? undefined : "gray"}
             highContrast
             onClick={() => {
               TankFilters.mutate((draft) => {
-                draft.testing = "include";
-              });
-            }}
-          >
-            <ComponentBooleanIcon />
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={tankFilters.testing === "exclude" ? "solid" : "soft"}
-            radius="none"
-            color={tankFilters.testing === "exclude" ? undefined : "gray"}
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                draft.testing = "exclude";
+                draft.showNonTesting = !draft.showNonTesting;
               });
             }}
           >
@@ -607,15 +577,16 @@ export function FilterControl() {
               style={{ width: "1em", height: "1em", color: "currentColor" }}
             />
           </IconButton>
+
           <IconButton
             size={size}
-            variant={tankFilters.testing === "only" ? "solid" : "soft"}
+            variant={tankFilters.showTesting ? "solid" : "soft"}
             radius="none"
-            color={tankFilters.testing === "only" ? undefined : "gray"}
+            color={tankFilters.showTesting ? undefined : "gray"}
             highContrast
             onClick={() => {
               TankFilters.mutate((draft) => {
-                draft.testing = "only";
+                draft.showTesting = !draft.showTesting;
               });
             }}
           >

packages/website/src/components/TankSearch/index.tsx

@@ -487,7 +487,7 @@ export const TankSearch = memo<TankSearchProps>(
           )}
         </Flex>
 
-        {tankFilters.testing === "only" && (
+        {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <Flex justify="center" mt="4">
             <Callout.Root color="amber">
               <Callout.Icon>

packages/website/src/core/blitzkit/filterTank.ts

@@ -10,16 +10,14 @@ export async function filterTank(
   owned: number[] = []
 ) {
   return (
-    (filters.ownership === "all" ||
-      (filters.ownership === "owned" && owned.includes(tank.id)) ||
-      (filters.ownership === "unowned" && !owned.includes(tank.id))) &&
+    ((filters.showOwned && owned.includes(tank.id)) ||
+      (filters.showUnowned && !owned.includes(tank.id))) &&
     (filters.tiers.length === 0 || filters.tiers.includes(tank.tier)) &&
     (filters.nations.length === 0 || filters.nations.includes(tank.nation)) &&
     (filters.classes.length === 0 || filters.classes.includes(tank.class)) &&
     (filters.types.length === 0 || filters.types.includes(tank.type)) &&
-    (filters.testing === "include" ||
-      (filters.testing === "only" && tank.testing) ||
-      (filters.testing === "exclude" && !tank.testing)) &&
+    ((filters.showTesting && tank.testing) ||
+      (filters.showNonTesting && !tank.testing)) &&
     (filters.gunType.length === 0 ||
       (filters.gunType.includes("regular") &&
         tank.turrets.some((turret) =>

packages/website/src/pages/[...locale]/playlist/_index.tsx

@@ -17,9 +17,7 @@ export function Page({
 }: Props & MaybeSkeletonComponentProps) {
   const generated = Playlist.use((state) => state.list !== undefined);
 
-  if (App.state.logins.wargaming && TankFilters.state.ownership !== "owned") {
-    TankFilters.state.ownership = "owned";
-  }
+  if (App.state.logins.wargaming) TankFilters.state.showUnowned = false;
 
   return (
     <LocaleProvider locale={locale}>

packages/website/src/stores/tankFilters.ts

@@ -17,12 +17,15 @@ export interface TankFilters {
   nations: string[];
   classes: TankClass[];
   types: TankType[];
-  testing: "include" | "exclude" | "only";
   search: string | null;
   searching: boolean;
   gunType: CaseType<GunDefinition>[];
   shells: [ShellType | null, ShellType | null, ShellType | null];
-  ownership: "all" | "owned" | "unowned";
+
+  showTesting: boolean;
+  showNonTesting: boolean;
+  showOwned: boolean;
+  showUnowned: boolean;
 }
 
 export const TankFilters = new Varuna<TankFilters>({
@@ -30,10 +33,13 @@ export const TankFilters = new Varuna<TankFilters>({
   nations: [],
   classes: [],
   types: [],
-  testing: "include",
   search: null,
   searching: false,
   gunType: [],
   shells: [null, null, null],
-  ownership: "all",
+
+  showTesting: true,
+  showNonTesting: true,
+  showOwned: true,
+  showUnowned: true,
 });