feat: dragging

packages/website/src/components/TierList/Tile.tsx

@@ -0,0 +1,64 @@
+import type { TankDefinition } from '@blitzkit/core';
+import {
+  useCallback,
+  useRef,
+  type PointerEvent as ReactPointerEvent,
+} from 'react';
+import { TankCard } from '../TankCard';
+
+interface TierListTileProps {
+  tank: TankDefinition;
+}
+
+export function TierListTile({ tank }: TierListTileProps) {
+  const card = useRef<HTMLDivElement>(null);
+  const lastPosition = useRef({ x: 0, y: 0 });
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLSpanElement>) => {
+      if (!card.current) return;
+
+      const rect = card.current.getBoundingClientRect();
+
+      card.current.style.position = 'fixed';
+      card.current.style.cursor = 'grabbing';
+      card.current.style.zIndex = '1';
+      card.current.style.left = `${rect.left}px`;
+      card.current.style.top = `${rect.top}px`;
+
+      lastPosition.current = { x: event.clientX, y: event.clientY };
+
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+    },
+    [],
+  );
+  const handlePointerMove = useCallback((event: PointerEvent) => {
+    if (!card.current) return;
+
+    const rect = card.current.getBoundingClientRect();
+    const dx = event.clientX - lastPosition.current.x;
+    const dy = event.clientY - lastPosition.current.y;
+
+    card.current.style.left = `${rect.left + dx}px`;
+    card.current.style.top = `${rect.top + dy}px`;
+
+    lastPosition.current = { x: event.clientX, y: event.clientY };
+  }, []);
+  const handlePointerUp = useCallback(() => {
+    if (!card.current) return;
+
+    card.current.style.position = 'static';
+    card.current.style.zIndex = 'unset';
+    card.current.style.cursor = 'grab';
+  }, []);
+
+  return (
+    <TankCard
+      ref={card}
+      noLink
+      tank={tank}
+      style={{ cursor: 'grab' }}
+      onPointerDown={handlePointerDown}
+    />
+  );
+}

packages/website/src/components/TierList/Tiles.tsx

@@ -1,6 +1,6 @@
 import { fetchTankDefinitions } from '@blitzkit/core';
-import { TankCard } from '../TankCard';
 import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper';
+import { TierListTile } from './Tile';
 
 const tankDefinitions = await fetchTankDefinitions();
 const tanks = Object.values(tankDefinitions.tanks);
@@ -9,7 +9,7 @@ export function TierListTiles() {
   return (
     <TankCardWrapper>
       {tanks.map((tank) => (
-        <TankCard tank={tank} />
+        <TierListTile key={tank.id} tank={tank} />
       ))}
     </TankCardWrapper>
   );