Files
mtg-online-drafter/docs/development/devlog/2025-12-18-030000_ui_enhancements.md

1.4 KiB

Work Plan - Deck Builder & Draft UI Enhancements

Request

  1. Deck Builder Stack DnD: Enable card drag and drop for the stacked view in Deck Builder.
  2. Custom Sort Dropdown: Use a custom graphic dropdown list instead of browser default for sorting.
  3. Resizable Layouts: Make library/preview resizeable in Deck Builder, and selected pool/preview resizeable in Draft UI.

Changes

  • StackView.tsx: Added renderWrapper prop to allow parent components to wrap card items (e.g. with DraggableCardWrapper).
  • DeckBuilderView.tsx:
    • Implemented sortDropdownOpen state and custom UI for the "Sort" dropdown.
    • Added resizing state (sidebarWidth, poolHeightPercent) and mouse event handlers.
    • Applied dynamic styles to Sidebar and Pool/Deck zones.
    • Passed DraggableCardWrapper to StackView via the new renderWrapper prop.
  • DraftView.tsx:
    • Added resizing state (sidebarWidth, poolHeight) and mouse event handlers.
    • Applied dynamic styles to Sidebar and Pool Droppable area.
    • Fixed syntax error introduced during refactoring.

Verification

  • Deck Builder:
    • Verify cards in Stack View can be dragged.
    • Verify "Sort" dropdown is custom styled.
    • Verify Sidebar width can be adjusted.
    • Verify Pool/Library split can be adjusted (in horizontal mode especially).
  • Draft UI:
    • Verify Sidebar width can be adjusted.
    • Verify Selected Pool height can be adjusted.