From 8d8f2d5488b30a7fd4366ab7b106228bbe88c5b7 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 02:45:06 -0800 Subject: [PATCH 01/11] FREEZE.indexed --- src/cubing/bluetooth/gan.ts | 4 +- src/cubing/kpuzzle/svg.ts | 63 +++++++++++++++++++- src/cubing/puzzles/index.ts | 7 +++ src/cubing/twisty/dom/TwistyPlayer.ts | 21 ++++++- src/cubing/twisty/dom/viewers/Twisty2DSVG.ts | 33 +++++++++- src/demo/twisty/svg.ts | 1 + 6 files changed, 121 insertions(+), 8 deletions(-) diff --git a/src/cubing/bluetooth/gan.ts b/src/cubing/bluetooth/gan.ts index c8e7919a8..291a0b03b 100644 --- a/src/cubing/bluetooth/gan.ts +++ b/src/cubing/bluetooth/gan.ts @@ -4,7 +4,7 @@ import { Quaternion } from "three"; import { BareBlockMove, BlockMove } from "../alg"; import { KPuzzle } from "../kpuzzle"; import { KPuzzleDefinition } from "../puzzle-geometry/interfaces"; -import { puzzles } from "../puzzles"; +import * as puzzles from "../puzzles"; import { BluetoothConfig, BluetoothPuzzle, @@ -330,7 +330,7 @@ export class GanCube extends BluetoothPuzzle { ).moveCounter(); debugLog("Initial Move Counter:", initialMoveCounter); const cube = new GanCube( - await puzzles["3x3x3"].def(), + await puzzles.koob333.def(), ganCubeService, server, physicalStateCharacteristic, diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 9d9022c77..04a34ddff 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -1,3 +1,7 @@ +import type { + PuzzleAppearance, + FaceletMeshAppearance, +} from "../twisty/3D/puzzles/appearance"; // TODO import { KPuzzleDefinition, Transformation } from "./definition_types"; import { KPuzzle } from "./kpuzzle"; @@ -12,13 +16,55 @@ function nextSVGID(): string { return "svg" + svgCounter.toString(); } +const colorMap: Partial +>> = { + dim: { + "white": "#dddddd", + "orange": "#884400", + "limegreen": "#008800", + "red": "#660000", + "#26f": "#000088", + "yellow": "#888800", + }, + oriented: { + "white": "#ff88ff", + "orange": "#ff88ff", + "limegreen": "#ff88ff", + "red": "#ff88ff", + "#26f": "#ff88ff", + "yellow": "#ff88ff", + }, + ignored: { + "white": "#cccccc", + "orange": "#cccccc", + "limegreen": "#cccccc", + "red": "#cccccc", + "#26f": "#cccccc", + "yellow": "#cccccc", + }, + invisible: { + "white": "#00000000", + "orange": "#00000000", + "limegreen": "#00000000", + "red": "#00000000", + "#26f": "#00000000", + "yellow": "#00000000", + }, +}; + export class SVG { public element: HTMLElement; public gradientDefs: SVGDefsElement; private originalColors: { [type: string]: string } = {}; private gradients: { [type: string]: SVGGradientElement } = {}; private svgID: string; - constructor(public kPuzzleDefinition: KPuzzleDefinition, svgSource: string) { + constructor( + public kPuzzleDefinition: KPuzzleDefinition, + svgSource: string, + experimentalAppearance?: PuzzleAppearance, + ) { if (!svgSource) { throw new Error( `No SVG definition for puzzle type: ${kPuzzleDefinition.name}`, @@ -58,7 +104,20 @@ export class SVG { ) { const id = this.elementID(orbitName, idx, orientation); const elem = this.elementByID(id); - const originalColor = elem.style.fill as string; + let originalColor: string = elem.style.fill; + if (experimentalAppearance) { + const faceletMeshAppearance = + experimentalAppearance.orbits[orbitName].pieces[idx]?.facelets[ + orientation + ]; + switch (faceletMeshAppearance) { + case "dim": + originalColor = colorMap[faceletMeshAppearance]![originalColor]; + break; + } + } else { + originalColor = elem.style.fill as string; + } this.originalColors[id] = originalColor; this.gradients[id] = this.newGradient(id, originalColor); this.gradientDefs.appendChild(this.gradients[id]); diff --git a/src/cubing/puzzles/index.ts b/src/cubing/puzzles/index.ts index 3dcd9a49d..01a55ae72 100644 --- a/src/cubing/puzzles/index.ts +++ b/src/cubing/puzzles/index.ts @@ -9,6 +9,13 @@ import { skewb } from "./implementations/skewb"; import { square1 } from "./implementations/square1"; import { PuzzleManager } from "./PuzzleManager"; +module.exports["222"] = cube2x2x2; +module.exports["cube333"] = cube3x3x3; + +export const koob333 = cube3x3x3; + +export { cube2x2x2 as ads }; + export const puzzles: Record = { /******** Start of WCA Puzzles *******/ "3x3x3": cube3x3x3, diff --git a/src/cubing/twisty/dom/TwistyPlayer.ts b/src/cubing/twisty/dom/TwistyPlayer.ts index 97f642862..f8b043d60 100644 --- a/src/cubing/twisty/dom/TwistyPlayer.ts +++ b/src/cubing/twisty/dom/TwistyPlayer.ts @@ -39,7 +39,7 @@ import { TwistyPlayerInitialConfig, VisualizationFormat, } from "./TwistyPlayerConfig"; -import { Twisty2DSVG } from "./viewers/Twisty2DSVG"; +import { Twisty2DSVG, Twisty2DSVGOptions } from "./viewers/Twisty2DSVG"; import { Twisty3DCanvas } from "./viewers/Twisty3DCanvas"; import { TwistyViewerElement } from "./viewers/TwistyViewerElement"; import { @@ -206,6 +206,13 @@ export class TwistyPlayer extends ManagedCustomElement { experimentalStickering, }); } + console.log("sdfds", this.viewerElems); + if (this.viewerElems[0] instanceof Twisty2DSVG) { + console.log("fsdfd", this.viewerElems[0]); + (this.viewerElems[0] as Twisty2DSVG).experimentalSetStickering( + this.experimentalStickering, + ); + } } } @@ -382,8 +389,14 @@ export class TwistyPlayer extends ManagedCustomElement { } private setTwisty2DSVG(twisty2DSVG: Twisty2DSVG): void { + if (this.#renderMode !== "2D") { + return; + } + this.clearRenderMode(); + this.#viewerWrapper.clear(); this.#viewerWrapper.addElement(twisty2DSVG); + this.viewerElems.push(twisty2DSVG); } private setRenderMode3D(): void { @@ -483,11 +496,17 @@ export class TwistyPlayer extends ManagedCustomElement { switch (this.visualization) { case "2D": { + const options: Twisty2DSVGOptions = {}; + if (this.experimentalStickering) { + options.experimentalStickering = this.experimentalStickering; + } + this.setRenderMode2D(); const mainViewer = new Twisty2DSVG( cursor, def, await puzzleManager.svg(), + options, ); if (!pendingPuzzleUpdate.cancelled) { this.setTwisty2DSVG(mainViewer); diff --git a/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts b/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts index 8c6b169f8..c894ec0f8 100644 --- a/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts +++ b/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts @@ -6,6 +6,8 @@ import { SVG, Transformation, } from "../../../kpuzzle"; +import { PuzzleAppearance } from "../../3D/puzzles/appearance"; +import { stickerings } from "../../3D/puzzles/stickerings"; import { PositionDispatcher, PositionListener, @@ -14,9 +16,14 @@ import { PuzzlePosition } from "../../animation/cursor/CursorTypes"; import { RenderScheduler } from "../../animation/RenderScheduler"; import { ManagedCustomElement } from "../element/ManagedCustomElement"; import { customElementsShim } from "../element/node-custom-element-shims"; +import { ExperimentalStickering } from "../TwistyPlayerConfig"; import { twisty2DSVGCSS } from "./Twisty2DSVGView.css"; import { TwistyViewerElement } from "./TwistyViewerElement"; +export interface Twisty2DSVGOptions { + experimentalStickering?: ExperimentalStickering; +} + // export class Twisty2DSVG extends ManagedCustomElement @@ -27,15 +34,19 @@ export class Twisty2DSVG constructor( cursor?: PositionDispatcher, def?: KPuzzleDefinition, - svgSource?: string, + private svgSource?: string, + private options?: Twisty2DSVGOptions, ) { super(); this.addCSS(twisty2DSVGCSS); this.definition = def!; - this.svg = new SVG(this.definition, svgSource!); // TODO - this.addElement(this.svg.element); + this.resetSVG(); cursor!.addPositionListener(this); + + if (this.options?.experimentalStickering) { + this.experimentalSetStickering(this.options.experimentalStickering); + } } // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental @@ -71,6 +82,22 @@ export class Twisty2DSVG this.scheduler.requestAnimFrame(); } + experimentalSetStickering(stickering: ExperimentalStickering): void { + console.log("experimentalSetStickering", stickering); + const appearance = stickerings[stickering]; + console.log("appearance", appearance); + this.resetSVG(appearance); + } + + // TODO: do this without constructing a new SVG. + private resetSVG(appearance: PuzzleAppearance): void { + if (this.svg) { + this.removeElement(this.svg.element); + } + this.svg = new SVG(this.definition, this.svgSource!, appearance); // TODO + this.addElement(this.svg.element); + } + private render(): void { /*...*/ } diff --git a/src/demo/twisty/svg.ts b/src/demo/twisty/svg.ts index 50eca1a6c..34a292064 100644 --- a/src/demo/twisty/svg.ts +++ b/src/demo/twisty/svg.ts @@ -8,4 +8,5 @@ window.addEventListener("load", () => { alg: parseAlg("U M' U' R' U' R U M2' U' R' U r"), }); document.body.appendChild(twistyPlayer); + twistyPlayer.experimentalStickering = "CLS"; }); From 0640d99b4ae2326beb6d5946e13b9f9e595b7585 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 02:45:06 -0800 Subject: [PATCH 02/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 1 + src/demo/twisty/cube3d-stickering.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 04a34ddff..7c4b54be2 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -16,6 +16,7 @@ function nextSVGID(): string { return "svg" + svgCounter.toString(); } +// TODO: This is hardcoded to 3x3x3 SVGs const colorMap: Partial diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 4f2ad6cb3..805b40458 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -16,6 +16,7 @@ function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { const twistyPlayer = new TwistyPlayer({ experimentalStartSetup: invert(parseAlg(s)), alg: parseAlg(s), + visualization: "2D", experimentalStickering: stickering, }); div.appendChild(document.createElement("h1")).textContent = stickering; From 17c4dbca9711f677ba8689713bee6882d860d3f7 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 03:26:43 -0800 Subject: [PATCH 03/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 7c4b54be2..8c9402e36 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -1,6 +1,7 @@ import type { PuzzleAppearance, FaceletMeshAppearance, + FaceletAppearance, } from "../twisty/3D/puzzles/appearance"; // TODO import { KPuzzleDefinition, Transformation } from "./definition_types"; import { KPuzzle } from "./kpuzzle"; @@ -17,7 +18,7 @@ function nextSVGID(): string { } // TODO: This is hardcoded to 3x3x3 SVGs -const colorMap: Partial >> = { @@ -107,14 +108,30 @@ export class SVG { const elem = this.elementByID(id); let originalColor: string = elem.style.fill; if (experimentalAppearance) { - const faceletMeshAppearance = - experimentalAppearance.orbits[orbitName].pieces[idx]?.facelets[ - orientation - ]; - switch (faceletMeshAppearance) { - case "dim": - originalColor = colorMap[faceletMeshAppearance]![originalColor]; - break; + // TODO: dedup with Cube3D + const a = experimentalAppearance.orbits; + if (!a) { + continue; + } + const orbitAppearance = a[orbitName]; + if (!orbitAppearance) { + continue; + } + const pieceAppearance = orbitAppearance.pieces[idx]; + if (!pieceAppearance) { + continue; + } + const faceletAppearance = pieceAppearance.facelets[orientation]; + if (!faceletAppearance) { + continue; + } + const appearance = + typeof faceletAppearance === "string" + ? faceletAppearance + : faceletAppearance?.appearance; + const colorMap = colorMaps[appearance]; + if (colorMap) { + originalColor = colorMap[originalColor]; } } else { originalColor = elem.style.fill as string; From 17748e0b0fccabf00b65967805c5f6b9589c0b29 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 03:31:41 -0800 Subject: [PATCH 04/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 8c9402e36..ac116b9bd 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -27,7 +27,7 @@ const colorMaps: Partial Date: Sat, 2 Jan 2021 03:41:09 -0800 Subject: [PATCH 05/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 52 +++++++++++---------- src/cubing/twisty/3D/puzzles/stickerings.ts | 2 +- src/demo/twisty/cube3d-stickering.ts | 4 +- src/demo/twisty/svg.ts | 4 +- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index ac116b9bd..fe660c7b5 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -108,31 +108,33 @@ export class SVG { const elem = this.elementByID(id); let originalColor: string = elem.style.fill; if (experimentalAppearance) { - // TODO: dedup with Cube3D - const a = experimentalAppearance.orbits; - if (!a) { - continue; - } - const orbitAppearance = a[orbitName]; - if (!orbitAppearance) { - continue; - } - const pieceAppearance = orbitAppearance.pieces[idx]; - if (!pieceAppearance) { - continue; - } - const faceletAppearance = pieceAppearance.facelets[orientation]; - if (!faceletAppearance) { - continue; - } - const appearance = - typeof faceletAppearance === "string" - ? faceletAppearance - : faceletAppearance?.appearance; - const colorMap = colorMaps[appearance]; - if (colorMap) { - originalColor = colorMap[originalColor]; - } + (() => { + // TODO: dedup with Cube3D + const a = experimentalAppearance.orbits; + if (!a) { + return; + } + const orbitAppearance = a[orbitName]; + if (!orbitAppearance) { + return; + } + const pieceAppearance = orbitAppearance.pieces[idx]; + if (!pieceAppearance) { + return; + } + const faceletAppearance = pieceAppearance.facelets[orientation]; + if (!faceletAppearance) { + return; + } + const appearance = + typeof faceletAppearance === "string" + ? faceletAppearance + : faceletAppearance?.appearance; + const colorMap = colorMaps[appearance]; + if (colorMap) { + originalColor = colorMap[originalColor]; + } + })(); } else { originalColor = elem.style.fill as string; } diff --git a/src/cubing/twisty/3D/puzzles/stickerings.ts b/src/cubing/twisty/3D/puzzles/stickerings.ts index c6c5d9ca6..aa3c95e12 100644 --- a/src/cubing/twisty/3D/puzzles/stickerings.ts +++ b/src/cubing/twisty/3D/puzzles/stickerings.ts @@ -37,7 +37,7 @@ const oi: PieceAppearance = { }; const invis: PieceAppearance = { - facelets: ["invisible", "invisible", "invisible"], + facelets: ["invisible", "invisible", "invisible", "invisible"], // TODO: 4th entry is for void cube. Should be handled properly for all stickerings. }; const c: PieceAppearance = { diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 805b40458..9a9a0a121 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -16,7 +16,7 @@ function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { const twistyPlayer = new TwistyPlayer({ experimentalStartSetup: invert(parseAlg(s)), alg: parseAlg(s), - visualization: "2D", + // visualization: "2D", experimentalStickering: stickering, }); div.appendChild(document.createElement("h1")).textContent = stickering; @@ -46,5 +46,5 @@ addAlg("Daisy", "S2 R2 L2"); addAlg("Cross", "(y' R)5 D"); addAlg("2x2x2", "y2"); addAlg("2x2x3", "y"); -addAlg("Void Cube", ""); +addAlg("Void Cube", "M' U M' U M' U' M' U' M' U2' M' U' M' U'"); addAlg("invisible", ""); diff --git a/src/demo/twisty/svg.ts b/src/demo/twisty/svg.ts index 34a292064..400c707ae 100644 --- a/src/demo/twisty/svg.ts +++ b/src/demo/twisty/svg.ts @@ -5,8 +5,8 @@ window.addEventListener("load", () => { const twistyPlayer = new TwistyPlayer({ puzzle: "3x3x3", visualization: "2D", - alg: parseAlg("U M' U' R' U' R U M2' U' R' U r"), + alg: parseAlg("M' U M' U M' U' M' U' M' U2' M' U' M' U'"), }); document.body.appendChild(twistyPlayer); - twistyPlayer.experimentalStickering = "CLS"; + twistyPlayer.experimentalStickering = "Void Cube"; }); From d3efcb6196af0f266ffcf58e30fa39364b07d4e2 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 03:45:36 -0800 Subject: [PATCH 06/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index fe660c7b5..02be377ce 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -109,7 +109,7 @@ export class SVG { let originalColor: string = elem.style.fill; if (experimentalAppearance) { (() => { - // TODO: dedup with Cube3D + // TODO: dedup with Cube3D,,factor out fallback calculations const a = experimentalAppearance.orbits; if (!a) { return; From 088b067d142e9d4724375976ec3f5e5c47c99add Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 04:04:50 -0800 Subject: [PATCH 07/11] FREEZE.unindexed --- src/cubing/kpuzzle/svg.ts | 12 ++-- .../3x3x3/3x3x3-ll.kpuzzle.svg.ts | 54 +++++++++--------- .../puzzles/implementations/3x3x3/index.ts | 2 +- .../3x3x3/src/3x3x3-ll.kpuzzle.svg | 56 +++++++++---------- src/demo/twisty/cube3d-stickering.ts | 2 +- 5 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 02be377ce..5f6f9a562 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -39,12 +39,12 @@ const colorMaps: Partial - + 3x3x3 LL @@ -7,32 +7,32 @@ export default ` - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/cubing/puzzles/implementations/3x3x3/index.ts b/src/cubing/puzzles/implementations/3x3x3/index.ts index bed3d52ad..3811109cd 100644 --- a/src/cubing/puzzles/implementations/3x3x3/index.ts +++ b/src/cubing/puzzles/implementations/3x3x3/index.ts @@ -14,7 +14,7 @@ export const cube3x3x3: PuzzleManager = { return kpuzzle3x3x3; }, svg: async () => { - return (await import("./3x3x3.kpuzzle.svg")).default; + return (await import("./3x3x3-ll.kpuzzle.svg")).default; }, llSVG: async () => { return (await import("./3x3x3-ll.kpuzzle.svg")).default; diff --git a/src/cubing/puzzles/implementations/3x3x3/src/3x3x3-ll.kpuzzle.svg b/src/cubing/puzzles/implementations/3x3x3/src/3x3x3-ll.kpuzzle.svg index 6b0a053a7..9c63681ad 100644 --- a/src/cubing/puzzles/implementations/3x3x3/src/3x3x3-ll.kpuzzle.svg +++ b/src/cubing/puzzles/implementations/3x3x3/src/3x3x3-ll.kpuzzle.svg @@ -1,5 +1,5 @@ - + 3x3x3 LL @@ -7,32 +7,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -105,4 +105,4 @@ - +` diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 9a9a0a121..4fe45d667 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -16,7 +16,7 @@ function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { const twistyPlayer = new TwistyPlayer({ experimentalStartSetup: invert(parseAlg(s)), alg: parseAlg(s), - // visualization: "2D", + visualization: "2D", experimentalStickering: stickering, }); div.appendChild(document.createElement("h1")).textContent = stickering; From 0432afb19bf50493c43e01f013bc21d21633e367 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 04:13:28 -0800 Subject: [PATCH 08/11] FREEZE.indexed --- src/cubing/kpuzzle/svg.ts | 4 ++-- src/cubing/twisty/dom/TwistyPlayer.ts | 2 -- src/cubing/twisty/dom/viewers/Twisty2DSVG.ts | 9 ++++++--- src/demo/twisty/cube3d-stickering.ts | 2 +- src/demo/twisty/svg.ts | 1 - 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/cubing/kpuzzle/svg.ts b/src/cubing/kpuzzle/svg.ts index 5f6f9a562..ade4890fd 100644 --- a/src/cubing/kpuzzle/svg.ts +++ b/src/cubing/kpuzzle/svg.ts @@ -1,7 +1,6 @@ import type { - PuzzleAppearance, FaceletMeshAppearance, - FaceletAppearance, + PuzzleAppearance, } from "../twisty/3D/puzzles/appearance"; // TODO import { KPuzzleDefinition, Transformation } from "./definition_types"; import { KPuzzle } from "./kpuzzle"; @@ -107,6 +106,7 @@ export class SVG { const id = this.elementID(orbitName, idx, orientation); const elem = this.elementByID(id); let originalColor: string = elem.style.fill; + /// TODO: Allow setting appearance dynamically. if (experimentalAppearance) { (() => { // TODO: dedup with Cube3D,,factor out fallback calculations diff --git a/src/cubing/twisty/dom/TwistyPlayer.ts b/src/cubing/twisty/dom/TwistyPlayer.ts index f8b043d60..670d27cb0 100644 --- a/src/cubing/twisty/dom/TwistyPlayer.ts +++ b/src/cubing/twisty/dom/TwistyPlayer.ts @@ -206,9 +206,7 @@ export class TwistyPlayer extends ManagedCustomElement { experimentalStickering, }); } - console.log("sdfds", this.viewerElems); if (this.viewerElems[0] instanceof Twisty2DSVG) { - console.log("fsdfd", this.viewerElems[0]); (this.viewerElems[0] as Twisty2DSVG).experimentalSetStickering( this.experimentalStickering, ); diff --git a/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts b/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts index c894ec0f8..369de783c 100644 --- a/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts +++ b/src/cubing/twisty/dom/viewers/Twisty2DSVG.ts @@ -31,6 +31,7 @@ export class Twisty2DSVG private definition: KPuzzleDefinition; private svg: SVG; private scheduler = new RenderScheduler(this.render.bind(this)); + #cachedPosition: PuzzlePosition | null = null; // TODO: pull when needed. constructor( cursor?: PositionDispatcher, def?: KPuzzleDefinition, @@ -75,6 +76,7 @@ export class Twisty2DSVG ); } else { this.svg.draw(this.definition, position.state as Transformation); + this.#cachedPosition = position; } } @@ -83,19 +85,20 @@ export class Twisty2DSVG } experimentalSetStickering(stickering: ExperimentalStickering): void { - console.log("experimentalSetStickering", stickering); const appearance = stickerings[stickering]; - console.log("appearance", appearance); this.resetSVG(appearance); } // TODO: do this without constructing a new SVG. - private resetSVG(appearance: PuzzleAppearance): void { + private resetSVG(appearance?: PuzzleAppearance): void { if (this.svg) { this.removeElement(this.svg.element); } this.svg = new SVG(this.definition, this.svgSource!, appearance); // TODO this.addElement(this.svg.element); + if (this.#cachedPosition) { + this.onPositionChange(this.#cachedPosition); + } } private render(): void { diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 4fe45d667..9a9a0a121 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -16,7 +16,7 @@ function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { const twistyPlayer = new TwistyPlayer({ experimentalStartSetup: invert(parseAlg(s)), alg: parseAlg(s), - visualization: "2D", + // visualization: "2D", experimentalStickering: stickering, }); div.appendChild(document.createElement("h1")).textContent = stickering; diff --git a/src/demo/twisty/svg.ts b/src/demo/twisty/svg.ts index 400c707ae..3f6136179 100644 --- a/src/demo/twisty/svg.ts +++ b/src/demo/twisty/svg.ts @@ -8,5 +8,4 @@ window.addEventListener("load", () => { alg: parseAlg("M' U M' U M' U' M' U' M' U2' M' U' M' U'"), }); document.body.appendChild(twistyPlayer); - twistyPlayer.experimentalStickering = "Void Cube"; }); From 7190eed3d44f241615a566cec04486a921ef9a0a Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 04:21:20 -0800 Subject: [PATCH 09/11] FREEZE.unindexed --- src/cubing/puzzles/implementations/3x3x3/index.ts | 2 +- src/cubing/twisty/dom/TwistyPlayer.ts | 10 ++++++++-- src/cubing/twisty/dom/TwistyPlayerConfig.ts | 1 + src/demo/twisty/cube3d-stickering.ts | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/cubing/puzzles/implementations/3x3x3/index.ts b/src/cubing/puzzles/implementations/3x3x3/index.ts index 3811109cd..bed3d52ad 100644 --- a/src/cubing/puzzles/implementations/3x3x3/index.ts +++ b/src/cubing/puzzles/implementations/3x3x3/index.ts @@ -14,7 +14,7 @@ export const cube3x3x3: PuzzleManager = { return kpuzzle3x3x3; }, svg: async () => { - return (await import("./3x3x3-ll.kpuzzle.svg")).default; + return (await import("./3x3x3.kpuzzle.svg")).default; }, llSVG: async () => { return (await import("./3x3x3-ll.kpuzzle.svg")).default; diff --git a/src/cubing/twisty/dom/TwistyPlayer.ts b/src/cubing/twisty/dom/TwistyPlayer.ts index 670d27cb0..922628fd2 100644 --- a/src/cubing/twisty/dom/TwistyPlayer.ts +++ b/src/cubing/twisty/dom/TwistyPlayer.ts @@ -338,7 +338,8 @@ export class TwistyPlayer extends ManagedCustomElement { // TODO: specify exactly when back views are possible. // TODO: Are there any SVGs where we'd want a separate back view? - const setBackView: boolean = this.backView && this.visualization !== "2D"; + const setBackView: boolean = + this.backView && is3DVisualization(this.visualization); const backView: BackViewLayout = setBackView ? (this.backView as BackViewLayout) : "none"; @@ -493,6 +494,7 @@ export class TwistyPlayer extends ManagedCustomElement { } switch (this.visualization) { case "2D": + case "experimental-2D-LL": { const options: Twisty2DSVGOptions = {}; if (this.experimentalStickering) { @@ -500,10 +502,14 @@ export class TwistyPlayer extends ManagedCustomElement { } this.setRenderMode2D(); + const svgPromiseFn = + this.visualization === "2D" + ? puzzleManager.svg + : puzzleManager.llSVG ?? puzzleManager.svg; const mainViewer = new Twisty2DSVG( cursor, def, - await puzzleManager.svg(), + await svgPromiseFn(), options, ); if (!pendingPuzzleUpdate.cancelled) { diff --git a/src/cubing/twisty/dom/TwistyPlayerConfig.ts b/src/cubing/twisty/dom/TwistyPlayerConfig.ts index ccf0822d7..dbe786438 100644 --- a/src/cubing/twisty/dom/TwistyPlayerConfig.ts +++ b/src/cubing/twisty/dom/TwistyPlayerConfig.ts @@ -25,6 +25,7 @@ export const cubeCameraPosition = new Vector3(3, 4, 5); export const visualizationFormats = { "3D": true, // default "2D": true, + "experimental-2D-LL": true, // TODO "PG3D": true, }; export type VisualizationFormat = keyof typeof visualizationFormats; diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 9a9a0a121..81faf93cc 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -16,7 +16,7 @@ function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { const twistyPlayer = new TwistyPlayer({ experimentalStartSetup: invert(parseAlg(s)), alg: parseAlg(s), - // visualization: "2D", + visualization: "experimental-2D-LL", experimentalStickering: stickering, }); div.appendChild(document.createElement("h1")).textContent = stickering; From 77f9affe624fb7803994b57ec9e69f68fb1d40f3 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 04:49:22 -0800 Subject: [PATCH 10/11] Add OCLL and more examples. --- src/cubing/twisty/3D/puzzles/stickerings.ts | 14 ++++++ src/cubing/twisty/dom/TwistyPlayer.css.ts | 1 - src/cubing/twisty/dom/TwistyPlayerConfig.ts | 1 + src/demo/index.html | 5 ++ src/demo/twisty/2d-ll-stickering.html | 55 +++++++++++++++++++++ src/demo/twisty/2d-stickering.html | 13 +++++ src/demo/twisty/2d-stickering.ts | 3 ++ src/demo/twisty/cube3d-stickering.ts | 51 +------------------ src/demo/twisty/stickering-common.ts | 54 ++++++++++++++++++++ src/demo/twisty/svg.ts | 2 +- 10 files changed, 148 insertions(+), 51 deletions(-) create mode 100644 src/demo/twisty/2d-ll-stickering.html create mode 100644 src/demo/twisty/2d-stickering.html create mode 100644 src/demo/twisty/2d-stickering.ts create mode 100644 src/demo/twisty/stickering-common.ts diff --git a/src/cubing/twisty/3D/puzzles/stickerings.ts b/src/cubing/twisty/3D/puzzles/stickerings.ts index aa3c95e12..9b1735232 100644 --- a/src/cubing/twisty/3D/puzzles/stickerings.ts +++ b/src/cubing/twisty/3D/puzzles/stickerings.ts @@ -132,6 +132,20 @@ export const stickerings: Record = { }, }, + "OCLL": { + orbits: { + EDGES: { + pieces: [di, di, di, di, d, d, d, d, d, d, d, d], + }, + CORNERS: { + pieces: [o, o, o, o, d, d, d, d], + }, + CENTERS: { + pieces: [p, d, d, d, d, d], + }, + }, + }, + "ELS": { orbits: { EDGES: { diff --git a/src/cubing/twisty/dom/TwistyPlayer.css.ts b/src/cubing/twisty/dom/TwistyPlayer.css.ts index af24d7c7e..3ddfa96ab 100644 --- a/src/cubing/twisty/dom/TwistyPlayer.css.ts +++ b/src/cubing/twisty/dom/TwistyPlayer.css.ts @@ -8,7 +8,6 @@ export const twistyPlayerCSS = new CSSSource(` contain: content; display: grid; box-sizing: border-box; - border: 1px solid rgba(0, 0, 0, 0.1); } .wrapper { diff --git a/src/cubing/twisty/dom/TwistyPlayerConfig.ts b/src/cubing/twisty/dom/TwistyPlayerConfig.ts index dbe786438..b1e861cbb 100644 --- a/src/cubing/twisty/dom/TwistyPlayerConfig.ts +++ b/src/cubing/twisty/dom/TwistyPlayerConfig.ts @@ -52,6 +52,7 @@ export const experimentalStickerings = { "CLS": true, "OLL": true, "COLL": true, + "OCLL": true, "ELS": true, "LL": true, "F2L": true, diff --git a/src/demo/index.html b/src/demo/index.html index 5ceb60ce7..3cb385ab3 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -43,6 +43,10 @@

cubing.js
Dev Apps

🔄 twisty/cube3d-stickering +
+ 🔄 + twisty/2d-stickering +
🔄 twisty/pg3d
🔄 twisty/pyraminx
🔄 twisty/ll
@@ -50,6 +54,7 @@

cubing.js
Dev Apps

🔄 twisty/supercube
+
🖼 KPuzzle SVG
🕶 VR
🕶 VR proxy
diff --git a/src/demo/twisty/2d-ll-stickering.html b/src/demo/twisty/2d-ll-stickering.html new file mode 100644 index 000000000..e8d750cbc --- /dev/null +++ b/src/demo/twisty/2d-ll-stickering.html @@ -0,0 +1,55 @@ + + + + + 2D LL Stickering | twisty.js + + + + + +
+

2D LL Stickering

+

OLL

+ +

PLL

+ +

COLL

+ +

OCLL

+ +

CLS

+ +
+ + diff --git a/src/demo/twisty/2d-stickering.html b/src/demo/twisty/2d-stickering.html new file mode 100644 index 000000000..314258cce --- /dev/null +++ b/src/demo/twisty/2d-stickering.html @@ -0,0 +1,13 @@ + + + + + 2D Stickering | twisty.js + + + + + +
+ + diff --git a/src/demo/twisty/2d-stickering.ts b/src/demo/twisty/2d-stickering.ts new file mode 100644 index 000000000..6879bb3f3 --- /dev/null +++ b/src/demo/twisty/2d-stickering.ts @@ -0,0 +1,3 @@ +import { demo } from "./stickering-common"; + +demo("2D"); diff --git a/src/demo/twisty/cube3d-stickering.ts b/src/demo/twisty/cube3d-stickering.ts index 81faf93cc..7eca074ab 100644 --- a/src/demo/twisty/cube3d-stickering.ts +++ b/src/demo/twisty/cube3d-stickering.ts @@ -1,50 +1,3 @@ -import { invert, parseAlg } from "../../cubing/alg"; -import { - Cube3D, - experimentalSetShareAllNewRenderers, - ExperimentalStickering, - TwistyPlayer, -} from "../../cubing/twisty"; +import { demo } from "./stickering-common"; -experimentalSetShareAllNewRenderers(true); - -const content = document.querySelector(".content")!; - -function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { - const div = content.appendChild(document.createElement("div")); - div.classList.add("case"); - const twistyPlayer = new TwistyPlayer({ - experimentalStartSetup: invert(parseAlg(s)), - alg: parseAlg(s), - visualization: "experimental-2D-LL", - experimentalStickering: stickering, - }); - div.appendChild(document.createElement("h1")).textContent = stickering; - div.appendChild(twistyPlayer); - return twistyPlayer.twisty3D as Cube3D; -} - -addAlg("full", "y L' U R' F' U L2 U2' L' U' L U2' D R' D' F2 R2 U'"); -addAlg("centers-only", "(x y)3"); -addAlg("PLL", "R U R' U' R' F R2 U' R' U' R U R' F'"); -addAlg("CLS", "R U R' U' R U R' U R U' R'"); -addAlg("OLL", "r U R' U R U2 r'"); -addAlg("COLL", "L R' U' R U L' U2 R' U2 R"); -addAlg("ELS", "[r U' r': U]"); -addAlg("LL", "R' F R F2' U F R U R' F' U' F"); -addAlg("F2L", "R2' u R2 u' R2'"); -addAlg("ZBLL", "R' F R U' R' U' R U R' F' R U R' U' R' F R F' R"); -addAlg("ZBLS", "x' R2 U' R' U l'"); -addAlg("WVLS", "R U R' U R U' R'"); -addAlg("VLS", "R' F2 R F2' L' U2 L"); -addAlg("LS", "U' R U' R' U R U R'"); -addAlg("EO", "R' F R"); -addAlg("CMLL", "F R U R' U' F'"); -addAlg("L6E", "U M2' U' M2'"); -addAlg("L6EO", "(U' M U' M')2"); -addAlg("Daisy", "S2 R2 L2"); -addAlg("Cross", "(y' R)5 D"); -addAlg("2x2x2", "y2"); -addAlg("2x2x3", "y"); -addAlg("Void Cube", "M' U M' U M' U' M' U' M' U2' M' U' M' U'"); -addAlg("invisible", ""); +demo("3D"); diff --git a/src/demo/twisty/stickering-common.ts b/src/demo/twisty/stickering-common.ts new file mode 100644 index 000000000..44ce0f795 --- /dev/null +++ b/src/demo/twisty/stickering-common.ts @@ -0,0 +1,54 @@ +import { invert, parseAlg } from "../../cubing/alg"; +import { + Cube3D, + experimentalSetShareAllNewRenderers, + ExperimentalStickering, + TwistyPlayer, +} from "../../cubing/twisty"; +import { VisualizationFormat } from "../../cubing/twisty/dom/TwistyPlayerConfig"; + +export function demo(visualization: VisualizationFormat): void { + experimentalSetShareAllNewRenderers(true); + + const content = document.querySelector(".content")!; + + function addAlg(stickering: ExperimentalStickering, s: string): Cube3D { + const div = content.appendChild(document.createElement("div")); + div.classList.add("case"); + const twistyPlayer = new TwistyPlayer({ + experimentalStartSetup: invert(parseAlg(s)), + alg: parseAlg(s), + visualization, + experimentalStickering: stickering, + }); + div.appendChild(document.createElement("h1")).textContent = stickering; + div.appendChild(twistyPlayer); + return twistyPlayer.twisty3D as Cube3D; + } + + addAlg("full", "y L' U R' F' U L2 U2' L' U' L U2' D R' D' F2 R2 U'"); + addAlg("centers-only", "(x y)3"); + addAlg("PLL", "R U R' U' R' F R2 U' R' U' R U R' F'"); + addAlg("CLS", "R U R' U' R U R' U R U' R'"); + addAlg("OLL", "r U R' U R U2 r'"); + addAlg("COLL", "L R' U' R U L' U2 R' U2 R"); + addAlg("OCLL", "R U R' U R U2 R'"); + addAlg("ELS", "[r U' r': U]"); + addAlg("LL", "R' F R F2' U F R U R' F' U' F"); + addAlg("F2L", "R2' u R2 u' R2'"); + addAlg("ZBLL", "R' F R U' R' U' R U R' F' R U R' U' R' F R F' R"); + addAlg("ZBLS", "x' R2 U' R' U l'"); + addAlg("WVLS", "R U R' U R U' R'"); + addAlg("VLS", "R' F2 R F2' L' U2 L"); + addAlg("LS", "U' R U' R' U R U R'"); + addAlg("EO", "R' F R"); + addAlg("CMLL", "F R U R' U' F'"); + addAlg("L6E", "U M2' U' M2'"); + addAlg("L6EO", "(U' M U' M')2"); + addAlg("Daisy", "S2 R2 L2"); + addAlg("Cross", "(y' R)5 D"); + addAlg("2x2x2", "y2"); + addAlg("2x2x3", "y"); + addAlg("Void Cube", "M' U M' U M' U' M' U' M' U2' M' U' M' U'"); + addAlg("invisible", ""); +} diff --git a/src/demo/twisty/svg.ts b/src/demo/twisty/svg.ts index 3f6136179..50eca1a6c 100644 --- a/src/demo/twisty/svg.ts +++ b/src/demo/twisty/svg.ts @@ -5,7 +5,7 @@ window.addEventListener("load", () => { const twistyPlayer = new TwistyPlayer({ puzzle: "3x3x3", visualization: "2D", - alg: parseAlg("M' U M' U M' U' M' U' M' U2' M' U' M' U'"), + alg: parseAlg("U M' U' R' U' R U M2' U' R' U r"), }); document.body.appendChild(twistyPlayer); }); From 7fc2f3ac11327dcd8fc8cfe803a25eda18815806 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Sat, 2 Jan 2021 04:59:15 -0800 Subject: [PATCH 11/11] Add ELL. --- src/cubing/twisty/3D/puzzles/stickerings.ts | 14 ++++++++++++++ src/cubing/twisty/dom/TwistyPlayerConfig.ts | 1 + src/demo/index.html | 2 +- src/demo/twisty/2d-ll-stickering.html | 8 ++++++++ src/demo/twisty/stickering-common.ts | 1 + 5 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/cubing/twisty/3D/puzzles/stickerings.ts b/src/cubing/twisty/3D/puzzles/stickerings.ts index 9b1735232..a672a14d8 100644 --- a/src/cubing/twisty/3D/puzzles/stickerings.ts +++ b/src/cubing/twisty/3D/puzzles/stickerings.ts @@ -146,6 +146,20 @@ export const stickerings: Record = { }, }, + "ELL": { + orbits: { + EDGES: { + pieces: [r, r, r, r, d, d, d, d, d, d, d, d], + }, + CORNERS: { + pieces: [d, d, d, d, d, d, d, d], + }, + CENTERS: { + pieces: [p, d, d, d, d, d], + }, + }, + }, + "ELS": { orbits: { EDGES: { diff --git a/src/cubing/twisty/dom/TwistyPlayerConfig.ts b/src/cubing/twisty/dom/TwistyPlayerConfig.ts index b1e861cbb..92a6b2634 100644 --- a/src/cubing/twisty/dom/TwistyPlayerConfig.ts +++ b/src/cubing/twisty/dom/TwistyPlayerConfig.ts @@ -53,6 +53,7 @@ export const experimentalStickerings = { "OLL": true, "COLL": true, "OCLL": true, + "ELL": true, "ELS": true, "LL": true, "F2L": true, diff --git a/src/demo/index.html b/src/demo/index.html index 3cb385ab3..e96b6b580 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -47,6 +47,7 @@

cubing.js
Dev Apps

🔄 twisty/2d-stickering +
🔄 twisty/pg3d
🔄 twisty/pyraminx
🔄 twisty/ll
@@ -54,7 +55,6 @@

cubing.js
Dev Apps

🔄 twisty/supercube
-
🖼 KPuzzle SVG
🕶 VR
🕶 VR proxy
diff --git a/src/demo/twisty/2d-ll-stickering.html b/src/demo/twisty/2d-ll-stickering.html index e8d750cbc..75a7056b4 100644 --- a/src/demo/twisty/2d-ll-stickering.html +++ b/src/demo/twisty/2d-ll-stickering.html @@ -42,6 +42,14 @@

OCLL

control-panel="none" background="none" > +

ELL

+

CLS