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

Give the colour wash a roomier frame

Browse Source 
Nothing else is on screen while the wash runs, so the frame does not
have to leave space for a second one.

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 23:31:32 +02:00
co-authored by Claude Opus 5
parent 223292708f
commit f55298ff4f
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.js
+4
View File
@@ -56,6 +56,10 @@ export const WASH_CYCLE_SECONDS = 90;
export const WASH_SPREAD = 70; export const WASH_SPREAD = 70;
export const WASH_STRENGTH = 0.55; export const WASH_STRENGTH = 0.55;
// The wash animation gets its own, roomier frame: like the drag animation it
// has the screen to itself, so it does not have to leave room for a second one.
export const WASH_FRAME_SCALE = 0.6;
// The frame animations, keyed by the id sent over the socket. The names must // The frame animations, keyed by the id sent over the socket. The names must
// match the registry in public/player/motion.js, which supplies the code. // match the registry in public/player/motion.js, which supplies the code.
export const ANIMATIONS = { export const ANIMATIONS = {
public/player/motion.js
+7 -3
View File
@@ -20,6 +20,7 @@ import {
TRAIL_LENGTH, TRAIL_LENGTH,
TRAIL_FADE_SECONDS, TRAIL_FADE_SECONDS,
WASH_CYCLE_SECONDS, WASH_CYCLE_SECONDS,
WASH_FRAME_SCALE,
WASH_SPREAD, WASH_SPREAD,
WASH_STRENGTH, WASH_STRENGTH,
AUTO_ANIMATION, AUTO_ANIMATION,
@@ -45,8 +46,8 @@ export function frameSize(viewportWidth, viewportHeight, scale = FRAME_SCALE) {
} }
/** Size the frame to the current viewport and report the size back. */ /** Size the frame to the current viewport and report the size back. */
function applyFrameSize(element) { function applyFrameSize(element, scale = FRAME_SCALE) {
const size = frameSize(window.innerWidth, window.innerHeight); const size = frameSize(window.innerWidth, window.innerHeight, scale);
element.style.width = `${size.width}px`; element.style.width = `${size.width}px`;
element.style.height = `${size.height}px`; element.style.height = `${size.height}px`;
return size; return size;
@@ -943,7 +944,7 @@ export function startWash({ element }) {
element.classList.add('washing'); element.classList.add('washing');
function centre() { function centre() {
const size = applyFrameSize(element); const size = applyFrameSize(element, WASH_FRAME_SCALE);
place(element, (window.innerWidth - size.width) / 2, (window.innerHeight - size.height) / 2); place(element, (window.innerWidth - size.width) / 2, (window.innerHeight - size.height) / 2);
} }
@@ -975,6 +976,9 @@ export function startWash({ element }) {
wash.remove(); wash.remove();
element.classList.remove('washing'); element.classList.remove('washing');
element.style.removeProperty('--wash'); element.style.removeProperty('--wash');
// Same reason as the drag animation: the next one sizes the frame itself,
// but a wash-sized frame left up for one paint would flash.
applyFrameSize(element);
}; };
} }