@wodzik/cubecore 0.1.11 → 0.1.12

package/core/sequence.d.ts

@@ -5,7 +5,8 @@
  * It matches CUBE STATES, not move strings, so everything that reaches the
  * same state counts:
  *   - a half turn done as two quarter turns, either way (half done = `partial`);
- *   - opposite faces in the other order (R L done as L R);
+ *   - moves on one axis in any order, even interleaved (R2 L2 done as
+ *     L R L R, or L2 R2): they commute — each face just has to get there;
  *   - an algorithm written with rotations, slices and wide moves (converted
  *     with toFaceTurns: what the smart cube will actually report).
  * Off the path, `undo` is the way back to the last matching point (the
@@ -13,7 +14,7 @@
  */
 import { type TurnArrow } from "./arrows.js";
 import type { Frame } from "./frames.js";
-import type { Move } from "./moves.js";
+import { type Move } from "./moves.js";
 import { type State } from "./state.js";
 export interface SequenceStep {
     /** The face turn the cube will report. */
@@ -27,7 +28,10 @@ export interface SequenceProgress {
     /** Face-turn steps fully done. */
     done: number;
     total: number;
-    /** The next step is a half turn and half of it is done. */
+    /**
+     * Part way through the next steps: half of a half turn, or moves on one
+     * axis (R2 L2) done out of order / each part of the way.
+     */
     partial: boolean;
     /** Status of each written move (for display). */
     tokens: TokenStatus[];
@@ -42,11 +46,13 @@ export interface SequenceProgress {
 /** What to turn now — for arrows on a 3D cube (see arrows.ts). */
 export interface NextTurn {
     /**
-     * "next": the next move of the sequence; "undo": the first move back after
-     * a slip; "wrong-way": the same, when the slip was the right face turned
-     * the wrong way (or too far) — worth a colour of its own.
+     * "next": the next move of the sequence; "finish": the rest of a half turn
+     * already started (with R2 L2 both at once, when both are half done);
+     * "undo": the first move back after a slip; "wrong-way": the same, when
+     * the slip was the right face turned the wrong way (or too far) — worth a
+     * colour of its own.
      */
-    kind: "next" | "undo" | "wrong-way";
+    kind: "next" | "finish" | "undo" | "wrong-way";
     /** In the cube's own coordinates. Usually one; the rest of an M done half-way can be two. */
     arrows: TurnArrow[];
     /** The written move it belongs to (null for undo). */
@@ -69,8 +75,11 @@ export declare class SequenceTracker {
     readonly frames: Frame[];
     private readonly path;
     private cur;
+    private readonly groups;
+    private readonly groupOf;
     private anchor;
-    private anchorPartial;
+    /** At the anchor, inside an axis group: how far each of its faces got (quarters). */
+    private anchorGroup;
     private offPath;
     private readonly maxCorrection;
     constructor(target: string | readonly Move[], start: State, options?: SequenceOptions);
@@ -78,6 +87,13 @@ export declare class SequenceTracker {
     /** A face turn reported by the cube. */
     push(move: Move): SequenceProgress;
     get progress(): SequenceProgress;
+    /** A step at the anchor: done, part way (half of a half turn), or not started. */
+    private stepStatus;
+    /**
+     * The only slip is a face due (the next step, or one on its axis still to
+     * do) turned the wrong way or too far — the step it belongs to, else null.
+     */
+    private wrongWayStep;
     /**
      * What to turn now, for an arrow: after a slip the first undo move; half way
      * through a half turn the remaining quarter (the way it was started); else
@@ -85,6 +101,10 @@ export declare class SequenceTracker {
      * middle one — placed where it is on the cube as now held. Null when complete.
      */
     get nextTurn(): NextTurn | null;
-    /** Where the current state is on the path, if anywhere: after `done` steps (+ half of the next one). */
+    /**
+     * Where the current state is on the path, if anywhere: after `done` steps —
+     * or inside an axis group, each of its faces some way to its target (a
+     * half turn: any part, either way; a quarter: not yet or done).
+     */
     private locate;
 }

package/core/sequence.js

@@ -5,13 +5,15 @@
  * It matches CUBE STATES, not move strings, so everything that reaches the
  * same state counts:
  *   - a half turn done as two quarter turns, either way (half done = `partial`);
- *   - opposite faces in the other order (R L done as L R);
+ *   - moves on one axis in any order, even interleaved (R2 L2 done as
+ *     L R L R, or L2 R2): they commute — each face just has to get there;
  *   - an algorithm written with rotations, slices and wide moves (converted
  *     with toFaceTurns: what the smart cube will actually report).
  * Off the path, `undo` is the way back to the last matching point (the
  * slip, simplified: R R' cancels) and `needsReset` says it's too long.
  */
 import { turnArrow } from "./arrows.js";
+import { amountQuarters } from "./moves.js";
 import { invert, parseAlg, simplify } from "./notation.js";
 import { OrientationTracker } from "./physical.js";
 import { applyMove, statesEqual } from "./state.js";
@@ -22,8 +24,11 @@ export class SequenceTracker {
     frames;
     path; // state after k steps
     cur;
+    groups = [];
+    groupOf = []; // step index → its group
     anchor = 0; // last matching step index
-    anchorPartial = false;
+    /** At the anchor, inside an axis group: how far each of its faces got (quarters). */
+    anchorGroup = null;
     offPath = []; // moves since the last matching point
     maxCorrection;
     constructor(target, start, options = {}) {
@@ -39,6 +44,22 @@ export class SequenceTracker {
         for (const s of this.steps)
             this.path.push(applyMove(this.path[this.path.length - 1], s.move));
         this.cur = new Uint8Array(start);
+        for (let i = 0; i < this.steps.length;) {
+            let j = i + 1;
+            while (j < this.steps.length && sameAxis(this.steps[i].move, this.steps[j].move))
+                j++;
+            const group = { start: i, end: j, faces: [], target: [] };
+            for (let k = i; k < j; k++) {
+                const { family, amount } = this.steps[k].move;
+                let f = group.faces.indexOf(family);
+                if (f < 0)
+                    f = group.faces.push(family) - 1;
+                group.target[f] = ((group.target[f] ?? 0) + amountQuarters(amount)) % 4;
+                this.groupOf[k] = this.groups.length;
+            }
+            this.groups.push(group);
+            i = j;
+        }
     }
     get state() {
         return this.cur;
@@ -49,7 +70,7 @@ export class SequenceTracker {
         const on = this.locate();
         if (on) {
             this.anchor = on.done;
-            this.anchorPartial = on.partial;
+            this.anchorGroup = on.group;
             this.offPath = [];
         }
         else {
@@ -61,24 +82,46 @@ export class SequenceTracker {
         const total = this.steps.length;
         const undo = this.offPath.length ? invert(simplify(this.offPath)) : [];
         const done = this.anchor;
-        const partial = this.anchorPartial && !this.offPath.length;
+        const partial = this.anchorGroup !== null && !this.offPath.length;
         const next = done < total ? this.steps[done].token : this.written.length;
-        const expected = this.steps[done]?.move;
-        const wrongWay = undo.length === 1 && expected !== undefined && undo[0].family === expected.family;
+        const ww = this.wrongWayStep(undo);
+        const status = (i) => (this.offPath.length ? (i < done ? "done" : "todo") : this.stepStatus(i));
         const tokens = this.written.map((_, t) => {
             const idx = this.steps.map((s, i) => (s.token === t ? i : -1)).filter((i) => i >= 0);
             if (!idx.length)
                 return t < next ? "done" : "todo"; // a rotation: done once the cube gets past it
-            const first = idx[0], last = idx[idx.length - 1];
-            if (last < done)
+            const st = idx.map(status);
+            if (st.every((x) => x === "done"))
                 return "done";
-            if (first < done || (first === done && partial))
-                return "partial"; // M half done, or half of an R2
-            if (first === done && wrongWay)
+            if (ww !== null && idx.includes(ww))
                 return "wrong-way";
-            return first === done ? "current" : "todo";
+            if (st.some((x) => x !== "todo"))
+                return "partial"; // half of an R2, R2 L2 started either way, M half done
+            return idx[0] === done ? "current" : "todo";
         });
-        return { done, total, partial, tokens, undo, needsReset: undo.length > this.maxCorrection, wrongWay, complete: done === total && !this.offPath.length };
+        return { done, total, partial, tokens, undo, needsReset: undo.length > this.maxCorrection, wrongWay: ww !== null, complete: done === total && !this.offPath.length };
+    }
+    /** A step at the anchor: done, part way (half of a half turn), or not started. */
+    stepStatus(i) {
+        const g = this.anchorGroup;
+        if (g && i >= g.group.start && i < g.group.end) {
+            const f = g.group.faces.indexOf(this.steps[i].move.family);
+            return g.got[f] === g.group.target[f] ? "done" : g.got[f] === 0 ? "todo" : "partial";
+        }
+        return i < this.anchor ? "done" : "todo";
+    }
+    /**
+     * The only slip is a face due (the next step, or one on its axis still to
+     * do) turned the wrong way or too far — the step it belongs to, else null.
+     */
+    wrongWayStep(undo) {
+        if (undo.length !== 1 || this.anchor >= this.steps.length)
+            return null;
+        const end = this.groups[this.groupOf[this.anchor]].end;
+        for (let i = this.anchor; i < end; i++)
+            if (this.steps[i].move.family === undo[0].family && this.stepStatus(i) !== "done")
+                return i;
+        return null;
     }
     /**
      * What to turn now, for an arrow: after a slip the first undo move; half way
@@ -90,17 +133,18 @@ export class SequenceTracker {
         const p = this.progress;
         if (p.complete)
             return null;
-        if (p.wrongWay) {
+        const ww = this.wrongWayStep(p.undo);
+        if (ww !== null) {
             // The face due went the wrong way (or too far): the turn to where it should be —
             // back and on in one go (U instead of U': a U2 the way U' goes).
-            const expected = this.steps[p.done].move;
+            const expected = this.steps[ww].move;
             const back = p.undo[0];
             const signed = (m) => (m.amount === 2 ? 2 * Math.sign(m.written ?? 2) : m.amount);
             let q = signed(back) + (expected.amount === 2 ? 2 * (Math.sign(signed(back)) || 1) : expected.amount);
             q = ((q % 4) + 4) % 4;
             const amount = (q === 3 ? -1 : q);
             const fix = amount === 2 ? { family: expected.family, amount: 2, written: 2 * (Math.sign(signed(expected)) || 1) } : { family: expected.family, amount };
-            return { kind: "wrong-way", arrows: [turnArrow(fix)], token: this.steps[p.done].token };
+            return { kind: "wrong-way", arrows: [turnArrow(fix)], token: this.steps[ww].token };
         }
         if (p.undo.length) {
             return { kind: "undo", arrows: [turnArrow(p.undo[0])], token: null };
@@ -110,15 +154,18 @@ export class SequenceTracker {
         if (!step)
             return null;
         const next = (moves) => ({ kind: "next", arrows: moves.map((m) => turnArrow(m)), token: step.token });
-        if (p.partial) {
-            if (step.move.amount === 2) {
-                for (const amount of [1, -1]) {
-                    const half = { family: step.move.family, amount };
-                    if (statesEqual(applyMove(this.path[k], half), this.cur))
-                        return next([half]);
-                }
+        const g = this.anchorGroup;
+        if (g) {
+            // Half turns started (R2 L2: one or both half done): the rest of each, the way it was started.
+            const halves = g.group.faces.flatMap((family, f) => {
+                const got = g.got[f];
+                return got !== 0 && got !== g.group.target[f] ? [{ family, amount: got === 1 ? 1 : -1 }] : [];
+            });
+            if (halves.length) {
+                const first = this.steps.findIndex((s, i) => i >= g.group.start && s.move.family === halves[0].family);
+                return { kind: "finish", arrows: halves.map((m) => turnArrow(m)), token: this.steps[first].token };
             }
-            return next([step.move]); // the opposite face went first: this one is left
+            // Else a face of the axis went first (R L done as L R): the next one left, as written.
         }
         const first = this.steps.findIndex((s) => s.token === step.token);
         if (first < k) {
@@ -127,31 +174,45 @@ export class SequenceTracker {
         }
         return { kind: "next", arrows: [turnArrow(this.written[step.token], this.frames[step.token])], token: step.token };
     }
-    /** Where the current state is on the path, if anywhere: after `done` steps (+ half of the next one). */
+    /**
+     * Where the current state is on the path, if anywhere: after `done` steps —
+     * or inside an axis group, each of its faces some way to its target (a
+     * half turn: any part, either way; a quarter: not yet or done).
+     */
     locate() {
         for (let k = this.path.length - 1; k >= 0; k--)
             if (statesEqual(this.path[k], this.cur))
-                return { done: k, partial: false };
-        for (let k = 0; k < this.steps.length; k++) {
-            const s = this.steps[k].move;
-            // Half of a half turn, either way.
-            if (s.amount === 2) {
-                for (const amount of [1, -1]) {
-                    if (statesEqual(applyMove(this.path[k], { family: s.family, amount }), this.cur))
-                        return { done: k, partial: true };
+                return { done: k, group: null };
+        for (let gi = this.groups.length - 1; gi >= 0; gi--) {
+            const group = this.groups[gi];
+            const options = group.target.map((t) => (t === 2 ? [0, 1, 2, 3] : t === 0 ? [0] : [0, t]));
+            for (const got of combinations(options)) {
+                if (got.every((q) => q === 0) || got.every((q, f) => q === group.target[f]))
+                    continue; // on the path: found above
+                let s = this.path[group.start];
+                got.forEach((q, f) => {
+                    if (q)
+                        s = applyMove(s, { family: group.faces[f], amount: q === 3 ? -1 : q });
+                });
+                if (!statesEqual(s, this.cur))
+                    continue;
+                const at = { group, got };
+                let done = group.start;
+                while (done < group.end) {
+                    const f = group.faces.indexOf(this.steps[done].move.family);
+                    if (got[f] !== group.target[f])
+                        break;
+                    done++;
                 }
-            }
-            // The next step on the opposite face done first (R L done as L R): count as progress on k.
-            const n = this.steps[k + 1];
-            if (n && opposite(s, n.move)) {
-                if (statesEqual(applyMove(this.path[k], n.move), this.cur))
-                    return { done: k, partial: true };
+                return { done, group: at };
             }
         }
         return null;
     }
 }
 const AXIS = { U: 1, D: 1, R: 0, L: 0, F: 2, B: 2 };
-function opposite(a, b) {
-    return a.family !== b.family && AXIS[a.family] !== undefined && AXIS[a.family] === AXIS[b.family];
+const sameAxis = (a, b) => AXIS[a.family] !== undefined && AXIS[a.family] === AXIS[b.family];
+/** Every pick of one value from each list. */
+function combinations(options) {
+    return options.reduce((acc, xs) => acc.flatMap((a) => xs.map((x) => [...a, x])), [[]]);
 }

package/element/sequence.d.ts

@@ -25,7 +25,9 @@
  * or the `player` property), the 3D cube shows the next turn — one arrow per
  * turning layer (two for a wide r), as many heads as quarter turns, in
  * --cc-arrow; after a slip the undo move in --cc-arrow-undo, or in
- * --cc-arrow-wrong-way when the right face went the wrong way.
+ * --cc-arrow-wrong-way when the right face went the wrong way; the rest of
+ * a half turn already started (R2 L2 half done, in any order) in
+ * --cc-arrow-finish.
  * `arrow-shape="circle"` for arcs instead of ribbons along the faces.
  *
  * After a slip the moves give way to the way back: the undo moves in their
@@ -65,7 +67,7 @@ export interface SequenceMessages {
     reset: string;
     complete: string;
 }
-export declare const SEQUENCE_STYLES = "\n:host {\n  --cc-seq-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  --cc-seq-size: 22px;\n  --cc-seq-gap: 0.35em;\n  --cc-seq-done: color-mix(in srgb, currentColor 35%, transparent);\n  --cc-seq-current: currentColor;\n  --cc-seq-current-bg: color-mix(in srgb, var(--cc-accent) 24%, transparent);\n  --cc-seq-partial: var(--cc-accent);\n  --cc-seq-todo: color-mix(in srgb, currentColor 82%, transparent);\n  --cc-seq-hidden: color-mix(in srgb, currentColor 45%, transparent);\n  --cc-seq-undo: #ff5a5a;\n  --cc-seq-wrong-way: #ff9a1f;\n  --cc-seq-decoration: color-mix(in srgb, currentColor 70%, transparent);\n  --cc-arrow: #2f8bff;\n  --cc-arrow-undo: #ff4545;\n  --cc-arrow-wrong-way: #ff9a1f;\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-radius: 8px;\n  display: block;\n}\n:host([headless]) .container { display: none; }\n.group { display: inline-flex; align-items: baseline; }\n.decoration { color: var(--cc-seq-decoration); }\n.container { display: flex; flex-direction: column; gap: 0.5em; }\n.container.slip .moves { display: none; }\n.container.slip .undo { font-size: var(--cc-seq-size); line-height: 1.5; }\n.moves { display: flex; flex-wrap: wrap; gap: 0.1em var(--cc-seq-gap); font: 600 var(--cc-seq-size) / 1.5 var(--cc-seq-font); }\n.move { padding: 0 0.18em; border-radius: 0.25em; transition: color 0.15s ease, background 0.15s ease; }\n.done { color: var(--cc-seq-done); }\n.current { color: var(--cc-seq-current); background: var(--cc-seq-current-bg); }\n.partial { color: var(--cc-seq-partial); background: var(--cc-seq-current-bg); }\n.wrong-way { color: var(--cc-seq-wrong-way); background: var(--cc-seq-current-bg); }\n.todo { color: var(--cc-seq-todo); }\n.hidden { color: var(--cc-seq-hidden); }\n.undo { display: none; color: var(--cc-seq-undo); gap: var(--cc-seq-gap); flex-wrap: wrap; align-items: baseline; font: 600 calc(var(--cc-seq-size) * 0.85) / 1.4 var(--cc-seq-font); }\n.undo.on { display: flex; }\n.undo-label { font: 600 0.65em/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.3em; }\n.message { display: none; font: 500 13px/1.4 system-ui, sans-serif; opacity: 0.85; }\n.message.on { display: block; }\n.controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.controls:empty { display: none; }\n:host([controls=\"none\"]) .controls { display: none; }\nbutton {\n  border: 0; border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg); color: inherit;\n  padding: 6px 11px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:focus-visible, input:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: color-mix(in srgb, var(--cc-accent) 25%, transparent); }\n";
+export declare const SEQUENCE_STYLES = "\n:host {\n  --cc-seq-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  --cc-seq-size: 22px;\n  --cc-seq-gap: 0.35em;\n  --cc-seq-done: color-mix(in srgb, currentColor 35%, transparent);\n  --cc-seq-current: currentColor;\n  --cc-seq-current-bg: color-mix(in srgb, var(--cc-accent) 24%, transparent);\n  --cc-seq-partial: var(--cc-accent);\n  --cc-seq-todo: color-mix(in srgb, currentColor 82%, transparent);\n  --cc-seq-hidden: color-mix(in srgb, currentColor 45%, transparent);\n  --cc-seq-undo: #ff5a5a;\n  --cc-seq-wrong-way: #ff9a1f;\n  --cc-seq-decoration: color-mix(in srgb, currentColor 70%, transparent);\n  --cc-arrow: #2f8bff;\n  --cc-arrow-undo: #ff4545;\n  --cc-arrow-wrong-way: #ff9a1f;\n  --cc-arrow-finish: #ff9a1f;\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-radius: 8px;\n  display: block;\n}\n:host([headless]) .container { display: none; }\n.group { display: inline-flex; align-items: baseline; }\n.decoration { color: var(--cc-seq-decoration); }\n.container { display: flex; flex-direction: column; gap: 0.5em; }\n.container.slip .moves { display: none; }\n.container.slip .undo { font-size: var(--cc-seq-size); line-height: 1.5; }\n.moves { display: flex; flex-wrap: wrap; gap: 0.1em var(--cc-seq-gap); font: 600 var(--cc-seq-size) / 1.5 var(--cc-seq-font); }\n.move { padding: 0 0.18em; border-radius: 0.25em; transition: color 0.15s ease, background 0.15s ease; }\n.done { color: var(--cc-seq-done); }\n.current { color: var(--cc-seq-current); background: var(--cc-seq-current-bg); }\n.partial { color: var(--cc-seq-partial); background: var(--cc-seq-current-bg); }\n.wrong-way { color: var(--cc-seq-wrong-way); background: var(--cc-seq-current-bg); }\n.todo { color: var(--cc-seq-todo); }\n.hidden { color: var(--cc-seq-hidden); }\n.undo { display: none; color: var(--cc-seq-undo); gap: var(--cc-seq-gap); flex-wrap: wrap; align-items: baseline; font: 600 calc(var(--cc-seq-size) * 0.85) / 1.4 var(--cc-seq-font); }\n.undo.on { display: flex; }\n.undo-label { font: 600 0.65em/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.3em; }\n.message { display: none; font: 500 13px/1.4 system-ui, sans-serif; opacity: 0.85; }\n.message.on { display: block; }\n.controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.controls:empty { display: none; }\n:host([controls=\"none\"]) .controls { display: none; }\nbutton {\n  border: 0; border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg); color: inherit;\n  padding: 6px 11px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:focus-visible, input:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: color-mix(in srgb, var(--cc-accent) 25%, transparent); }\n";
 export declare abstract class CubeSequenceElement extends ElementBase {
     protected readonly root: ShadowRoot;
     protected source: MoveSource | null;

package/element/sequence.js

@@ -25,7 +25,9 @@
  * or the `player` property), the 3D cube shows the next turn — one arrow per
  * turning layer (two for a wide r), as many heads as quarter turns, in
  * --cc-arrow; after a slip the undo move in --cc-arrow-undo, or in
- * --cc-arrow-wrong-way when the right face went the wrong way.
+ * --cc-arrow-wrong-way when the right face went the wrong way; the rest of
+ * a half turn already started (R2 L2 half done, in any order) in
+ * --cc-arrow-finish.
  * `arrow-shape="circle"` for arcs instead of ribbons along the faces.
  *
  * After a slip the moves give way to the way back: the undo moves in their
@@ -53,6 +55,7 @@ export const SEQUENCE_STYLES = /* css */ `
   --cc-arrow: #2f8bff;
   --cc-arrow-undo: #ff4545;
   --cc-arrow-wrong-way: #ff9a1f;
+  --cc-arrow-finish: #ff9a1f;
   --cc-accent: #4f8cff;
   --cc-control-bg: color-mix(in srgb, currentColor 8%, transparent);
   --cc-control-bg-hover: color-mix(in srgb, currentColor 15%, transparent);

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.11",
+  "version": "0.1.12",
   "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>",