Greyson Parrelli
9a3ee34357
A phone has no hover to preview a card, so tapping now opens a magnified, fully-readable view with the actions that fit it instead of acting blind: - Shop card: tap to see it big, then Buy (or read it even when unaffordable). - Your deck card: tap to see it big, then Sell it, or Select to enter a bulk-selection mode where taps toggle pets (no magnify) and the action bar offers Sell / Triple / Cancel. Desktop keeps click-to-buy and click-to-select unchanged; the new behavior is gated on a max-width:600px media query via a small useMediaQuery hook.
24 lines
843 B
TypeScript
24 lines
843 B
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
// useMediaQuery tracks whether a CSS media query currently matches, re-rendering
|
|
// when it flips (viewport resize, orientation change). Used to switch on the
|
|
// phone layout's touch interactions, which mirror the `max-width: 600px` styles.
|
|
export function useMediaQuery(query: string): boolean {
|
|
const [matches, setMatches] = useState(() =>
|
|
typeof window !== 'undefined' && !!window.matchMedia
|
|
? window.matchMedia(query).matches
|
|
: false,
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined' || !window.matchMedia) return
|
|
const mql = window.matchMedia(query)
|
|
const onChange = () => setMatches(mql.matches)
|
|
onChange()
|
|
mql.addEventListener('change', onChange)
|
|
return () => mql.removeEventListener('change', onChange)
|
|
}, [query])
|
|
|
|
return matches
|
|
}
|