feat(ligretto): unify card interactions and drag and drop

apps/ligretto-frontend/e2e/tests/onboarding.spec.ts

@@ -18,26 +18,24 @@ const performEvent = async (onboarding: OnboardingPage, event: OnboardingEvent)
       return
     case OnboardingEvent.PutStackCard:
       await onboarding.getStackOpenDeckCard().click()
-      await expect(onboarding.getStackOpenDeckCard()).toHaveAttribute('data-card-focused', 'true')
+      await expect(onboarding.getStackOpenDeckCard()).toHaveAttribute('data-card-active', 'true')
       await onboarding.getPlaygroundDeck(0).click()
       return
     case OnboardingEvent.PutFirstCard:
       await onboarding.getRowCard(0).click()
+      await expect(onboarding.getRowCard(0)).toHaveAttribute('data-card-active', 'true')
+      await onboarding.getPlaygroundDeck(0).click()
       return
     case OnboardingEvent.PutSecondCard: {
       const card = onboarding.getRowCard(1)
-      if ((await card.textContent())?.trim() === '1') {
-        await card.click()
-        return
-      }
       await card.click()
-      await expect(card).toHaveAttribute('data-card-focused', 'true')
+      await expect(card).toHaveAttribute('data-card-active', 'true')
       await onboarding.getPlaygroundDeck(0).click()
       return
     }
     case OnboardingEvent.PutThirdCard:
       await onboarding.getRowCard(2).click()
-      await expect(onboarding.getRowCard(2)).toHaveAttribute('data-card-focused', 'true')
+      await expect(onboarding.getRowCard(2)).toHaveAttribute('data-card-active', 'true')
       await onboarding.getPlaygroundDeck(2).click()
       return
     case OnboardingEvent.PutLigretto:
