}
function seatClass(seat: number, youSeat: number): string {
@@ -61,14 +66,56 @@ function seatClass(seat: number, youSeat: number): string {
return seat === youSeat ? 'log-you' : 'log-opp'
}
+// LogCardRef is a card name embedded in a log line; hovering it magnifies the
+// card the same way hovering a real card on the board does.
+function LogCardRef({ name, card }: { name: string; card: Card }) {
+ const [hover, setHover] = useState<{ x: number; y: number } | null>(null)
+ return (
+
setHover({ x: e.clientX, y: e.clientY })}
+ onMouseMove={(e) => setHover({ x: e.clientX, y: e.clientY })}
+ onMouseLeave={() => setHover(null)}
+ >
+ {name}
+ {hover && }
+
+ )
+}
+
+// buildNameRegex compiles one alternation matching any known card name at a
+// word boundary, longest name first so multi-word names win over the single
+// words inside them ("Blue-Ringed Octopus" before "Octopus").
+function buildNameRegex(lookup?: Map
): RegExp | null {
+ if (!lookup || lookup.size === 0) return null
+ const names = [...lookup.keys()].sort((a, b) => b.length - a.length)
+ const alt = names.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
+ return new RegExp(`(\\b(?:${alt})\\b)`, 'g')
+}
+
+// renderLogText splits a line on card names and wraps each match in a hoverable
+// reference, leaving the rest as plain text.
+function renderLogText(
+ text: string,
+ lookup: Map | undefined,
+ regex: RegExp | null,
+): ReactNode {
+ if (!regex || !lookup) return text
+ return text.split(regex).map((part, i) => {
+ const card = lookup.get(part)
+ return card ? : part
+ })
+}
+
// EventLog is the persistent, human-readable narration of the game, shown in
// every phase. Shop/prep entries come from the server; battle entries are fed
// in step-by-step so stepping back through the replay walks back up the log.
-export function EventLog({ entries, youSeat, battleLines }: Props) {
+export function EventLog({ entries, youSeat, battleLines, cardLookup }: Props) {
const [open, setOpen] = useState(true)
const bodyRef = useRef(null)
const lastSeq = entries.length ? entries[entries.length - 1].seq : 0
const battleLen = battleLines?.length ?? 0
+ const nameRegex = useMemo(() => buildNameRegex(cardLookup), [cardLookup])
// Keep the newest line in view as the log grows or the replay advances.
useEffect(() => {
@@ -97,7 +144,7 @@ export function EventLog({ entries, youSeat, battleLines }: Props) {
{entries.map((e) => (
{e.icon && {e.icon}}
- {e.text}
+ {renderLogText(e.text, cardLookup, nameRegex)}
))}
{battleLen > 0 && (
@@ -117,7 +164,7 @@ export function EventLog({ entries, youSeat, battleLines }: Props) {
.join(' ')}
>
{l.icon && {l.icon}}
- {l.text}
+ {renderLogText(l.text, cardLookup, nameRegex)}