Fix clipping issue.
This commit is contained in:
Greyson Parrelli
@@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
import type { BattleEvent, Card, ClientMessage, GameView } from '../types'
|
import type { BattleEvent, Card, ClientMessage, GameView } from '../types'
|
||||||
import { CardView } from './CardView'
|
import { CardView } from './CardView'
|
||||||
import { DiceTray } from './Dice'
|
import { DiceTray } from './Dice'
|
||||||
@@ -175,7 +176,13 @@ export function BattlePhase({ view, send }: Props) {
|
|||||||
const events = battle.events ?? []
|
const events = battle.events ?? []
|
||||||
const [step, setStep] = useState(0)
|
const [step, setStep] = useState(0)
|
||||||
const [acked, setAcked] = useState(false)
|
const [acked, setAcked] = useState(false)
|
||||||
const [peekSeat, setPeekSeat] = useState<number | null>(null)
|
// The deck-peek popover lives inside .battlefield, which sets overflow-x
|
||||||
|
// (and thus overflow-y) to auto — so an absolutely-positioned popover gets
|
||||||
|
// clipped to the battlefield. We anchor it to the hovered stack's viewport
|
||||||
|
// rect and portal it to <body> so it floats over the whole window instead.
|
||||||
|
const [peek, setPeek] = useState<{ seat: number; dir: 'left' | 'right'; rect: DOMRect } | null>(
|
||||||
|
null,
|
||||||
|
)
|
||||||
const lineups = battle.lineups
|
const lineups = battle.lineups
|
||||||
const done = step >= events.length
|
const done = step >= events.length
|
||||||
const lastEvent = step > 0 ? events[step - 1] : null
|
const lastEvent = step > 0 ? events[step - 1] : null
|
||||||
@@ -226,8 +233,12 @@ export function BattlePhase({ view, send }: Props) {
|
|||||||
const stackEl = (
|
const stackEl = (
|
||||||
<div
|
<div
|
||||||
className={`stackpile ${lineup.length ? 'peekable' : ''}`}
|
className={`stackpile ${lineup.length ? 'peekable' : ''}`}
|
||||||
onMouseEnter={lineup.length ? () => setPeekSeat(seat) : undefined}
|
onMouseEnter={
|
||||||
onMouseLeave={() => setPeekSeat((s) => (s === seat ? null : s))}
|
lineup.length
|
||||||
|
? (e) => setPeek({ seat, dir, rect: e.currentTarget.getBoundingClientRect() })
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onMouseLeave={() => setPeek((p) => (p?.seat === seat ? null : p))}
|
||||||
title={lineup.length ? 'Hover to see the whole deck' : undefined}
|
title={lineup.length ? 'Hover to see the whole deck' : undefined}
|
||||||
>
|
>
|
||||||
{s.stack > 0 ? (
|
{s.stack > 0 ? (
|
||||||
@@ -247,19 +258,6 @@ export function BattlePhase({ view, send }: Props) {
|
|||||||
<CardView card={lastEvent.card} size="sm" dead />
|
<CardView card={lastEvent.card} size="sm" dead />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{peekSeat === seat && lineup.length > 0 && (
|
|
||||||
<div className={`deck-peek deck-peek-${dir}`}>
|
|
||||||
<div className="deck-peek-label">
|
|
||||||
{seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
|
|
||||||
{lineup.length !== 1 ? 's' : ''} (top first)
|
|
||||||
</div>
|
|
||||||
<div className="deck-peek-cards">
|
|
||||||
{lineup.map((c, i) => (
|
|
||||||
<CardView key={c.id || i} card={c} size="sm" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -393,6 +391,32 @@ export function BattlePhase({ view, send }: Props) {
|
|||||||
{renderSide(oppSeat, 'right')}
|
{renderSide(oppSeat, 'right')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{peek &&
|
||||||
|
(() => {
|
||||||
|
const lineup = lineups?.[peek.seat] ?? []
|
||||||
|
if (!lineup.length) return null
|
||||||
|
const style: React.CSSProperties = {
|
||||||
|
bottom: window.innerHeight - peek.rect.top + 8,
|
||||||
|
...(peek.dir === 'left'
|
||||||
|
? { left: peek.rect.left }
|
||||||
|
: { right: window.innerWidth - peek.rect.right }),
|
||||||
|
}
|
||||||
|
return createPortal(
|
||||||
|
<div className={`deck-peek deck-peek-${peek.dir}`} style={style}>
|
||||||
|
<div className="deck-peek-label">
|
||||||
|
{peek.seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
|
||||||
|
{lineup.length !== 1 ? 's' : ''} (top first)
|
||||||
|
</div>
|
||||||
|
<div className="deck-peek-cards">
|
||||||
|
{lineup.map((c, i) => (
|
||||||
|
<CardView key={c.id || i} card={c} size="sm" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body,
|
||||||
|
)
|
||||||
|
})()}
|
||||||
|
|
||||||
{done && (
|
{done && (
|
||||||
<div className={`battle-result ${draw ? 'is-draw' : won ? 'is-win' : 'is-loss'}`}>
|
<div className={`battle-result ${draw ? 'is-draw' : won ? 'is-win' : 'is-loss'}`}>
|
||||||
<div className="battle-result-title">
|
<div className="battle-result-title">
|
||||||
|
|||||||
+5
-10
@@ -1399,9 +1399,11 @@ h3 {
|
|||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Portaled to <body> and anchored to the hovered stack's viewport rect (see
|
||||||
|
BattlePhase) so it floats over the whole window instead of being clipped by
|
||||||
|
the battlefield's overflow. left/right/bottom come from inline styles. */
|
||||||
.deck-peek {
|
.deck-peek {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
bottom: calc(100% + 8px);
|
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
max-width: 60vw;
|
max-width: 60vw;
|
||||||
@@ -1410,14 +1412,7 @@ h3 {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
|
||||||
}
|
pointer-events: none;
|
||||||
|
|
||||||
.deck-peek-left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deck-peek-right {
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.deck-peek-label {
|
.deck-peek-label {
|
||||||
|
|||||||
Reference in New Issue
Block a user