revert(gacha): restore the original pack tear and drop motion

Only the card rising out of the pack keeps its exponential easing; the scripted tear and the pack falling away move as pack-cards drew them.
This commit is contained in:
tiennm99 committed 2026-10-01 23:22:51 +07:00
1 parent 76c96464a8
commit 949e5e57ec
3 files changed
+2 -48

No files matched your search

-20
View File
@@ -34,26 +34,6 @@ body {
width: min(36vh, 60vw);
}
/*
* The torn pack keeps pack-cards' 1.35s drop and its short hold, but falls
* in one exponential ease-in-out. Not scoped to #stage: the pack also drops
* inside pack-cards' flight overlay on <body>.
*/
html .recap-pack-torn :is(.recap-webgl-pack, .recap-pack-lining) {
animation-name: wish-pack-away;
animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes wish-pack-away {
0%,
20% {
transform: translateY(0);
}
100% {
transform: translateY(calc(100vh + 100%));
}
}
/* A video has no buttons or prompts to read: hide the interactive captions. */
#stage .recap-pack-scene > .eyebrow,
#stage .recap-pack-title,
+2 -15
View File
@@ -82,23 +82,10 @@ export const getWishPageProps = (request) => {
return {label: request.label, rank, stars: request.rarity, rarity, glow, artwork: {accent, tint}};
};
/**
* Exponential ease-in-out over 0..1.
*
* @param {number} t
*/
const easeInOutExpo = (t) => {
if (t <= 0 || t >= 1) {
return Math.min(1, Math.max(0, t));
}
return t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (10 - 20 * t)) / 2;
};
/**
* Pointer position for a frame during the drag, as fractions of the pack
* control's box, or null outside it. The button is held while the pointer
* sweeps across the seal, easing exponentially in and out like a hand
* tearing it.
* sweeps across the seal.
*
* @param {number} seconds
* @returns {{x: number, y: number} | null}
@@ -108,7 +95,7 @@ export const getDragPointer = (seconds) => {
if (seconds < dragStart || seconds > dragEnd) {
return null;
}
return {x: 0.08 + 0.9 * easeInOutExpo((seconds - dragStart) / (dragEnd - dragStart)), y: 0.12};
return {x: 0.08 + 0.9 * ((seconds - dragStart) / (dragEnd - dragStart)), y: 0.12};
};
const contentTypes = Object.freeze({
-13
View File
@@ -46,19 +46,6 @@ describe('gacha wish plan', () => {
expect(dragEnd + 2).toBeLessThan(gachaTotalSeconds);
});
test('the drag eases exponentially in and out across the seal', () => {
const {dragStart, dragEnd} = wishTimeline;
const x = (/** @type {number} */ fraction) =>
getDragPointer(dragStart + (dragEnd - dragStart) * fraction)?.x ?? NaN;
expect(x(0)).toBeCloseTo(0.08);
expect(x(1)).toBeCloseTo(0.98);
expect(x(0.5)).toBeCloseTo(0.53);
// Slow at both ends, fast through the middle.
expect(x(0.2) - x(0)).toBeLessThan(0.01);
expect(x(1) - x(0.8)).toBeLessThan(0.01);
expect(x(0.6) - x(0.4)).toBeGreaterThan(0.6);
});
test('page requests map to the page directory and the installed package', () => {
expect(resolveWishAsset(`${wishOrigin}/index.html`, roots)).toEqual({
file: path.join(roots.page, 'index.html'),