Hide the hover magnifier while dragging a card to arrange.
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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 @@
|
|||||||
{"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"}
|
||||||
Reference in New Issue
Block a user