max cons and provs

.vscode/settings.json

@@ -96,6 +96,7 @@
     "fullstats",
     "fuzzysort",
     "gamemode",
+    "gamemodes",
     "gameplay",
     "glsl",
     "GLTF",

packages/i18n/strings/en.json

@@ -45,11 +45,11 @@
         "burst_size": "Burst size",
         "intra_burst": "Intra-burst",
         "penetration": "Penetration",
-        "penetration_loss_by_distance": "Penetration loss by 500m",
+        "penetration_loss_by_distance": "Loss by 500m",
-        "penetration_loss_after_ricochet": "Penetration loss after ricochet",
+        "penetration_loss_after_ricochet": "Loss after ricochet",
-        "shell_velocity": "Shell velocity",
+        "shell_velocity": "Velocity",
-        "shell_range": "Shell range",
+        "shell_range": "Range",
-        "shell_capacity": "Shell capacity",
+        "shell_capacity": "Capacity",
         "caliber": "Caliber",
         "normalization": "Normalization",
         "ricochet": "Ricochet",
@@ -66,7 +66,7 @@
         "azimuth_right": "Azimuth right",
         "speed_forward": "Forward",
         "speed_backward": "Backward",
-        "speeds": "Speeds",
+        "speeds": "Speed",
         "engine_power": "Engine power",
         "brake_force": "Brake force",
         "weight": "Weight",
@@ -80,7 +80,7 @@
         "medium_terrain_coefficient_raw": "Medium",
         "soft_terrain_coefficient_raw": "Soft",
         "hull_traverse_speed": "Hull traverse speed",
-        "hull_traverse_speeds": "Hull traverse speeds",
+        "hull_traverse_speeds": "Hull traverse speed",
         "hull_traverse_speed_hard": "Hard",
         "hull_traverse_speed_medium": "Medium",
         "hull_traverse_speed_soft": "Soft",
@@ -98,6 +98,10 @@
       }
     },
 
