From 76dc9f0742aa60eb77d1088a1f3b57b171c1d14b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:46:37 -0500
Subject: [PATCH] feat: node rendering

Co-authored-by: Copilot <copilot@github.com>
---
 ...sticsOrder.ts => characteristicsOrder.tsx} |  9 ++++++-
 .../src/hooks/useCharacteristicRenderer.ts    |  4 +--
 packages/website-ue/src/icons/Vintage.tsx     | 26 +++++++++++++++++++
 .../pages/[...locale]/tanks/[slug]/_index.tsx |  6 -----
 4 files changed, 36 insertions(+), 9 deletions(-)
 rename packages/website-ue/src/core/tankopedia/{characteristicsOrder.ts => characteristicsOrder.tsx} (94%)
 create mode 100644 packages/website-ue/src/icons/Vintage.tsx

diff --git a/packages/website-ue/src/core/tankopedia/characteristicsOrder.ts b/packages/website-ue/src/core/tankopedia/characteristicsOrder.tsx
similarity index 94%
rename from packages/website-ue/src/core/tankopedia/characteristicsOrder.ts
rename to packages/website-ue/src/core/tankopedia/characteristicsOrder.tsx
index 5dfaee313..fc8175c79 100644
--- a/packages/website-ue/src/core/tankopedia/characteristicsOrder.ts
+++ b/packages/website-ue/src/core/tankopedia/characteristicsOrder.tsx
@@ -4,6 +4,8 @@ import {
   TankClass,
   TankType,
 } from "@protos/game/proto/legacy/blitz_static_tank_component";
+import type { ReactNode } from "react";
+import { VintageIcon } from "../../icons/Vintage";
 import {
   GunType,
   type CharacteristicName,
@@ -24,7 +26,7 @@ export interface CharacteristicRenderConfig {
     output: CharacteristicOutput;
     strings: Strings;
     gameStrings: Record<string, string>;
-  }) => string;
+  }) => ReactNode;
 }
 
 type CharacteristicsOrder = {
@@ -52,6 +54,11 @@ export const characteristicsOrder: CharacteristicsOrder = [
         name: "tier",
         render({ output, strings }) {
           const [, name] = (output as string).split(".");
+
+          if (name == "vintage") {
+            return <VintageIcon />;
+          }
+
           return strings.tiers[name as keyof typeof strings.tiers];
         },
       },
diff --git a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts b/packages/website-ue/src/hooks/useCharacteristicRenderer.ts
index c41d09893..436627a94 100644
--- a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts
+++ b/packages/website-ue/src/hooks/useCharacteristicRenderer.ts
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, type ReactNode } from "react";
 import type { CharacteristicOutput } from "../core/tankopedia/characteristics";
 import {
   characteristicsOrder,
@@ -28,7 +28,7 @@ export function useCharacteristicRenderer() {
   function renderCharacteristic(
     characteristic: CharacteristicOutput,
     config: CharacteristicRenderConfig,
-  ): string | null {
+  ): ReactNode {
     if (characteristic === null) return null;
 
     if (config.render)
diff --git a/packages/website-ue/src/icons/Vintage.tsx b/packages/website-ue/src/icons/Vintage.tsx
new file mode 100644
index 000000000..010f839da
--- /dev/null
+++ b/packages/website-ue/src/icons/Vintage.tsx
@@ -0,0 +1,26 @@
+import type { ComponentProps } from "react";
+
+export function VintageIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_937_310)">
+        <path
+          d="M9.49367 14.2405L7.59494 15L6.45377 12.2612C6.02812 12.4529 5.60174 12.6027 5.12658 12.7215C4.36709 12.9114 4.28484 11.9701 4.74684 11.7722C5.18709 11.5835 5.60652 11.4156 6.02581 11.2341L2.8481 3.60759L2.08861 3.98734C1.99508 4.94119 1.59566 5.15783 0.759494 5.50633L0 3.03797L4.36709 1.13924L7.92912 10.2422C8.18694 10.0778 8.4541 9.8936 8.73418 9.68354C8.86727 9.58372 9.00334 9.48053 9.14147 9.3742L5.6962 0.56962L7.02532 0L10.3206 8.42121C12.0297 6.96104 13.6709 5.15033 13.6709 3.41772C13.6709 2.65823 12.9894 1.75812 12.1519 1.70886C12.1519 2.46835 11.5823 3.60759 10.6329 3.60759C9.84468 3.60759 9.13001 2.98135 9.11392 2.08861C9.09389 0.976535 10.1167 0.189873 11.3924 0.189873C14.0506 0.189873 15 1.70886 15 3.60759C15 5.74438 13.1597 7.75137 10.7611 9.54708L12.1519 13.1013L10.8228 13.6709L9.54669 10.4098C9.34119 10.5489 9.13342 10.6866 8.92405 10.8228C8.70862 10.9629 8.50508 11.0944 8.31083 11.2177L9.49367 14.2405Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_937_310">
+          <rect width="15" height="15" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
index 23c05944d..75a68b965 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
@@ -149,12 +149,6 @@ function Content() {
 
       <h2>characteristics</h2>
 
-      {/* {Object.entries(characteristics).map(([key, value]) => (
-        <p>
-          {key}: {value}
-        </p>
-      ))} */}
-
       {characteristicsOrder.map((group) => {
         return (
           <>