hans/party-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the drag animation its own base frame size

Browse Source 
The shared FRAME_SCALE has to stay under 0.5 so the corners animation can
fit two frames side by side, but nothing else is on screen while the drag
animation runs, so it can afford a roomier frame.

frameSize() now takes the scale as an argument; drag passes
DRAG_FRAME_SCALE and the min/max resize multipliers apply on top of it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
This commit is contained in:
simon
2026-08-09 22:43:24 +02:00
co-authored by Claude Opus 5
parent a6fd6e802a
commit 2066966694
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.js
+5 -1
View File
@@ -23,8 +23,12 @@ export const CORNER_INTERVAL_SECONDS = 5;
// Gap between the frame and the screen edge, as a fraction of the short side.
export const CORNER_MARGIN = 0.025;
// The drag animation gets its own, roomier base size: it is the only thing on
// screen while it runs, so it does not have to leave space for a second frame.
export const DRAG_FRAME_SCALE = 0.6;
// The drag animation resizes the frame to somewhere between these multiples of
// the normal frame size. Above 1 the frame grows past FRAME_SCALE, which is
// its base size. Above 1 the frame grows past DRAG_FRAME_SCALE, which is
// fine — nothing else is on screen while this animation runs.
export const DRAG_MIN_SCALE = 0.55;
export const DRAG_MAX_SCALE = 1.6;
public/player/motion.js
+8 -7
View File
@@ -11,6 +11,7 @@ import {
BOUNCE_SPEED,
CORNER_INTERVAL_SECONDS,
CORNER_MARGIN,
DRAG_FRAME_SCALE,
DRAG_MIN_SCALE,
DRAG_MAX_SCALE,
AUTO_ANIMATION,
@@ -19,14 +20,14 @@ import {
const ASPECT = 9 / 16;
/**
* Frame size for a viewport: FRAME_SCALE of the width, but never taller than
* FRAME_SCALE of the height, so a wide screen does not get a letterbox strip.
* Frame size for a viewport: `scale` of the width, but never taller than
* `scale` of the height, so a wide screen does not get a letterbox strip.
*/
export function frameSize(viewportWidth, viewportHeight) {
let width = viewportWidth * FRAME_SCALE;
export function frameSize(viewportWidth, viewportHeight, scale = FRAME_SCALE) {
let width = viewportWidth * scale;
let height = width * ASPECT;
const maxHeight = viewportHeight * FRAME_SCALE;
const maxHeight = viewportHeight * scale;
if (height > maxHeight) {
height = maxHeight;
width = height / ASPECT;
@@ -433,7 +434,7 @@ export function startDragResize({ element }) {
pointer.innerHTML = ARROW;
document.body.appendChild(pointer);
let base = frameSize(window.innerWidth, window.innerHeight);
let base = frameSize(window.innerWidth, window.innerHeight, DRAG_FRAME_SCALE);
let rect = {
x: (window.innerWidth - base.width) / 2,
y: (window.innerHeight - base.height) / 2,
@@ -622,7 +623,7 @@ export function startDragResize({ element }) {
let current = step();
function measure() {
base = frameSize(window.innerWidth, window.innerHeight);
base = frameSize(window.innerWidth, window.innerHeight, DRAG_FRAME_SCALE);
const gap = margin();
const limits = widthLimits();
server/index.js
+2
View File
@@ -15,6 +15,7 @@ import {
BOUNCE_SPEED,
CORNER_INTERVAL_SECONDS,
CORNER_MARGIN,
DRAG_FRAME_SCALE,
DRAG_MIN_SCALE,
DRAG_MAX_SCALE,
BACKGROUNDS,
@@ -47,6 +48,7 @@ app.get('/config.js', (_req, res) => {
`export const BOUNCE_SPEED = ${BOUNCE_SPEED};\n` +
`export const CORNER_INTERVAL_SECONDS = ${CORNER_INTERVAL_SECONDS};\n` +
`export const CORNER_MARGIN = ${CORNER_MARGIN};\n` +
`export const DRAG_FRAME_SCALE = ${DRAG_FRAME_SCALE};\n` +
`export const DRAG_MIN_SCALE = ${DRAG_MIN_SCALE};\n` +
`export const DRAG_MAX_SCALE = ${DRAG_MAX_SCALE};\n` +
`export const BACKGROUNDS = ${JSON.stringify(BACKGROUNDS)};\n` +