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 type { Card } from '../types'
|
||||||
import { artFor, artUrlFor } from '../petArt'
|
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.
|
// The tier shown as a die face (1–6 pips), like the real cards' corner marker.
|
||||||
const DIE_PIPS: Record<number, [number, number][]> = {
|
const DIE_PIPS: Record<number, [number, number][]> = {
|
||||||
1: [[15, 15]],
|
1: [[15, 15]],
|
||||||
@@ -236,9 +243,9 @@ export function CardView({
|
|||||||
data-card-id={card.id || undefined}
|
data-card-id={card.id || undefined}
|
||||||
onClick={disabled ? undefined : onClick}
|
onClick={disabled ? undefined : onClick}
|
||||||
role={onClick ? 'button' : undefined}
|
role={onClick ? 'button' : undefined}
|
||||||
onMouseEnter={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
onMouseEnter={preview || !CAN_HOVER ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||||
onMouseMove={preview ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
onMouseMove={preview || !CAN_HOVER ? undefined : (e) => setHover({ x: e.clientX, y: e.clientY })}
|
||||||
onMouseLeave={preview ? undefined : () => setHover(null)}
|
onMouseLeave={preview || !CAN_HOVER ? undefined : () => setHover(null)}
|
||||||
>
|
>
|
||||||
{previewEl}
|
{previewEl}
|
||||||
{/* Upper illustration: a stylised landscape with the pet as a sticker and
|
{/* Upper illustration: a stylised landscape with the pet as a sticker and
|
||||||
|
|||||||
+15
-2
@@ -3060,11 +3060,24 @@ h3 {
|
|||||||
width: min(66vw, 230px);
|
width: min(66vw, 230px);
|
||||||
height: min(58vh, 312px);
|
height: min(58vh, 312px);
|
||||||
}
|
}
|
||||||
|
/* The magnified card is big, so restore full-size art, power badge, and text
|
||||||
|
(the phone .card-lg overrides had shrunk them for the tiny in-tray card). */
|
||||||
|
.card-focus .card-art {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.card-focus .card-power {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.card-focus .card-damage {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
.card-focus .card-name {
|
.card-focus .card-name {
|
||||||
font-size: 0.95rem;
|
font-size: 1.05rem;
|
||||||
}
|
}
|
||||||
.card-focus .card-effect {
|
.card-focus .card-effect {
|
||||||
font-size: 0.66rem;
|
font-size: 0.72rem;
|
||||||
}
|
}
|
||||||
.card-focus-actions {
|
.card-focus-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user