mtg-online-drafter/docs/development/devlog/2025-12-18-195623_game_dnd_kit.md

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.