Utensil's Zettelkasten-style forest of evergreen notes on math and tech.
utensil.tngl.sh/forest/
Twizzle also has alg stepping
+15
-17
+8
-6
bun/twisty.js
+8
-6
bun/twisty.js
···
1
1
// bun add cubing
2
2
3
3
// import { Alg } from "cubing/alg";
4
-
import { TwistyPlayer } from "cubing/twisty";
4
+
import { TwistyAlgViewer, TwistyPlayer } from 'cubing/twisty'
5
5
// import { randomScrambleForEvent } from "cubing/scramble";
6
6
7
7
const twistyOptions = window.twistyOptions || {
8
8
puzzle: '3x3x3',
9
9
hintFacelets: 'none',
10
10
controlPanel: 'bottom-row',
11
-
background: 'none'
11
+
background: 'none',
12
12
}
13
13
14
14
const twisty_tags = document.querySelectorAll('.twisty.grace-loading')
···
22
22
const twistyOptionsLocal = {
23
23
experimentalSetupAlg: setup || '',
24
24
alg: alg || '',
25
-
...twistyOptions
25
+
...twistyOptions,
26
26
}
27
27
28
28
const player = new TwistyPlayer(twistyOptionsLocal)
29
29
30
30
player.style.width = '95%'
31
31
32
-
// const pre = document.createElement('pre')
33
-
// pre.textContent = alg
32
+
const viewer = new TwistyAlgViewer({ twistyPlayer: player })
33
+
34
+
viewer.style.display = 'flex'
35
+
viewer.style.justifyContent = 'center'
34
36
35
37
twisty_tag.innerHTML = ''
36
38
37
-
// twisty_tag.appendChild(pre)
39
+
twisty_tag.appendChild(viewer)
38
40
39
41
twisty_tag.appendChild(player)
40
42
+7
-11
trees/uts-016H.tree
+7
-11
trees/uts-016H.tree
···
10
10
\note{Test Twizzle}{
11
11
12
12
\<html:div>[class]{twisty grace-loading}[data-setup]{x2 R U2' R2 U' R2 U' R2 U2' R}\verb>>>|
13
-
R U2'
14
-
R2 U'
15
-
R2 U'
16
-
R2 U2'
17
-
R
13
+
R U2' R2 U' R2 U' R2 U2' R
18
14
y'
19
-
M2' U
20
-
M U2
21
-
M' U
22
-
M2
15
+
M2' U M U2 M' U M2
23
16
>>>
24
17
25
-
\p{See [cubing.js](https://js.cubing.net/cubing/) for API.}
18
+
\md{
19
+
- API: [cubing.js](https://js.cubing.net/cubing/) and [full API reference](https://js.cubing.net/cubing/api/)
20
+
- available options for TwistyPlayer: [twisty-player-config](https://experiments.cubing.net/cubing.js/twisty/twisty-player-config.html)
21
+
- demo for TwistyAlgVier: [twisty-alg-viewer demo](https://experiments.cubing.net/cubing.js/twisty/twisty-alg-viewer.html) for use of alg viewer, inspired by [A supplement to "Commutators in the Rubik's Cube Group"](https://timothysun.info/commutator.html)
22
+
}
26
23
27
-
\p{See [twisty-player-config](https://experiments.cubing.net/cubing.js/twisty/twisty-player-config.html) for available options.}
28
24
}