diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 6d2e09d..b4e7d3e 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -96,3 +96,4 @@ - [Create Favicon](./devlog/2025-12-18-005739_create_favicon.md): Completed. Generated and integrated a new application favicon. - [Mobile Touch Preview](./devlog/2025-12-18-012500_mobile_touch_preview.md): Completed. Updated card preview logic to disable hover and enable long-press on touch devices, improving usability on tablets and mobile. - [Minimize Slider Defaults](./devlog/2025-12-18-013000_minimize_slider_defaults.md): Completed. Set default card size settings to their minimum values across Cube Manager, Draft View, and Deck Builder. +- [Deck Builder Touch Interaction](./devlog/2025-12-18-014500_deck_builder_touch.md): Completed. Renamed "Deck" to "Library" and implemented tap-to-preview logic on touch devices, disabling tap-to-move. diff --git a/docs/development/devlog/2025-12-18-014500_deck_builder_touch.md b/docs/development/devlog/2025-12-18-014500_deck_builder_touch.md new file mode 100644 index 0000000..0c0c939 --- /dev/null +++ b/docs/development/devlog/2025-12-18-014500_deck_builder_touch.md @@ -0,0 +1,20 @@ +# Work Plan - Deck Builder Touch Interaction Updates + +## Request +1. Change "Deck" zone name to "Library" in the UI. +2. Update touch interaction logic in Deck Builder: + - Tap (1 finger) should NOT move the card (add/remove). + - Tap (1 finger) should show the Card Preview (like in Draft Pick). + - Drag and Drop remains the method to move cards on touch devices. + +## Changes +- **DeckBuilderView.tsx**: + - Replaced display text "Deck" with "Library" in headers and empty state messages. + - Updated `ListItem`, `DeckCardItem`, and `StackView` `onClick` handlers. + - Implemented `window.matchMedia('(pointer: coarse)')` check to toggle behavior: + - **Touch**: Tap -> `onHover(card)` (Preview) + - **Mouse**: Click -> `onCardClick(card)` (Add/Remove) + +## Verification +- Verified code changes apply to all view modes (List, Grid, Stack). +- Verified drag-and-drop mechanics were not altered (handled by dnd-kit wrappers). diff --git a/src/client/src/modules/draft/DeckBuilderView.tsx b/src/client/src/modules/draft/DeckBuilderView.tsx index 1577c20..193986d 100644 --- a/src/client/src/modules/draft/DeckBuilderView.tsx +++ b/src/client/src/modules/draft/DeckBuilderView.tsx @@ -91,7 +91,13 @@ const ListItem: React.FC<{ card: DraftCard; onClick?: () => void; onHover?: (c: } }; - const { onTouchStart, onTouchEnd, onTouchMove, onClick: handleTouchClick } = useCardTouch(onHover || (() => { }), onClick || (() => { }), card); + const { onTouchStart, onTouchEnd, onTouchMove, onClick: handleTouchClick } = useCardTouch(onHover || (() => { }), () => { + if (window.matchMedia('(pointer: coarse)').matches) { + if (onHover) onHover(card); + } else { + if (onClick) onClick(); + } + }, card); return (