+    "game_modes": {
+      "title": "Game mode abilities"
+    },
+
     "navigation": {
       "tank": "Tank",
       "characteristics": "Characteristics"

packages/website/src/components/Button/index.module.css

@@ -16,6 +16,11 @@
 
   cursor: pointer;
 
+  &[data-disabled="true"] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
   &[data-size="minor"] {
     font-size: 0.7em;
     padding: var(--space-2) var(--space-3);

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

@@ -39,6 +39,7 @@ export function Button({
 
   listChild,
   parentListChild,
+  disabled,
   ...props
 }: ButtonProps) {
   return (
@@ -51,6 +52,8 @@ export function Button({
       data-size={size}
       data-list-child={listChild}
       data-parent-list-child={parentListChild}
+      data-disabled={disabled}
+      disabled={disabled}
       {...props}
     />
   );

packages/website/src/components/GameModeSection/index.module.css

@@ -0,0 +1,64 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--space-4);
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-4);
+    width: 100%;
+
+    .card {
+      width: 16rem;
+      height: 20rem;
+      display: flex;
+      flex: 0 0 auto;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: var(--space-3);
+      background-size: cover;
+      background-position: center;
+
+      .banner {
+        flex: 1;
+        background-size: cover;
+        background-position: center;
+      }
+
+      .info {
+        display: flex;
+        min-height: 6.125rem;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-2);
+        padding: var(--space-3);
+        backdrop-filter: blur(4rem);
+        -webkit-backdrop-filter: blur(4rem);
+
+        .abilities {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .ability {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1);
+            white-space: nowrap;
+
+            img {
+              width: 1.5em;
+              height: 1.5em;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+import { alias } from "@blitzkit/core";
+import { api } from "../../api/dynamic";
+import { DuelModule, useDuel } from "../../hooks/useDuel";
+import { useStrings } from "../../hooks/useStrings";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
+import { Heading } from "../Heading";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+const [gameDefinitions, consumableDefinitions, provisionDefinitions, tanks] =
+  await Promise.all([
+    api.game(),
+    api.consumables(),
+    api.provisions(),
+    api.tanks(),
+  ]);
+
+export function GameModeSection() {
+  const unwrap = useUnwrapper();
+  const strings = useStrings();
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const roles = Object.entries(tank.roles);
+
+  if (roles.length === 0) return null;
+
+  return (
+    <section className={styles.section}>
+      <Heading size="3">{strings.tanks.game_modes.title}</Heading>
+
+      <div className={styles.cards}>
+        {roles.map(([id, value]) => {
+          const gameMode = gameDefinitions.gameModes[id];
+          const role = gameDefinitions.roles[value];
+          const banner = alias("api", `/gamemodes/${id}/banner.webp`);
+
+          return (
+            <article
+              key={id}
+              className={styles.card}
+              style={{ backgroundImage: `url(${banner})` }}
+            >
+              <div
+                className={styles.banner}
+                style={{ backgroundImage: `url(${banner})` }}
+              />
+
+              <div className={styles.info}>
+                <Text size="major" weight="bold" align="center">
+                  {unwrap(gameMode.name!)}
+                </Text>
+
+                <div className={styles.abilities}>
+                  {role.provisions.map((id) => {
+                    const provisions = provisionDefinitions.provisions[id];
+
+                    return (
+                      <Ability
+                        key={`provision-${id}`}
+                        icon={alias("api", `/icons/provisions/${id}.webp`)}
+                        name={unwrap(provisions.name!)}
+                      />
+                    );
+                  })}
+
+                  {role.consumables.map((id) => {
+                    const consumable = consumableDefinitions.consumables[id];
+
+                    return (
+                      <Ability
+                        key={`consumable-${id}`}
+                        icon={alias("api", `/icons/consumables/${id}.webp`)}
+                        name={unwrap(consumable.name!)}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function Ability({ icon, name }: { icon: string; name: string }) {
+  return (
+    <Text lowContrast className={styles.ability}>
+      <img src={icon} alt={name} />
+      {name}
+    </Text>
+  );
+}

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -1,122 +0,0 @@
-import { alias } from "@blitzkit/core";
-import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import { api } from "../../api/dynamic";
-import { useLocale } from "../../hooks/useLocale";
-import { Duel } from "../../stores/duel";
-
-const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
-  await Promise.all([api.game(), api.consumables(), api.provisions()]);
-
-export function GameModeSection() {
-  const { unwrap, strings } = useLocale();
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const roles = Object.entries(tank.roles);
-
-  if (roles.length === 0) return null;
-
-  return (
-    <Flex direction="column" gap="4" align="center">
-      <Heading size="6">
-        {strings.website.tools.tankopedia.game_modes.title}
-      </Heading>
-
-      <Flex justify="center" gap="4" wrap="wrap" px="4">
-        {roles.map(([id, value]) => {
-          const gameMode = gameDefinitions.gameModes[id];
-
-          return (
-            <Flex
-              key={id}
-              width="16rem"
-              height="20rem"
-              overflow="hidden"
-              direction="column"
-              style={{
-                borderRadius: "var(--radius-3)",
-                background: `url(${alias(
-                  "api",
-                  `/gamemodes/${id}/banner.webp`,
-                )})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-              }}
-            >
-              <Box
-                flexGrow="1"
-                style={{
-                  background: `url(${alias(
-                    "api",
-                    `/gamemodes/${id}/banner.webp`,
-                  )})`,
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                }}
-              />
-
-              <Flex
-                p="3"
-                direction="column"
-                height="98px"
-                flexShrink="0"
-                style={{
-                  backdropFilter: "blur(4rem)",
-                  WebkitBackdropFilter: "blur(4rem)",
-                }}
-                align="center"
-                justify="center"
-              >
-                <Text size="4" weight="bold">
-                  {unwrap(gameMode.name!)}
-                </Text>
-
-                <Flex direction="column">
-                  {gameDefinitions.roles[value].provisions.map((id) => {
-                    const provisions = provisionDefinitions.provisions[id];
-
-                    return (
-                      <Text color="gray" wrap="nowrap" key={id}>
-                        <Flex align="center" gap="1">
-                          <img
-                            style={{
-                              width: "1.5em",
-                              height: "1.5em",
-                              objectFit: "contain",
-                            }}
-                            src={alias("api", `/icons/provisions/${id}.webp`)}
-                            alt={unwrap(provisions.name!)}
-                          />
-                          {unwrap(provisions.name!)}
-                        </Flex>
-                      </Text>
-                    );
-                  })}
-
-                  {gameDefinitions.roles[value].consumables.map((id) => {
-                    const consumable = consumableDefinitions.consumables[id];
-
-                    return (
-                      <Text color="gray" wrap="nowrap" key={id}>
-                        <Flex align="center" gap="1">
-                          <img
-                            style={{
-                              width: "1.5em",
-                              height: "1.5em",
-                              objectFit: "contain",
-                            }}
-                            src={alias("api", `/icons/consumables/${id}.webp`)}
-                            alt={unwrap(consumable.name!)}
-                          />
-                          {unwrap(consumable.name!)}
-                        </Flex>
-                      </Text>
-                    );
-                  })}
-                </Flex>
-              </Flex>
-            </Flex>
-          );
-        })}
-      </Flex>
-    </Flex>
-  );
-}

packages/website/src/components/TankopediaCharacteristics/index.module.css

@@ -75,7 +75,7 @@
           gap: var(--space-2);
 
           &[data-indent="true"] {
-            padding-left: var(--space-5);
+            padding-left: var(--space-4);
           }
 
           .value {

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

@@ -173,8 +173,15 @@ interface ProvisionEntryProps {
 
 function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
   const isSelected = useProvision("protagonist", id);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const selectedCount = Tankopedia.use(
+    (state) => state.protagonist.provisions.length,
+  );
+
   const unwrap = useUnwrapper();
 
+  const disabled = !isSelected && selectedCount >= tank.max_provisions;
+
   return (
     <Tooltip tooltip={unwrap(provision.name)}>
       <IconButton
@@ -183,11 +190,16 @@ function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
         variant={isSelected ? "surface" : "soft"}
         color={isSelected ? undefined : "gray"}
         className={styles.consumable}
+        disabled={disabled}
         onClick={() => {
           Tankopedia.mutate((draft) => {
             const index = draft.protagonist.provisions.indexOf(id);
 
             if (index === -1) {
+              if (draft.protagonist.provisions.length === tank.max_provisions) {
+                return;
+              }
+
               draft.protagonist.provisions.push(id);
             } else {
               draft.protagonist.provisions.splice(index, 1);
@@ -252,11 +264,18 @@ interface ConsumableProps {
 }
 
 function ConsumableEntry({ id, consumable }: ConsumableProps) {
+  const tank = useDuel("protagonist", DuelModule.Tank);
   const isSelected = Tankopedia.use((state) =>
     state.protagonist.consumables.includes(id),
   );
+  const selectedCount = Tankopedia.use(
+    (state) => state.protagonist.consumables.length,
+  );
+
   const unwrap = useUnwrapper();
 
+  const disabled = !isSelected && selectedCount >= tank.max_consumables;
+
   return (
     <div className={styles["consumable-wrapper"]}>
       <Tooltip tooltip={unwrap(consumable.name)}>
@@ -265,11 +284,18 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) {
           variant={isSelected ? "surface" : "soft"}
           color={isSelected ? undefined : "gray"}
           className={styles.consumable}
+          disabled={disabled}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               const index = draft.protagonist.consumables.indexOf(id);
 
               if (index === -1) {
+                if (
+                  draft.protagonist.consumables.length === tank.max_consumables
+                ) {
+                  return;
+                }
+
                 draft.protagonist.consumables.push(id);
               } else {
                 draft.protagonist.consumables.splice(index, 1);

packages/website/src/config/characteristics.ts

@@ -316,7 +316,17 @@ export const characteristics = {
     },
   },
 
-  // penetration_loss_after_ricochet: unavailable,
+  penetration_loss_after_ricochet: {
+    type: CharacteristicType.Number,
+
+    should_render({ shell }) {
+      return !isExplosive(shell.type);
+    },
+
+    compute() {
+      return 25;
+    },
+  },
 
   shell_velocity: {
     type: CharacteristicType.Number,
@@ -458,11 +468,7 @@ export const characteristics = {
         coefficient *= effect.shotDispersionAngleFactor;
       });
 
-      return (
+      return gun.dispersion_base * degressive("gunner") * coefficient;
-        gun.dispersion_base *
-        degressive("gunner") *
-        coefficient
-      );
     },
   },
 

packages/website/src/config/characteristicsGroups.ts

@@ -110,8 +110,16 @@ export const characteristicsGroups: CharacteristicsGroup[] = [
     // render: CharacteristicsGroupRender.Statistical,
     order: [
       { name: "penetration", units: "mm" },
-      { name: "penetration_loss_by_distance", units: "percentage" },
+      {
-      { name: "penetration_loss_after_ricochet" },
+        name: "penetration_loss_by_distance",
+        units: "percentage",
+        indent: true,
+      },
+      {
+        name: "penetration_loss_after_ricochet",
+        units: "percentage",
+        indent: true,
+      },
       { name: "shell_velocity", units: "m_s" },
       { name: "shell_range", units: "m" },
       { name: "shell_capacity" },

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.tsx

@@ -3,6 +3,7 @@ import { api } from "../../../../../api/dynamic";
 import type { ThicknessRange } from "../../../../../components/StaticArmor";
 import { TankopediaCharacteristics } from "../../../../../components/TankopediaCharacteristics";
 import { TankopediaLoadout } from "../../../../../components/TankopediaLoadout";
+import { GameModeSection } from "../../../../../components/GameModeSection";
 import { defaultEqualizer } from "../../../../../config/equalizer";
 import { withErrorWrapper } from "../../../../../hocs/withErrorWrapper";
 import { withLocale } from "../../../../../hocs/withLocale";
@@ -58,6 +59,7 @@ export const Page = withErrorWrapper(
         <div className={styles.sandbox}>
           {/* {!skeleton && <TankopediaSandbox thicknessRange={thicknessRange} />} */}
           <TankopediaCharacteristics characteristics={characteristics} />
+          <GameModeSection />
         </div>
       </div>
     );