Add OCLL and more examples.

cubing · Jan 2, 2021 · 77f9aff · 77f9aff
1 parent 7190eed
commit 77f9aff
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 51 deletions.
diff --git a/src/cubing/twisty/3D/puzzles/stickerings.ts b/src/cubing/twisty/3D/puzzles/stickerings.ts
@@ -132,6 +132,20 @@ export const stickerings: Record<ExperimentalStickering, PuzzleAppearance> = {
     },
   },
 
+  "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
@@ -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
@@ -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
@@ -43,13 +43,18 @@ <h2><code>cubing.js</code><br />Dev Apps</h2>
         🔄
         <a href="./twisty/cube3d-stickering.html">twisty/cube3d-stickering</a>
       </div>
+      <div>
+        🔄
+        <a href="./twisty/2d-stickering.html">twisty/2d-stickering</a>
+      </div>
       <div>🔄 <a href="./twisty/pg3d.html">twisty/pg3d</a></div>
       <div>🔄 <a href="./twisty/pyraminx.html">twisty/pyraminx</a></div>
       <div>🔄 <a href="./twisty/ll.html">twisty/ll</a></div>
       <div>🔄 <a href="./twisty/mkbhd.html">twisty/mkbhd</a></div>
       <div>🔄 <a href="./twisty/supercube.html">twisty/supercube</a></div>
       <div>🔄 <a href="./twisty/supercube-arrows.html">twisty/supercube-arrows</a></div>
       <div>🔄 <a href="./twisty/simultaneous.html">twisty/simultaneous</a></div>
+      <div>🔄 <a href="./twisty/2d-ll-stickering.html">twisty/2d-ll-stickering</a></div>
       <div>🖼 <a href="./kpuzzle/svg.html">KPuzzle SVG</a></div>
       <div>🕶 <a href="./vr/index.html">VR</a></div>
       <div>🕶 <a href="./vr/proxy/proxy.html">VR proxy</a></div>

diff --git a/src/demo/twisty/2d-ll-stickering.html b/src/demo/twisty/2d-ll-stickering.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <title>2D LL Stickering | twisty.js</title>
+    <link href="./inline.css" rel="stylesheet" type="text/css" />
+    <script src="../../cubing/twisty/index.ts"></script>
+  </head>
+
+  <body>
+    <div class="content">
+      <h1>2D LL Stickering</h1>
+      <h2>OLL</h2>
+      <twisty-player
+      visualization="experimental-2D-LL"
+      experimental-stickering="OLL"
+      experimental-start-setup="r U R' U R U2 r'"
+      control-panel="none"
+      background="none"
+      ></twisty-player>
+      <h2>PLL</h2>
+      <twisty-player
+      visualization="experimental-2D-LL"
+      experimental-stickering="PLL"
+      experimental-start-setup="R U R' U' R' F R2 U' R' U' R U R' F'"
+      control-panel="none"
+      background="none"
+      ></twisty-player>
+      <h2>COLL</h2>
+      <twisty-player
+      visualization="experimental-2D-LL"
+      experimental-stickering="COLL"
+      experimental-start-setup="L R' U' R U L' U2 R' U2 R"
+      control-panel="none"
+      background="none"
+      ></twisty-player>
+      <h2>OCLL</h2>
+      <twisty-player
+      visualization="experimental-2D-LL"
+      experimental-stickering="OCLL"
+      experimental-start-setup="R U2 R' U' R U' R'"
+      control-panel="none"
+      background="none"
+      ></twisty-player>
+      <h2>CLS</h2>
+      <twisty-player
+      visualization="experimental-2D-LL"
+      experimental-stickering="CLS"
+      experimental-start-setup="R U R' U2 R U R'"
+      control-panel="none"
+      background="none"
+      ></twisty-player>
+    </div>
+  </body>
+</html>
diff --git a/src/demo/twisty/2d-stickering.html b/src/demo/twisty/2d-stickering.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <title>2D Stickering | twisty.js</title>
+    <link href="./cube3d-stickering.css" rel="stylesheet" type="text/css" />
+    <script src="./2d-stickering.ts" defer></script>
+  </head>
+
+  <body>
+    <div class="content"></div>
+  </body>
+</html>
diff --git a/src/demo/twisty/2d-stickering.ts 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
@@ -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
@@ -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
@@ -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);
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { demo } from "./stickering-common";

		demo("2D");