Hide the hover magnifier while dragging a card to arrange.

This commit is contained in:
Greyson Parrelli
2026-07-23 08:37:16 -04:00
parent 169b21d6a8
commit 3821469c61
3 changed files with 16 additions and 5 deletions
+10 -3
View File
@@ -16,6 +16,7 @@ interface Props {
export function ArrangePhase({ view, you, send }: Props) { export function ArrangePhase({ view, you, send }: Props) {
const [order, setOrder] = useState<Card[]>(you.deck ?? []) const [order, setOrder] = useState<Card[]>(you.deck ?? [])
const dragIndex = useRef<number | null>(null) const dragIndex = useRef<number | null>(null)
const [dragging, setDragging] = useState(false)
const locked = you.ready const locked = you.ready
// Resync only if the deck's actual contents changed — every broadcast // Resync only if the deck's actual contents changed — every broadcast
@@ -100,7 +101,10 @@ export function ArrangePhase({ view, you, send }: Props) {
key={c.id} key={c.id}
className="arrange-card" className="arrange-card"
draggable draggable
onDragStart={() => (dragIndex.current = i)} onDragStart={() => {
dragIndex.current = i
setDragging(true)
}}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault() e.preventDefault()
if (dragIndex.current !== null && dragIndex.current !== i) { if (dragIndex.current !== null && dragIndex.current !== i) {
@@ -108,9 +112,12 @@ export function ArrangePhase({ view, you, send }: Props) {
dragIndex.current = i dragIndex.current = i
} }
}} }}
onDragEnd={() => (dragIndex.current = null)} onDragEnd={() => {
dragIndex.current = null
setDragging(false)
}}
> >
<CardView card={c} bonus={bonuses.get(c.id) ?? 0} /> <CardView card={c} bonus={bonuses.get(c.id) ?? 0} noMagnify={dragging} />
<div className="arrange-arrows"> <div className="arrange-arrows">
<button <button
className="btn btn-ghost btn-sm" className="btn btn-ghost btn-sm"
+5 -1
View File
@@ -15,6 +15,9 @@ interface Props {
dead?: boolean dead?: boolean
// preview marks the floating magnified copy so it doesn't magnify itself. // preview marks the floating magnified copy so it doesn't magnify itself.
preview?: boolean preview?: boolean
// noMagnify suppresses the hover magnifier (e.g. while this card is being
// dragged, so the frozen preview copy doesn't linger over the drag ghost).
noMagnify?: boolean
} }
// CardView renders one physical card: pets get a power badge and a colored // CardView renders one physical card: pets get a power badge and a colored
@@ -30,6 +33,7 @@ export function CardView({
damage = 0, damage = 0,
dead, dead,
preview, preview,
noMagnify,
}: Props) { }: Props) {
// Hover magnifier: show a large floating copy beside the cursor. The // Hover magnifier: show a large floating copy beside the cursor. The
// preview copy itself opts out so it can't recurse. // preview copy itself opts out so it can't recurse.
@@ -49,7 +53,7 @@ export function CardView({
// Place the magnified preview near the cursor, clamped into the viewport. // Place the magnified preview near the cursor, clamped into the viewport.
const previewEl = const previewEl =
hover && !preview hover && !preview && !noMagnify
? createPortal( ? createPortal(
<div <div
className="card-magnify" className="card-magnify"
+1 -1
View File
@@ -1 +1 @@
{"root":["./src/App.tsx","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useGame.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/Dice.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"} {"root":["./src/App.tsx","./src/api.ts","./src/main.tsx","./src/petArt.ts","./src/types.ts","./src/useGame.ts","./src/components/ArrangePhase.tsx","./src/components/BattlePhase.tsx","./src/components/CardView.tsx","./src/components/DebugPanel.tsx","./src/components/Dice.tsx","./src/components/EventLog.tsx","./src/components/GameOver.tsx","./src/components/Home.tsx","./src/components/Lobby.tsx","./src/components/ShopPhase.tsx","./src/components/Table.tsx"],"version":"5.9.3"}