@@ -117,6 +115,8 @@ test.describe('Onboarding', () => {
 
     await test.step('opponent answers and the optional ligretto move fills the free slot', async () => {
       await onboarding.getRowCard(1).click()
+      await expect(onboarding.getRowCard(1)).toHaveAttribute('data-card-active', 'true')
+      await onboarding.getPlaygroundDeck(0).click()
       await expectStep(page, OnboardingStep.OpponentTurn)
 
       await onboarding.getLigrettoDeckCard().click() // the second row slot is free — a ligretto card goes there
@@ -128,7 +128,7 @@ test.describe('Onboarding', () => {
 
     await test.step('the green three and the final ligretto card end the round', async () => {
       await onboarding.getRowCard(2).click()
-      await expect(onboarding.getRowCard(2)).toHaveAttribute('data-card-focused', 'true')
+      await expect(onboarding.getRowCard(2)).toHaveAttribute('data-card-active', 'true')
       await expectStep(page, OnboardingStep.OpponentTurnSecondCard)
 
       await onboarding.getPlaygroundDeck(0).click() // the wrong pile does not advance

apps/ligretto-frontend/package.json

@@ -27,6 +27,7 @@
     "e2e:start": "playwright test"
   },
   "dependencies": {
+    "@dnd-kit/core": "catalog:",
     "@floating-ui/react-dom": "^2.1.6",
     "@fsmoothy/core": "^1.3.0",
     "@memebattle/analytics": "workspace:^",

apps/ligretto-frontend/src/ducks/game/listeners.ts

@@ -2,8 +2,6 @@ import type { TypedStartListening } from '@reduxjs/toolkit'
 import { TaskAbortError } from '@reduxjs/toolkit'
 import {
   PlayerStatus,
-  putCardAction,
-  putCardFromStackOpenDeck,
   resumeGameEmitAction,
   setPlayerStatusEmitAction,
   startGameEmitAction,
@@ -21,8 +19,6 @@ import {
   startGameAction,
   togglePlayerStatusAction,
   updateGameAction as updateGameSliceAction,
-  tapCardAction,
-  tapStackOpenDeckCardAction,
   tapStackDeckCardAction,
   tapLigrettoDeckCardAction,
   resetGameStateAction,
@@ -144,20 +140,4 @@ export function addListeners(startListener: TypedStartListening<All>) {
       listenerApi.dispatch(resumeGameEmitAction({ gameId }))
     },
   })
-
-  startListener({
-    actionCreator: tapCardAction,
-    effect: ({ payload }, listenerApi) => {
-      const gameId = gameIdSelector(listenerApi.getState())
-      listenerApi.dispatch(putCardAction({ cardIndex: payload.cardIndex, gameId }))
-    },
-  })
-
-  startListener({
-    actionCreator: tapStackOpenDeckCardAction,
-    effect: (_action, listenerApi) => {
-      const gameId = gameIdSelector(listenerApi.getState())
-      listenerApi.dispatch(putCardFromStackOpenDeck({ gameId }))
-    },
-  })
 }

apps/ligretto-frontend/src/ducks/game/slice.ts

@@ -33,8 +33,6 @@ export const initialState: GameState = {
 export const togglePlayerStatusAction = createAction('@@game/TOGGLE_PLAYER_STATUS')
 export const startGameAction = createAction('@@game/START_GAME')
 export const resumeGameAction = createAction('@@game/RESUME_GAME')
-export const tapCardAction = createAction<{ cardIndex: number }>('@@game/TapCardAction')
-export const tapStackOpenDeckCardAction = createAction('@@game/TapStackOpenDeckCardAction')
 export const tapStackDeckCardAction = createAction('@@game/TapStackDeckCardAction')
 export const tapLigrettoDeckCardAction = createAction('@@game/TapLigrettoDeckCardAction')
 

apps/ligretto-frontend/src/entities/card/ui/Card/Card.tsx

@@ -27,6 +27,12 @@ interface CardProps {
   onClick?: () => void
   /** Size of card **/
   size?: CardSize
+  ref?: React.Ref<HTMLButtonElement>
+  style?: React.CSSProperties
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>
+  onMouseDown?: React.MouseEventHandler<HTMLButtonElement>
+  onPointerDown?: React.PointerEventHandler<HTMLButtonElement>
+  onTouchStart?: React.TouchEventHandler<HTMLButtonElement>
 }
 
 export const widthByCardSize: Record<CardSize, string> = {
@@ -153,7 +159,7 @@ export const Card: React.FC<CardProps> = ({
     isHighlighted={isHighlighted}
     disableRipple={isDisabled}
     size={size}
-    onMouseDown={onClick}
+    onClick={onClick}
     isDisabled={isDisabled}
     isSelected={isSelected}
     isHidden={isHidden}

apps/ligretto-frontend/src/features/cardInteraction/README.md

@@ -0,0 +1,54 @@
+# Card interaction ownership
+
+`CardInteractionProvider` owns an explicit `idle | focused | dragging` reducer.
+It uses standard dnd-kit mouse/touch sensors, outside-click dismissal and
+central provider enablement. It does not read Redux, select cards, validate game
+rules, dispatch game commands, or render a card.
+
+Components opt into behavior through hooks:
+
+- `useCardInteraction(target, identityDependencies)` supplies selection flags and
+  pointer toggling. Identity changes and unmount clear only that target. The
+  argument-free overload exposes the current target and explicit clearing.
+- `useDraggableCard(target, card, disabled?)` attaches the native source to the
+  component's own element. Card/target identity changes, disablement and unmount
+  invalidate selection; components decide how to hide the original while dragging.
+- `useDroppableTarget(target, onDrop)` attaches a semantic destination and invokes
+  its owner through dnd data only for a live, enabled source and destination. The owner validates current game rules and dispatches its own command.
+- `useCardHotkey(key, callback)` clears selection and invokes the owner when the
+  provider is enabled, without changing the native gesture.
+  It has no options object. Clearing then toggling deliberately keeps a repeated
+  row/open-stack shortcut selected; pointer activation still toggles it off.
+- `useCardDragTarget()` derives a live drag target from dnd-kit and its registered
+  source, independently of selection. `PlayerCardDragOverlay` uses it to look up current Redux data and
+  render the dnd-kit presentation primitive and game card outside this feature.
+
+The target union and `getInteractionTargetKey` cover row, open-stack and playground
+identities. Hooks return behavior/data, never styles or card wrapper elements.
+
+## Gesture and command semantics
+
+Gameplay shortcuts remain available during pending and active mouse/touch gestures.
+They do not cancel native dragging or prevent a valid drop on release. Source
+visibility and the overlay follow the native gesture, not hotkey selection.
+There are no custom sensor adapters, Escape interception or release-click guards.
+The standard dnd-kit `onDragCancel` lifecycle only synchronizes reducer state.
+Disabled interactions and invalid or stale sources/destinations cannot dispatch drops.
+
+Click placement deliberately keeps its selected source until a server-confirmed
+card identity update. It continues to submit the explicit destination to backend
+validation, whereas drag owners prevalidate against their current destination.
+Do not clear click selection optimistically or auto-place value-1 source cards.
+
+Onboarding keeps its dedicated playground, callback routing and outline refs.
+Its source owners include step availability in their identity dependencies so a
+selection cannot outlive the step that enabled it.
+
+## Tests
+
+Feature tests drive real dnd-kit mouse and touch events without a Redux provider; component
+tests verify command payloads, overlay/source visibility, shortcut availability,
+repeated selection, onboarding refs, stale/disabled drops and hotkeys during native gestures. The
+native mouse sensor suppresses document clicks for 50 ms after release; tests that
+mix drag and click cases must allow that teardown to finish. No new E2E harness is
+required by this refinement.