rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

fix cube in webkit

Browse source
This commit is contained in:
Rhiannon Morris 2025-02-16 16:23:29 +01:00
parent 2514562a86
commit 186b02a132
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
script/run.ts
View file

@ -24,6 +24,8 @@ function table<A extends string, B = A>(m: Record<A, B>): (x: A) => B {
return x => m[x];
}
const NO_TRANS = 'rotateY(0deg)';
const doCwO =
table<Orientation>({up: 'right', right: 'down', down: 'left', left: 'up'});
@ -133,7 +135,7 @@ const movementToTransform = table<Rotation, string>({
/** the css `transform` value corresponding to this sequence of movements */
export function movementsToTransform(ms: Rotation[]): string {
return ms.length > 0 ? ms.map(movementToTransform).join(' ') : 'none';
return ms.length > 0 ? ms.map(movementToTransform).join(' ') : NO_TRANS;
}
@ -155,7 +157,7 @@ const orientationToTransform = table<Orientation, string>({
export function placeToTransform([f, o]: Place): string {
const ft = faceToTransform(f);
const ot = orientationToTransform(o);
return ft || ot ? `${ft} ${ot}` : 'none';
return ft || ot ? `${ft} ${ot}` : NO_TRANS;
}
@ -193,6 +195,8 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
const outer = document.getElementById('outer')!;
const cube = document.getElementById('cube')!;
console.log('animateMoveWith');
cube.dataset.moving = 'true';
cube.style.transition = '0.4s cubic-bezier(.4, -0.29, .43, 1.26)';
outer.style.transition = `0.4s 0.25s cubic-bezier(.48, 0, .44, 1.07)`;
@ -207,10 +211,14 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
let removeOuter = () => {};
let removeCube = () => {};
if (rs.length > 0) {
console.log('xy');
removeOuter = transitionListener(outer);
cube.style.transform = movementsToTransform(ds);
outer.style.transform = movementsToTransform(rs);
} else if (ds.length > 0) {
console.log('z');
removeCube = transitionListener(cube);
cube.style.transform = movementsToTransform(ds);
} else {
@ -218,11 +226,13 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
}
function finish() {
console.log('finish');
removeOuter(); removeCube();
delete cube.dataset.moving;
outer.style.transition = cube.style.transition = 'none';
outer.style.transform = cube.style.transform = 'none';
outer.style.transform = cube.style.transform = NO_TRANS;
current = move(current, ...ds, ...rs);
applyConfiguration();
@ -237,7 +247,7 @@ export function animateMoveTo(pane: Pane): void {
export function squashCube() {
for (const pane of allPanes) {
const elem = document.getElementById(pane)!
elem.style.setProperty('--base-transform', 'none');
elem.style.setProperty('--base-transform', NO_TRANS);
}
}
@ -289,7 +299,6 @@ export function fadeTo(newPane: Pane): void {
}
const reducedMotion =
matchMedia(`(prefers-reduced-motion: reduce),
(max-height: 649px), (max-width: 649px)`);