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
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();