@wodzik/cubecore 0.1.1 → 0.1.2

package/element/player.d.ts

@@ -74,6 +74,8 @@ export declare class CubePlayer extends ElementBase {
     private liveSource;
     private turnArrows;
     private clock;
+    /** How long a move animates (recording ms) — the clock's, and a step's. */
+    private maxAnimMs;
     private unsubscribe;
     private rec;
     private start;
@@ -144,8 +146,17 @@ export declare class CubePlayer extends ElementBase {
     get applied(): number;
     /** The moves being played (the algorithm, or the recording's moves). */
     get moves(): Move[];
+    /** The next move, animated (as it turns when playing, at the current speed). */
     stepForward(): void;
+    /** The last move undone, animated backwards. */
     stepBack(): void;
+    private stepFrame;
+    private stepEnd;
+    /** Run the clock from `from` to `to` (recording ms) in real time, then settle on `end`. */
+    private animateStep;
+    /** A step still animating: jump to where it ends (another step, or anything else, comes next). */
+    private finishStep;
+    private stopStep;
     toStart(): void;
     toEnd(): void;
     /** Follow a smart cube: its moves animate, resyncs jump, its gyro turns the cube. Returns detach. */

package/element/player.js

@@ -42,7 +42,7 @@ import { applyMoves, parseAlg, solvedState, spinsAfter } from "../core/index.js"
 import { renderSvg } from "../image/index.js";
 import { CubeRenderer, showPosition } from "../render/index.js";
 import { SKINS } from "../skin/index.js";
-import { ReplayClock, compressPauses, segmentAt, segmentPlayed, stageSegments } from "../timeline/index.js";
+import { ReplayClock, compressPauses, moveWindows, segmentAt, segmentPlayed, stageSegments } from "../timeline/index.js";
 import { formatTime, fraction, segmentLines, segmentText, startMoves, stepTime, tempoRecording } from "./model.js";
 import { ICONS, STYLES } from "./styles.js";
 import { ElementBase } from "./base.js";
@@ -83,6 +83,8 @@ export class CubePlayer extends ElementBase {
     liveSource = null;
     turnArrows = null;
     clock = null;
+    /** How long a move animates (recording ms) — the clock's, and a step's. */
+    maxAnimMs = 150;
     unsubscribe = null;
     rec = { scramble: [], moves: [], totalMs: 0 };
     start = solvedState();
@@ -122,6 +124,7 @@ export class CubePlayer extends ElementBase {
     }
     disconnectedCallback() {
         this.connected = false;
+        this.stopStep();
         this.darkQuery?.removeEventListener("change", this.onScheme);
         this.clock?.pause();
         this.unsubscribe?.();
@@ -282,6 +285,7 @@ export class CubePlayer extends ElementBase {
     play() {
         if (!this.clock || this.playing)
             return;
+        this.finishStep();
         this.clock.play();
         this.dispatchEvent(new Event("play"));
         this.updateUi(this.currentTime);
@@ -300,6 +304,7 @@ export class CubePlayer extends ElementBase {
             this.play();
     }
     seek(ms) {
+        this.stopStep();
         this.clock?.seek(ms);
     }
     /** Jump to the moment `k` moves are done (0 = the start). */
@@ -315,13 +320,67 @@ export class CubePlayer extends ElementBase {
     get moves() {
         return this.rec.moves.map((m) => m.move);
     }
+    /** The next move, animated (as it turns when playing, at the current speed). */
     stepForward() {
         this.pause();
-        this.seek(stepTime(this.rec, this.currentTime, 1));
-    }
+        this.finishStep();
+        const time = this.currentTime;
+        const target = stepTime(this.rec, time, 1);
+        const k = this.rec.moves.findIndex((m) => m.t === target);
+        if (k < 0)
+            return this.seek(target);
+        const [from, to] = moveWindows(this.rec, { maxAnimMs: this.maxAnimMs })[k];
+        this.animateStep(Math.max(time, from), to, to);
+    }
+    /** The last move undone, animated backwards. */
     stepBack() {
         this.pause();
-        this.seek(stepTime(this.rec, this.currentTime, -1));
+        this.finishStep();
+        const time = this.currentTime;
+        const target = stepTime(this.rec, time, -1);
+        // The move being undone: the last one finished by now.
+        let k = -1;
+        this.rec.moves.forEach((m, i) => {
+            if (m.t <= time + 0.5)
+                k = i;
+        });
+        if (k < 0)
+            return this.seek(target);
+        const [from, to] = moveWindows(this.rec, { maxAnimMs: this.maxAnimMs })[k];
+        this.animateStep(Math.min(time, to), from, target);
+    }
+    stepFrame = 0;
+    stepEnd = null;
+    /** Run the clock from `from` to `to` (recording ms) in real time, then settle on `end`. */
+    animateStep(from, to, end) {
+        const clock = this.clock;
+        if (!clock)
+            return;
+        clock.seek(from);
+        // At least a quarter second: a step is for looking at the move.
+        const duration = Math.max(250, Math.abs(to - from) / (this._rate || 1));
+        const started = performance.now();
+        this.stepEnd = end;
+        const tick = () => {
+            const k = Math.min(1, (performance.now() - started) / duration);
+            if (k >= 1)
+                return this.finishStep();
+            clock.seek(from + (to - from) * k);
+            this.stepFrame = requestAnimationFrame(tick);
+        };
+        this.stepFrame = requestAnimationFrame(tick);
+    }
+    /** A step still animating: jump to where it ends (another step, or anything else, comes next). */
+    finishStep() {
+        if (this.stepEnd === null)
+            return;
+        const end = this.stepEnd;
+        this.stopStep();
+        this.clock?.seek(end);
+    }
+    stopStep() {
+        cancelAnimationFrame(this.stepFrame);
+        this.stepEnd = null;
     }
     toStart() {
         this.pause();
@@ -400,6 +459,7 @@ export class CubePlayer extends ElementBase {
         this.clock?.pause();
         this.unsubscribe?.();
         let maxAnimMs = 150;
+        this.stopStep();
         let solves = [];
         try {
             if (this._recording) {
@@ -426,6 +486,7 @@ export class CubePlayer extends ElementBase {
             this.start = this._setupState ?? solvedState();
             this.dispatchEvent(new CustomEvent("error", { detail: { message: err instanceof Error ? err.message : String(err) } }));
         }
+        this.maxAnimMs = maxAnimMs;
         this.clock = new ReplayClock(this.rec, { maxAnimMs });
         this.clock.rate = this._rate;
         this.unsubscribe = this.clock.onChange((time, pos) => this.onTime(time, pos));

package/element/styles.d.ts

@@ -23,10 +23,10 @@
 export declare const STYLES = "\n:host {\n  --cc-accent: #4f8cff;\n  --cc-control-bg: color-mix(in srgb, currentColor 8%, transparent);\n  --cc-control-bg-hover: color-mix(in srgb, currentColor 15%, transparent);\n  --cc-control-fg: currentColor;\n  --cc-control-radius: 10px;\n  --cc-button-size: 34px;\n  --cc-controls-gap: 5px;\n  --cc-progress-height: 6px;\n  --cc-progress-track: color-mix(in srgb, currentColor 14%, transparent);\n  --cc-progress-fill: var(--cc-accent);\n  --cc-marker: color-mix(in srgb, currentColor 55%, transparent);\n  --cc-thumb-size: 14px;\n  --cc-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  /* sections of the progress bar */\n  --cc-segment-1: #4f8cff;\n  --cc-segment-2: #22c55e;\n  --cc-segment-3: #f59e0b;\n  --cc-segment-4: #ef4444;\n  --cc-segment-5: #a855f7;\n  --cc-segment-6: #14b8a6;\n  --cc-segment-7: #ec4899;\n  --cc-segment-8: #eab308;\n  --cc-segment-height: calc(var(--cc-progress-height) + 2px);\n  --cc-segment-gap: 2px;\n  --cc-segment-unplayed: 30%;\n  /* popup: dark and solid by default \u2014 readable on light and dark pages and over the cube */\n  --cc-tooltip-bg: rgb(17 20 28 / 0.97);\n  --cc-tooltip-fg: #f4f5f7;\n  --cc-tooltip-muted: #a9afbb;\n  --cc-tooltip-border: rgb(255 255 255 / 0.12);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 200px;\n  min-height: 200px;\n  outline: none;\n  container-type: inline-size;\n}\n:host([hidden]) { display: none; }\n.stage { position: relative; flex: 1; min-height: 0; }\n.flat { position: absolute; inset: 0; display: grid; place-items: center; }\n.flat[hidden] { display: none; }\n.flat svg { width: 100%; height: 100%; }\n\n/* \u2500\u2500\u2500 progress bar \u2500\u2500\u2500 */\n.progress { display: none; padding: 6px 2px; cursor: pointer; touch-action: none; }\n:host([progress]) .progress { display: block; }\n.track {\n  position: relative;\n  height: var(--cc-progress-height);\n  border-radius: 999px;\n  background: var(--cc-progress-track);\n}\n.fill {\n  position: absolute; inset: 0 auto 0 0;\n  width: 0;\n  border-radius: inherit;\n  background: var(--cc-progress-fill);\n}\n.thumb {\n  position: absolute; top: 50%; left: 0;\n  width: var(--cc-thumb-size); height: var(--cc-thumb-size);\n  border-radius: 50%;\n  background: var(--cc-progress-fill);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-progress-fill) 25%, transparent);\n  transform: translate(-50%, -50%) scale(0.85);\n  transition: transform 0.12s ease;\n}\n.progress:hover .thumb, .progress.dragging .thumb { transform: translate(-50%, -50%) scale(1); }\n/* Sections: coloured parts of the bar, dim until played, recognition hatched. */\n.progress { position: relative; }\n.progress.has-segments .fill { display: none; }\n.segments { position: absolute; inset: 0; }\n.segment {\n  position: absolute; top: 50%;\n  height: var(--cc-segment-height);\n  transform: translateY(-50%);\n  overflow: hidden;\n  background: color-mix(in srgb, var(--seg) var(--cc-segment-unplayed), transparent);\n  clip-path: inset(0 calc(var(--cc-segment-gap) / 2) 0 calc(var(--cc-segment-gap) / 2) round 999px);\n}\n.segment .played { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--seg); }\n.segment .recognition {\n  position: absolute; inset: 0 auto 0 0;\n  background: repeating-linear-gradient(135deg, color-mix(in srgb, Canvas 50%, transparent) 0 2px, transparent 2px 5px);\n}\n.progress.has-segments .thumb { background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }\n.tooltip {\n  position: absolute; bottom: calc(100% + 4px); left: 0;\n  transform: translateX(-50%);\n  width: max-content; max-width: min(320px, 100%);\n  padding: 6px 9px;\n  border-radius: 8px;\n  background: var(--cc-tooltip-bg);\n  border: 1px solid var(--cc-tooltip-border);\n  font: 500 12px/1.4 system-ui, sans-serif;\n  pointer-events: none;\n  z-index: 2;\n  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6);\n  display: flex; flex-direction: column; gap: 1px;\n}\n.tooltip .tip { color: var(--cc-tooltip-fg); }\n.tooltip .tip-title { font-weight: 650; font-variant-numeric: tabular-nums; }\n.tooltip .tip-details { color: var(--cc-tooltip-muted); font-size: 11px; font-variant-numeric: tabular-nums; }\n.tooltip[hidden] { display: none; }\n.labels { display: none; position: relative; height: 18px; margin-top: -4px; }\n:host([segment-labels]) .labels { display: block; }\n.label {\n  position: absolute; top: 0;\n  min-width: 0; height: 18px; padding: 0 2px;\n  background: none; border-radius: 4px;\n  color: inherit; opacity: 0.6;\n  font: 500 11px/18px system-ui, sans-serif;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.label:hover { background: var(--cc-control-bg); opacity: 1; transform: none; }\n.label:active { transform: none; }\n.label.current { opacity: 1; font-weight: 700; }\n.marker {\n  position: absolute; top: 50%;\n  width: 2px; height: calc(var(--cc-progress-height) + 8px);\n  border-radius: 1px;\n  background: var(--cc-marker);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n:host(:not([markers])) .marker { display: none; }\n.progress:focus-visible .track { outline: 2px solid var(--cc-accent); outline-offset: 4px; }\n\n/* \u2500\u2500\u2500 controls \u2500\u2500\u2500 */\n/* time | buttons | speed \u2014 the buttons stay centred whatever the time text's width */\n.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cc-controls-gap); }\n.buttons { display: flex; gap: var(--cc-controls-gap); }\n.time { justify-self: start; }\n.speed { justify-self: end; }\n/* Narrow players: buttons on top, time and speed below. */\n@container (max-width: 300px) {\n  .controls { grid-template-columns: 1fr 1fr; grid-template-areas: \"buttons buttons\" \"time speed\"; }\n  .buttons { grid-area: buttons; justify-content: center; }\n  .time { grid-area: time; }\n  .speed { grid-area: speed; }\n}\n:host([controls=\"none\"]) .controls { display: none; }\n/* Live (following a smart cube): nothing to replay. */\n:host([live]) .controls, :host([live]) .progress { display: none; }\nbutton {\n  display: inline-grid; place-items: center;\n  min-width: var(--cc-button-size); height: var(--cc-button-size);\n  padding: 0 8px;\n  border: 0;\n  border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg);\n  color: var(--cc-control-fg);\n  font: 600 12px/1 var(--cc-font);\n  cursor: pointer;\n  transition: background 0.12s ease, transform 0.08s ease;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:active { transform: scale(0.94); }\nbutton:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton:disabled { opacity: 0.4; cursor: default; transform: none; }\n/* Icons never take the click: it always lands on the button itself, even if the icon changes mid-click. */\nbutton svg { width: 18px; height: 18px; display: block; fill: currentColor; pointer-events: none; }\n.play { min-width: calc(var(--cc-button-size) * 1.25); background: var(--cc-accent); color: #fff; }\n.play:hover { background: color-mix(in srgb, var(--cc-accent) 85%, #000); }\n.time { font: 500 12px/1 var(--cc-font); opacity: 0.75; white-space: nowrap; font-variant-numeric: tabular-nums; }\n";
 /** Inline icons (no icon font, no network). */
 export declare const ICONS: {
-    readonly start: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 5h2v14H6zM20 5.5v13a.5.5 0 0 1-.78.42L9.5 12.4a.5.5 0 0 1 0-.8l9.72-6.52A.5.5 0 0 1 20 5.5z\"/></svg>";
-    readonly back: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M17 6.2v11.6a.5.5 0 0 1-.8.4L8 12.4a.5.5 0 0 1 0-.8l8.2-5.8a.5.5 0 0 1 .8.4zM6 6h2v12H6z\"/></svg>";
+    readonly start: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 5h2v14H4zM13 6.3v11.4a.5.5 0 0 1-.8.4L6.9 12.4a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4zM20.5 6.3v11.4a.5.5 0 0 1-.8.4l-5.3-5.7a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4z\"/></svg>";
+    readonly back: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16 6.2v11.6a.5.5 0 0 1-.8.4l-7.7-5.8a.5.5 0 0 1 0-.8l7.7-5.8a.5.5 0 0 1 .8.4z\"/></svg>";
     readonly play: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5.6v12.8a.6.6 0 0 0 .92.5l10.1-6.4a.6.6 0 0 0 0-1L8.92 5.1a.6.6 0 0 0-.92.5z\"/></svg>";
     readonly pause: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"6.5\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"13.5\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/></svg>";
-    readonly forward: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 6.2v11.6a.5.5 0 0 0 .8.4l8.2-5.8a.5.5 0 0 0 0-.8L7.8 5.8a.5.5 0 0 0-.8.4zM16 6h2v12h-2z\"/></svg>";
-    readonly end: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16 5h2v14h-2zM4 5.5v13a.5.5 0 0 0 .78.42l9.72-6.52a.5.5 0 0 0 0-.8L4.78 5.08A.5.5 0 0 0 4 5.5z\"/></svg>";
+    readonly forward: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 6.2v11.6a.5.5 0 0 0 .8.4l7.7-5.8a.5.5 0 0 0 0-.8L8.8 5.8a.5.5 0 0 0-.8.4z\"/></svg>";
+    readonly end: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18 5h2v14h-2zM3.5 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8L4.3 5.9a.5.5 0 0 0-.8.4zM11 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8l-5.3-5.7a.5.5 0 0 0-.8.4z\"/></svg>";
 };

package/element/styles.js

@@ -191,10 +191,11 @@ button svg { width: 18px; height: 18px; display: block; fill: currentColor; poin
 `;
 /** Inline icons (no icon font, no network). */
 export const ICONS = {
-    start: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h2v14H6zM20 5.5v13a.5.5 0 0 1-.78.42L9.5 12.4a.5.5 0 0 1 0-.8l9.72-6.52A.5.5 0 0 1 20 5.5z"/></svg>',
-    back: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 6.2v11.6a.5.5 0 0 1-.8.4L8 12.4a.5.5 0 0 1 0-.8l8.2-5.8a.5.5 0 0 1 .8.4zM6 6h2v12H6z"/></svg>',
+    // To the start / end: two triangles against a bar; one move back / on: a single triangle (as cubing.js).
+    start: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h2v14H4zM13 6.3v11.4a.5.5 0 0 1-.8.4L6.9 12.4a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4zM20.5 6.3v11.4a.5.5 0 0 1-.8.4l-5.3-5.7a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4z"/></svg>',
+    back: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 6.2v11.6a.5.5 0 0 1-.8.4l-7.7-5.8a.5.5 0 0 1 0-.8l7.7-5.8a.5.5 0 0 1 .8.4z"/></svg>',
     play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6v12.8a.6.6 0 0 0 .92.5l10.1-6.4a.6.6 0 0 0 0-1L8.92 5.1a.6.6 0 0 0-.92.5z"/></svg>',
     pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5" width="4" height="14" rx="1"/><rect x="13.5" y="5" width="4" height="14" rx="1"/></svg>',
-    forward: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6.2v11.6a.5.5 0 0 0 .8.4l8.2-5.8a.5.5 0 0 0 0-.8L7.8 5.8a.5.5 0 0 0-.8.4zM16 6h2v12h-2z"/></svg>',
-    end: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 5h2v14h-2zM4 5.5v13a.5.5 0 0 0 .78.42l9.72-6.52a.5.5 0 0 0 0-.8L4.78 5.08A.5.5 0 0 0 4 5.5z"/></svg>',
+    forward: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6.2v11.6a.5.5 0 0 0 .8.4l7.7-5.8a.5.5 0 0 0 0-.8L8.8 5.8a.5.5 0 0 0-.8.4z"/></svg>',
+    end: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 5h2v14h-2zM3.5 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8L4.3 5.9a.5.5 0 0 0-.8.4zM11 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8l-5.3-5.7a.5.5 0 0 0-.8.4z"/></svg>',
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A 3×3×3 cube library for the web, built around smart (Bluetooth) cubes: state, notation, methods, solvers and scrambles, a three.js renderer with skins, pictures, web components, React bindings.",
   "license": "MPL-2.0",
   "author": "Tomasz Wodzikowski <wodziszczakow@gmail.com>",