Fix mobile card magnify: no phantom hover preview, larger art/power.
- A tap on a touch device synthesized mouseenter/mousemove and popped the hover magnifier on top of the tap-to-magnify overlay — a double image. Gate the hover preview on real hover capability ((hover: hover)) so touch taps only open the tap overlay. - In that overlay the card is large, but its art, power badge, and text were still the tiny in-tray sizes; restore full-size art/power/damage/name/effect so the magnified card reads like a real card.
This commit is contained in:
@@ -3,6 +3,13 @@ import { createPortal } from 'react-dom'
|
||||
import type { Card } from '../types'
|
||||
import { artFor, artUrlFor } from '../petArt'
|
||||
|
||||
// The hover magnifier is a hover-only affordance. On touch devices a tap
|
||||
// synthesizes mouseenter/mousemove, which would pop the preview on top of the
|
||||
// tap-to-magnify overlay (a double image), so gate it on real hover capability.
|
||||
// Hover capability is effectively fixed per device, so check it once.
|
||||
const CAN_HOVER =
|
||||
typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia('(hover: hover)').matches
|
||||
|
||||
// The tier shown as a die face (1–6 pips), like the real cards' corner marker.
|
||||
const DIE_PIPS: Record<number, [number, number][]> = {
|
||||
1: [[15, 15]],
|
||||
@@ -236,9 +243,9 @@ export function CardView({
|
||||
data-card-id={card.id || undefined}
|
||||
onClick={disabled ? undefined : onClick}
|
||||
role={onClick ? 'button' : undefined}
|
||||
onMouseEnter={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||
onMouseMove={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||
onMouseLeave={preview ? undefined : () => setHover(null)}
|
||||
onMouseEnter={preview || !CAN_HOVER ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||
onMouseMove={preview || !CAN_HOVER ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||
onMouseLeave={preview || !CAN_HOVER ? undefined : () => setHover(null)}
|
||||
>
|
||||
{previewEl}
|
||||
{/* Upper illustration: a stylised landscape with the pet as a sticker and
|
||||
|
||||
Reference in New Issue
Block a user