greyson/super-auto-pets-board-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile card magnify: no phantom hover preview, larger art/power.

Browse Source 
- 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:
Greyson Parrelli
2026-07-26 20:50:38 -04:00
parent 9a3ee34357
commit 6e6374e751
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/CardView.tsx
+10 -3
View File
@@ -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
web/src/styles.css
+15 -2
View File
@@ -3060,11 +3060,24 @@ h3 {
width: min(66vw, 230px);
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 {
font-size: 0.95rem;
font-size: 1.05rem;
}
.card-focus .card-effect {
font-size: 0.66rem;
font-size: 0.72rem;
}
.card-focus-actions {
display: flex;