From 99c95a4c155a69a634cbd902496b604d91bb4510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 3 Apr 2026 14:37:45 -0500
Subject: [PATCH] fix: use code

---
 .../Armor/components/ArmorPlateDisplay.tsx    | 298 +++++++++---------
 1 file changed, 154 insertions(+), 144 deletions(-)

diff --git a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
index ab7a7814e..ec8b103e5 100644
--- a/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
+++ b/packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx
@@ -1,13 +1,20 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
-import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes";
+import {
+  Card,
+  Code,
+  Flex,
+  IconButton,
+  Text,
+  TextField,
+} from "@radix-ui/themes";
 import { Html } from "@react-three/drei";
 import { useRef } from "react";
 import { radToDeg } from "three/src/math/MathUtils.js";
 import { resolveArmorIndex } from "../../../core/blitzkit/resolveArmorIndex";
+import { LocaleProvider, useLocale } from "../../../hooks/useLocale";
 import { App } from "../../../stores/app";
 import { Duel } from "../../../stores/duel";
 import { Tankopedia } from "../../../stores/tankopedia";
-import { CopyableCode } from "../../CopyableCode";
 import { layerTypeNames } from "./ShotDisplayCard";
 import { ArmorType } from "./SpacedArmorScene";
 
@@ -15,6 +22,7 @@ export function ArmorPlateDisplay() {
   const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const input = useRef<HTMLInputElement>(null);
+  const { locale } = useLocale();
 
   if (highlightArmor === undefined) return null;
 
@@ -24,162 +32,164 @@ export function ArmorPlateDisplay() {
         center
         style={{ pointerEvents: highlightArmor.editingPlate ? "auto" : "none" }}
       >
-        <Card
-          variant="classic"
-          mb="4"
-          style={{
-            whiteSpace: "nowrap",
-            color: highlightArmor.color,
-            transform: "translateY(-50%)",
-          }}
-        >
-          <Flex direction="column">
-            <Text weight="bold">
-              {layerTypeNames[highlightArmor.type]}{" "}
-              {highlightArmor.thickness.toFixed(0)}
-              <Text size="1" weight="regular">
-                mm
-              </Text>
-            </Text>
-
-            {highlightArmor.type !== ArmorType.External && (
-              <Text size="2" color="gray">
-                {highlightArmor.thicknessAngled.toFixed(0)}
-                <Text size="1">
-                  mm {radToDeg(highlightArmor.angle).toFixed(0)}°
+        <LocaleProvider locale={locale}>
+          <Card
+            variant="classic"
+            mb="4"
+            style={{
+              whiteSpace: "nowrap",
+              color: highlightArmor.color,
+              transform: "translateY(-50%)",
+            }}
+          >
+            <Flex direction="column">
+              <Text weight="bold">
+                {layerTypeNames[highlightArmor.type]}{" "}
+                {highlightArmor.thickness.toFixed(0)}
+                <Text size="1" weight="regular">
+                  mm
                 </Text>
               </Text>
-            )}
 
-            {developerMode && (
-              <>
-                <Text mt="2" color="gray" size="2">
-                  <b>DEV:</b>{" "}
-                  <CopyableCode
-                    copy={highlightArmor.name}
-                    variant="soft"
-                    highContrast
-                    color="gray"
-                  >
-                    {highlightArmor.name}
-                  </CopyableCode>
+              {highlightArmor.type !== ArmorType.External && (
+                <Text size="2" color="gray">
+                  {highlightArmor.thicknessAngled.toFixed(0)}
+                  <Text size="1">
+                    mm {radToDeg(highlightArmor.angle).toFixed(0)}°
+                  </Text>
                 </Text>
-              </>
-            )}
+              )}
 
-            {highlightArmor.editingPlate && (
-              <Flex gap="2" align="center">
-                <TextField.Root
-                  variant="classic"
-                  style={{ width: 96 }}
-                  mt="2"
-                  ref={input}
-                  key={highlightArmor.name}
-                  type="number"
-                  autoFocus
-                  onFocus={(event) => event.target.select()}
-                  onKeyDown={(event) => {
-                    if (!highlightArmor.editingPlate) return;
+              {developerMode && (
+                <>
+                  <Text mt="2" color="gray" size="2">
+                    <b>DEV:</b>{" "}
+                    <Code variant="soft" highContrast color="gray">
+                      {highlightArmor.name}
+                    </Code>
+                  </Text>
+                </>
+              )}
 
-                    const index = resolveArmorIndex(highlightArmor.name);
-
-                    if (index === undefined) return;
-
-                    const thickness = event.currentTarget.valueAsNumber;
-
-                    if (isNaN(thickness) || thickness < 0) return;
-
-                    if (event.key === "Enter") {
-                      input.current?.blur();
-
-                      Tankopedia.mutate((draft) => {
-                        draft.highlightArmor = undefined;
-                        const { protagonist } = Duel.state;
-                        const tank = draft.model;
-                        const turret = tank.turrets[protagonist.turret.id];
-                        const gun = turret.guns[protagonist.gun.id];
-                        const track = tank.tracks[protagonist.track.id];
-
-                        if (highlightArmor.name.startsWith("hull_")) {
-                          tank.armor!.thickness[index] = thickness;
-                        } else if (highlightArmor.name.startsWith("turret_")) {
-                          turret.armor!.thickness[index] = thickness;
-                        } else if (highlightArmor.name.startsWith("gun_")) {
-                          if (highlightArmor.name.includes("_armor_")) {
-                            gun.armor!.thickness[index] = thickness;
-                          } else {
-                            gun.thickness = thickness;
-                          }
-                        } else if (highlightArmor.name.startsWith("chassis_")) {
-                          track.thickness = thickness;
-                        }
-                      });
-                    } else if (event.key === "Escape") {
-                      input.current?.blur();
-                      Tankopedia.mutate((draft) => {
-                        draft.highlightArmor = undefined;
-                      });
-                    }
-                  }}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                  }}
-                  defaultValue={highlightArmor.thickness.toFixed(0)}
-                >
-                  <TextField.Slot side="right">mm</TextField.Slot>
-                </TextField.Root>
-
-                <IconButton
-                  mt="2"
-                  color="red"
-                  onClick={() => {
-                    Tankopedia.mutate((draft) => {
+              {highlightArmor.editingPlate && (
+                <Flex gap="2" align="center">
+                  <TextField.Root
+                    variant="classic"
+                    style={{ width: 96 }}
+                    mt="2"
+                    ref={input}
+                    key={highlightArmor.name}
+                    type="number"
+                    autoFocus
+                    onFocus={(event) => event.target.select()}
+                    onKeyDown={(event) => {
                       if (!highlightArmor.editingPlate) return;
 
                       const index = resolveArmorIndex(highlightArmor.name);
 
                       if (index === undefined) return;
 
-                      draft.highlightArmor = undefined;
-                      const initialState = Tankopedia.initial;
-                      const { protagonist } = Duel.state;
-                      const tank = draft.model;
-                      const initialTank = initialState.model;
-                      const turret = tank.turrets[protagonist.turret.id];
-                      const initialTurret =
-                        initialTank.turrets[protagonist.turret.id];
-                      const gun = turret.guns[protagonist.gun.id];
-                      const initialGun = initialTurret.guns[protagonist.gun.id];
-                      const track = tank.tracks[protagonist.track.id];
-                      const initialTrack =
-                        initialTank.tracks[protagonist.track.id];
+                      const thickness = event.currentTarget.valueAsNumber;
 
-                      if (highlightArmor.name.startsWith("hull_")) {
-                        tank.armor!.thickness[index] =
-                          initialTank.armor!.thickness[index];
-                      } else if (highlightArmor.name.startsWith("turret_")) {
-                        turret.armor!.thickness[index] =
-                          initialTurret.armor!.thickness[index];
-                      } else if (highlightArmor.name.startsWith("gun_")) {
-                        if (highlightArmor.name.includes("_armor_")) {
-                          gun.armor!.thickness[index] =
-                            initialGun.armor!.thickness[index];
-                        } else {
-                          gun.thickness = initialGun.thickness;
-                        }
-                      } else if (highlightArmor.name.startsWith("chassis_")) {
-                        track.thickness = initialTrack.thickness;
+                      if (isNaN(thickness) || thickness < 0) return;
+
+                      if (event.key === "Enter") {
+                        input.current?.blur();
+
+                        Tankopedia.mutate((draft) => {
+                          draft.highlightArmor = undefined;
+                          const { protagonist } = Duel.state;
+                          const tank = draft.model;
+                          const turret = tank.turrets[protagonist.turret.id];
+                          const gun = turret.guns[protagonist.gun.id];
+                          const track = tank.tracks[protagonist.track.id];
+
+                          if (highlightArmor.name.startsWith("hull_")) {
+                            tank.armor!.thickness[index] = thickness;
+                          } else if (
+                            highlightArmor.name.startsWith("turret_")
+                          ) {
+                            turret.armor!.thickness[index] = thickness;
+                          } else if (highlightArmor.name.startsWith("gun_")) {
+                            if (highlightArmor.name.includes("_armor_")) {
+                              gun.armor!.thickness[index] = thickness;
+                            } else {
+                              gun.thickness = thickness;
+                            }
+                          } else if (
+                            highlightArmor.name.startsWith("chassis_")
+                          ) {
+                            track.thickness = thickness;
+                          }
+                        });
+                      } else if (event.key === "Escape") {
+                        input.current?.blur();
+                        Tankopedia.mutate((draft) => {
+                          draft.highlightArmor = undefined;
+                        });
                       }
-                    });
-                  }}
-                >
-                  <ReloadIcon />
-                </IconButton>
-              </Flex>
-            )}
-          </Flex>
-        </Card>
+                    }}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                    }}
+                    defaultValue={highlightArmor.thickness.toFixed(0)}
+                  >
+                    <TextField.Slot side="right">mm</TextField.Slot>
+                  </TextField.Root>
+
+                  <IconButton
+                    mt="2"
+                    color="red"
+                    onClick={() => {
+                      Tankopedia.mutate((draft) => {
+                        if (!highlightArmor.editingPlate) return;
+
+                        const index = resolveArmorIndex(highlightArmor.name);
+
+                        if (index === undefined) return;
+
+                        draft.highlightArmor = undefined;
+                        const initialState = Tankopedia.initial;
+                        const { protagonist } = Duel.state;
+                        const tank = draft.model;
+                        const initialTank = initialState.model;
+                        const turret = tank.turrets[protagonist.turret.id];
+                        const initialTurret =
+                          initialTank.turrets[protagonist.turret.id];
+                        const gun = turret.guns[protagonist.gun.id];
+                        const initialGun =
+                          initialTurret.guns[protagonist.gun.id];
+                        const track = tank.tracks[protagonist.track.id];
+                        const initialTrack =
+                          initialTank.tracks[protagonist.track.id];
+
+                        if (highlightArmor.name.startsWith("hull_")) {
+                          tank.armor!.thickness[index] =
+                            initialTank.armor!.thickness[index];
+                        } else if (highlightArmor.name.startsWith("turret_")) {
+                          turret.armor!.thickness[index] =
+                            initialTurret.armor!.thickness[index];
+                        } else if (highlightArmor.name.startsWith("gun_")) {
+                          if (highlightArmor.name.includes("_armor_")) {
+                            gun.armor!.thickness[index] =
+                              initialGun.armor!.thickness[index];
+                          } else {
+                            gun.thickness = initialGun.thickness;
+                          }
+                        } else if (highlightArmor.name.startsWith("chassis_")) {
+                          track.thickness = initialTrack.thickness;
+                        }
+                      });
+                    }}
+                  >
+                    <ReloadIcon />
+                  </IconButton>
+                </Flex>
+              )}
+            </Flex>
+          </Card>
+        </LocaleProvider>
       </Html>
     </group>
   );