feat: add match3d 3d runtime experiment

src/components/match3d-runtime/match3dVisualAssets.tsx

@@ -0,0 +1,267 @@
+import { MATCH3D_VISUAL_SEEDS } from '../../services/match3d-runtime';
+
+type Match3DVisualSeed = (typeof MATCH3D_VISUAL_SEEDS)[number];
+
+export type Match3DGeometryShape =
+  | 'circle'
+  | 'triangle'
+  | 'diamond'
+  | 'square'
+  | 'star'
+  | 'hexagon'
+  | 'capsule'
+  | 'heart'
+  | 'trapezoid'
+  | 'parallelogram';
+
+export type Match3DGeometryAsset = {
+  shape: Match3DGeometryShape;
+  fill: string;
+  stroke: string;
+};
+
+const MATCH3D_GEOMETRY_ASSETS: Record<string, Match3DGeometryAsset> = {
+  'watermelon-green': {
+    shape: 'circle',
+    fill: '#16a34a',
+    stroke: '#14532d',
+  },
+  'apple-red': {
+    shape: 'heart',
+    fill: '#ef4444',
+    stroke: '#991b1b',
+  },
+  'banana-yellow': {
+    shape: 'parallelogram',
+    fill: '#facc15',
+    stroke: '#a16207',
+  },
+  'grape-purple': {
+    shape: 'star',
+    fill: '#8b5cf6',
+    stroke: '#5b21b6',
+  },
+  'melon-green': {
+    shape: 'hexagon',
+    fill: '#84cc16',
+    stroke: '#3f6212',
+  },
+  'berry-blue': {
+    shape: 'diamond',
+    fill: '#2563eb',
+    stroke: '#1e3a8a',
+  },
+  'peach-pink': {
+    shape: 'trapezoid',
+    fill: '#fb7185',
+    stroke: '#be123c',
+  },
+  'plum-indigo': {
+    shape: 'capsule',
+    fill: '#4f46e5',
+    stroke: '#312e81',
+  },
+  'lime-lime': {
+    shape: 'square',
+    fill: '#65a30d',
+    stroke: '#365314',
+  },
+  'orange-orange': {
+    shape: 'triangle',
+    fill: '#f97316',
+    stroke: '#9a3412',
+  },
+  'pear-cyan': {
+    shape: 'parallelogram',
+    fill: '#06b6d4',
+    stroke: '#155e75',
+  },
+  red_circle: {
+    shape: 'circle',
+    fill: '#ef4444',
+    stroke: '#991b1b',
+  },
+  yellow_triangle: {
+    shape: 'triangle',
+    fill: '#facc15',
+    stroke: '#a16207',
+  },
+  purple_diamond: {
+    shape: 'diamond',
+    fill: '#7c3aed',
+    stroke: '#4c1d95',
+  },
+  green_square: {
+    shape: 'square',
+    fill: '#16a34a',
+    stroke: '#14532d',
+  },
+  blue_star: {
+    shape: 'star',
+    fill: '#0ea5e9',
+    stroke: '#075985',
+  },
+  orange_hexagon: {
+    shape: 'hexagon',
+    fill: '#f97316',
+    stroke: '#9a3412',
+  },
+  cyan_capsule: {
+    shape: 'capsule',
+    fill: '#06b6d4',
+    stroke: '#155e75',
+  },
+  pink_heart: {
+    shape: 'heart',
+    fill: '#ec4899',
+    stroke: '#9d174d',
+  },
+  lime_leaf: {
+    shape: 'trapezoid',
+    fill: '#84cc16',
+    stroke: '#3f6212',
+  },
+  white_moon: {
+    shape: 'parallelogram',
+    fill: '#e2e8f0',
+    stroke: '#64748b',
+  },
+};
+
+const MATCH3D_UNKNOWN_GEOMETRY_ASSETS: Match3DGeometryAsset[] = [
+  { shape: 'circle', fill: '#f43f5e', stroke: '#9f1239' },
+  { shape: 'triangle', fill: '#f59e0b', stroke: '#92400e' },
+  { shape: 'diamond', fill: '#8b5cf6', stroke: '#5b21b6' },
+  { shape: 'star', fill: '#10b981', stroke: '#065f46' },
+  { shape: 'trapezoid', fill: '#0ea5e9', stroke: '#075985' },
+  { shape: 'parallelogram', fill: '#14b8a6', stroke: '#115e59' },
+];
+
+const MATCH3D_UNKNOWN_VISUAL_SEEDS: Match3DVisualSeed[] = [
+  {
+    itemTypeId: 'unknown-rose',
+    visualKey: 'unknown-rose',
+    colorClassName: 'from-rose-400 to-red-600',
+    label: '一',
+  },
+  {
+    itemTypeId: 'unknown-amber',
+    visualKey: 'unknown-amber',
+    colorClassName: 'from-yellow-300 to-amber-500',
+    label: '二',
+  },
+  {
+    itemTypeId: 'unknown-violet',
+    visualKey: 'unknown-violet',
+    colorClassName: 'from-violet-400 to-purple-700',
+    label: '三',
+  },
+  {
+    itemTypeId: 'unknown-emerald',
+    visualKey: 'unknown-emerald',
+    colorClassName: 'from-emerald-300 to-green-600',
+    label: '四',
+  },
+  {
+    itemTypeId: 'unknown-sky',
+    visualKey: 'unknown-sky',
+    colorClassName: 'from-sky-300 to-blue-600',
+    label: '五',
+  },
+];
+
+export function hashVisualKey(visualKey: string) {
+  let hash = 0;
+  for (const char of visualKey) {
+    hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+  }
+  return hash;
+}
+
+export function resolveVisualSeed(visualKey: string) {
+  const knownSeed = MATCH3D_VISUAL_SEEDS.find(
+    (seed) => seed.visualKey === visualKey,
+  );
+  if (knownSeed) {
+    return knownSeed;
+  }
+  return MATCH3D_UNKNOWN_VISUAL_SEEDS[
+    hashVisualKey(visualKey) % MATCH3D_UNKNOWN_VISUAL_SEEDS.length
+  ]!;
+}
+
+export function resolveGeometryAsset(visualKey: string): Match3DGeometryAsset {
+  return (
+    MATCH3D_GEOMETRY_ASSETS[visualKey] ??
+    MATCH3D_UNKNOWN_GEOMETRY_ASSETS[
+      hashVisualKey(visualKey) % MATCH3D_UNKNOWN_GEOMETRY_ASSETS.length
+    ]!
+  );
+}
+
+function renderGeometryShape(asset: Match3DGeometryAsset) {
+  const shapeProps = {
+    fill: asset.fill,
+    stroke: asset.stroke,
+    strokeWidth: 6,
+    strokeLinejoin: 'round' as const,
+  };
+
+  switch (asset.shape) {
+    case 'circle':
+      return <circle cx="50" cy="50" r="36" {...shapeProps} />;
+    case 'triangle':
+      return <path d="M50 12 L89 84 H11Z" {...shapeProps} />;
+    case 'diamond':
+      return <path d="M50 9 L91 50 L50 91 L9 50Z" {...shapeProps} />;
+    case 'square':
+      return <rect x="16" y="16" width="68" height="68" rx="8" {...shapeProps} />;
+    case 'star':
+      return (
+        <path
+          d="M50 8 L61 36 L91 38 L68 58 L76 88 L50 72 L24 88 L32 58 L9 38 L39 36Z"
+          {...shapeProps}
+        />
+      );
+    case 'hexagon':
+      return <path d="M28 12 H72 L94 50 L72 88 H28 L6 50Z" {...shapeProps} />;
+    case 'capsule':
+      return <rect x="10" y="28" width="80" height="44" rx="22" {...shapeProps} />;
+    case 'heart':
+      return (
+        <path
+          d="M50 86 C25 66 13 52 17 34 C20 18 40 16 50 31 C60 16 80 18 83 34 C87 52 75 66 50 86Z"
+          {...shapeProps}
+        />
+      );
+    case 'trapezoid':
+      return <path d="M27 18 H73 L90 82 H10Z" {...shapeProps} />;
+    case 'parallelogram':
+      return <path d="M34 16 H88 L66 84 H12Z" {...shapeProps} />;
+    default:
+      return <circle cx="50" cy="50" r="36" {...shapeProps} />;
+  }
+}
+
+export function Match3DVisualIcon({
+  visualKey,
+  className = '',
+}: {
+  visualKey: string;
+  className?: string;
+}) {
+  const asset = resolveGeometryAsset(visualKey);
+
+  return (
+    <svg
+      className={`pointer-events-none h-full w-full drop-shadow-[0_5px_7px_rgba(15,23,42,0.36)] ${className}`}
+      viewBox="0 0 100 100"
+      aria-hidden
+      focusable={false}
+      data-testid={`match3d-visual-${visualKey}`}
+      data-shape={asset.shape}
+    >
+      {renderGeometryShape(asset)}
+    </svg>
+  );
+}