litruv
898d217451
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
🤢 now fills the viewport, morphs to 🤮 while particles spawn, hides the jumbo stand-in cleanly, and keeps green droplets out of the face morph.
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
export function findJumboEmojiElement(targetEventId: string): HTMLElement | null {
|
|
const message = document.querySelector(`[data-message-id="${CSS.escape(targetEventId)}"]`);
|
|
if (!message) return null;
|
|
|
|
const jumbo = message.querySelector('[data-jumbo-emoji]');
|
|
return jumbo instanceof HTMLElement ? jumbo : null;
|
|
}
|
|
|
|
export type JumboGlyphMetrics = {
|
|
/** Outer jumbo mount (message body) — hide/show this. */
|
|
mount: HTMLElement;
|
|
/** Visual glyph center in viewport coords. */
|
|
x: number;
|
|
y: number;
|
|
/** CSS px size matching the rendered emoji (usually computed font-size). */
|
|
size: number;
|
|
};
|
|
|
|
/**
|
|
* Measure the on-screen jumbo glyph. Prefer computed font-size so the canvas
|
|
* stand-in matches unicode emoji; fall back to the glyph box for images.
|
|
*/
|
|
export function measureJumboGlyph(targetEventId: string): JumboGlyphMetrics | null {
|
|
const mount = findJumboEmojiElement(targetEventId);
|
|
if (!mount) return null;
|
|
|
|
const glyph =
|
|
(mount.querySelector('[data-emoticon]') as HTMLElement | null) ||
|
|
(mount.querySelector('img') as HTMLElement | null) ||
|
|
mount;
|
|
|
|
const rect = glyph.getBoundingClientRect();
|
|
const fontSize =
|
|
parseFloat(getComputedStyle(glyph).fontSize) ||
|
|
parseFloat(getComputedStyle(mount).fontSize) ||
|
|
0;
|
|
|
|
const isImg = glyph instanceof HTMLImageElement || glyph.tagName === 'IMG';
|
|
const size = isImg
|
|
? Math.max(rect.width, rect.height)
|
|
: fontSize > 0
|
|
? fontSize
|
|
: Math.max(rect.width, rect.height);
|
|
|
|
return {
|
|
mount,
|
|
x: rect.left + rect.width / 2,
|
|
y: rect.top + rect.height / 2,
|
|
size,
|
|
};
|
|
}
|
|
|
|
export function setJumboEmojiHidden(targetEventId: string, hidden: boolean) {
|
|
const mount = findJumboEmojiElement(targetEventId);
|
|
if (!mount) return;
|
|
if (hidden) {
|
|
mount.style.visibility = 'hidden';
|
|
} else {
|
|
mount.style.removeProperty('visibility');
|
|
}
|
|
}
|
|
|
|
export function getLocalBurstCanvasSize(maskRadius: number): number {
|
|
return Math.max(300, Math.round(maskRadius * 6.5));
|
|
}
|