Merge pull request #228 from karelpak1/feat-dev-name

Feat: dev name

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -1,7 +1,6 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
 import {
   Card,
-  Code,
   Flex,
   IconButton,
   Text,
@@ -14,6 +13,7 @@ import { resolveArmorIndex } from "../../../core/blitzkit/resolveArmorIndex";
 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";
 
@@ -60,7 +60,15 @@ export function ArmorPlateDisplay() {
             {developerMode && (
               <>
                 <Text mt="2" color="gray" size="2">
-                  <b>DEV:</b> <Code>{highlightArmor.name}</Code>
+                  <b>DEV:</b>{" "}
+                  <CopyableCode
+                    copy={highlightArmor.name}
+                    variant="soft"
+                    highContrast
+                    color="gray"
+                  >
+                    {highlightArmor.name}
+                  </CopyableCode>
                 </Text>
               </>
             )}

packages/website/src/components/CopyableCode.tsx

@@ -0,0 +1,40 @@
+import { Code, Tooltip, type CodeProps } from "@radix-ui/themes";
+import { useState } from "react";
+import { useLocale } from "../hooks/useLocale";
+
+export interface CopyableCodeProps extends CodeProps {
+  copy?: string;
+}
+
+export function CopyableCode({
+  copy,
+  onClick,
+  onPointerLeave,
+  style,
+  children,
+  ...props
+}: CopyableCodeProps) {
+  const [copied, setCopied] = useState(false);
+  const { strings } = useLocale();
+
+  return (
+    <Tooltip open={copied} content={strings.website.common.copy_button.copied}>
+      <Code
+        {...props}
+        style={{ ...style, cursor: "pointer" }}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!copy) return;
+          navigator.clipboard.writeText(copy);
+          setCopied(true);
+        }}
+        onPointerLeave={(event) => {
+          onPointerLeave?.(event);
+          setCopied(false);
+        }}
+      >
+        {children}
+      </Code>
+    </Tooltip>
+  );
+}

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -4,12 +4,13 @@ import {
   TankType,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import { Box, Code, Flex } from '@radix-ui/themes';
+import { Box, Flex } from '@radix-ui/themes';
 import { Var } from '../../../core/radix/var';
 import { useLocale } from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 import { Duel } from '../../../stores/duel';
 import { classIcons } from '../../ClassIcon';
+import { CopyableCode } from '../../CopyableCode';
 import { Listing } from './components/Listing';
 
 const NATIONAL_BANNER_POSITION_OVERRIDES: Record<string, string> = {
@@ -101,7 +102,28 @@ export function MetaSection() {
                     <Listing
                       label={strings.website.tools.tankopedia.meta.dev_id}
                     >
-                      <Code>{protagonist.id}</Code>
+                      <CopyableCode
+                        copy={`${protagonist.id}`}
+                        variant="soft"
+                        highContrast
+                        color="gray"
+                      >
+                        {protagonist.id}
+                      </CopyableCode>
+                    </Listing>
+                  )}
+                  {developerMode && (
+                    <Listing
+                      label={strings.website.tools.tankopedia.meta.dev_name}
+                    >
+                      <CopyableCode
+                        copy={devName}
+                        variant="soft"
+                        highContrast
+                        color="gray"
+                      >
+                        {protagonist.dev_name}
+                      </CopyableCode>
                     </Listing>
                   )}
                   {protagonist.type === TankType.PREMIUM && (