feat: node rendering

Co-authored-by: Copilot <[email protected]>

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];
         },
       },

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)

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>
+  );
+}

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 (
           <>