21 lines
1.3 KiB
Markdown
21 lines
1.3 KiB
Markdown
# Implement dnd-kit for Game View
|
|
|
|
**Status:** Planned
|
|
**Date:** 2025-12-18
|
|
**Description:**
|
|
Replace the standard HTML5 Drag and Drop API in `GameView.tsx` with `@dnd-kit/core` to ensure a consistent, high-performance, and touch-friendly user experience similar to the Deck Builder.
|
|
|
|
**Technical Reference:**
|
|
- **DeckBuilderView.tsx:** Uses `DndContext`, `useDraggable`, and `useDroppable` for managing card movements.
|
|
- **GameView.tsx:** Currently uses `onDragStart`, `onDrop`, etc.
|
|
|
|
**Plan:**
|
|
1. **Install/Verify Dependencies:** `@dnd-kit/core` and `@dnd-kit/utilities` are already installed.
|
|
2. **Create Draggable Wrapper:** Create a `DraggableCard` component that uses `useDraggable` to wrap `CardComponent`.
|
|
3. **Create Droppable Zones:** Define `DroppableZone` components for Battlefield, Hand, Graveyard, Exile, etc.
|
|
4. **Implement Context:** Wrap the main game area in `DndContext`.
|
|
5. **Handle Drag Events:** Implement `onDragEnd` in `GameView` to handle logic previously in `handleZoneDrop` and `handleCardDrop`.
|
|
- Battlefield Drop -> `PLAY_LAND` / `CAST_SPELL` (positionless).
|
|
- Card on Card Drop -> `DECLARE_BLOCKERS` / `CAST_SPELL` (Targeting).
|
|
6. **Refactor Rendering:** Update the rendering of cards in `GameView` to use the new `DraggableCard` wrapper.
|