fix: mobile deck view

Author: cfbender

assets/react/src/pages/decks/deck-stack-card.tsx

@@ -10,14 +10,15 @@ import {
   Tag,
   Trash2,
 } from "lucide-react"
-import { useState, type FocusEvent } from "react"
+import { useRef, useState, type FocusEvent, type PointerEvent } from "react"
 
 import { cn, titleize } from "../../lib/utils"
 import { ShareModeHidden, blurFocusedMenuItem } from "./deck-actions"
 import { DeckCardAllocationMenu, DeckCardTagButton } from "./deck-card-allocation"
 import { cardImageUrl } from "./deck-card-model"
 import { GameChangerBadge } from "./deck-card-display"
 import { deckCardTag } from "./deck-card-tags"
+import { shouldRevealDeckStackCardOnPointerDown } from "./deck-stack-interactions"
 import type { DeckCardEntry, DeckCardTag } from "./deck-types"
 import { DECK_CARD_TAGS } from "./deck-types"
 
@@ -41,6 +42,7 @@ export function DeckStackCard({
   onPreview,
   onSetCommander,
   onTag,
+  onTouchReveal,
   onToggleProxy,
   onToggleSelected,
   shareMode = false,
@@ -66,6 +68,7 @@ export function DeckStackCard({
   onPreview: () => void
   onSetCommander: () => void
   onToggleProxy: () => void
+  onTouchReveal: () => void
   onTag: (tag: DeckCardTag | null) => void
   onToggleSelected: (selectRange?: boolean) => void
   shareMode?: boolean
@@ -74,6 +77,7 @@ export function DeckStackCard({
 }) {
   const [hasFocusWithin, setHasFocusWithin] = useState(false)
   const [isAllocationMenuOpen, setIsAllocationMenuOpen] = useState(false)
+  const touchRevealWasActivatedRef = useRef(false)
   const imageUrl = cardImageUrl(deckCard, "imageUrl")
   const name = deckCard.card?.name || "Unknown card"
   const printing = deckCard.preferredPrinting || deckCard.card?.printings?.[0]
@@ -88,6 +92,22 @@ export function DeckStackCard({
     }
   }
 
+  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {
+    touchRevealWasActivatedRef.current = false
+
+    if (
+      !shouldRevealDeckStackCardOnPointerDown({
+        isActive,
+        pointerType: event.pointerType,
+      })
+    ) {
+      return
+    }
+
+    touchRevealWasActivatedRef.current = true
+    onTouchReveal()
+  }
+
   return (
     <article
       className={cn(
@@ -264,7 +284,13 @@ export function DeckStackCard({
           type="button"
           className="block w-full cursor-pointer text-left"
           aria-label={`View ${name} details`}
+          onPointerDown={handlePointerDown}
           onClick={(event) => {
+            if (touchRevealWasActivatedRef.current) {
+              touchRevealWasActivatedRef.current = false
+              event.preventDefault()
+              return
+            }
             if (isSelecting) onToggleSelected(event.shiftKey)
             else onPreview()
           }}

assets/react/src/pages/decks/deck-stack-group.tsx

@@ -179,6 +179,11 @@ export function DeckStackGroup({
             onMove={() => onMove(deckCard)}
             onPreview={() => onPreview(deckCard)}
             onSetCommander={() => onSetCommander(deckCard)}
+            onTouchReveal={() => {
+              clearDeckCardHoverDelay()
+              setHoveredIndex(null)
+              setPinnedIndex(index)
+            }}
             onTag={(tag) => onTag(deckCard, tag)}
             onToggleProxy={() => onToggleProxy(deckCard)}
             onToggleSelected={(selectRange) => onToggleSelected(deckCard.id, selectRange)}

assets/react/src/pages/decks/deck-stack-interactions.ts

@@ -0,0 +1,9 @@
+export function shouldRevealDeckStackCardOnPointerDown({
+  isActive,
+  pointerType,
+}: {
+  isActive: boolean
+  pointerType: string
+}) {
+  return pointerType !== "mouse" && !isActive
+}

assets/react/test/deck-stack-interactions.test.mjs

@@ -0,0 +1,31 @@
+import test from "node:test"
+import assert from "node:assert/strict"
+
+import { shouldRevealDeckStackCardOnPointerDown } from "../src/pages/decks/deck-stack-interactions.ts"
+
+test("touching an inactive deck stack card reveals it instead of activating the card", () => {
+  assert.equal(
+    shouldRevealDeckStackCardOnPointerDown({
+      isActive: false,
+      pointerType: "touch",
+    }),
+    true,
+  )
+})
+
+test("mouse pointers and already-active cards keep their current deck stack behavior", () => {
+  assert.equal(
+    shouldRevealDeckStackCardOnPointerDown({
+      isActive: false,
+      pointerType: "mouse",
+    }),
+    false,
+  )
+  assert.equal(
+    shouldRevealDeckStackCardOnPointerDown({
+      isActive: true,
+      pointerType: "touch",
+    }),
+    false,
+  )
+})