Make sick emoji confetti a fullscreen downward spew with morph.
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
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.
This commit is contained in:
@@ -6,6 +6,60 @@ export function findJumboEmojiElement(targetEventId: string): HTMLElement | null
|
||||
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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user