cubing 0.28.1 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/esm/alg/index.js +2 -2
- package/dist/esm/bluetooth/index.js +222 -86
- package/dist/esm/bluetooth/index.js.map +3 -3
- package/dist/esm/{chunk-F4WWCPVE.js → chunk-2IZUSAXQ.js} +2 -2
- package/dist/esm/{chunk-F4WWCPVE.js.map → chunk-2IZUSAXQ.js.map} +1 -1
- package/dist/esm/{chunk-YSVFZVG4.js → chunk-DZGFGBKT.js} +183 -76
- package/dist/esm/chunk-DZGFGBKT.js.map +7 -0
- package/dist/esm/{chunk-7D7LW3WQ.js → chunk-GW4FGG42.js} +8 -4
- package/dist/esm/{chunk-7D7LW3WQ.js.map → chunk-GW4FGG42.js.map} +1 -1
- package/dist/esm/{chunk-32FWPPTW.js → chunk-LSCTPPWV.js} +22 -8
- package/dist/esm/{chunk-32FWPPTW.js.map → chunk-LSCTPPWV.js.map} +1 -1
- package/dist/esm/{chunk-LSVR2HCG.js → chunk-LV7IKG36.js} +389 -363
- package/dist/esm/{chunk-LSVR2HCG.js.map → chunk-LV7IKG36.js.map} +1 -1
- package/dist/esm/{chunk-CSBUJ64Q.js → chunk-NI7U4XAZ.js} +373 -238
- package/dist/esm/chunk-NI7U4XAZ.js.map +7 -0
- package/dist/esm/{chunk-GVPTO3OF.js → chunk-OX6O2ZO5.js} +1 -1
- package/dist/esm/{chunk-GVPTO3OF.js.map → chunk-OX6O2ZO5.js.map} +1 -1
- package/dist/esm/{chunk-67VJZGH2.js → chunk-PYWGREIP.js} +44 -13
- package/dist/esm/chunk-PYWGREIP.js.map +7 -0
- package/dist/esm/{chunk-WAL36PO3.js → chunk-Q4W5ZR4U.js} +28 -12
- package/dist/esm/{chunk-WAL36PO3.js.map → chunk-Q4W5ZR4U.js.map} +1 -1
- package/dist/esm/{chunk-MGJA5U5O.js → chunk-SBZRVSPK.js} +1 -12
- package/dist/esm/{chunk-MGJA5U5O.js.map → chunk-SBZRVSPK.js.map} +0 -0
- package/dist/esm/{chunk-MWKALF6W.js → chunk-TGPS3CXW.js} +22 -13
- package/dist/esm/chunk-TGPS3CXW.js.map +7 -0
- package/dist/esm/{chunk-V55YSWJY.js → chunk-WXCNEGW3.js} +10 -4
- package/dist/esm/{chunk-V55YSWJY.js.map → chunk-WXCNEGW3.js.map} +1 -1
- package/dist/esm/{chunk-ZY3RTFFS.js → chunk-XU5ILFX5.js} +137 -66
- package/dist/esm/{chunk-ZY3RTFFS.js.map → chunk-XU5ILFX5.js.map} +3 -3
- package/dist/esm/{chunk-ALBEW4DJ.js → chunk-ZB3P5AZN.js} +1 -1
- package/dist/esm/{chunk-ALBEW4DJ.js.map → chunk-ZB3P5AZN.js.map} +1 -1
- package/dist/esm/{chunk-NPHUBFZ6.js → chunk-ZNAYJGVL.js} +2 -2
- package/dist/esm/{chunk-NPHUBFZ6.js.map → chunk-ZNAYJGVL.js.map} +1 -1
- package/dist/esm/kpuzzle/index.js +3 -3
- package/dist/esm/notation/index.js +3 -3
- package/dist/esm/protocol/index.js +5 -5
- package/dist/esm/puzzle-geometry/index.js +271 -71
- package/dist/esm/puzzle-geometry/index.js.map +2 -2
- package/dist/esm/puzzles/index.js +5 -5
- package/dist/esm/{puzzles-dynamic-3x3x3-NB2PEZTV.js → puzzles-dynamic-3x3x3-KIG5A6QR.js} +2 -2
- package/dist/esm/{puzzles-dynamic-3x3x3-NB2PEZTV.js.map → puzzles-dynamic-3x3x3-KIG5A6QR.js.map} +0 -0
- package/dist/esm/puzzles-dynamic-4x4x4-PEDAPUZK.js +126 -0
- package/dist/esm/puzzles-dynamic-4x4x4-PEDAPUZK.js.map +7 -0
- package/dist/esm/{puzzles-dynamic-side-events-WZI4Y3N6.js → puzzles-dynamic-side-events-5C7LMBWX.js} +2 -2
- package/dist/esm/{puzzles-dynamic-side-events-WZI4Y3N6.js.map → puzzles-dynamic-side-events-5C7LMBWX.js.map} +0 -0
- package/dist/esm/{puzzles-dynamic-unofficial-FUG3JBMH.js → puzzles-dynamic-unofficial-WWJ4NJMX.js} +2 -2
- package/dist/esm/{puzzles-dynamic-unofficial-FUG3JBMH.js.map → puzzles-dynamic-unofficial-WWJ4NJMX.js.map} +0 -0
- package/dist/esm/scramble/index.js +5 -5
- package/dist/esm/search/index.js +10 -10
- package/dist/esm/{search-dynamic-sgs-side-events-R3HDJ5XQ.js → search-dynamic-sgs-side-events-AYX7MZO7.js} +35 -17
- package/dist/esm/{search-dynamic-sgs-side-events-R3HDJ5XQ.js.map → search-dynamic-sgs-side-events-AYX7MZO7.js.map} +2 -2
- package/dist/esm/{search-dynamic-sgs-unofficial-FQNKGHVO.js → search-dynamic-sgs-unofficial-DLJOJFJL.js} +35 -14
- package/dist/esm/{search-dynamic-sgs-unofficial-FQNKGHVO.js.map → search-dynamic-sgs-unofficial-DLJOJFJL.js.map} +2 -2
- package/dist/esm/{search-dynamic-solve-3x3x3-K42IWMQV.js → search-dynamic-solve-3x3x3-7XZTYQMO.js} +795 -142
- package/dist/esm/{search-dynamic-solve-3x3x3-K42IWMQV.js.map → search-dynamic-solve-3x3x3-7XZTYQMO.js.map} +1 -1
- package/dist/esm/{search-dynamic-solve-4x4x4-XRV4NBMQ.js → search-dynamic-solve-4x4x4-CWWTFKMR.js} +135 -29
- package/dist/esm/{search-dynamic-solve-4x4x4-XRV4NBMQ.js.map → search-dynamic-solve-4x4x4-CWWTFKMR.js.map} +1 -1
- package/dist/esm/{search-dynamic-solve-fto-O6UXF7EC.js → search-dynamic-solve-fto-4LI23P6K.js} +253 -69
- package/dist/esm/{search-dynamic-solve-fto-O6UXF7EC.js.map → search-dynamic-solve-fto-4LI23P6K.js.map} +2 -2
- package/dist/esm/{search-dynamic-solve-kilominx-G4MLGWNS.js → search-dynamic-solve-kilominx-3HEVQ4MC.js} +32 -8
- package/dist/esm/{search-dynamic-solve-kilominx-G4MLGWNS.js.map → search-dynamic-solve-kilominx-3HEVQ4MC.js.map} +2 -2
- package/dist/esm/{search-dynamic-solve-master_tetraminx-3RKD3IAN.js → search-dynamic-solve-master_tetraminx-UB32C7MM.js} +111 -42
- package/dist/esm/{search-dynamic-solve-master_tetraminx-3RKD3IAN.js.map → search-dynamic-solve-master_tetraminx-UB32C7MM.js.map} +2 -2
- package/dist/esm/{search-dynamic-solve-sq1-WIJEGVLP.js → search-dynamic-solve-sq1-HA72TYF2.js} +54 -9
- package/dist/esm/{search-dynamic-solve-sq1-WIJEGVLP.js.map → search-dynamic-solve-sq1-HA72TYF2.js.map} +2 -2
- package/dist/esm/{search-worker-inside-generated-string-IZCKWXUA.js → search-worker-inside-generated-string-AMEXYCKK.js} +146 -28
- package/dist/esm/search-worker-inside-generated-string-AMEXYCKK.js.map +7 -0
- package/dist/esm/{search-worker-js-entry-WBEKNBB7.js → search-worker-js-entry-TP2T3NUL.js} +147 -53
- package/dist/esm/{search-worker-js-entry-WBEKNBB7.js.map → search-worker-js-entry-TP2T3NUL.js.map} +2 -2
- package/dist/esm/{search-worker-ts-entry-XQWMEOC4.js → search-worker-ts-entry-NEH77S4I.js} +5 -5
- package/dist/esm/{search-worker-ts-entry-XQWMEOC4.js.map → search-worker-ts-entry-NEH77S4I.js.map} +1 -1
- package/dist/esm/stream/index.js +12 -8
- package/dist/esm/stream/index.js.map +1 -1
- package/dist/esm/twisty/index.js +1154 -762
- package/dist/esm/twisty/index.js.map +3 -3
- package/dist/esm/{twisty-dynamic-3d-QOX7IEXC.js → twisty-dynamic-3d-D3ZDBJUH.js} +352 -175
- package/dist/esm/{twisty-dynamic-3d-QOX7IEXC.js.map → twisty-dynamic-3d-D3ZDBJUH.js.map} +2 -2
- package/dist/types/{Alg-e2a80975.d.ts → Alg-137fb0d5.d.ts} +19 -16
- package/dist/types/{KState-a2f0e651.d.ts → KState-a73111d7.d.ts} +1 -9
- package/dist/types/{TwizzleLink-dcf51446.d.ts → TwizzleLink-bef52ecd.d.ts} +46 -10
- package/dist/types/alg/index.d.ts +4 -4
- package/dist/types/bluetooth/index.d.ts +4 -4
- package/dist/types/{bluetooth-puzzle-3670a6a1.d.ts → bluetooth-puzzle-8a678993.d.ts} +9 -9
- package/dist/types/kpuzzle/index.d.ts +2 -2
- package/dist/types/notation/index.d.ts +1 -1
- package/dist/types/{outside-0ce1b145.d.ts → outside-e55f28a0.d.ts} +2 -2
- package/dist/types/{parseAlg-db0dec6c.d.ts → parseAlg-a28f7568.d.ts} +1 -1
- package/dist/types/protocol/index.d.ts +2 -2
- package/dist/types/puzzle-geometry/index.d.ts +3 -3
- package/dist/types/puzzles/index.d.ts +5 -5
- package/dist/types/scramble/index.d.ts +3 -3
- package/dist/types/search/index.d.ts +3 -3
- package/dist/types/stream/index.d.ts +5 -5
- package/dist/types/twisty/index.d.ts +5 -5
- package/package.json +47 -41
- package/dist/esm/chunk-67VJZGH2.js.map +0 -7
- package/dist/esm/chunk-CSBUJ64Q.js.map +0 -7
- package/dist/esm/chunk-MWKALF6W.js.map +0 -7
- package/dist/esm/chunk-YSVFZVG4.js.map +0 -7
- package/dist/esm/search-worker-inside-generated-string-IZCKWXUA.js.map +0 -7
package/dist/esm/twisty/index.js
CHANGED
|
@@ -17,20 +17,20 @@ import {
|
|
|
17
17
|
proxy3D,
|
|
18
18
|
setCameraFromOrbitCoordinates,
|
|
19
19
|
setTwistyDebug
|
|
20
|
-
} from "../chunk-
|
|
21
|
-
import "../chunk-
|
|
20
|
+
} from "../chunk-LV7IKG36.js";
|
|
21
|
+
import "../chunk-OX6O2ZO5.js";
|
|
22
22
|
import {
|
|
23
23
|
countAnimatedLeaves,
|
|
24
24
|
countMoves
|
|
25
|
-
} from "../chunk-
|
|
25
|
+
} from "../chunk-ZNAYJGVL.js";
|
|
26
26
|
import {
|
|
27
27
|
cube3x3x3,
|
|
28
28
|
puzzles
|
|
29
|
-
} from "../chunk-
|
|
29
|
+
} from "../chunk-DZGFGBKT.js";
|
|
30
30
|
import {
|
|
31
31
|
customPGPuzzleLoader
|
|
32
|
-
} from "../chunk-
|
|
33
|
-
import "../chunk-
|
|
32
|
+
} from "../chunk-PYWGREIP.js";
|
|
33
|
+
import "../chunk-XU5ILFX5.js";
|
|
34
34
|
import {
|
|
35
35
|
Alg,
|
|
36
36
|
AlgBuilder,
|
|
@@ -43,13 +43,8 @@ import {
|
|
|
43
43
|
direct,
|
|
44
44
|
directedGenerator,
|
|
45
45
|
experimentalAppendMove
|
|
46
|
-
} from "../chunk-
|
|
47
|
-
import
|
|
48
|
-
__privateAdd,
|
|
49
|
-
__privateGet,
|
|
50
|
-
__privateMethod,
|
|
51
|
-
__privateSet
|
|
52
|
-
} from "../chunk-MGJA5U5O.js";
|
|
46
|
+
} from "../chunk-NI7U4XAZ.js";
|
|
47
|
+
import "../chunk-SBZRVSPK.js";
|
|
53
48
|
|
|
54
49
|
// src/cubing/twisty/controllers/AnimationTypes.ts
|
|
55
50
|
function directionScalar(direction) {
|
|
@@ -98,7 +93,9 @@ var CatchUpHelper = class {
|
|
|
98
93
|
this.model = model;
|
|
99
94
|
this.catchingUp = false;
|
|
100
95
|
this.pendingFrame = false;
|
|
101
|
-
this.scheduler = new RenderScheduler(
|
|
96
|
+
this.scheduler = new RenderScheduler(
|
|
97
|
+
this.animFrame.bind(this)
|
|
98
|
+
);
|
|
102
99
|
this.catchUpMs = 500;
|
|
103
100
|
this.lastTimestamp = 0;
|
|
104
101
|
}
|
|
@@ -118,41 +115,43 @@ var CatchUpHelper = class {
|
|
|
118
115
|
this.scheduler.requestAnimFrame();
|
|
119
116
|
const delta = (timestamp - this.lastTimestamp) / this.catchUpMs;
|
|
120
117
|
this.lastTimestamp = timestamp;
|
|
121
|
-
this.model.catchUpMove.set(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
118
|
+
this.model.catchUpMove.set(
|
|
119
|
+
(async () => {
|
|
120
|
+
const previousCatchUpMove = await this.model.catchUpMove.get();
|
|
121
|
+
if (previousCatchUpMove.move === null) {
|
|
122
|
+
return previousCatchUpMove;
|
|
123
|
+
}
|
|
124
|
+
const amount = previousCatchUpMove.amount + delta;
|
|
125
|
+
if (amount >= 1) {
|
|
126
|
+
this.pendingFrame = true;
|
|
127
|
+
this.stop();
|
|
128
|
+
this.model.timestampRequest.set("end");
|
|
129
|
+
return {
|
|
130
|
+
move: null,
|
|
131
|
+
amount: 0
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
this.pendingFrame = false;
|
|
131
135
|
return {
|
|
132
|
-
move:
|
|
133
|
-
amount
|
|
136
|
+
move: previousCatchUpMove.move,
|
|
137
|
+
amount
|
|
134
138
|
};
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return {
|
|
138
|
-
move: previousCatchUpMove.move,
|
|
139
|
-
amount
|
|
140
|
-
};
|
|
141
|
-
})());
|
|
139
|
+
})()
|
|
140
|
+
);
|
|
142
141
|
}
|
|
143
142
|
};
|
|
144
|
-
var _effectiveTimestampMilliseconds, effectiveTimestampMilliseconds_fn, _animFrameEffectiveTimestampStaleDropper;
|
|
145
143
|
var TwistyAnimationController = class {
|
|
146
144
|
constructor(model, delegate) {
|
|
147
145
|
this.delegate = delegate;
|
|
148
|
-
__privateAdd(this, _effectiveTimestampMilliseconds);
|
|
149
146
|
this.playing = false;
|
|
150
147
|
this.direction = 1 /* Forwards */;
|
|
151
148
|
this.lastDatestamp = 0;
|
|
152
|
-
this.scheduler = new RenderScheduler(
|
|
153
|
-
|
|
149
|
+
this.scheduler = new RenderScheduler(
|
|
150
|
+
this.animFrame.bind(this)
|
|
151
|
+
);
|
|
152
|
+
this.#animFrameEffectiveTimestampStaleDropper = new StaleDropper();
|
|
154
153
|
this.model = model;
|
|
155
|
-
this.lastTimestampPromise =
|
|
154
|
+
this.lastTimestampPromise = this.#effectiveTimestampMilliseconds();
|
|
156
155
|
this.model.playingInfo.addFreshListener(this.onPlayingProp.bind(this));
|
|
157
156
|
this.catchUpHelper = new CatchUpHelper(this.model);
|
|
158
157
|
this.model.catchUpMove.addFreshListener(this.onCatchUpMoveProp.bind(this));
|
|
@@ -169,6 +168,9 @@ var TwistyAnimationController = class {
|
|
|
169
168
|
}
|
|
170
169
|
this.scheduler.requestAnimFrame();
|
|
171
170
|
}
|
|
171
|
+
async #effectiveTimestampMilliseconds() {
|
|
172
|
+
return (await this.model.detailedTimelineInfo.get()).timestamp;
|
|
173
|
+
}
|
|
172
174
|
jumpToStart(options) {
|
|
173
175
|
this.model.timestampRequest.set("start");
|
|
174
176
|
this.pause();
|
|
@@ -211,7 +213,7 @@ var TwistyAnimationController = class {
|
|
|
211
213
|
});
|
|
212
214
|
this.playing = true;
|
|
213
215
|
this.lastDatestamp = performance.now();
|
|
214
|
-
this.lastTimestampPromise =
|
|
216
|
+
this.lastTimestampPromise = this.#effectiveTimestampMilliseconds();
|
|
215
217
|
this.scheduler.requestAnimFrame();
|
|
216
218
|
}
|
|
217
219
|
pause() {
|
|
@@ -222,18 +224,21 @@ var TwistyAnimationController = class {
|
|
|
222
224
|
untilBoundary: "entire-timeline" /* EntireTimeline */
|
|
223
225
|
});
|
|
224
226
|
}
|
|
227
|
+
#animFrameEffectiveTimestampStaleDropper;
|
|
225
228
|
async animFrame(frameDatestamp) {
|
|
226
229
|
if (this.playing) {
|
|
227
230
|
this.scheduler.requestAnimFrame();
|
|
228
231
|
}
|
|
229
232
|
const lastDatestamp = this.lastDatestamp;
|
|
230
|
-
const freshenerResult = await
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
233
|
+
const freshenerResult = await this.#animFrameEffectiveTimestampStaleDropper.queue(
|
|
234
|
+
Promise.all([
|
|
235
|
+
this.model.playingInfo.get(),
|
|
236
|
+
this.lastTimestampPromise,
|
|
237
|
+
this.model.timeRange.get(),
|
|
238
|
+
this.model.tempoScale.get(),
|
|
239
|
+
this.model.currentMoveInfo.get()
|
|
240
|
+
])
|
|
241
|
+
);
|
|
237
242
|
const [playingInfo, lastTimestamp, timeRange, tempoScale, currentMoveInfo] = freshenerResult;
|
|
238
243
|
if (!playingInfo.playing) {
|
|
239
244
|
this.playing = false;
|
|
@@ -254,7 +259,11 @@ var TwistyAnimationController = class {
|
|
|
254
259
|
let newSmartTimestampRequest = null;
|
|
255
260
|
if (newTimestamp >= end) {
|
|
256
261
|
if (playingInfo.loop) {
|
|
257
|
-
newTimestamp = modIntoRange(
|
|
262
|
+
newTimestamp = modIntoRange(
|
|
263
|
+
newTimestamp,
|
|
264
|
+
timeRange.start,
|
|
265
|
+
timeRange.end
|
|
266
|
+
);
|
|
258
267
|
} else {
|
|
259
268
|
if (newTimestamp === timeRange.end) {
|
|
260
269
|
newSmartTimestampRequest = "end";
|
|
@@ -268,7 +277,11 @@ var TwistyAnimationController = class {
|
|
|
268
277
|
}
|
|
269
278
|
} else if (newTimestamp <= start) {
|
|
270
279
|
if (playingInfo.loop) {
|
|
271
|
-
newTimestamp = modIntoRange(
|
|
280
|
+
newTimestamp = modIntoRange(
|
|
281
|
+
newTimestamp,
|
|
282
|
+
timeRange.start,
|
|
283
|
+
timeRange.end
|
|
284
|
+
);
|
|
272
285
|
} else {
|
|
273
286
|
if (newTimestamp === timeRange.start) {
|
|
274
287
|
newSmartTimestampRequest = "start";
|
|
@@ -286,11 +299,6 @@ var TwistyAnimationController = class {
|
|
|
286
299
|
this.model.timestampRequest.set(newSmartTimestampRequest ?? newTimestamp);
|
|
287
300
|
}
|
|
288
301
|
};
|
|
289
|
-
_effectiveTimestampMilliseconds = new WeakSet();
|
|
290
|
-
effectiveTimestampMilliseconds_fn = async function() {
|
|
291
|
-
return (await this.model.detailedTimelineInfo.get()).timestamp;
|
|
292
|
-
};
|
|
293
|
-
_animFrameEffectiveTimestampStaleDropper = new WeakMap();
|
|
294
302
|
|
|
295
303
|
// src/cubing/twisty/controllers/TwistyPlayerController.ts
|
|
296
304
|
var TwistyPlayerController = class {
|
|
@@ -527,29 +535,67 @@ var KPuzzleSVGWrapper = class {
|
|
|
527
535
|
for (let idx = 0; idx < orbitDefinition.numPieces; idx++) {
|
|
528
536
|
for (let orientation = 0; orientation < orbitDefinition.numOrientations; orientation++) {
|
|
529
537
|
const id = this.elementID(orbitName, idx, orientation);
|
|
530
|
-
const fromCur = this.elementID(
|
|
538
|
+
const fromCur = this.elementID(
|
|
539
|
+
orbitName,
|
|
540
|
+
curTransformationOrbit.permutation[idx],
|
|
541
|
+
(orbitDefinition.numOrientations - curTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.numOrientations
|
|
542
|
+
);
|
|
531
543
|
let singleColor = false;
|
|
532
544
|
if (nextTransformationOrbit) {
|
|
533
|
-
const fromNext = this.elementID(
|
|
545
|
+
const fromNext = this.elementID(
|
|
546
|
+
orbitName,
|
|
547
|
+
nextTransformationOrbit.permutation[idx],
|
|
548
|
+
(orbitDefinition.numOrientations - nextTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.numOrientations
|
|
549
|
+
);
|
|
534
550
|
if (fromCur === fromNext) {
|
|
535
551
|
singleColor = true;
|
|
536
552
|
}
|
|
537
553
|
fraction = fraction || 0;
|
|
538
554
|
const easedBackwardsPercent = 100 * (1 - fraction * fraction * (2 - fraction * fraction));
|
|
539
|
-
this.gradients[id].children[0].setAttribute(
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
this.gradients[id].children[
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
555
|
+
this.gradients[id].children[0].setAttribute(
|
|
556
|
+
"stop-color",
|
|
557
|
+
this.originalColors[fromCur]
|
|
558
|
+
);
|
|
559
|
+
this.gradients[id].children[1].setAttribute(
|
|
560
|
+
"stop-color",
|
|
561
|
+
this.originalColors[fromCur]
|
|
562
|
+
);
|
|
563
|
+
this.gradients[id].children[1].setAttribute(
|
|
564
|
+
"offset",
|
|
565
|
+
`${Math.max(easedBackwardsPercent - 5, 0)}%`
|
|
566
|
+
);
|
|
567
|
+
this.gradients[id].children[2].setAttribute(
|
|
568
|
+
"offset",
|
|
569
|
+
`${Math.max(easedBackwardsPercent - 5, 0)}%`
|
|
570
|
+
);
|
|
571
|
+
this.gradients[id].children[3].setAttribute(
|
|
572
|
+
"offset",
|
|
573
|
+
`${easedBackwardsPercent}%`
|
|
574
|
+
);
|
|
575
|
+
this.gradients[id].children[4].setAttribute(
|
|
576
|
+
"offset",
|
|
577
|
+
`${easedBackwardsPercent}%`
|
|
578
|
+
);
|
|
579
|
+
this.gradients[id].children[4].setAttribute(
|
|
580
|
+
"stop-color",
|
|
581
|
+
this.originalColors[fromNext]
|
|
582
|
+
);
|
|
583
|
+
this.gradients[id].children[5].setAttribute(
|
|
584
|
+
"stop-color",
|
|
585
|
+
this.originalColors[fromNext]
|
|
586
|
+
);
|
|
547
587
|
} else {
|
|
548
588
|
singleColor = true;
|
|
549
589
|
}
|
|
550
590
|
if (singleColor) {
|
|
551
|
-
this.gradients[id].children[0].setAttribute(
|
|
552
|
-
|
|
591
|
+
this.gradients[id].children[0].setAttribute(
|
|
592
|
+
"stop-color",
|
|
593
|
+
this.originalColors[fromCur]
|
|
594
|
+
);
|
|
595
|
+
this.gradients[id].children[1].setAttribute(
|
|
596
|
+
"stop-color",
|
|
597
|
+
this.originalColors[fromCur]
|
|
598
|
+
);
|
|
553
599
|
this.gradients[id].children[1].setAttribute("offset", `100%`);
|
|
554
600
|
this.gradients[id].children[2].setAttribute("offset", `100%`);
|
|
555
601
|
this.gradients[id].children[3].setAttribute("offset", `100%`);
|
|
@@ -560,7 +606,10 @@ var KPuzzleSVGWrapper = class {
|
|
|
560
606
|
}
|
|
561
607
|
}
|
|
562
608
|
newGradient(id, originalColor) {
|
|
563
|
-
const grad = document.createElementNS(
|
|
609
|
+
const grad = document.createElementNS(
|
|
610
|
+
xmlns,
|
|
611
|
+
"radialGradient"
|
|
612
|
+
);
|
|
564
613
|
grad.setAttribute("id", `grad-${this.svgID}-${id}`);
|
|
565
614
|
grad.setAttribute("r", `70.7107%`);
|
|
566
615
|
const stopDefs = [
|
|
@@ -589,7 +638,6 @@ var KPuzzleSVGWrapper = class {
|
|
|
589
638
|
};
|
|
590
639
|
|
|
591
640
|
// src/cubing/twisty/views/2D/Twisty2DPuzzle.ts
|
|
592
|
-
var _cachedPosition, _freshListenerManager;
|
|
593
641
|
var Twisty2DPuzzle = class extends ManagedCustomElement {
|
|
594
642
|
constructor(model, kpuzzle, svgSource, options, puzzleLoader) {
|
|
595
643
|
super();
|
|
@@ -599,22 +647,30 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
|
|
|
599
647
|
this.options = options;
|
|
600
648
|
this.puzzleLoader = puzzleLoader;
|
|
601
649
|
this.scheduler = new RenderScheduler(this.render.bind(this));
|
|
602
|
-
|
|
603
|
-
|
|
650
|
+
this.#cachedPosition = null;
|
|
651
|
+
this.#freshListenerManager = new FreshListenerManager();
|
|
604
652
|
this.addCSS(twisty2DSVGCSS);
|
|
605
653
|
this.resetSVG();
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
654
|
+
this.#freshListenerManager.addListener(
|
|
655
|
+
this.model.puzzleID,
|
|
656
|
+
(puzzleID) => {
|
|
657
|
+
if (puzzleLoader?.id !== puzzleID) {
|
|
658
|
+
this.disconnect();
|
|
659
|
+
}
|
|
609
660
|
}
|
|
610
|
-
|
|
611
|
-
|
|
661
|
+
);
|
|
662
|
+
this.#freshListenerManager.addListener(
|
|
663
|
+
this.model.legacyPosition,
|
|
664
|
+
this.onPositionChange.bind(this)
|
|
665
|
+
);
|
|
612
666
|
if (this.options?.experimentalStickering) {
|
|
613
667
|
this.experimentalSetStickering(this.options.experimentalStickering);
|
|
614
668
|
}
|
|
615
669
|
}
|
|
670
|
+
#cachedPosition;
|
|
671
|
+
#freshListenerManager;
|
|
616
672
|
disconnect() {
|
|
617
|
-
|
|
673
|
+
this.#freshListenerManager.disconnect();
|
|
618
674
|
}
|
|
619
675
|
onPositionChange(position) {
|
|
620
676
|
try {
|
|
@@ -625,13 +681,21 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
|
|
|
625
681
|
partialMove = move.invert();
|
|
626
682
|
}
|
|
627
683
|
const newState = position.state.applyMove(partialMove);
|
|
628
|
-
this.svgWrapper.draw(
|
|
684
|
+
this.svgWrapper.draw(
|
|
685
|
+
position.state,
|
|
686
|
+
newState,
|
|
687
|
+
position.movesInProgress[0].fraction
|
|
688
|
+
);
|
|
629
689
|
} else {
|
|
630
690
|
this.svgWrapper.draw(position.state);
|
|
631
|
-
|
|
691
|
+
this.#cachedPosition = position;
|
|
632
692
|
}
|
|
633
693
|
} catch (e) {
|
|
634
|
-
console.warn(
|
|
694
|
+
console.warn(
|
|
695
|
+
"Bad position (this doesn't necessarily mean something is wrong). Pre-emptively disconnecting:",
|
|
696
|
+
this.puzzleLoader?.id,
|
|
697
|
+
e
|
|
698
|
+
);
|
|
635
699
|
this.disconnect();
|
|
636
700
|
}
|
|
637
701
|
}
|
|
@@ -654,146 +718,153 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
|
|
|
654
718
|
if (!this.kpuzzle) {
|
|
655
719
|
return;
|
|
656
720
|
}
|
|
657
|
-
this.svgWrapper = new KPuzzleSVGWrapper(
|
|
721
|
+
this.svgWrapper = new KPuzzleSVGWrapper(
|
|
722
|
+
this.kpuzzle,
|
|
723
|
+
this.svgSource,
|
|
724
|
+
appearance
|
|
725
|
+
);
|
|
658
726
|
this.addElement(this.svgWrapper.wrapperElement);
|
|
659
|
-
if (
|
|
660
|
-
this.onPositionChange(
|
|
727
|
+
if (this.#cachedPosition) {
|
|
728
|
+
this.onPositionChange(this.#cachedPosition);
|
|
661
729
|
}
|
|
662
730
|
}
|
|
663
731
|
render() {
|
|
664
732
|
}
|
|
665
733
|
};
|
|
666
|
-
_cachedPosition = new WeakMap();
|
|
667
|
-
_freshListenerManager = new WeakMap();
|
|
668
734
|
customElementsShim.define("twisty-2d-puzzle", Twisty2DPuzzle);
|
|
669
735
|
|
|
670
736
|
// src/cubing/twisty/views/2D/Twisty2DPuzzleWrapper.ts
|
|
671
|
-
var _freshListenerManager2, _cachedTwisty2DPuzzle;
|
|
672
737
|
var Twisty2DPuzzleWrapper = class {
|
|
673
738
|
constructor(model, schedulable, puzzleLoader, effectiveVisualization) {
|
|
674
739
|
this.model = model;
|
|
675
740
|
this.schedulable = schedulable;
|
|
676
741
|
this.puzzleLoader = puzzleLoader;
|
|
677
742
|
this.effectiveVisualization = effectiveVisualization;
|
|
678
|
-
__privateAdd(this, _freshListenerManager2, new FreshListenerManager());
|
|
679
|
-
__privateAdd(this, _cachedTwisty2DPuzzle, null);
|
|
680
743
|
this.twisty2DPuzzle();
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
744
|
+
this.#freshListenerManager.addListener(
|
|
745
|
+
this.model.twistySceneModel.stickering,
|
|
746
|
+
async (stickering) => {
|
|
747
|
+
(await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
|
|
748
|
+
}
|
|
749
|
+
);
|
|
684
750
|
}
|
|
751
|
+
#freshListenerManager = new FreshListenerManager();
|
|
685
752
|
disconnect() {
|
|
686
|
-
|
|
753
|
+
this.#freshListenerManager.disconnect();
|
|
687
754
|
}
|
|
688
755
|
scheduleRender() {
|
|
689
756
|
}
|
|
757
|
+
#cachedTwisty2DPuzzle = null;
|
|
690
758
|
async twisty2DPuzzle() {
|
|
691
|
-
return
|
|
759
|
+
return this.#cachedTwisty2DPuzzle ?? (this.#cachedTwisty2DPuzzle = (async () => {
|
|
692
760
|
const svgPromise = this.effectiveVisualization === "experimental-2D-LL" ? this.puzzleLoader.llSVG() : this.puzzleLoader.svg();
|
|
693
|
-
return new Twisty2DPuzzle(
|
|
761
|
+
return new Twisty2DPuzzle(
|
|
762
|
+
this.model,
|
|
763
|
+
await this.puzzleLoader.kpuzzle(),
|
|
764
|
+
await svgPromise,
|
|
765
|
+
{},
|
|
766
|
+
this.puzzleLoader
|
|
767
|
+
);
|
|
694
768
|
})());
|
|
695
769
|
}
|
|
696
770
|
};
|
|
697
|
-
_freshListenerManager2 = new WeakMap();
|
|
698
|
-
_cachedTwisty2DPuzzle = new WeakMap();
|
|
699
771
|
|
|
700
772
|
// src/cubing/twisty/views/2D/Twisty2DSceneWrapper.ts
|
|
701
|
-
var _freshListenerManager3, _cachedScene, _currentTwisty2DPuzzleWrapper;
|
|
702
773
|
var Twisty2DSceneWrapper = class extends ManagedCustomElement {
|
|
703
774
|
constructor(model, effectiveVisualization) {
|
|
704
775
|
super();
|
|
705
776
|
this.model = model;
|
|
706
777
|
this.effectiveVisualization = effectiveVisualization;
|
|
707
|
-
__privateAdd(this, _freshListenerManager3, new FreshListenerManager());
|
|
708
|
-
__privateAdd(this, _cachedScene, void 0);
|
|
709
|
-
__privateAdd(this, _currentTwisty2DPuzzleWrapper, null);
|
|
710
778
|
}
|
|
779
|
+
#freshListenerManager = new FreshListenerManager();
|
|
711
780
|
disconnect() {
|
|
712
|
-
|
|
781
|
+
this.#freshListenerManager.disconnect();
|
|
713
782
|
}
|
|
714
783
|
async connectedCallback() {
|
|
715
784
|
this.addCSS(twistyViewerWrapperCSS);
|
|
716
785
|
if (this.model) {
|
|
717
|
-
|
|
786
|
+
this.#freshListenerManager.addListener(
|
|
787
|
+
this.model.twistyPlayerModel.puzzleLoader,
|
|
788
|
+
this.onPuzzleLoader.bind(this)
|
|
789
|
+
);
|
|
718
790
|
}
|
|
719
791
|
}
|
|
792
|
+
#cachedScene;
|
|
720
793
|
async scene() {
|
|
721
|
-
return
|
|
794
|
+
return this.#cachedScene ?? (this.#cachedScene = (async () => new (await THREEJS).Scene())());
|
|
722
795
|
}
|
|
723
796
|
scheduleRender() {
|
|
724
|
-
|
|
797
|
+
this.#currentTwisty2DPuzzleWrapper?.scheduleRender();
|
|
725
798
|
}
|
|
799
|
+
#currentTwisty2DPuzzleWrapper = null;
|
|
726
800
|
currentTwisty2DPuzzleWrapper() {
|
|
727
|
-
return
|
|
801
|
+
return this.#currentTwisty2DPuzzleWrapper;
|
|
728
802
|
}
|
|
729
803
|
async setCurrentTwisty2DPuzzleWrapper(twisty2DPuzzleWrapper) {
|
|
730
|
-
const old =
|
|
731
|
-
|
|
804
|
+
const old = this.#currentTwisty2DPuzzleWrapper;
|
|
805
|
+
this.#currentTwisty2DPuzzleWrapper = twisty2DPuzzleWrapper;
|
|
732
806
|
old?.disconnect();
|
|
733
807
|
const twisty2DPuzzlePromise = twisty2DPuzzleWrapper.twisty2DPuzzle();
|
|
734
808
|
this.contentWrapper.textContent = "";
|
|
735
809
|
this.addElement(await twisty2DPuzzlePromise);
|
|
736
810
|
}
|
|
737
811
|
async onPuzzleLoader(puzzleLoader) {
|
|
738
|
-
|
|
739
|
-
const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(
|
|
812
|
+
this.#currentTwisty2DPuzzleWrapper?.disconnect();
|
|
813
|
+
const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(
|
|
814
|
+
this.model.twistyPlayerModel,
|
|
815
|
+
this,
|
|
816
|
+
puzzleLoader,
|
|
817
|
+
this.effectiveVisualization
|
|
818
|
+
);
|
|
740
819
|
this.setCurrentTwisty2DPuzzleWrapper(twisty2DPuzzleWrapper);
|
|
741
820
|
}
|
|
742
821
|
};
|
|
743
|
-
_freshListenerManager3 = new WeakMap();
|
|
744
|
-
_cachedScene = new WeakMap();
|
|
745
|
-
_currentTwisty2DPuzzleWrapper = new WeakMap();
|
|
746
822
|
customElementsShim.define("twisty-2d-scene-wrapper", Twisty2DSceneWrapper);
|
|
747
823
|
|
|
748
824
|
// src/cubing/twisty/views/ClassListManager.ts
|
|
749
|
-
var _currentClassName;
|
|
750
825
|
var ClassListManager = class {
|
|
751
826
|
constructor(elem, prefix, validSuffixes) {
|
|
752
827
|
this.elem = elem;
|
|
753
828
|
this.prefix = prefix;
|
|
754
829
|
this.validSuffixes = validSuffixes;
|
|
755
|
-
__privateAdd(this, _currentClassName, null);
|
|
756
830
|
}
|
|
831
|
+
#currentClassName = null;
|
|
757
832
|
clearValue() {
|
|
758
|
-
if (
|
|
759
|
-
this.elem.contentWrapper.classList.remove(
|
|
833
|
+
if (this.#currentClassName) {
|
|
834
|
+
this.elem.contentWrapper.classList.remove(this.#currentClassName);
|
|
760
835
|
}
|
|
761
|
-
|
|
836
|
+
this.#currentClassName = null;
|
|
762
837
|
}
|
|
763
838
|
setValue(suffix) {
|
|
764
839
|
if (!this.validSuffixes.includes(suffix)) {
|
|
765
840
|
throw new Error(`Invalid suffix: ${suffix}`);
|
|
766
841
|
}
|
|
767
842
|
const newClassName = `${this.prefix}${suffix}`;
|
|
768
|
-
const changed =
|
|
843
|
+
const changed = this.#currentClassName !== newClassName;
|
|
769
844
|
if (changed) {
|
|
770
845
|
this.clearValue();
|
|
771
846
|
this.elem.contentWrapper.classList.add(newClassName);
|
|
772
|
-
|
|
847
|
+
this.#currentClassName = newClassName;
|
|
773
848
|
}
|
|
774
849
|
return changed;
|
|
775
850
|
}
|
|
776
851
|
};
|
|
777
|
-
_currentClassName = new WeakMap();
|
|
778
852
|
|
|
779
853
|
// src/cubing/twisty/views/InitialValueTracker.ts
|
|
780
|
-
var _resolve;
|
|
781
854
|
var InitialValueTracker = class {
|
|
782
855
|
constructor() {
|
|
783
|
-
__privateAdd(this, _resolve, void 0);
|
|
784
856
|
this.promise = new Promise((resolve, reject) => {
|
|
785
|
-
|
|
857
|
+
this.#resolve = resolve;
|
|
786
858
|
this.reject = reject;
|
|
787
859
|
});
|
|
788
860
|
}
|
|
861
|
+
#resolve;
|
|
789
862
|
handleNewValue(t) {
|
|
790
|
-
|
|
863
|
+
this.#resolve(t);
|
|
791
864
|
}
|
|
792
865
|
};
|
|
793
|
-
_resolve = new WeakMap();
|
|
794
866
|
|
|
795
867
|
// src/cubing/twisty/views/3D/Twisty3DPuzzleWrapper.ts
|
|
796
|
-
var _freshListenerManager4, _cachedTwisty3DPuzzle;
|
|
797
868
|
var Twisty3DPuzzleWrapper = class extends EventTarget {
|
|
798
869
|
constructor(model, schedulable, puzzleLoader, visualizationStrategy) {
|
|
799
870
|
super();
|
|
@@ -801,69 +872,91 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
|
|
|
801
872
|
this.schedulable = schedulable;
|
|
802
873
|
this.puzzleLoader = puzzleLoader;
|
|
803
874
|
this.visualizationStrategy = visualizationStrategy;
|
|
804
|
-
__privateAdd(this, _freshListenerManager4, new FreshListenerManager());
|
|
805
|
-
__privateAdd(this, _cachedTwisty3DPuzzle, null);
|
|
806
875
|
this.twisty3DPuzzle();
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
876
|
+
this.#freshListenerManager.addListener(
|
|
877
|
+
this.model.puzzleLoader,
|
|
878
|
+
(puzzleLoader2) => {
|
|
879
|
+
if (this.puzzleLoader.id !== puzzleLoader2.id) {
|
|
880
|
+
this.disconnect();
|
|
881
|
+
}
|
|
810
882
|
}
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
883
|
+
);
|
|
884
|
+
this.#freshListenerManager.addListener(
|
|
885
|
+
this.model.legacyPosition,
|
|
886
|
+
async (position) => {
|
|
887
|
+
try {
|
|
888
|
+
(await this.twisty3DPuzzle()).onPositionChange(position);
|
|
889
|
+
this.scheduleRender();
|
|
890
|
+
} catch (e) {
|
|
891
|
+
this.disconnect();
|
|
892
|
+
}
|
|
893
|
+
}
|
|
894
|
+
);
|
|
895
|
+
this.#freshListenerManager.addListener(
|
|
896
|
+
this.model.twistySceneModel.hintFacelet,
|
|
897
|
+
async (hintFaceletStyle) => {
|
|
898
|
+
(await this.twisty3DPuzzle()).experimentalUpdateOptions({
|
|
899
|
+
hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
|
|
900
|
+
});
|
|
815
901
|
this.scheduleRender();
|
|
816
|
-
} catch (e) {
|
|
817
|
-
this.disconnect();
|
|
818
902
|
}
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
__privateGet(this, _freshListenerManager4).addListener(this.model.twistySceneModel.foundationDisplay, async (foundationDisplay) => {
|
|
827
|
-
(await this.twisty3DPuzzle()).experimentalUpdateOptions({
|
|
828
|
-
showFoundation: foundationDisplay !== "none"
|
|
829
|
-
});
|
|
830
|
-
this.scheduleRender();
|
|
831
|
-
});
|
|
832
|
-
__privateGet(this, _freshListenerManager4).addListener(this.model.twistySceneModel.stickering, async (stickering) => {
|
|
833
|
-
if ("setStickering" in await this.twisty3DPuzzle()) {
|
|
834
|
-
(await this.twisty3DPuzzle()).setStickering(stickering);
|
|
903
|
+
);
|
|
904
|
+
this.#freshListenerManager.addListener(
|
|
905
|
+
this.model.twistySceneModel.foundationDisplay,
|
|
906
|
+
async (foundationDisplay) => {
|
|
907
|
+
(await this.twisty3DPuzzle()).experimentalUpdateOptions({
|
|
908
|
+
showFoundation: foundationDisplay !== "none"
|
|
909
|
+
});
|
|
835
910
|
this.scheduleRender();
|
|
836
|
-
}
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
911
|
+
}
|
|
912
|
+
);
|
|
913
|
+
this.#freshListenerManager.addListener(
|
|
914
|
+
this.model.twistySceneModel.stickering,
|
|
915
|
+
async (stickering) => {
|
|
916
|
+
if ("setStickering" in await this.twisty3DPuzzle()) {
|
|
917
|
+
(await this.twisty3DPuzzle()).setStickering(stickering);
|
|
843
918
|
this.scheduleRender();
|
|
919
|
+
} else {
|
|
920
|
+
if ("appearance" in this.puzzleLoader) {
|
|
921
|
+
const [twisty3D, appearancePromise] = await Promise.all([
|
|
922
|
+
this.twisty3DPuzzle(),
|
|
923
|
+
this.puzzleLoader.appearance(stickering ?? "full")
|
|
924
|
+
]);
|
|
925
|
+
twisty3D.experimentalSetAppearance(appearancePromise);
|
|
926
|
+
this.scheduleRender();
|
|
927
|
+
}
|
|
844
928
|
}
|
|
845
929
|
}
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
this.
|
|
930
|
+
);
|
|
931
|
+
this.#freshListenerManager.addMultiListener3(
|
|
932
|
+
[
|
|
933
|
+
this.model.twistySceneModel.stickering,
|
|
934
|
+
this.model.twistySceneModel.foundationStickerSprite,
|
|
935
|
+
this.model.twistySceneModel.hintStickerSprite
|
|
936
|
+
],
|
|
937
|
+
async (inputs) => {
|
|
938
|
+
if ("experimentalUpdateTexture" in await this.twisty3DPuzzle()) {
|
|
939
|
+
(await this.twisty3DPuzzle()).experimentalUpdateTexture(
|
|
940
|
+
inputs[0] === "picture",
|
|
941
|
+
inputs[1],
|
|
942
|
+
inputs[2]
|
|
943
|
+
);
|
|
944
|
+
this.scheduleRender();
|
|
945
|
+
}
|
|
855
946
|
}
|
|
856
|
-
|
|
947
|
+
);
|
|
857
948
|
}
|
|
949
|
+
#freshListenerManager = new FreshListenerManager();
|
|
858
950
|
disconnect() {
|
|
859
|
-
|
|
951
|
+
this.#freshListenerManager.disconnect();
|
|
860
952
|
}
|
|
861
953
|
scheduleRender() {
|
|
862
954
|
this.schedulable.scheduleRender();
|
|
863
955
|
this.dispatchEvent(new CustomEvent("render-scheduled"));
|
|
864
956
|
}
|
|
957
|
+
#cachedTwisty3DPuzzle = null;
|
|
865
958
|
async twisty3DPuzzle() {
|
|
866
|
-
return
|
|
959
|
+
return this.#cachedTwisty3DPuzzle ?? (this.#cachedTwisty3DPuzzle = (async () => {
|
|
867
960
|
const proxyPromise = proxy3D();
|
|
868
961
|
if (this.puzzleLoader.id === "3x3x3" && this.visualizationStrategy === "Cube3D") {
|
|
869
962
|
const [foundationSprite, hintSprite, experimentalStickering] = await Promise.all([
|
|
@@ -871,19 +964,32 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
|
|
|
871
964
|
this.model.twistySceneModel.hintStickerSprite.get(),
|
|
872
965
|
this.model.twistySceneModel.stickering.get()
|
|
873
966
|
]);
|
|
874
|
-
return (await proxyPromise).cube3DShim(
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
967
|
+
return (await proxyPromise).cube3DShim(
|
|
968
|
+
() => this.schedulable.scheduleRender(),
|
|
969
|
+
{
|
|
970
|
+
foundationSprite,
|
|
971
|
+
hintSprite,
|
|
972
|
+
experimentalStickering
|
|
973
|
+
}
|
|
974
|
+
);
|
|
879
975
|
} else {
|
|
880
976
|
const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
|
|
881
977
|
this.model.twistySceneModel.hintFacelet.get(),
|
|
882
978
|
this.model.twistySceneModel.foundationStickerSprite.get(),
|
|
883
979
|
this.model.twistySceneModel.hintStickerSprite.get()
|
|
884
980
|
]);
|
|
885
|
-
const pg3d = (await proxyPromise).pg3dShim(
|
|
886
|
-
|
|
981
|
+
const pg3d = (await proxyPromise).pg3dShim(
|
|
982
|
+
() => this.schedulable.scheduleRender(),
|
|
983
|
+
this.puzzleLoader,
|
|
984
|
+
hintFacelets === "auto" ? "floating" : hintFacelets
|
|
985
|
+
);
|
|
986
|
+
pg3d.then(
|
|
987
|
+
(p) => p.experimentalUpdateTexture(
|
|
988
|
+
true,
|
|
989
|
+
foundationSprite ?? void 0,
|
|
990
|
+
hintSprite ?? void 0
|
|
991
|
+
)
|
|
992
|
+
);
|
|
887
993
|
return pg3d;
|
|
888
994
|
}
|
|
889
995
|
})());
|
|
@@ -898,7 +1004,10 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
|
|
|
898
1004
|
const [raycaster] = await Promise.all([raycasterPromise]);
|
|
899
1005
|
const intersects = raycaster.intersectObjects(targets);
|
|
900
1006
|
if (intersects.length > 0) {
|
|
901
|
-
const closestMove = puzzle.getClosestMoveToAxis(
|
|
1007
|
+
const closestMove = puzzle.getClosestMoveToAxis(
|
|
1008
|
+
intersects[0].point,
|
|
1009
|
+
transformations
|
|
1010
|
+
);
|
|
902
1011
|
if (closestMove) {
|
|
903
1012
|
this.model.experimentalAddMove(closestMove.move, {
|
|
904
1013
|
coalesce: true,
|
|
@@ -910,58 +1019,56 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
|
|
|
910
1019
|
}
|
|
911
1020
|
}
|
|
912
1021
|
};
|
|
913
|
-
_freshListenerManager4 = new WeakMap();
|
|
914
|
-
_cachedTwisty3DPuzzle = new WeakMap();
|
|
915
1022
|
|
|
916
1023
|
// src/cubing/twisty/views/3D/Twisty3DSceneWrapper.ts
|
|
917
|
-
var _backViewClassListManager, _freshListenerManager5, _backViewVantage, _cachedScene2, _vantages, _currentTwisty3DPuzzleWrapper, _initialWrapperTracker, _twisty3DStaleDropper;
|
|
918
1024
|
var Twisty3DSceneWrapper = class extends ManagedCustomElement {
|
|
919
1025
|
constructor(model) {
|
|
920
1026
|
super();
|
|
921
1027
|
this.model = model;
|
|
922
|
-
__privateAdd(this, _backViewClassListManager, new ClassListManager(this, "back-view-", [
|
|
923
|
-
"auto",
|
|
924
|
-
"none",
|
|
925
|
-
"side-by-side",
|
|
926
|
-
"top-right"
|
|
927
|
-
]));
|
|
928
|
-
__privateAdd(this, _freshListenerManager5, new FreshListenerManager());
|
|
929
|
-
__privateAdd(this, _backViewVantage, null);
|
|
930
|
-
__privateAdd(this, _cachedScene2, void 0);
|
|
931
|
-
__privateAdd(this, _vantages, /* @__PURE__ */ new Set());
|
|
932
|
-
__privateAdd(this, _currentTwisty3DPuzzleWrapper, null);
|
|
933
|
-
__privateAdd(this, _initialWrapperTracker, new InitialValueTracker());
|
|
934
|
-
__privateAdd(this, _twisty3DStaleDropper, new StaleDropper());
|
|
935
1028
|
}
|
|
1029
|
+
#backViewClassListManager = new ClassListManager(this, "back-view-", [
|
|
1030
|
+
"auto",
|
|
1031
|
+
"none",
|
|
1032
|
+
"side-by-side",
|
|
1033
|
+
"top-right"
|
|
1034
|
+
]);
|
|
1035
|
+
#freshListenerManager = new FreshListenerManager();
|
|
936
1036
|
disconnect() {
|
|
937
|
-
|
|
1037
|
+
this.#freshListenerManager.disconnect();
|
|
938
1038
|
}
|
|
939
1039
|
async connectedCallback() {
|
|
940
1040
|
this.addCSS(twistyViewerWrapperCSS);
|
|
941
1041
|
const vantage = new Twisty3DVantage(this.model, this);
|
|
942
1042
|
this.addVantage(vantage);
|
|
943
1043
|
if (this.model) {
|
|
944
|
-
|
|
945
|
-
|
|
1044
|
+
this.#freshListenerManager.addMultiListener(
|
|
1045
|
+
[this.model.puzzleLoader, this.model.visualizationStrategy],
|
|
1046
|
+
this.onPuzzle.bind(this)
|
|
1047
|
+
);
|
|
1048
|
+
this.#freshListenerManager.addListener(
|
|
1049
|
+
this.model.backView,
|
|
1050
|
+
this.onBackView.bind(this)
|
|
1051
|
+
);
|
|
946
1052
|
}
|
|
947
1053
|
this.scheduleRender();
|
|
948
1054
|
}
|
|
1055
|
+
#backViewVantage = null;
|
|
949
1056
|
setBackView(backView) {
|
|
950
1057
|
const shouldHaveBackView = ["side-by-side", "top-right"].includes(backView);
|
|
951
|
-
const hasBackView =
|
|
952
|
-
|
|
1058
|
+
const hasBackView = this.#backViewVantage !== null;
|
|
1059
|
+
this.#backViewClassListManager.setValue(backView);
|
|
953
1060
|
if (shouldHaveBackView) {
|
|
954
1061
|
if (!hasBackView) {
|
|
955
|
-
|
|
1062
|
+
this.#backViewVantage = new Twisty3DVantage(this.model, this, {
|
|
956
1063
|
backView: true
|
|
957
|
-
})
|
|
958
|
-
this.addVantage(
|
|
1064
|
+
});
|
|
1065
|
+
this.addVantage(this.#backViewVantage);
|
|
959
1066
|
this.scheduleRender();
|
|
960
1067
|
}
|
|
961
1068
|
} else {
|
|
962
|
-
if (
|
|
963
|
-
this.removeVantage(
|
|
964
|
-
|
|
1069
|
+
if (this.#backViewVantage) {
|
|
1070
|
+
this.removeVantage(this.#backViewVantage);
|
|
1071
|
+
this.#backViewVantage = null;
|
|
965
1072
|
}
|
|
966
1073
|
}
|
|
967
1074
|
}
|
|
@@ -969,7 +1076,7 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
|
|
|
969
1076
|
this.setBackView(backView);
|
|
970
1077
|
}
|
|
971
1078
|
async onPress(e) {
|
|
972
|
-
const twisty3DPuzzleWrapper =
|
|
1079
|
+
const twisty3DPuzzleWrapper = this.#currentTwisty3DPuzzleWrapper;
|
|
973
1080
|
if (!twisty3DPuzzleWrapper) {
|
|
974
1081
|
console.info("no wrapper; skipping scene wrapper press!");
|
|
975
1082
|
return;
|
|
@@ -980,7 +1087,10 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
|
|
|
980
1087
|
THREEJS
|
|
981
1088
|
]);
|
|
982
1089
|
const raycaster = new three.Raycaster();
|
|
983
|
-
const mouse = new (await THREEJS).Vector2(
|
|
1090
|
+
const mouse = new (await THREEJS).Vector2(
|
|
1091
|
+
e.detail.pressInfo.normalizedX,
|
|
1092
|
+
e.detail.pressInfo.normalizedY
|
|
1093
|
+
);
|
|
984
1094
|
raycaster.setFromCamera(mouse, camera);
|
|
985
1095
|
return raycaster;
|
|
986
1096
|
})();
|
|
@@ -989,32 +1099,35 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
|
|
|
989
1099
|
depth: e.detail.pressInfo.keys.ctrlOrMetaKey ? "rotation" : e.detail.pressInfo.keys.shiftKey ? "secondSlice" : "none"
|
|
990
1100
|
});
|
|
991
1101
|
}
|
|
1102
|
+
#cachedScene;
|
|
992
1103
|
async scene() {
|
|
993
|
-
return
|
|
1104
|
+
return this.#cachedScene ?? (this.#cachedScene = (async () => new (await THREEJS).Scene())());
|
|
994
1105
|
}
|
|
1106
|
+
#vantages = /* @__PURE__ */ new Set();
|
|
995
1107
|
addVantage(vantage) {
|
|
996
1108
|
vantage.addEventListener("press", this.onPress.bind(this));
|
|
997
|
-
|
|
1109
|
+
this.#vantages.add(vantage);
|
|
998
1110
|
this.contentWrapper.appendChild(vantage);
|
|
999
1111
|
}
|
|
1000
1112
|
removeVantage(vantage) {
|
|
1001
|
-
|
|
1113
|
+
this.#vantages.delete(vantage);
|
|
1002
1114
|
vantage.remove();
|
|
1003
1115
|
vantage.disconnect();
|
|
1004
|
-
|
|
1116
|
+
this.#currentTwisty3DPuzzleWrapper?.disconnect();
|
|
1005
1117
|
}
|
|
1006
1118
|
experimentalVantages() {
|
|
1007
|
-
return
|
|
1119
|
+
return this.#vantages.values();
|
|
1008
1120
|
}
|
|
1009
1121
|
scheduleRender() {
|
|
1010
|
-
for (const vantage of
|
|
1122
|
+
for (const vantage of this.#vantages) {
|
|
1011
1123
|
vantage.scheduleRender();
|
|
1012
1124
|
}
|
|
1013
1125
|
}
|
|
1126
|
+
#currentTwisty3DPuzzleWrapper = null;
|
|
1014
1127
|
async setCurrentTwisty3DPuzzleWrapper(scene, twisty3DPuzzleWrapper) {
|
|
1015
|
-
const old =
|
|
1128
|
+
const old = this.#currentTwisty3DPuzzleWrapper;
|
|
1016
1129
|
try {
|
|
1017
|
-
|
|
1130
|
+
this.#currentTwisty3DPuzzleWrapper = twisty3DPuzzleWrapper;
|
|
1018
1131
|
old?.disconnect();
|
|
1019
1132
|
scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
|
|
1020
1133
|
} finally {
|
|
@@ -1022,31 +1135,27 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
|
|
|
1022
1135
|
scene.remove(await old.twisty3DPuzzle());
|
|
1023
1136
|
}
|
|
1024
1137
|
}
|
|
1025
|
-
|
|
1138
|
+
this.#initialWrapperTracker.handleNewValue(twisty3DPuzzleWrapper);
|
|
1026
1139
|
}
|
|
1140
|
+
#initialWrapperTracker = new InitialValueTracker();
|
|
1027
1141
|
async experimentalTwisty3DPuzzleWrapper() {
|
|
1028
|
-
return
|
|
1142
|
+
return this.#currentTwisty3DPuzzleWrapper || this.#initialWrapperTracker.promise;
|
|
1029
1143
|
}
|
|
1144
|
+
#twisty3DStaleDropper = new StaleDropper();
|
|
1030
1145
|
async onPuzzle(inputs) {
|
|
1031
1146
|
if (inputs[1] === "2D") {
|
|
1032
1147
|
return;
|
|
1033
1148
|
}
|
|
1034
|
-
|
|
1035
|
-
const [scene, twisty3DPuzzleWrapper] = await
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1149
|
+
this.#currentTwisty3DPuzzleWrapper?.disconnect();
|
|
1150
|
+
const [scene, twisty3DPuzzleWrapper] = await this.#twisty3DStaleDropper.queue(
|
|
1151
|
+
Promise.all([
|
|
1152
|
+
this.scene(),
|
|
1153
|
+
new Twisty3DPuzzleWrapper(this.model, this, inputs[0], inputs[1])
|
|
1154
|
+
])
|
|
1155
|
+
);
|
|
1039
1156
|
this.setCurrentTwisty3DPuzzleWrapper(scene, twisty3DPuzzleWrapper);
|
|
1040
1157
|
}
|
|
1041
1158
|
};
|
|
1042
|
-
_backViewClassListManager = new WeakMap();
|
|
1043
|
-
_freshListenerManager5 = new WeakMap();
|
|
1044
|
-
_backViewVantage = new WeakMap();
|
|
1045
|
-
_cachedScene2 = new WeakMap();
|
|
1046
|
-
_vantages = new WeakMap();
|
|
1047
|
-
_currentTwisty3DPuzzleWrapper = new WeakMap();
|
|
1048
|
-
_initialWrapperTracker = new WeakMap();
|
|
1049
|
-
_twisty3DStaleDropper = new WeakMap();
|
|
1050
1159
|
customElementsShim.define("twisty-3d-scene-wrapper", Twisty3DSceneWrapper);
|
|
1051
1160
|
|
|
1052
1161
|
// src/cubing/twisty/views/control-panel/TwistyButtons.css.ts
|
|
@@ -1263,14 +1372,12 @@ var buttonCommands = {
|
|
|
1263
1372
|
"jump-to-end": true,
|
|
1264
1373
|
"twizzle-link": true
|
|
1265
1374
|
};
|
|
1266
|
-
var _onCommand, onCommand_fn;
|
|
1267
1375
|
var TwistyButtons = class extends ManagedCustomElement {
|
|
1268
1376
|
constructor(model, controller, fullscreenElement) {
|
|
1269
1377
|
super();
|
|
1270
1378
|
this.model = model;
|
|
1271
1379
|
this.controller = controller;
|
|
1272
1380
|
this.fullscreenElement = fullscreenElement;
|
|
1273
|
-
__privateAdd(this, _onCommand);
|
|
1274
1381
|
this.buttons = null;
|
|
1275
1382
|
}
|
|
1276
1383
|
connectedCallback() {
|
|
@@ -1279,12 +1386,48 @@ var TwistyButtons = class extends ManagedCustomElement {
|
|
|
1279
1386
|
for (const command in buttonCommands) {
|
|
1280
1387
|
const button = new TwistyButton();
|
|
1281
1388
|
buttons[command] = button;
|
|
1282
|
-
button.htmlButton.addEventListener(
|
|
1389
|
+
button.htmlButton.addEventListener(
|
|
1390
|
+
"click",
|
|
1391
|
+
() => this.#onCommand(command)
|
|
1392
|
+
);
|
|
1283
1393
|
this.addElement(button);
|
|
1284
1394
|
}
|
|
1285
1395
|
this.buttons = buttons;
|
|
1286
1396
|
this.model?.buttonAppearance.addFreshListener(this.update.bind(this));
|
|
1287
1397
|
}
|
|
1398
|
+
#onCommand(command) {
|
|
1399
|
+
switch (command) {
|
|
1400
|
+
case "fullscreen":
|
|
1401
|
+
this.onFullscreenButton();
|
|
1402
|
+
break;
|
|
1403
|
+
case "jump-to-start":
|
|
1404
|
+
this.controller?.jumpToStart({ flash: true });
|
|
1405
|
+
break;
|
|
1406
|
+
case "play-step-backwards":
|
|
1407
|
+
this.controller?.animationController.play({
|
|
1408
|
+
direction: -1 /* Backwards */,
|
|
1409
|
+
untilBoundary: "move" /* Move */
|
|
1410
|
+
});
|
|
1411
|
+
break;
|
|
1412
|
+
case "play-pause":
|
|
1413
|
+
this.controller?.togglePlay();
|
|
1414
|
+
break;
|
|
1415
|
+
case "play-step":
|
|
1416
|
+
this.controller?.animationController.play({
|
|
1417
|
+
direction: 1 /* Forwards */,
|
|
1418
|
+
untilBoundary: "move" /* Move */
|
|
1419
|
+
});
|
|
1420
|
+
break;
|
|
1421
|
+
case "jump-to-end":
|
|
1422
|
+
this.controller?.jumpToEnd({ flash: true });
|
|
1423
|
+
break;
|
|
1424
|
+
case "twizzle-link":
|
|
1425
|
+
this.controller?.visitTwizzleLink();
|
|
1426
|
+
break;
|
|
1427
|
+
default:
|
|
1428
|
+
throw new Error("Missing command");
|
|
1429
|
+
}
|
|
1430
|
+
}
|
|
1288
1431
|
async onFullscreenButton() {
|
|
1289
1432
|
if (!this.fullscreenElement) {
|
|
1290
1433
|
throw new Error("Attempted to go fullscreen without an element.");
|
|
@@ -1314,57 +1457,26 @@ var TwistyButtons = class extends ManagedCustomElement {
|
|
|
1314
1457
|
}
|
|
1315
1458
|
}
|
|
1316
1459
|
};
|
|
1317
|
-
_onCommand = new WeakSet();
|
|
1318
|
-
onCommand_fn = function(command) {
|
|
1319
|
-
switch (command) {
|
|
1320
|
-
case "fullscreen":
|
|
1321
|
-
this.onFullscreenButton();
|
|
1322
|
-
break;
|
|
1323
|
-
case "jump-to-start":
|
|
1324
|
-
this.controller?.jumpToStart({ flash: true });
|
|
1325
|
-
break;
|
|
1326
|
-
case "play-step-backwards":
|
|
1327
|
-
this.controller?.animationController.play({
|
|
1328
|
-
direction: -1 /* Backwards */,
|
|
1329
|
-
untilBoundary: "move" /* Move */
|
|
1330
|
-
});
|
|
1331
|
-
break;
|
|
1332
|
-
case "play-pause":
|
|
1333
|
-
this.controller?.togglePlay();
|
|
1334
|
-
break;
|
|
1335
|
-
case "play-step":
|
|
1336
|
-
this.controller?.animationController.play({
|
|
1337
|
-
direction: 1 /* Forwards */,
|
|
1338
|
-
untilBoundary: "move" /* Move */
|
|
1339
|
-
});
|
|
1340
|
-
break;
|
|
1341
|
-
case "jump-to-end":
|
|
1342
|
-
this.controller?.jumpToEnd({ flash: true });
|
|
1343
|
-
break;
|
|
1344
|
-
case "twizzle-link":
|
|
1345
|
-
this.controller?.visitTwizzleLink();
|
|
1346
|
-
break;
|
|
1347
|
-
default:
|
|
1348
|
-
throw new Error("Missing command");
|
|
1349
|
-
}
|
|
1350
|
-
};
|
|
1351
1460
|
customElementsShim.define("twisty-buttons", TwistyButtons);
|
|
1352
|
-
var _iconManager;
|
|
1353
1461
|
var TwistyButton = class extends ManagedCustomElement {
|
|
1354
1462
|
constructor() {
|
|
1355
1463
|
super(...arguments);
|
|
1356
1464
|
this.htmlButton = document.createElement("button");
|
|
1357
|
-
|
|
1465
|
+
this.#iconManager = new ClassListManager(
|
|
1466
|
+
this,
|
|
1467
|
+
"svg-",
|
|
1468
|
+
buttonIcons
|
|
1469
|
+
);
|
|
1358
1470
|
}
|
|
1359
1471
|
connectedCallback() {
|
|
1360
1472
|
this.addCSS(buttonCSS);
|
|
1361
1473
|
this.addElement(this.htmlButton);
|
|
1362
1474
|
}
|
|
1475
|
+
#iconManager;
|
|
1363
1476
|
setIcon(iconName) {
|
|
1364
|
-
|
|
1477
|
+
this.#iconManager.setValue(iconName);
|
|
1365
1478
|
}
|
|
1366
1479
|
};
|
|
1367
|
-
_iconManager = new WeakMap();
|
|
1368
1480
|
customElementsShim.define("twisty-button", TwistyButton);
|
|
1369
1481
|
|
|
1370
1482
|
// src/cubing/twisty/views/control-panel/TwistyScrubber.css.ts
|
|
@@ -1393,21 +1505,33 @@ input:not(:disabled) {
|
|
|
1393
1505
|
// src/cubing/twisty/views/control-panel/TwistyScrubber.ts
|
|
1394
1506
|
var SLOW_DOWN_SCRUBBING = false;
|
|
1395
1507
|
var isMouseDown = false;
|
|
1396
|
-
globalSafeDocument?.addEventListener(
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1508
|
+
globalSafeDocument?.addEventListener(
|
|
1509
|
+
"mousedown",
|
|
1510
|
+
function(event) {
|
|
1511
|
+
if (event.which) {
|
|
1512
|
+
isMouseDown = true;
|
|
1513
|
+
}
|
|
1514
|
+
},
|
|
1515
|
+
true
|
|
1516
|
+
);
|
|
1517
|
+
globalSafeDocument?.addEventListener(
|
|
1518
|
+
"mouseup",
|
|
1519
|
+
function(event) {
|
|
1520
|
+
if (event.which) {
|
|
1521
|
+
isMouseDown = false;
|
|
1522
|
+
}
|
|
1523
|
+
},
|
|
1524
|
+
true
|
|
1525
|
+
);
|
|
1406
1526
|
var y = 0;
|
|
1407
1527
|
var clickNum = 0;
|
|
1408
|
-
globalSafeDocument?.addEventListener(
|
|
1409
|
-
|
|
1410
|
-
|
|
1528
|
+
globalSafeDocument?.addEventListener(
|
|
1529
|
+
"mousedown",
|
|
1530
|
+
() => {
|
|
1531
|
+
clickNum++;
|
|
1532
|
+
},
|
|
1533
|
+
false
|
|
1534
|
+
);
|
|
1411
1535
|
globalSafeDocument?.addEventListener("mousemove", onMouseUpdate, false);
|
|
1412
1536
|
globalSafeDocument?.addEventListener("mouseenter", onMouseUpdate, false);
|
|
1413
1537
|
function onMouseUpdate(e) {
|
|
@@ -1417,12 +1541,10 @@ var lastVal = 0;
|
|
|
1417
1541
|
var lastPreval = 0;
|
|
1418
1542
|
var scaling = false;
|
|
1419
1543
|
var currentClickNum = 0;
|
|
1420
|
-
var _inputElem;
|
|
1421
1544
|
var TwistyScrubber = class extends ManagedCustomElement {
|
|
1422
1545
|
constructor(model) {
|
|
1423
1546
|
super();
|
|
1424
1547
|
this.model = model;
|
|
1425
|
-
__privateAdd(this, _inputElem, null);
|
|
1426
1548
|
}
|
|
1427
1549
|
async onDetailedTimelineInfo(detailedTimelineInfo) {
|
|
1428
1550
|
const inputElem = await this.inputElem();
|
|
@@ -1435,12 +1557,15 @@ var TwistyScrubber = class extends ManagedCustomElement {
|
|
|
1435
1557
|
this.addCSS(twistyScrubberCSS);
|
|
1436
1558
|
this.addElement(await this.inputElem());
|
|
1437
1559
|
}
|
|
1560
|
+
#inputElem = null;
|
|
1438
1561
|
async inputElem() {
|
|
1439
|
-
return
|
|
1562
|
+
return this.#inputElem ?? (this.#inputElem = (async () => {
|
|
1440
1563
|
const elem = document.createElement("input");
|
|
1441
1564
|
elem.type = "range";
|
|
1442
1565
|
elem.disabled = true;
|
|
1443
|
-
this.model?.detailedTimelineInfo.addFreshListener(
|
|
1566
|
+
this.model?.detailedTimelineInfo.addFreshListener(
|
|
1567
|
+
this.onDetailedTimelineInfo.bind(this)
|
|
1568
|
+
);
|
|
1444
1569
|
elem.addEventListener("input", this.onInput.bind(this));
|
|
1445
1570
|
return elem;
|
|
1446
1571
|
})());
|
|
@@ -1487,7 +1612,6 @@ var TwistyScrubber = class extends ManagedCustomElement {
|
|
|
1487
1612
|
}
|
|
1488
1613
|
}
|
|
1489
1614
|
};
|
|
1490
|
-
_inputElem = new WeakMap();
|
|
1491
1615
|
customElementsShim.define("twisty-scrubber", TwistyScrubber);
|
|
1492
1616
|
|
|
1493
1617
|
// src/cubing/twisty/views/screenshot.ts
|
|
@@ -1500,8 +1624,13 @@ async function screenshot(model, options) {
|
|
|
1500
1624
|
return new (await THREEJS).PerspectiveCamera(20, aspectRatio, 0.1, 20);
|
|
1501
1625
|
})());
|
|
1502
1626
|
const scene = new (await THREEJS).Scene();
|
|
1503
|
-
const twisty3DWrapper = new Twisty3DPuzzleWrapper(
|
|
1504
|
-
|
|
1627
|
+
const twisty3DWrapper = new Twisty3DPuzzleWrapper(
|
|
1628
|
+
model,
|
|
1629
|
+
{ scheduleRender: () => {
|
|
1630
|
+
} },
|
|
1631
|
+
await model.puzzleLoader.get(),
|
|
1632
|
+
await model.visualizationStrategy.get()
|
|
1633
|
+
);
|
|
1505
1634
|
await model.twistySceneModel.stickering.get();
|
|
1506
1635
|
await new Promise((resolve) => setTimeout(resolve, 1e3));
|
|
1507
1636
|
await model.legacyPosition.get();
|
|
@@ -1711,9 +1840,13 @@ var AnchorTransformationProp = class extends TwistyPropDerived {
|
|
|
1711
1840
|
case "start":
|
|
1712
1841
|
return inputs.setupAlgTransformation;
|
|
1713
1842
|
case "end": {
|
|
1714
|
-
const algTransformation = inputs.indexer.transformationAtIndex(
|
|
1843
|
+
const algTransformation = inputs.indexer.transformationAtIndex(
|
|
1844
|
+
inputs.indexer.numAnimatedLeaves()
|
|
1845
|
+
);
|
|
1715
1846
|
const inverseAlgTransformation = algTransformation.invert();
|
|
1716
|
-
return inputs.setupAlgTransformation.applyTransformation(
|
|
1847
|
+
return inputs.setupAlgTransformation.applyTransformation(
|
|
1848
|
+
inverseAlgTransformation
|
|
1849
|
+
);
|
|
1717
1850
|
}
|
|
1718
1851
|
default:
|
|
1719
1852
|
throw new Error("Unimplemented!");
|
|
@@ -1736,12 +1869,24 @@ var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
|
|
|
1736
1869
|
derive(inputs) {
|
|
1737
1870
|
return {
|
|
1738
1871
|
stateIndex: inputs.currentMoveInfo.stateIndex,
|
|
1739
|
-
movesFinishing: inputs.currentMoveInfo.movesFinishing.map(
|
|
1740
|
-
|
|
1872
|
+
movesFinishing: inputs.currentMoveInfo.movesFinishing.map(
|
|
1873
|
+
(currentMoveInfo) => currentMoveInfo.move
|
|
1874
|
+
),
|
|
1875
|
+
movesFinished: inputs.currentMoveInfo.movesFinished.map(
|
|
1876
|
+
(currentMoveInfo) => currentMoveInfo.move
|
|
1877
|
+
)
|
|
1741
1878
|
};
|
|
1742
1879
|
}
|
|
1743
1880
|
canReuse(v1, v2) {
|
|
1744
|
-
return v1.stateIndex === v2.stateIndex && arrayEqualsCompare(
|
|
1881
|
+
return v1.stateIndex === v2.stateIndex && arrayEqualsCompare(
|
|
1882
|
+
v1.movesFinishing,
|
|
1883
|
+
v2.movesFinishing,
|
|
1884
|
+
(m1, m2) => m1.isIdentical(m2)
|
|
1885
|
+
) && arrayEqualsCompare(
|
|
1886
|
+
v1.movesFinished,
|
|
1887
|
+
v2.movesFinished,
|
|
1888
|
+
(m1, m2) => m1.isIdentical(m2)
|
|
1889
|
+
);
|
|
1745
1890
|
}
|
|
1746
1891
|
};
|
|
1747
1892
|
|
|
@@ -1761,9 +1906,13 @@ var CurrentMoveInfoProp = class extends TwistyPropDerived {
|
|
|
1761
1906
|
return currentMoveInfo;
|
|
1762
1907
|
}
|
|
1763
1908
|
if (inputs.indexer.currentMoveInfo) {
|
|
1764
|
-
return addCatchUpMove(
|
|
1909
|
+
return addCatchUpMove(
|
|
1910
|
+
inputs.indexer.currentMoveInfo(inputs.detailedTimelineInfo.timestamp)
|
|
1911
|
+
);
|
|
1765
1912
|
} else {
|
|
1766
|
-
const idx = inputs.indexer.timestampToIndex(
|
|
1913
|
+
const idx = inputs.indexer.timestampToIndex(
|
|
1914
|
+
inputs.detailedTimelineInfo.timestamp
|
|
1915
|
+
);
|
|
1767
1916
|
const currentMoveInfo = {
|
|
1768
1917
|
stateIndex: idx,
|
|
1769
1918
|
currentMoves: [],
|
|
@@ -1795,8 +1944,14 @@ var CurrentMoveInfoProp = class extends TwistyPropDerived {
|
|
|
1795
1944
|
currentMoveInfo.movesFinishing.push(currentMove);
|
|
1796
1945
|
} else {
|
|
1797
1946
|
currentMoveInfo.currentMoves.push(currentMove);
|
|
1798
|
-
currentMoveInfo.latestStart = Math.max(
|
|
1799
|
-
|
|
1947
|
+
currentMoveInfo.latestStart = Math.max(
|
|
1948
|
+
currentMoveInfo.latestStart,
|
|
1949
|
+
start
|
|
1950
|
+
);
|
|
1951
|
+
currentMoveInfo.earliestEnd = Math.min(
|
|
1952
|
+
currentMoveInfo.earliestEnd,
|
|
1953
|
+
end
|
|
1954
|
+
);
|
|
1800
1955
|
}
|
|
1801
1956
|
}
|
|
1802
1957
|
return addCatchUpMove(currentMoveInfo);
|
|
@@ -1807,7 +1962,9 @@ var CurrentMoveInfoProp = class extends TwistyPropDerived {
|
|
|
1807
1962
|
// src/cubing/twisty/model/props/puzzle/state/CurrentStateProp.ts
|
|
1808
1963
|
var CurrentStateProp = class extends TwistyPropDerived {
|
|
1809
1964
|
derive(inputs) {
|
|
1810
|
-
let transformation = inputs.indexer.transformationAtIndex(
|
|
1965
|
+
let transformation = inputs.indexer.transformationAtIndex(
|
|
1966
|
+
inputs.currentLeavesSimplified.stateIndex
|
|
1967
|
+
);
|
|
1811
1968
|
transformation = inputs.anchoredStart.applyTransformation(transformation);
|
|
1812
1969
|
for (const finishingMove of inputs.currentLeavesSimplified.movesFinishing) {
|
|
1813
1970
|
transformation = transformation.applyMove(finishingMove);
|
|
@@ -1871,7 +2028,9 @@ var AlgDuration = class extends TraversalUp {
|
|
|
1871
2028
|
var SimpleAlgIndexer = class {
|
|
1872
2029
|
constructor(kpuzzle, alg) {
|
|
1873
2030
|
this.kpuzzle = kpuzzle;
|
|
1874
|
-
this.durationFn = new AlgDuration(
|
|
2031
|
+
this.durationFn = new AlgDuration(
|
|
2032
|
+
defaultDurationForAmount
|
|
2033
|
+
);
|
|
1875
2034
|
this.moves = new Alg(alg.experimentalExpand());
|
|
1876
2035
|
}
|
|
1877
2036
|
getAnimLeaf(index) {
|
|
@@ -1956,15 +2115,20 @@ var LocalSimulMoves = class extends TraversalUp {
|
|
|
1956
2115
|
return this.traverseAlg(alg);
|
|
1957
2116
|
}
|
|
1958
2117
|
}
|
|
1959
|
-
maxSimulDur = Math.max(
|
|
2118
|
+
maxSimulDur = Math.max(
|
|
2119
|
+
maxSimulDur,
|
|
2120
|
+
defaultDurationForAmount(moves[i].amount)
|
|
2121
|
+
);
|
|
1960
2122
|
}
|
|
1961
|
-
const localMovesWithRange = moves.map(
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
2123
|
+
const localMovesWithRange = moves.map(
|
|
2124
|
+
(blockMove) => {
|
|
2125
|
+
return {
|
|
2126
|
+
animLeafAlgNode: blockMove,
|
|
2127
|
+
msUntilNext: 0,
|
|
2128
|
+
duration: maxSimulDur
|
|
2129
|
+
};
|
|
2130
|
+
}
|
|
2131
|
+
);
|
|
1968
2132
|
localMovesWithRange[localMovesWithRange.length - 1].msUntilNext = maxSimulDur;
|
|
1969
2133
|
return localMovesWithRange;
|
|
1970
2134
|
}
|
|
@@ -2032,18 +2196,22 @@ var LocalSimulMoves = class extends TraversalUp {
|
|
|
2032
2196
|
}
|
|
2033
2197
|
};
|
|
2034
2198
|
var localSimulMovesInstance = new LocalSimulMoves();
|
|
2035
|
-
var localSimulMoves = localSimulMovesInstance.traverseAlg.bind(
|
|
2199
|
+
var localSimulMoves = localSimulMovesInstance.traverseAlg.bind(
|
|
2200
|
+
localSimulMovesInstance
|
|
2201
|
+
);
|
|
2036
2202
|
function simulMoves(a) {
|
|
2037
2203
|
let timestamp = 0;
|
|
2038
|
-
const l = localSimulMoves(a).map(
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2204
|
+
const l = localSimulMoves(a).map(
|
|
2205
|
+
(localSimulMove) => {
|
|
2206
|
+
const leafWithRange = {
|
|
2207
|
+
animLeaf: localSimulMove.animLeafAlgNode,
|
|
2208
|
+
start: timestamp,
|
|
2209
|
+
end: timestamp + localSimulMove.duration
|
|
2210
|
+
};
|
|
2211
|
+
timestamp += localSimulMove.msUntilNext;
|
|
2212
|
+
return leafWithRange;
|
|
2213
|
+
}
|
|
2214
|
+
);
|
|
2047
2215
|
return l;
|
|
2048
2216
|
}
|
|
2049
2217
|
|
|
@@ -2124,7 +2292,10 @@ var SimultaneousMoveIndexer = class {
|
|
|
2124
2292
|
timestampToPosition(timestamp, startState) {
|
|
2125
2293
|
const currentMoveInfo = this.currentMoveInfo(timestamp);
|
|
2126
2294
|
let state = startState ?? this.kpuzzle.identityTransformation().toKState();
|
|
2127
|
-
for (const leafWithRange of this.animLeaves.slice(
|
|
2295
|
+
for (const leafWithRange of this.animLeaves.slice(
|
|
2296
|
+
0,
|
|
2297
|
+
currentMoveInfo.stateIndex
|
|
2298
|
+
)) {
|
|
2128
2299
|
const move = leafWithRange.animLeaf.as(Move);
|
|
2129
2300
|
if (move !== null) {
|
|
2130
2301
|
state = state.applyMove(move);
|
|
@@ -2139,7 +2310,10 @@ var SimultaneousMoveIndexer = class {
|
|
|
2139
2310
|
let windowEarliestTimestamp = Infinity;
|
|
2140
2311
|
for (const leafWithRange of this.animLeaves) {
|
|
2141
2312
|
if (leafWithRange.start <= timestamp && leafWithRange.end >= timestamp) {
|
|
2142
|
-
windowEarliestTimestamp = Math.min(
|
|
2313
|
+
windowEarliestTimestamp = Math.min(
|
|
2314
|
+
windowEarliestTimestamp,
|
|
2315
|
+
leafWithRange.start
|
|
2316
|
+
);
|
|
2143
2317
|
} else if (leafWithRange.start > timestamp) {
|
|
2144
2318
|
break;
|
|
2145
2319
|
}
|
|
@@ -2252,10 +2426,18 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2252
2426
|
constructor(kpuzzle) {
|
|
2253
2427
|
super();
|
|
2254
2428
|
this.kpuzzle = kpuzzle;
|
|
2255
|
-
this.durationFn = new AlgDuration(
|
|
2429
|
+
this.durationFn = new AlgDuration(
|
|
2430
|
+
defaultDurationForAmount
|
|
2431
|
+
);
|
|
2256
2432
|
this.cache = {};
|
|
2257
2433
|
this.identity = kpuzzle.identityTransformation();
|
|
2258
|
-
this.dummyLeaf = new AlgWalkterDecoration(
|
|
2434
|
+
this.dummyLeaf = new AlgWalkterDecoration(
|
|
2435
|
+
0,
|
|
2436
|
+
0,
|
|
2437
|
+
this.identity,
|
|
2438
|
+
this.identity,
|
|
2439
|
+
[]
|
|
2440
|
+
);
|
|
2259
2441
|
}
|
|
2260
2442
|
traverseAlg(alg) {
|
|
2261
2443
|
let moveCount = 0;
|
|
@@ -2273,7 +2455,13 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2273
2455
|
}
|
|
2274
2456
|
child.push(apd);
|
|
2275
2457
|
}
|
|
2276
|
-
return new AlgWalkterDecoration(
|
|
2458
|
+
return new AlgWalkterDecoration(
|
|
2459
|
+
moveCount,
|
|
2460
|
+
duration,
|
|
2461
|
+
transformation,
|
|
2462
|
+
transformation.invert(),
|
|
2463
|
+
child
|
|
2464
|
+
);
|
|
2277
2465
|
}
|
|
2278
2466
|
traverseGrouping(grouping) {
|
|
2279
2467
|
const dec = this.traverseAlg(grouping.alg);
|
|
@@ -2286,7 +2474,12 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2286
2474
|
return r;
|
|
2287
2475
|
}
|
|
2288
2476
|
const transformation = this.kpuzzle.moveToTransformation(move);
|
|
2289
|
-
r = new AlgWalkterDecoration(
|
|
2477
|
+
r = new AlgWalkterDecoration(
|
|
2478
|
+
1,
|
|
2479
|
+
this.durationFn.traverseAlgNode(move),
|
|
2480
|
+
transformation,
|
|
2481
|
+
transformation.invert()
|
|
2482
|
+
);
|
|
2290
2483
|
this.cache[key] = r;
|
|
2291
2484
|
return r;
|
|
2292
2485
|
}
|
|
@@ -2296,7 +2489,13 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2296
2489
|
const AB = decA.forward.applyTransformation(decB.forward);
|
|
2297
2490
|
const ApBp = decA.backward.applyTransformation(decB.backward);
|
|
2298
2491
|
const ABApBp = AB.applyTransformation(ApBp);
|
|
2299
|
-
const dec = new AlgWalkterDecoration(
|
|
2492
|
+
const dec = new AlgWalkterDecoration(
|
|
2493
|
+
2 * (decA.moveCount + decB.moveCount),
|
|
2494
|
+
2 * (decA.duration + decB.duration),
|
|
2495
|
+
ABApBp,
|
|
2496
|
+
ABApBp.invert(),
|
|
2497
|
+
[decA, decB]
|
|
2498
|
+
);
|
|
2300
2499
|
return this.mult(dec, 1, [dec, decA, decB]);
|
|
2301
2500
|
}
|
|
2302
2501
|
traverseConjugate(conjugate) {
|
|
@@ -2304,14 +2503,25 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2304
2503
|
const decB = this.traverseAlg(conjugate.B);
|
|
2305
2504
|
const AB = decA.forward.applyTransformation(decB.forward);
|
|
2306
2505
|
const ABAp = AB.applyTransformation(decA.backward);
|
|
2307
|
-
const dec = new AlgWalkterDecoration(
|
|
2506
|
+
const dec = new AlgWalkterDecoration(
|
|
2507
|
+
2 * decA.moveCount + decB.moveCount,
|
|
2508
|
+
2 * decA.duration + decB.duration,
|
|
2509
|
+
ABAp,
|
|
2510
|
+
ABAp.invert(),
|
|
2511
|
+
[decA, decB]
|
|
2512
|
+
);
|
|
2308
2513
|
return this.mult(dec, 1, [dec, decA, decB]);
|
|
2309
2514
|
}
|
|
2310
2515
|
traversePause(pause) {
|
|
2311
2516
|
if (pause.experimentalNISSGrouping) {
|
|
2312
2517
|
return this.dummyLeaf;
|
|
2313
2518
|
}
|
|
2314
|
-
return new AlgWalkterDecoration(
|
|
2519
|
+
return new AlgWalkterDecoration(
|
|
2520
|
+
1,
|
|
2521
|
+
this.durationFn.traverseAlgNode(pause),
|
|
2522
|
+
this.identity,
|
|
2523
|
+
this.identity
|
|
2524
|
+
);
|
|
2315
2525
|
}
|
|
2316
2526
|
traverseNewline(_newline) {
|
|
2317
2527
|
return this.dummyLeaf;
|
|
@@ -2322,7 +2532,13 @@ var DecoratorConstructor = class extends TraversalUp {
|
|
|
2322
2532
|
mult(apd, n, child) {
|
|
2323
2533
|
const absn = Math.abs(n);
|
|
2324
2534
|
const st = apd.forward.selfMultiply(n);
|
|
2325
|
-
return new AlgWalkterDecoration(
|
|
2535
|
+
return new AlgWalkterDecoration(
|
|
2536
|
+
apd.moveCount * absn,
|
|
2537
|
+
apd.duration * absn,
|
|
2538
|
+
st,
|
|
2539
|
+
st.invert(),
|
|
2540
|
+
child
|
|
2541
|
+
);
|
|
2326
2542
|
}
|
|
2327
2543
|
};
|
|
2328
2544
|
var WalkerDown = class {
|
|
@@ -2376,8 +2592,14 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2376
2592
|
return false;
|
|
2377
2593
|
}
|
|
2378
2594
|
let i = wd.back ? alg.experimentalNumChildAlgNodes() - 1 : 0;
|
|
2379
|
-
for (const algNode of directedGenerator(
|
|
2380
|
-
|
|
2595
|
+
for (const algNode of directedGenerator(
|
|
2596
|
+
alg.childAlgNodes(),
|
|
2597
|
+
wd.back ? -1 /* Backwards */ : 1 /* Forwards */
|
|
2598
|
+
)) {
|
|
2599
|
+
if (this.traverseAlgNode(
|
|
2600
|
+
algNode,
|
|
2601
|
+
new WalkerDown(wd.apd.children[i], wd.back)
|
|
2602
|
+
)) {
|
|
2381
2603
|
return true;
|
|
2382
2604
|
}
|
|
2383
2605
|
i += wd.back ? -1 : 1;
|
|
@@ -2389,7 +2611,10 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2389
2611
|
return false;
|
|
2390
2612
|
}
|
|
2391
2613
|
const back = this.domult(wd, grouping.amount);
|
|
2392
|
-
return this.traverseAlg(
|
|
2614
|
+
return this.traverseAlg(
|
|
2615
|
+
grouping.alg,
|
|
2616
|
+
new WalkerDown(wd.apd.children[0], back)
|
|
2617
|
+
);
|
|
2393
2618
|
}
|
|
2394
2619
|
traverseMove(move, wd) {
|
|
2395
2620
|
if (!this.firstcheck(wd)) {
|
|
@@ -2406,9 +2631,30 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2406
2631
|
}
|
|
2407
2632
|
const back = this.domult(wd, 1);
|
|
2408
2633
|
if (back) {
|
|
2409
|
-
return this.traverseAlg(
|
|
2634
|
+
return this.traverseAlg(
|
|
2635
|
+
commutator.B,
|
|
2636
|
+
new WalkerDown(wd.apd.children[2], !back)
|
|
2637
|
+
) || this.traverseAlg(
|
|
2638
|
+
commutator.A,
|
|
2639
|
+
new WalkerDown(wd.apd.children[1], !back)
|
|
2640
|
+
) || this.traverseAlg(
|
|
2641
|
+
commutator.B,
|
|
2642
|
+
new WalkerDown(wd.apd.children[2], back)
|
|
2643
|
+
) || this.traverseAlg(commutator.A, new WalkerDown(wd.apd.children[1], back));
|
|
2410
2644
|
} else {
|
|
2411
|
-
return this.traverseAlg(
|
|
2645
|
+
return this.traverseAlg(
|
|
2646
|
+
commutator.A,
|
|
2647
|
+
new WalkerDown(wd.apd.children[1], back)
|
|
2648
|
+
) || this.traverseAlg(
|
|
2649
|
+
commutator.B,
|
|
2650
|
+
new WalkerDown(wd.apd.children[2], back)
|
|
2651
|
+
) || this.traverseAlg(
|
|
2652
|
+
commutator.A,
|
|
2653
|
+
new WalkerDown(wd.apd.children[1], !back)
|
|
2654
|
+
) || this.traverseAlg(
|
|
2655
|
+
commutator.B,
|
|
2656
|
+
new WalkerDown(wd.apd.children[2], !back)
|
|
2657
|
+
);
|
|
2412
2658
|
}
|
|
2413
2659
|
}
|
|
2414
2660
|
traverseConjugate(conjugate, wd) {
|
|
@@ -2417,9 +2663,21 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2417
2663
|
}
|
|
2418
2664
|
const back = this.domult(wd, 1);
|
|
2419
2665
|
if (back) {
|
|
2420
|
-
return this.traverseAlg(
|
|
2666
|
+
return this.traverseAlg(
|
|
2667
|
+
conjugate.A,
|
|
2668
|
+
new WalkerDown(wd.apd.children[1], !back)
|
|
2669
|
+
) || this.traverseAlg(
|
|
2670
|
+
conjugate.B,
|
|
2671
|
+
new WalkerDown(wd.apd.children[2], back)
|
|
2672
|
+
) || this.traverseAlg(conjugate.A, new WalkerDown(wd.apd.children[1], back));
|
|
2421
2673
|
} else {
|
|
2422
|
-
return this.traverseAlg(
|
|
2674
|
+
return this.traverseAlg(
|
|
2675
|
+
conjugate.A,
|
|
2676
|
+
new WalkerDown(wd.apd.children[1], back)
|
|
2677
|
+
) || this.traverseAlg(
|
|
2678
|
+
conjugate.B,
|
|
2679
|
+
new WalkerDown(wd.apd.children[2], back)
|
|
2680
|
+
) || this.traverseAlg(conjugate.A, new WalkerDown(wd.apd.children[1], !back));
|
|
2423
2681
|
}
|
|
2424
2682
|
}
|
|
2425
2683
|
traversePause(pause, wd) {
|
|
@@ -2453,7 +2711,10 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2453
2711
|
amount = -amount;
|
|
2454
2712
|
}
|
|
2455
2713
|
const base = wd.apd.children[0];
|
|
2456
|
-
const full = Math.min(
|
|
2714
|
+
const full = Math.min(
|
|
2715
|
+
Math.floor((this.goali - this.i) / base.moveCount),
|
|
2716
|
+
Math.ceil((this.goaldur - this.dur) / base.duration - 1)
|
|
2717
|
+
);
|
|
2457
2718
|
if (full > 0) {
|
|
2458
2719
|
this.keepgoing(new WalkerDown(base, back), full);
|
|
2459
2720
|
}
|
|
@@ -2464,7 +2725,9 @@ var AlgWalker = class extends TraversalDownUp {
|
|
|
2464
2725
|
this.dur += mul * wd.apd.duration;
|
|
2465
2726
|
if (mul !== 1) {
|
|
2466
2727
|
if (wd.back) {
|
|
2467
|
-
this.st = this.st.applyTransformation(
|
|
2728
|
+
this.st = this.st.applyTransformation(
|
|
2729
|
+
wd.apd.backward.selfMultiply(mul)
|
|
2730
|
+
);
|
|
2468
2731
|
} else {
|
|
2469
2732
|
this.st = this.st.applyTransformation(wd.apd.forward.selfMultiply(mul));
|
|
2470
2733
|
}
|
|
@@ -2503,16 +2766,25 @@ var ChunkAlgs = class extends TraversalUp {
|
|
|
2503
2766
|
return chunkifyAlg(alg, Math.ceil(Math.sqrt(algLength)));
|
|
2504
2767
|
}
|
|
2505
2768
|
traverseGrouping(grouping) {
|
|
2506
|
-
return new Grouping(
|
|
2769
|
+
return new Grouping(
|
|
2770
|
+
this.traverseAlg(grouping.alg),
|
|
2771
|
+
grouping.amount
|
|
2772
|
+
);
|
|
2507
2773
|
}
|
|
2508
2774
|
traverseMove(move) {
|
|
2509
2775
|
return move;
|
|
2510
2776
|
}
|
|
2511
2777
|
traverseCommutator(commutator) {
|
|
2512
|
-
return new Conjugate(
|
|
2778
|
+
return new Conjugate(
|
|
2779
|
+
this.traverseAlg(commutator.A),
|
|
2780
|
+
this.traverseAlg(commutator.B)
|
|
2781
|
+
);
|
|
2513
2782
|
}
|
|
2514
2783
|
traverseConjugate(conjugate) {
|
|
2515
|
-
return new Conjugate(
|
|
2784
|
+
return new Conjugate(
|
|
2785
|
+
this.traverseAlg(conjugate.A),
|
|
2786
|
+
this.traverseAlg(conjugate.B)
|
|
2787
|
+
);
|
|
2516
2788
|
}
|
|
2517
2789
|
traversePause(pause) {
|
|
2518
2790
|
return pause;
|
|
@@ -2525,7 +2797,9 @@ var ChunkAlgs = class extends TraversalUp {
|
|
|
2525
2797
|
}
|
|
2526
2798
|
};
|
|
2527
2799
|
var chunkAlgsInstance = new ChunkAlgs();
|
|
2528
|
-
var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(
|
|
2800
|
+
var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(
|
|
2801
|
+
chunkAlgsInstance
|
|
2802
|
+
);
|
|
2529
2803
|
|
|
2530
2804
|
// src/cubing/twisty/controllers/indexer/tree/TreeAlgIndexer.ts
|
|
2531
2805
|
var TreeAlgIndexer = class {
|
|
@@ -2563,7 +2837,9 @@ var TreeAlgIndexer = class {
|
|
|
2563
2837
|
}
|
|
2564
2838
|
stateAtIndex(index, startState) {
|
|
2565
2839
|
this.walker.moveByIndex(index);
|
|
2566
|
-
return (startState ?? this.kpuzzle.startState()).applyTransformation(
|
|
2840
|
+
return (startState ?? this.kpuzzle.startState()).applyTransformation(
|
|
2841
|
+
this.walker.st
|
|
2842
|
+
);
|
|
2567
2843
|
}
|
|
2568
2844
|
transformationAtIndex(index) {
|
|
2569
2845
|
this.walker.moveByIndex(index);
|
|
@@ -2737,14 +3013,9 @@ var CoarseTimelineInfoProp = class extends TwistyPropDerived {
|
|
|
2737
3013
|
};
|
|
2738
3014
|
|
|
2739
3015
|
// src/cubing/twisty/model/props/timeline/DetailedTimelineInfoProp.ts
|
|
2740
|
-
var _requestedTimestampToMilliseconds, requestedTimestampToMilliseconds_fn;
|
|
2741
3016
|
var DetailedTimelineInfoProp = class extends TwistyPropDerived {
|
|
2742
|
-
constructor() {
|
|
2743
|
-
super(...arguments);
|
|
2744
|
-
__privateAdd(this, _requestedTimestampToMilliseconds);
|
|
2745
|
-
}
|
|
2746
3017
|
derive(inputs) {
|
|
2747
|
-
let timestamp =
|
|
3018
|
+
let timestamp = this.#requestedTimestampToMilliseconds(inputs);
|
|
2748
3019
|
let atStart = false;
|
|
2749
3020
|
let atEnd = false;
|
|
2750
3021
|
if (timestamp >= inputs.timeRange.end) {
|
|
@@ -2762,25 +3033,24 @@ var DetailedTimelineInfoProp = class extends TwistyPropDerived {
|
|
|
2762
3033
|
atEnd
|
|
2763
3034
|
};
|
|
2764
3035
|
}
|
|
3036
|
+
#requestedTimestampToMilliseconds(inputs) {
|
|
3037
|
+
switch (inputs.timestampRequest) {
|
|
3038
|
+
case "start":
|
|
3039
|
+
return inputs.timeRange.start;
|
|
3040
|
+
case "end":
|
|
3041
|
+
return inputs.timeRange.end;
|
|
3042
|
+
case "anchor":
|
|
3043
|
+
return inputs.setupAnchor === "start" ? inputs.timeRange.start : inputs.timeRange.end;
|
|
3044
|
+
case "opposite-anchor":
|
|
3045
|
+
return inputs.setupAnchor === "start" ? inputs.timeRange.end : inputs.timeRange.start;
|
|
3046
|
+
default:
|
|
3047
|
+
return inputs.timestampRequest;
|
|
3048
|
+
}
|
|
3049
|
+
}
|
|
2765
3050
|
canReuse(v1, v2) {
|
|
2766
3051
|
return v1.timestamp === v2.timestamp && v1.timeRange.start === v2.timeRange.start && v1.timeRange.end === v2.timeRange.end && v1.atStart === v2.atStart && v1.atEnd === v2.atEnd;
|
|
2767
3052
|
}
|
|
2768
3053
|
};
|
|
2769
|
-
_requestedTimestampToMilliseconds = new WeakSet();
|
|
2770
|
-
requestedTimestampToMilliseconds_fn = function(inputs) {
|
|
2771
|
-
switch (inputs.timestampRequest) {
|
|
2772
|
-
case "start":
|
|
2773
|
-
return inputs.timeRange.start;
|
|
2774
|
-
case "end":
|
|
2775
|
-
return inputs.timeRange.end;
|
|
2776
|
-
case "anchor":
|
|
2777
|
-
return inputs.setupAnchor === "start" ? inputs.timeRange.start : inputs.timeRange.end;
|
|
2778
|
-
case "opposite-anchor":
|
|
2779
|
-
return inputs.setupAnchor === "start" ? inputs.timeRange.end : inputs.timeRange.start;
|
|
2780
|
-
default:
|
|
2781
|
-
return inputs.timestampRequest;
|
|
2782
|
-
}
|
|
2783
|
-
};
|
|
2784
3054
|
|
|
2785
3055
|
// src/cubing/twisty/model/props/timeline/PlayingInfoProp.ts
|
|
2786
3056
|
var PlayingInfoProp = class extends TwistyPropSource {
|
|
@@ -2900,7 +3170,11 @@ var VisualizationStrategyProp = class extends TwistyPropDerived {
|
|
|
2900
3170
|
case "3D":
|
|
2901
3171
|
return "PG3D";
|
|
2902
3172
|
case "experimental-2D-LL":
|
|
2903
|
-
|
|
3173
|
+
if (inputs.puzzleID === "4x4x4") {
|
|
3174
|
+
return "experimental-2D-LL";
|
|
3175
|
+
} else {
|
|
3176
|
+
return "2D";
|
|
3177
|
+
}
|
|
2904
3178
|
default:
|
|
2905
3179
|
return inputs.visualizationRequest;
|
|
2906
3180
|
}
|
|
@@ -2932,7 +3206,12 @@ var SpriteProp = class extends TwistyPropDerived {
|
|
|
2932
3206
|
resolve(null);
|
|
2933
3207
|
};
|
|
2934
3208
|
try {
|
|
2935
|
-
(await loader()).load(
|
|
3209
|
+
(await loader()).load(
|
|
3210
|
+
textureURL.toString(),
|
|
3211
|
+
resolve,
|
|
3212
|
+
onLoadingError,
|
|
3213
|
+
onLoadingError
|
|
3214
|
+
);
|
|
2936
3215
|
} catch (e) {
|
|
2937
3216
|
onLoadingError();
|
|
2938
3217
|
}
|
|
@@ -3016,7 +3295,13 @@ var OrbitCoordinatesProp = class extends TwistyPropDerived {
|
|
|
3016
3295
|
if (inputs.orbitCoordinatesRequest === "auto") {
|
|
3017
3296
|
return defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy);
|
|
3018
3297
|
}
|
|
3019
|
-
const req = Object.assign(
|
|
3298
|
+
const req = Object.assign(
|
|
3299
|
+
Object.assign(
|
|
3300
|
+
{},
|
|
3301
|
+
defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy),
|
|
3302
|
+
inputs.orbitCoordinatesRequest
|
|
3303
|
+
)
|
|
3304
|
+
);
|
|
3020
3305
|
if (Math.abs(req.latitude) <= inputs.latitudeLimit) {
|
|
3021
3306
|
return req;
|
|
3022
3307
|
} else {
|
|
@@ -3142,10 +3427,13 @@ var TwistyPlayerModel = class {
|
|
|
3142
3427
|
this.title = new ArbitraryStringProp();
|
|
3143
3428
|
this.videoURL = new URLProp();
|
|
3144
3429
|
this.competitionID = new ArbitraryStringProp();
|
|
3145
|
-
this.puzzleLoader = new PuzzleLoaderProp(
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3430
|
+
this.puzzleLoader = new PuzzleLoaderProp(
|
|
3431
|
+
{
|
|
3432
|
+
puzzleIDRequest: this.puzzleIDRequest,
|
|
3433
|
+
puzzleDescriptionRequest: this.puzzleDescriptionRequest
|
|
3434
|
+
},
|
|
3435
|
+
this.userVisibleErrorTracker
|
|
3436
|
+
);
|
|
3149
3437
|
this.kpuzzle = new KPuzzleProp({ puzzleLoader: this.puzzleLoader });
|
|
3150
3438
|
this.puzzleID = new PuzzleIDProp({ puzzleLoader: this.puzzleLoader });
|
|
3151
3439
|
this.puzzleAlg = new PuzzleAlgProp({
|
|
@@ -3185,11 +3473,13 @@ var TwistyPlayerModel = class {
|
|
|
3185
3473
|
this.timeRange = new TimeRangeProp({
|
|
3186
3474
|
indexer: this.indexer
|
|
3187
3475
|
});
|
|
3188
|
-
this.detailedTimelineInfo = new DetailedTimelineInfoProp(
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3476
|
+
this.detailedTimelineInfo = new DetailedTimelineInfoProp(
|
|
3477
|
+
{
|
|
3478
|
+
timestampRequest: this.timestampRequest,
|
|
3479
|
+
timeRange: this.timeRange,
|
|
3480
|
+
setupAnchor: this.setupAnchor
|
|
3481
|
+
}
|
|
3482
|
+
);
|
|
3193
3483
|
this.coarseTimelineInfo = new CoarseTimelineInfoProp({
|
|
3194
3484
|
detailedTimelineInfo: this.detailedTimelineInfo,
|
|
3195
3485
|
playingInfo: this.playingInfo
|
|
@@ -3236,7 +3526,9 @@ var TwistyPlayerModel = class {
|
|
|
3236
3526
|
this.twistySceneModel.stickering.get()
|
|
3237
3527
|
]);
|
|
3238
3528
|
const isExplorer = viewerLink === "experimental-twizzle-explorer";
|
|
3239
|
-
const url = new URL(
|
|
3529
|
+
const url = new URL(
|
|
3530
|
+
`https://alpha.twizzle.net/${isExplorer ? "explore" : "edit"}/`
|
|
3531
|
+
);
|
|
3240
3532
|
if (!alg.alg.experimentalIsEmpty()) {
|
|
3241
3533
|
url.searchParams.set("alg", alg.alg.toString());
|
|
3242
3534
|
}
|
|
@@ -3256,31 +3548,46 @@ var TwistyPlayerModel = class {
|
|
|
3256
3548
|
}
|
|
3257
3549
|
return url.toString();
|
|
3258
3550
|
}
|
|
3551
|
+
experimentalAddAlgLeaf(algLeaf, options = {}) {
|
|
3552
|
+
const maybeMove = algLeaf.as(Move);
|
|
3553
|
+
if (maybeMove) {
|
|
3554
|
+
this.experimentalAddMove(maybeMove, options);
|
|
3555
|
+
} else {
|
|
3556
|
+
this.alg.set(
|
|
3557
|
+
(async () => {
|
|
3558
|
+
const alg = (await this.alg.get()).alg;
|
|
3559
|
+
const newAlg = alg.concat(new Alg([algLeaf]));
|
|
3560
|
+
this.timestampRequest.set("end");
|
|
3561
|
+
return newAlg;
|
|
3562
|
+
})()
|
|
3563
|
+
);
|
|
3564
|
+
}
|
|
3565
|
+
}
|
|
3259
3566
|
experimentalAddMove(flexibleMove, options = {}) {
|
|
3260
3567
|
const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
|
|
3261
|
-
(
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
console.warn("Using deprecated prop: `playingInfoProp`. Please switch to: `playingInfo`");
|
|
3277
|
-
return this.playingInfo;
|
|
3568
|
+
this.alg.set(
|
|
3569
|
+
(async () => {
|
|
3570
|
+
const alg = (await this.alg.get()).alg;
|
|
3571
|
+
const newAlg = experimentalAppendMove(alg, move, {
|
|
3572
|
+
coalesce: options?.coalesce,
|
|
3573
|
+
mod: options?.mod
|
|
3574
|
+
});
|
|
3575
|
+
this.timestampRequest.set("end");
|
|
3576
|
+
this.catchUpMove.set({
|
|
3577
|
+
move,
|
|
3578
|
+
amount: 0
|
|
3579
|
+
});
|
|
3580
|
+
return newAlg;
|
|
3581
|
+
})()
|
|
3582
|
+
);
|
|
3278
3583
|
}
|
|
3279
3584
|
};
|
|
3280
3585
|
|
|
3281
3586
|
// src/cubing/twisty/views/TwistyPlayerSettable.ts
|
|
3282
3587
|
function err(propName) {
|
|
3283
|
-
return new Error(
|
|
3588
|
+
return new Error(
|
|
3589
|
+
`Cannot get \`.${propName}\` directly from a \`TwistyPlayer\`.`
|
|
3590
|
+
);
|
|
3284
3591
|
}
|
|
3285
3592
|
var TwistyPlayerSettable = class extends ManagedCustomElement {
|
|
3286
3593
|
constructor() {
|
|
@@ -3491,23 +3798,32 @@ var twistyPlayerAttributeMap = {
|
|
|
3491
3798
|
"experimental-sprite": "experimentalSprite",
|
|
3492
3799
|
"experimental-hint-sprite": "experimentalHintSprite"
|
|
3493
3800
|
};
|
|
3494
|
-
var configKeys = Object.fromEntries(
|
|
3495
|
-
|
|
3801
|
+
var configKeys = Object.fromEntries(
|
|
3802
|
+
Object.values(twistyPlayerAttributeMap).map((s) => [s, true])
|
|
3803
|
+
);
|
|
3496
3804
|
var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
3497
3805
|
constructor(config = {}) {
|
|
3498
3806
|
super();
|
|
3499
|
-
|
|
3500
|
-
|
|
3807
|
+
this.controller = new TwistyPlayerController(
|
|
3808
|
+
this.experimentalModel,
|
|
3809
|
+
this
|
|
3810
|
+
);
|
|
3501
3811
|
this.experimentalCanvasClickCallback = () => {
|
|
3502
3812
|
};
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3813
|
+
this.#controlsManager = new ClassListManager(
|
|
3814
|
+
this,
|
|
3815
|
+
"controls-",
|
|
3816
|
+
["auto"].concat(
|
|
3817
|
+
Object.keys(controlsLocations)
|
|
3818
|
+
)
|
|
3819
|
+
);
|
|
3820
|
+
this.#visualizationWrapperElem = document.createElement("div");
|
|
3821
|
+
this.#errorElem = document.createElement("div");
|
|
3822
|
+
this.#alreadyConnected = false;
|
|
3823
|
+
this.#flashLevel = "auto";
|
|
3824
|
+
this.#visualizationWrapper = null;
|
|
3825
|
+
this.#initial3DVisualizationWrapper = new InitialValueTracker();
|
|
3826
|
+
this.#visualizationStrategy = null;
|
|
3511
3827
|
for (const [propName, value] of Object.entries(config)) {
|
|
3512
3828
|
if (!configKeys[propName]) {
|
|
3513
3829
|
console.warn(`Invalid config passed to TwistyPlayer: ${propName}`);
|
|
@@ -3516,49 +3832,100 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
|
3516
3832
|
this[propName] = value;
|
|
3517
3833
|
}
|
|
3518
3834
|
}
|
|
3835
|
+
#controlsManager;
|
|
3836
|
+
#visualizationWrapperElem;
|
|
3837
|
+
#errorElem;
|
|
3838
|
+
#alreadyConnected;
|
|
3519
3839
|
async connectedCallback() {
|
|
3520
|
-
if (
|
|
3840
|
+
if (this.#alreadyConnected) {
|
|
3521
3841
|
return;
|
|
3522
3842
|
}
|
|
3523
|
-
|
|
3843
|
+
this.#alreadyConnected = true;
|
|
3524
3844
|
this.addCSS(twistyPlayerCSS);
|
|
3525
|
-
this.addElement(
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
this.
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3845
|
+
this.addElement(this.#visualizationWrapperElem).classList.add(
|
|
3846
|
+
"visualization-wrapper"
|
|
3847
|
+
);
|
|
3848
|
+
this.addElement(this.#errorElem).classList.add("error-elem");
|
|
3849
|
+
this.#errorElem.textContent = "Error";
|
|
3850
|
+
this.experimentalModel.userVisibleErrorTracker.addFreshListener(
|
|
3851
|
+
(userVisibleError) => {
|
|
3852
|
+
const errorString = userVisibleError.errors[0] ?? null;
|
|
3853
|
+
this.contentWrapper.classList.toggle("error", !!errorString);
|
|
3854
|
+
if (errorString) {
|
|
3855
|
+
this.#errorElem.textContent = errorString;
|
|
3856
|
+
}
|
|
3533
3857
|
}
|
|
3534
|
-
|
|
3858
|
+
);
|
|
3535
3859
|
const scrubber = new TwistyScrubber(this.experimentalModel);
|
|
3536
3860
|
this.contentWrapper.appendChild(scrubber);
|
|
3537
|
-
this.buttons = new TwistyButtons(
|
|
3861
|
+
this.buttons = new TwistyButtons(
|
|
3862
|
+
this.experimentalModel,
|
|
3863
|
+
this.controller,
|
|
3864
|
+
this
|
|
3865
|
+
);
|
|
3538
3866
|
this.contentWrapper.appendChild(this.buttons);
|
|
3539
|
-
this.experimentalModel.twistySceneModel.background.addFreshListener(
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3867
|
+
this.experimentalModel.twistySceneModel.background.addFreshListener(
|
|
3868
|
+
(backgroundTheme) => {
|
|
3869
|
+
this.contentWrapper.classList.toggle(
|
|
3870
|
+
"checkered",
|
|
3871
|
+
backgroundTheme !== "none"
|
|
3872
|
+
);
|
|
3873
|
+
}
|
|
3874
|
+
);
|
|
3875
|
+
this.experimentalModel.controlPanel.addFreshListener(
|
|
3876
|
+
(controlPanel) => {
|
|
3877
|
+
this.#controlsManager.setValue(controlPanel);
|
|
3878
|
+
}
|
|
3879
|
+
);
|
|
3880
|
+
this.experimentalModel.visualizationStrategy.addFreshListener(
|
|
3881
|
+
this.#setVisualizationWrapper.bind(this)
|
|
3882
|
+
);
|
|
3546
3883
|
this.experimentalModel.puzzleID.addFreshListener(this.flash.bind(this));
|
|
3547
3884
|
}
|
|
3885
|
+
#flashLevel;
|
|
3548
3886
|
experimentalSetFlashLevel(newLevel) {
|
|
3549
|
-
|
|
3887
|
+
this.#flashLevel = newLevel;
|
|
3550
3888
|
}
|
|
3551
3889
|
flash() {
|
|
3552
|
-
if (
|
|
3553
|
-
|
|
3890
|
+
if (this.#flashLevel === "auto") {
|
|
3891
|
+
this.#visualizationWrapper?.animate([{ opacity: 0.25 }, { opacity: 1 }], {
|
|
3554
3892
|
duration: 250,
|
|
3555
3893
|
easing: "ease-out"
|
|
3556
3894
|
});
|
|
3557
3895
|
}
|
|
3558
3896
|
}
|
|
3897
|
+
#visualizationWrapper;
|
|
3898
|
+
#initial3DVisualizationWrapper;
|
|
3899
|
+
#visualizationStrategy;
|
|
3900
|
+
#setVisualizationWrapper(strategy) {
|
|
3901
|
+
if (strategy !== this.#visualizationStrategy) {
|
|
3902
|
+
this.#visualizationWrapper?.remove();
|
|
3903
|
+
this.#visualizationWrapper?.disconnect();
|
|
3904
|
+
let newWrapper;
|
|
3905
|
+
switch (strategy) {
|
|
3906
|
+
case "2D":
|
|
3907
|
+
case "experimental-2D-LL":
|
|
3908
|
+
newWrapper = new Twisty2DSceneWrapper(
|
|
3909
|
+
this.experimentalModel.twistySceneModel,
|
|
3910
|
+
strategy
|
|
3911
|
+
);
|
|
3912
|
+
break;
|
|
3913
|
+
case "Cube3D":
|
|
3914
|
+
case "PG3D":
|
|
3915
|
+
newWrapper = new Twisty3DSceneWrapper(this.experimentalModel);
|
|
3916
|
+
this.#initial3DVisualizationWrapper.handleNewValue(newWrapper);
|
|
3917
|
+
break;
|
|
3918
|
+
default:
|
|
3919
|
+
throw new Error("Invalid visualization");
|
|
3920
|
+
}
|
|
3921
|
+
this.#visualizationWrapperElem.appendChild(newWrapper);
|
|
3922
|
+
this.#visualizationWrapper = newWrapper;
|
|
3923
|
+
this.#visualizationStrategy = strategy;
|
|
3924
|
+
}
|
|
3925
|
+
}
|
|
3559
3926
|
async experimentalCurrentVantages() {
|
|
3560
3927
|
this.connectedCallback();
|
|
3561
|
-
const wrapper =
|
|
3928
|
+
const wrapper = this.#visualizationWrapper;
|
|
3562
3929
|
if (wrapper instanceof Twisty3DSceneWrapper) {
|
|
3563
3930
|
return wrapper.experimentalVantages();
|
|
3564
3931
|
}
|
|
@@ -3574,7 +3941,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
|
3574
3941
|
}
|
|
3575
3942
|
async experimentalCurrentThreeJSPuzzleObject(puzzleChangeCallback) {
|
|
3576
3943
|
this.connectedCallback();
|
|
3577
|
-
const sceneWrapper = await
|
|
3944
|
+
const sceneWrapper = await this.#initial3DVisualizationWrapper.promise;
|
|
3578
3945
|
const puzzleWrapper = await sceneWrapper.experimentalTwisty3DPuzzleWrapper();
|
|
3579
3946
|
const twisty3DPuzzlePromise = puzzleWrapper.twisty3DPuzzle();
|
|
3580
3947
|
const safeToCallback = (async () => {
|
|
@@ -3612,6 +3979,9 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
|
3612
3979
|
experimentalAddMove(flexibleMove, options = {}) {
|
|
3613
3980
|
this.experimentalModel.experimentalAddMove(flexibleMove, options);
|
|
3614
3981
|
}
|
|
3982
|
+
experimentalAddAlgLeaf(algLeaf, options = {}) {
|
|
3983
|
+
this.experimentalModel.experimentalAddAlgLeaf(algLeaf, options);
|
|
3984
|
+
}
|
|
3615
3985
|
static get observedAttributes() {
|
|
3616
3986
|
const observed = [];
|
|
3617
3987
|
for (const key of Object.keys(twistyPlayerAttributeMap)) {
|
|
@@ -3620,8 +3990,8 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
|
3620
3990
|
return observed;
|
|
3621
3991
|
}
|
|
3622
3992
|
attributeChangedCallback(attributeName, _oldValue, newValue) {
|
|
3623
|
-
if (attributeName.startsWith(
|
|
3624
|
-
attributeName = attributeName.slice(
|
|
3993
|
+
if (attributeName.startsWith(DATA_ATTRIBUTE_PREFIX)) {
|
|
3994
|
+
attributeName = attributeName.slice(DATA_ATTRIBUTE_PREFIX.length);
|
|
3625
3995
|
}
|
|
3626
3996
|
const setterName = twistyPlayerAttributeMap[attributeName];
|
|
3627
3997
|
if (!setterName) {
|
|
@@ -3633,49 +4003,25 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
|
|
|
3633
4003
|
return (await screenshot(this.experimentalModel, options)).dataURL;
|
|
3634
4004
|
}
|
|
3635
4005
|
async experimentalDownloadScreenshot(filename) {
|
|
3636
|
-
if (["2D", "experimental-2D-LL"].includes(
|
|
3637
|
-
|
|
4006
|
+
if (["2D", "experimental-2D-LL"].includes(
|
|
4007
|
+
await this.experimentalModel.visualizationStrategy.get()
|
|
4008
|
+
)) {
|
|
4009
|
+
const wrapper2D = this.#visualizationWrapper;
|
|
3638
4010
|
const twisty2DPuzzle = await wrapper2D.currentTwisty2DPuzzleWrapper().twisty2DPuzzle();
|
|
3639
|
-
const str = new XMLSerializer().serializeToString(
|
|
4011
|
+
const str = new XMLSerializer().serializeToString(
|
|
4012
|
+
twisty2DPuzzle.svgWrapper.svgElement
|
|
4013
|
+
);
|
|
3640
4014
|
const url = URL.createObjectURL(new Blob([str]));
|
|
3641
|
-
downloadURL(
|
|
4015
|
+
downloadURL(
|
|
4016
|
+
url,
|
|
4017
|
+
filename ?? await getDefaultFilename(this.experimentalModel),
|
|
4018
|
+
"svg"
|
|
4019
|
+
);
|
|
3642
4020
|
} else {
|
|
3643
4021
|
await (await screenshot(this.experimentalModel)).download(filename);
|
|
3644
4022
|
}
|
|
3645
4023
|
}
|
|
3646
4024
|
};
|
|
3647
|
-
_controlsManager = new WeakMap();
|
|
3648
|
-
_visualizationWrapperElem = new WeakMap();
|
|
3649
|
-
_errorElem = new WeakMap();
|
|
3650
|
-
_alreadyConnected = new WeakMap();
|
|
3651
|
-
_flashLevel = new WeakMap();
|
|
3652
|
-
_visualizationWrapper = new WeakMap();
|
|
3653
|
-
_initial3DVisualizationWrapper = new WeakMap();
|
|
3654
|
-
_visualizationStrategy = new WeakMap();
|
|
3655
|
-
_setVisualizationWrapper = new WeakSet();
|
|
3656
|
-
setVisualizationWrapper_fn = function(strategy) {
|
|
3657
|
-
if (strategy !== __privateGet(this, _visualizationStrategy)) {
|
|
3658
|
-
__privateGet(this, _visualizationWrapper)?.remove();
|
|
3659
|
-
__privateGet(this, _visualizationWrapper)?.disconnect();
|
|
3660
|
-
let newWrapper;
|
|
3661
|
-
switch (strategy) {
|
|
3662
|
-
case "2D":
|
|
3663
|
-
case "experimental-2D-LL":
|
|
3664
|
-
newWrapper = new Twisty2DSceneWrapper(this.experimentalModel.twistySceneModel, strategy);
|
|
3665
|
-
break;
|
|
3666
|
-
case "Cube3D":
|
|
3667
|
-
case "PG3D":
|
|
3668
|
-
newWrapper = new Twisty3DSceneWrapper(this.experimentalModel);
|
|
3669
|
-
__privateGet(this, _initial3DVisualizationWrapper).handleNewValue(newWrapper);
|
|
3670
|
-
break;
|
|
3671
|
-
default:
|
|
3672
|
-
throw new Error("Invalid visualization");
|
|
3673
|
-
}
|
|
3674
|
-
__privateGet(this, _visualizationWrapperElem).appendChild(newWrapper);
|
|
3675
|
-
__privateSet(this, _visualizationWrapper, newWrapper);
|
|
3676
|
-
__privateSet(this, _visualizationStrategy, strategy);
|
|
3677
|
-
}
|
|
3678
|
-
};
|
|
3679
4025
|
customElementsShim.define("twisty-player", TwistyPlayer);
|
|
3680
4026
|
|
|
3681
4027
|
// src/cubing/twisty/views/TwistyAlgViewer.css.ts
|
|
@@ -3716,15 +4062,22 @@ var TwistyAlgLeafElem = class extends ManagedCustomElement {
|
|
|
3716
4062
|
this.classList.add(className);
|
|
3717
4063
|
this.addCSS(twistyAlgViewerCSS);
|
|
3718
4064
|
if (clickable) {
|
|
3719
|
-
const anchor = this.contentWrapper.appendChild(
|
|
4065
|
+
const anchor = this.contentWrapper.appendChild(
|
|
4066
|
+
document.createElement("a")
|
|
4067
|
+
);
|
|
3720
4068
|
anchor.href = "#";
|
|
3721
4069
|
anchor.textContent = text;
|
|
3722
4070
|
anchor.addEventListener("click", (e) => {
|
|
3723
4071
|
e.preventDefault();
|
|
3724
|
-
dataDown.twistyAlgViewer.jumpToIndex(
|
|
4072
|
+
dataDown.twistyAlgViewer.jumpToIndex(
|
|
4073
|
+
dataDown.earliestMoveIndex,
|
|
4074
|
+
offsetIntoMove
|
|
4075
|
+
);
|
|
3725
4076
|
});
|
|
3726
4077
|
} else {
|
|
3727
|
-
this.contentWrapper.appendChild(
|
|
4078
|
+
this.contentWrapper.appendChild(
|
|
4079
|
+
document.createElement("span")
|
|
4080
|
+
).textContent = text;
|
|
3728
4081
|
}
|
|
3729
4082
|
}
|
|
3730
4083
|
pathToIndex(_index) {
|
|
@@ -3779,7 +4132,10 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3779
4132
|
let moveCount = 0;
|
|
3780
4133
|
const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg);
|
|
3781
4134
|
let first = true;
|
|
3782
|
-
for (const algNode of direct(
|
|
4135
|
+
for (const algNode of direct(
|
|
4136
|
+
alg.childAlgNodes(),
|
|
4137
|
+
dataDown.direction
|
|
4138
|
+
)) {
|
|
3783
4139
|
if (!first) {
|
|
3784
4140
|
element.addString(" ");
|
|
3785
4141
|
}
|
|
@@ -3788,11 +4144,13 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3788
4144
|
element.addString("^(");
|
|
3789
4145
|
}
|
|
3790
4146
|
if (!algNode.as(Grouping)?.experimentalNISSPlaceholder) {
|
|
3791
|
-
moveCount += element.addElem(
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
4147
|
+
moveCount += element.addElem(
|
|
4148
|
+
this.traverseAlgNode(algNode, {
|
|
4149
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4150
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4151
|
+
direction: dataDown.direction
|
|
4152
|
+
})
|
|
4153
|
+
);
|
|
3796
4154
|
}
|
|
3797
4155
|
if (algNode.as(Pause)?.experimentalNISSGrouping) {
|
|
3798
4156
|
element.addString(")");
|
|
@@ -3806,26 +4164,45 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3806
4164
|
}
|
|
3807
4165
|
traverseGrouping(grouping, dataDown) {
|
|
3808
4166
|
const square1Tuple = grouping.experimentalAsSquare1Tuple();
|
|
3809
|
-
const direction = updateDirectionByAmount(
|
|
4167
|
+
const direction = updateDirectionByAmount(
|
|
4168
|
+
dataDown.direction,
|
|
4169
|
+
grouping.amount
|
|
4170
|
+
);
|
|
3810
4171
|
let moveCount = 0;
|
|
3811
4172
|
const element = new TwistyAlgWrapperElem("twisty-alg-grouping", grouping);
|
|
3812
4173
|
element.addString("(");
|
|
3813
4174
|
if (square1Tuple) {
|
|
3814
4175
|
moveCount += element.addElem({
|
|
3815
4176
|
moveCount: 1,
|
|
3816
|
-
element: new TwistyAlgLeafElem(
|
|
4177
|
+
element: new TwistyAlgLeafElem(
|
|
4178
|
+
"twisty-alg-move",
|
|
4179
|
+
square1Tuple[0].amount.toString(),
|
|
4180
|
+
dataDown,
|
|
4181
|
+
square1Tuple[0],
|
|
4182
|
+
true,
|
|
4183
|
+
true
|
|
4184
|
+
)
|
|
3817
4185
|
});
|
|
3818
4186
|
element.addString(", ");
|
|
3819
4187
|
moveCount += element.addElem({
|
|
3820
4188
|
moveCount: 1,
|
|
3821
|
-
element: new TwistyAlgLeafElem(
|
|
4189
|
+
element: new TwistyAlgLeafElem(
|
|
4190
|
+
"twisty-alg-move",
|
|
4191
|
+
square1Tuple[1].amount.toString(),
|
|
4192
|
+
dataDown,
|
|
4193
|
+
square1Tuple[1],
|
|
4194
|
+
true,
|
|
4195
|
+
true
|
|
4196
|
+
)
|
|
3822
4197
|
});
|
|
3823
4198
|
} else {
|
|
3824
|
-
moveCount += element.addElem(
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
4199
|
+
moveCount += element.addElem(
|
|
4200
|
+
this.traverseAlg(grouping.alg, {
|
|
4201
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4202
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4203
|
+
direction
|
|
4204
|
+
})
|
|
4205
|
+
);
|
|
3829
4206
|
}
|
|
3830
4207
|
element.addString(")" + grouping.experimentalRepetitionSuffix);
|
|
3831
4208
|
element.flushQueue();
|
|
@@ -3835,8 +4212,18 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3835
4212
|
};
|
|
3836
4213
|
}
|
|
3837
4214
|
traverseMove(move, dataDown) {
|
|
3838
|
-
const element = new TwistyAlgLeafElem(
|
|
3839
|
-
|
|
4215
|
+
const element = new TwistyAlgLeafElem(
|
|
4216
|
+
"twisty-alg-move",
|
|
4217
|
+
move.toString(),
|
|
4218
|
+
dataDown,
|
|
4219
|
+
move,
|
|
4220
|
+
true,
|
|
4221
|
+
true
|
|
4222
|
+
);
|
|
4223
|
+
dataDown.twistyAlgViewer.highlighter.addMove(
|
|
4224
|
+
move.startCharIndex,
|
|
4225
|
+
element
|
|
4226
|
+
);
|
|
3840
4227
|
return {
|
|
3841
4228
|
moveCount: 1,
|
|
3842
4229
|
element
|
|
@@ -3844,21 +4231,31 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3844
4231
|
}
|
|
3845
4232
|
traverseCommutator(commutator, dataDown) {
|
|
3846
4233
|
let moveCount = 0;
|
|
3847
|
-
const element = new TwistyAlgWrapperElem(
|
|
4234
|
+
const element = new TwistyAlgWrapperElem(
|
|
4235
|
+
"twisty-alg-commutator",
|
|
4236
|
+
commutator
|
|
4237
|
+
);
|
|
3848
4238
|
element.addString("[");
|
|
3849
4239
|
element.flushQueue();
|
|
3850
|
-
const [first, second] = maybeReverseList(
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
4240
|
+
const [first, second] = maybeReverseList(
|
|
4241
|
+
[commutator.A, commutator.B],
|
|
4242
|
+
dataDown.direction
|
|
4243
|
+
);
|
|
4244
|
+
moveCount += element.addElem(
|
|
4245
|
+
this.traverseAlg(first, {
|
|
4246
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4247
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4248
|
+
direction: dataDown.direction
|
|
4249
|
+
})
|
|
4250
|
+
);
|
|
3856
4251
|
element.addString(", ");
|
|
3857
|
-
moveCount += element.addElem(
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
4252
|
+
moveCount += element.addElem(
|
|
4253
|
+
this.traverseAlg(second, {
|
|
4254
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4255
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4256
|
+
direction: dataDown.direction
|
|
4257
|
+
})
|
|
4258
|
+
);
|
|
3862
4259
|
element.flushQueue(dataDown.direction);
|
|
3863
4260
|
element.addString("]");
|
|
3864
4261
|
element.flushQueue();
|
|
@@ -3871,18 +4268,22 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3871
4268
|
let moveCount = 0;
|
|
3872
4269
|
const element = new TwistyAlgWrapperElem("twisty-alg-conjugate", conjugate);
|
|
3873
4270
|
element.addString("[");
|
|
3874
|
-
const aLen = element.addElem(
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
4271
|
+
const aLen = element.addElem(
|
|
4272
|
+
this.traverseAlg(conjugate.A, {
|
|
4273
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4274
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4275
|
+
direction: dataDown.direction
|
|
4276
|
+
})
|
|
4277
|
+
);
|
|
3879
4278
|
moveCount += aLen;
|
|
3880
4279
|
element.addString(": ");
|
|
3881
|
-
moveCount += element.addElem(
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
4280
|
+
moveCount += element.addElem(
|
|
4281
|
+
this.traverseAlg(conjugate.B, {
|
|
4282
|
+
earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
|
|
4283
|
+
twistyAlgViewer: dataDown.twistyAlgViewer,
|
|
4284
|
+
direction: dataDown.direction
|
|
4285
|
+
})
|
|
4286
|
+
);
|
|
3886
4287
|
element.addString("]");
|
|
3887
4288
|
element.flushQueue();
|
|
3888
4289
|
return {
|
|
@@ -3896,7 +4297,14 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3896
4297
|
}
|
|
3897
4298
|
return {
|
|
3898
4299
|
moveCount: 1,
|
|
3899
|
-
element: new TwistyAlgLeafElem(
|
|
4300
|
+
element: new TwistyAlgLeafElem(
|
|
4301
|
+
"twisty-alg-pause",
|
|
4302
|
+
".",
|
|
4303
|
+
dataDown,
|
|
4304
|
+
pause,
|
|
4305
|
+
true,
|
|
4306
|
+
true
|
|
4307
|
+
)
|
|
3900
4308
|
};
|
|
3901
4309
|
}
|
|
3902
4310
|
traverseNewline(newline, _dataDown) {
|
|
@@ -3910,12 +4318,21 @@ var AlgToDOMTree = class extends TraversalDownUp {
|
|
|
3910
4318
|
traverseLineComment(lineComment, dataDown) {
|
|
3911
4319
|
return {
|
|
3912
4320
|
moveCount: 0,
|
|
3913
|
-
element: new TwistyAlgLeafElem(
|
|
4321
|
+
element: new TwistyAlgLeafElem(
|
|
4322
|
+
"twisty-alg-line-comment",
|
|
4323
|
+
`//${lineComment.text}`,
|
|
4324
|
+
dataDown,
|
|
4325
|
+
lineComment,
|
|
4326
|
+
false,
|
|
4327
|
+
false
|
|
4328
|
+
)
|
|
3914
4329
|
};
|
|
3915
4330
|
}
|
|
3916
4331
|
};
|
|
3917
4332
|
var algToDOMTreeInstance = new AlgToDOMTree();
|
|
3918
|
-
var algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(
|
|
4333
|
+
var algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(
|
|
4334
|
+
algToDOMTreeInstance
|
|
4335
|
+
);
|
|
3919
4336
|
var MoveHighlighter = class {
|
|
3920
4337
|
constructor() {
|
|
3921
4338
|
this.moveCharIndexMap = /* @__PURE__ */ new Map();
|
|
@@ -3936,38 +4353,75 @@ var MoveHighlighter = class {
|
|
|
3936
4353
|
this.currentElem = newElem;
|
|
3937
4354
|
}
|
|
3938
4355
|
};
|
|
3939
|
-
var _domTree, _twistyPlayer, _setTwistyPlayer, setTwistyPlayer_fn;
|
|
3940
4356
|
var TwistyAlgViewer = class extends HTMLElementShim {
|
|
3941
4357
|
constructor(options) {
|
|
3942
4358
|
super();
|
|
3943
|
-
__privateAdd(this, _setTwistyPlayer);
|
|
3944
4359
|
this.highlighter = new MoveHighlighter();
|
|
3945
|
-
|
|
3946
|
-
__privateAdd(this, _twistyPlayer, null);
|
|
4360
|
+
this.#twistyPlayer = null;
|
|
3947
4361
|
this.lastClickTimestamp = null;
|
|
3948
4362
|
if (options?.twistyPlayer) {
|
|
3949
4363
|
this.twistyPlayer = options?.twistyPlayer;
|
|
3950
4364
|
}
|
|
3951
4365
|
}
|
|
4366
|
+
#domTree;
|
|
4367
|
+
#twistyPlayer;
|
|
3952
4368
|
connectedCallback() {
|
|
3953
4369
|
}
|
|
3954
4370
|
setAlg(alg) {
|
|
3955
|
-
|
|
4371
|
+
this.#domTree = algToDOMTree(alg, {
|
|
3956
4372
|
earliestMoveIndex: 0,
|
|
3957
4373
|
twistyAlgViewer: this,
|
|
3958
4374
|
direction: 1 /* Forwards */
|
|
3959
|
-
}).element
|
|
4375
|
+
}).element;
|
|
3960
4376
|
this.textContent = "";
|
|
3961
|
-
this.appendChild(
|
|
4377
|
+
this.appendChild(this.#domTree);
|
|
3962
4378
|
}
|
|
3963
4379
|
get twistyPlayer() {
|
|
3964
|
-
return
|
|
4380
|
+
return this.#twistyPlayer;
|
|
3965
4381
|
}
|
|
3966
4382
|
set twistyPlayer(twistyPlayer) {
|
|
3967
|
-
|
|
4383
|
+
this.#setTwistyPlayer(twistyPlayer);
|
|
4384
|
+
}
|
|
4385
|
+
async #setTwistyPlayer(twistyPlayer) {
|
|
4386
|
+
if (this.#twistyPlayer) {
|
|
4387
|
+
console.warn("twisty-player reassignment is not supported");
|
|
4388
|
+
return;
|
|
4389
|
+
}
|
|
4390
|
+
if (twistyPlayer === null) {
|
|
4391
|
+
throw new Error("clearing twistyPlayer is not supported");
|
|
4392
|
+
}
|
|
4393
|
+
this.#twistyPlayer = twistyPlayer;
|
|
4394
|
+
this.#twistyPlayer.experimentalModel.alg.addFreshListener(
|
|
4395
|
+
(algWithIssues) => {
|
|
4396
|
+
this.setAlg(algWithIssues.alg);
|
|
4397
|
+
}
|
|
4398
|
+
);
|
|
4399
|
+
const sourceAlg = (await this.#twistyPlayer.experimentalModel.alg.get()).alg;
|
|
4400
|
+
const parsedAlg = "startCharIndex" in sourceAlg ? sourceAlg : Alg.fromString(sourceAlg.toString());
|
|
4401
|
+
this.setAlg(parsedAlg);
|
|
4402
|
+
twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener(
|
|
4403
|
+
(currentMoveInfo) => {
|
|
4404
|
+
let moveInfo = currentMoveInfo.currentMoves[0];
|
|
4405
|
+
moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
|
|
4406
|
+
moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
|
|
4407
|
+
if (!moveInfo) {
|
|
4408
|
+
this.highlighter.set(null);
|
|
4409
|
+
} else {
|
|
4410
|
+
const mainCurrentMove = moveInfo.move;
|
|
4411
|
+
this.highlighter.set(mainCurrentMove);
|
|
4412
|
+
}
|
|
4413
|
+
}
|
|
4414
|
+
);
|
|
4415
|
+
twistyPlayer.experimentalModel.detailedTimelineInfo.addFreshListener(
|
|
4416
|
+
(detailedTimelineInfo) => {
|
|
4417
|
+
if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
|
|
4418
|
+
this.lastClickTimestamp = null;
|
|
4419
|
+
}
|
|
4420
|
+
}
|
|
4421
|
+
);
|
|
3968
4422
|
}
|
|
3969
4423
|
async jumpToIndex(index, offsetIntoMove) {
|
|
3970
|
-
const twistyPlayer =
|
|
4424
|
+
const twistyPlayer = this.#twistyPlayer;
|
|
3971
4425
|
if (twistyPlayer) {
|
|
3972
4426
|
twistyPlayer.pause();
|
|
3973
4427
|
const timestampPromise = (async () => {
|
|
@@ -3975,7 +4429,9 @@ var TwistyAlgViewer = class extends HTMLElementShim {
|
|
|
3975
4429
|
const offset = offsetIntoMove ? DEFAULT_OFFSET_MS : 0;
|
|
3976
4430
|
return (indexer.indexToMoveStartTimestamp(index) ?? -offset) + offset;
|
|
3977
4431
|
})();
|
|
3978
|
-
twistyPlayer.experimentalModel.timestampRequest.set(
|
|
4432
|
+
twistyPlayer.experimentalModel.timestampRequest.set(
|
|
4433
|
+
await timestampPromise
|
|
4434
|
+
);
|
|
3979
4435
|
if (this.lastClickTimestamp === await timestampPromise) {
|
|
3980
4436
|
twistyPlayer.play();
|
|
3981
4437
|
this.lastClickTimestamp = null;
|
|
@@ -4003,41 +4459,6 @@ var TwistyAlgViewer = class extends HTMLElementShim {
|
|
|
4003
4459
|
return ["for"];
|
|
4004
4460
|
}
|
|
4005
4461
|
};
|
|
4006
|
-
_domTree = new WeakMap();
|
|
4007
|
-
_twistyPlayer = new WeakMap();
|
|
4008
|
-
_setTwistyPlayer = new WeakSet();
|
|
4009
|
-
setTwistyPlayer_fn = async function(twistyPlayer) {
|
|
4010
|
-
if (__privateGet(this, _twistyPlayer)) {
|
|
4011
|
-
console.warn("twisty-player reassignment is not supported");
|
|
4012
|
-
return;
|
|
4013
|
-
}
|
|
4014
|
-
if (twistyPlayer === null) {
|
|
4015
|
-
throw new Error("clearing twistyPlayer is not supported");
|
|
4016
|
-
}
|
|
4017
|
-
__privateSet(this, _twistyPlayer, twistyPlayer);
|
|
4018
|
-
__privateGet(this, _twistyPlayer).experimentalModel.alg.addFreshListener((algWithIssues) => {
|
|
4019
|
-
this.setAlg(algWithIssues.alg);
|
|
4020
|
-
});
|
|
4021
|
-
const sourceAlg = (await __privateGet(this, _twistyPlayer).experimentalModel.alg.get()).alg;
|
|
4022
|
-
const parsedAlg = "startCharIndex" in sourceAlg ? sourceAlg : Alg.fromString(sourceAlg.toString());
|
|
4023
|
-
this.setAlg(parsedAlg);
|
|
4024
|
-
twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener((currentMoveInfo) => {
|
|
4025
|
-
let moveInfo = currentMoveInfo.currentMoves[0];
|
|
4026
|
-
moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
|
|
4027
|
-
moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
|
|
4028
|
-
if (!moveInfo) {
|
|
4029
|
-
this.highlighter.set(null);
|
|
4030
|
-
} else {
|
|
4031
|
-
const mainCurrentMove = moveInfo.move;
|
|
4032
|
-
this.highlighter.set(mainCurrentMove);
|
|
4033
|
-
}
|
|
4034
|
-
});
|
|
4035
|
-
twistyPlayer.experimentalModel.detailedTimelineInfo.addFreshListener((detailedTimelineInfo) => {
|
|
4036
|
-
if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
|
|
4037
|
-
this.lastClickTimestamp = null;
|
|
4038
|
-
}
|
|
4039
|
-
});
|
|
4040
|
-
};
|
|
4041
4462
|
customElementsShim.define("twisty-alg-viewer", TwistyAlgViewer);
|
|
4042
4463
|
|
|
4043
4464
|
// src/cubing/twisty/views/TwistyAlgEditor/LeafTokens.ts
|
|
@@ -4110,7 +4531,9 @@ var LeafTokens = class extends TraversalDownUp {
|
|
|
4110
4531
|
}
|
|
4111
4532
|
};
|
|
4112
4533
|
var leafTokensInstance = new LeafTokens();
|
|
4113
|
-
var leafTokens = leafTokensInstance.traverseAlg.bind(
|
|
4534
|
+
var leafTokens = leafTokensInstance.traverseAlg.bind(
|
|
4535
|
+
leafTokensInstance
|
|
4536
|
+
);
|
|
4114
4537
|
|
|
4115
4538
|
// src/cubing/twisty/views/TwistyAlgEditor/model.ts
|
|
4116
4539
|
var TwistyAlgEditorValueProp = class extends SimpleTwistyPropSource {
|
|
@@ -4284,84 +4707,101 @@ textarea {
|
|
|
4284
4707
|
var ATTRIBUTE_FOR_TWISTY_PLAYER = "for-twisty-player";
|
|
4285
4708
|
var ATTRIBUTE_PLACEHOLDER = "placeholder";
|
|
4286
4709
|
var ATTRIBUTE_TWISTY_PLAYER_PROP = "twisty-player-prop";
|
|
4287
|
-
var _textarea, _carbonCopy, _carbonCopyPrefix, _carbonCopyHighlight, _carbonCopySuffix, _textareaClassListValidForPuzzleManager, _twistyPlayer2, _twistyPlayerProp, _algProp, algProp_get, _onInputHasFired, _padSuffix, padSuffix_fn, _highlightedLeaf;
|
|
4288
4710
|
var TwistyAlgEditor = class extends ManagedCustomElement {
|
|
4289
4711
|
constructor(options) {
|
|
4290
4712
|
super();
|
|
4291
|
-
__privateAdd(this, _algProp);
|
|
4292
|
-
__privateAdd(this, _padSuffix);
|
|
4293
4713
|
this.model = new TwistyAlgEditorModel();
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4297
|
-
|
|
4298
|
-
|
|
4299
|
-
|
|
4714
|
+
this.#textarea = document.createElement("textarea");
|
|
4715
|
+
this.#carbonCopy = document.createElement("div");
|
|
4716
|
+
this.#carbonCopyPrefix = document.createElement("span");
|
|
4717
|
+
this.#carbonCopyHighlight = document.createElement("span");
|
|
4718
|
+
this.#carbonCopySuffix = document.createElement("span");
|
|
4719
|
+
this.#textareaClassListValidForPuzzleManager = new ClassListManager(this, "valid-for-puzzle-", [
|
|
4300
4720
|
"none",
|
|
4301
4721
|
"warning",
|
|
4302
4722
|
"error"
|
|
4303
|
-
])
|
|
4304
|
-
|
|
4305
|
-
__privateAdd(this, _twistyPlayerProp, void 0);
|
|
4723
|
+
]);
|
|
4724
|
+
this.#twistyPlayer = null;
|
|
4306
4725
|
this.debugNeverRequestTimestamp = false;
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
this.addElement(
|
|
4311
|
-
|
|
4312
|
-
this.addElement(
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4726
|
+
this.#onInputHasFired = false;
|
|
4727
|
+
this.#highlightedLeaf = null;
|
|
4728
|
+
this.#carbonCopy.classList.add("carbon-copy");
|
|
4729
|
+
this.addElement(this.#carbonCopy);
|
|
4730
|
+
this.#textarea.rows = 1;
|
|
4731
|
+
this.addElement(this.#textarea);
|
|
4732
|
+
this.#carbonCopyPrefix.classList.add("prefix");
|
|
4733
|
+
this.#carbonCopy.appendChild(this.#carbonCopyPrefix);
|
|
4734
|
+
this.#carbonCopyHighlight.classList.add("highlight");
|
|
4735
|
+
this.#carbonCopy.appendChild(this.#carbonCopyHighlight);
|
|
4736
|
+
this.#carbonCopySuffix.classList.add("suffix");
|
|
4737
|
+
this.#carbonCopy.appendChild(this.#carbonCopySuffix);
|
|
4738
|
+
this.#textarea.placeholder = "Alg";
|
|
4739
|
+
this.#textarea.setAttribute("spellcheck", "false");
|
|
4321
4740
|
this.addCSS(twistyAlgEditorCSS);
|
|
4322
|
-
|
|
4323
|
-
|
|
4741
|
+
this.#textarea.addEventListener("input", () => {
|
|
4742
|
+
this.#onInputHasFired = true;
|
|
4324
4743
|
this.onInput();
|
|
4325
4744
|
});
|
|
4326
|
-
|
|
4327
|
-
document.addEventListener(
|
|
4745
|
+
this.#textarea.addEventListener("blur", () => this.onBlur());
|
|
4746
|
+
document.addEventListener(
|
|
4747
|
+
"selectionchange",
|
|
4748
|
+
() => this.onSelectionChange()
|
|
4749
|
+
);
|
|
4328
4750
|
if (options?.twistyPlayer) {
|
|
4329
4751
|
this.twistyPlayer = options.twistyPlayer;
|
|
4330
4752
|
}
|
|
4331
|
-
|
|
4753
|
+
this.#twistyPlayerProp = options?.twistyPlayerProp ?? "alg";
|
|
4332
4754
|
if (options?.twistyPlayerProp === "alg") {
|
|
4333
|
-
this.model.leafToHighlight.addFreshListener(
|
|
4334
|
-
|
|
4335
|
-
|
|
4755
|
+
this.model.leafToHighlight.addFreshListener(
|
|
4756
|
+
(highlightInfo) => {
|
|
4757
|
+
if (highlightInfo) {
|
|
4758
|
+
this.highlightLeaf(highlightInfo.leafInfo.leaf);
|
|
4759
|
+
}
|
|
4336
4760
|
}
|
|
4337
|
-
|
|
4761
|
+
);
|
|
4762
|
+
}
|
|
4763
|
+
}
|
|
4764
|
+
#textarea;
|
|
4765
|
+
#carbonCopy;
|
|
4766
|
+
#carbonCopyPrefix;
|
|
4767
|
+
#carbonCopyHighlight;
|
|
4768
|
+
#carbonCopySuffix;
|
|
4769
|
+
#textareaClassListValidForPuzzleManager;
|
|
4770
|
+
#twistyPlayer;
|
|
4771
|
+
#twistyPlayerProp;
|
|
4772
|
+
get #algProp() {
|
|
4773
|
+
if (this.#twistyPlayer === null) {
|
|
4774
|
+
return null;
|
|
4775
|
+
} else {
|
|
4776
|
+
return this.#twistyPlayer.experimentalModel[this.#twistyPlayerProp];
|
|
4338
4777
|
}
|
|
4339
4778
|
}
|
|
4340
4779
|
set algString(s) {
|
|
4341
|
-
|
|
4780
|
+
this.#textarea.value = s;
|
|
4342
4781
|
this.onInput();
|
|
4343
4782
|
}
|
|
4344
4783
|
get algString() {
|
|
4345
|
-
return
|
|
4784
|
+
return this.#textarea.value;
|
|
4346
4785
|
}
|
|
4347
4786
|
set placeholder(placeholderText) {
|
|
4348
|
-
|
|
4787
|
+
this.#textarea.placeholder = placeholderText;
|
|
4349
4788
|
}
|
|
4789
|
+
#onInputHasFired;
|
|
4350
4790
|
onInput() {
|
|
4351
|
-
|
|
4791
|
+
this.#carbonCopyHighlight.hidden = true;
|
|
4352
4792
|
this.highlightLeaf(null);
|
|
4353
|
-
const endTrimmed =
|
|
4793
|
+
const endTrimmed = this.#textarea.value.trimEnd();
|
|
4354
4794
|
this.model.valueProp.set(endTrimmed);
|
|
4355
|
-
|
|
4795
|
+
this.#algProp?.set(endTrimmed);
|
|
4356
4796
|
}
|
|
4357
4797
|
async onSelectionChange() {
|
|
4358
|
-
if (document.activeElement !== this || this.shadow.activeElement !==
|
|
4798
|
+
if (document.activeElement !== this || this.shadow.activeElement !== this.#textarea) {
|
|
4359
4799
|
return;
|
|
4360
4800
|
}
|
|
4361
|
-
if (
|
|
4801
|
+
if (this.#twistyPlayerProp !== "alg") {
|
|
4362
4802
|
return;
|
|
4363
4803
|
}
|
|
4364
|
-
const { selectionStart, selectionEnd } =
|
|
4804
|
+
const { selectionStart, selectionEnd } = this.#textarea;
|
|
4365
4805
|
this.model.selectionProp.set({
|
|
4366
4806
|
selectionStart,
|
|
4367
4807
|
selectionEnd
|
|
@@ -4370,96 +4810,120 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
|
|
|
4370
4810
|
async onBlur() {
|
|
4371
4811
|
}
|
|
4372
4812
|
setAlgIssueClassForPuzzle(issues) {
|
|
4373
|
-
|
|
4813
|
+
this.#textareaClassListValidForPuzzleManager.setValue(issues);
|
|
4814
|
+
}
|
|
4815
|
+
#padSuffix(s) {
|
|
4816
|
+
return s.endsWith("\n") ? s + " " : s;
|
|
4374
4817
|
}
|
|
4818
|
+
#highlightedLeaf;
|
|
4375
4819
|
highlightLeaf(leaf) {
|
|
4376
|
-
if (
|
|
4820
|
+
if (this.#twistyPlayerProp !== "alg") {
|
|
4377
4821
|
return;
|
|
4378
4822
|
}
|
|
4379
4823
|
if (leaf === null) {
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4824
|
+
this.#carbonCopyPrefix.textContent = "";
|
|
4825
|
+
this.#carbonCopyHighlight.textContent = "";
|
|
4826
|
+
this.#carbonCopySuffix.textContent = this.#padSuffix(
|
|
4827
|
+
this.#textarea.value
|
|
4828
|
+
);
|
|
4383
4829
|
return;
|
|
4384
4830
|
}
|
|
4385
|
-
if (leaf ===
|
|
4831
|
+
if (leaf === this.#highlightedLeaf) {
|
|
4386
4832
|
return;
|
|
4387
4833
|
}
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4834
|
+
this.#highlightedLeaf = leaf;
|
|
4835
|
+
this.#carbonCopyPrefix.textContent = this.#textarea.value.slice(
|
|
4836
|
+
0,
|
|
4837
|
+
leaf.startCharIndex
|
|
4838
|
+
);
|
|
4839
|
+
this.#carbonCopyHighlight.textContent = this.#textarea.value.slice(
|
|
4840
|
+
leaf.startCharIndex,
|
|
4841
|
+
leaf.endCharIndex
|
|
4842
|
+
);
|
|
4843
|
+
this.#carbonCopySuffix.textContent = this.#padSuffix(
|
|
4844
|
+
this.#textarea.value.slice(leaf.endCharIndex)
|
|
4845
|
+
);
|
|
4846
|
+
this.#carbonCopyHighlight.hidden = false;
|
|
4393
4847
|
}
|
|
4394
4848
|
get twistyPlayer() {
|
|
4395
|
-
return
|
|
4849
|
+
return this.#twistyPlayer;
|
|
4396
4850
|
}
|
|
4397
4851
|
set twistyPlayer(twistyPlayer) {
|
|
4398
|
-
if (
|
|
4852
|
+
if (this.#twistyPlayer) {
|
|
4399
4853
|
console.warn("twisty-player reassignment/clearing is not supported");
|
|
4400
4854
|
return;
|
|
4401
4855
|
}
|
|
4402
|
-
|
|
4856
|
+
this.#twistyPlayer = twistyPlayer;
|
|
4403
4857
|
if (!twistyPlayer) {
|
|
4404
4858
|
return;
|
|
4405
4859
|
}
|
|
4406
4860
|
(async () => {
|
|
4407
|
-
this.algString =
|
|
4861
|
+
this.algString = this.#algProp ? (await this.#algProp.get()).alg.toString() : "";
|
|
4408
4862
|
})();
|
|
4409
|
-
if (
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
this.
|
|
4863
|
+
if (this.#twistyPlayerProp === "alg") {
|
|
4864
|
+
this.#twistyPlayer?.experimentalModel.puzzleAlg.addFreshListener(
|
|
4865
|
+
(algWithIssues) => {
|
|
4866
|
+
if (algWithIssues.issues.errors.length === 0) {
|
|
4867
|
+
this.setAlgIssueClassForPuzzle(
|
|
4868
|
+
algWithIssues.issues.warnings.length === 0 ? "none" : "warning"
|
|
4869
|
+
);
|
|
4870
|
+
const newAlg = algWithIssues.alg;
|
|
4871
|
+
const oldAlg = Alg.fromString(this.algString);
|
|
4872
|
+
if (!newAlg.isIdentical(oldAlg)) {
|
|
4873
|
+
this.algString = newAlg.toString();
|
|
4874
|
+
this.onInput();
|
|
4875
|
+
} else {
|
|
4876
|
+
}
|
|
4418
4877
|
} else {
|
|
4878
|
+
this.setAlgIssueClassForPuzzle("error");
|
|
4419
4879
|
}
|
|
4420
|
-
} else {
|
|
4421
|
-
this.setAlgIssueClassForPuzzle("error");
|
|
4422
4880
|
}
|
|
4423
|
-
|
|
4424
|
-
this.model.leafToHighlight.addFreshListener(
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
await
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
|
|
4439
|
-
|
|
4440
|
-
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4451
|
-
|
|
4452
|
-
|
|
4881
|
+
);
|
|
4882
|
+
this.model.leafToHighlight.addFreshListener(
|
|
4883
|
+
async (highlightInfo) => {
|
|
4884
|
+
if (highlightInfo === null) {
|
|
4885
|
+
return;
|
|
4886
|
+
}
|
|
4887
|
+
const [indexer, timestampRequest] = await Promise.all([
|
|
4888
|
+
await twistyPlayer.experimentalModel.indexer.get(),
|
|
4889
|
+
await twistyPlayer.experimentalModel.timestampRequest.get()
|
|
4890
|
+
]);
|
|
4891
|
+
if (timestampRequest === "opposite-anchor" && !this.#onInputHasFired) {
|
|
4892
|
+
return;
|
|
4893
|
+
}
|
|
4894
|
+
const moveStartTimestamp = indexer.indexToMoveStartTimestamp(
|
|
4895
|
+
highlightInfo.leafInfo.idx
|
|
4896
|
+
);
|
|
4897
|
+
const duration = indexer.moveDuration(highlightInfo.leafInfo.idx);
|
|
4898
|
+
let newTimestamp;
|
|
4899
|
+
switch (highlightInfo.where) {
|
|
4900
|
+
case "before":
|
|
4901
|
+
newTimestamp = moveStartTimestamp;
|
|
4902
|
+
break;
|
|
4903
|
+
case "start":
|
|
4904
|
+
case "inside":
|
|
4905
|
+
newTimestamp = moveStartTimestamp + duration / 4;
|
|
4906
|
+
break;
|
|
4907
|
+
case "end":
|
|
4908
|
+
case "after":
|
|
4909
|
+
newTimestamp = moveStartTimestamp + duration;
|
|
4910
|
+
break;
|
|
4911
|
+
default:
|
|
4912
|
+
console.log("invalid where");
|
|
4913
|
+
throw new Error("Invalid where!");
|
|
4914
|
+
}
|
|
4915
|
+
if (!this.debugNeverRequestTimestamp) {
|
|
4916
|
+
twistyPlayer.experimentalModel.timestampRequest.set(newTimestamp);
|
|
4917
|
+
}
|
|
4453
4918
|
}
|
|
4454
|
-
|
|
4455
|
-
|
|
4919
|
+
);
|
|
4920
|
+
twistyPlayer.experimentalModel.currentLeavesSimplified.addFreshListener(
|
|
4921
|
+
async (currentLeavesSimplified) => {
|
|
4922
|
+
const indexer = await twistyPlayer.experimentalModel.indexer.get();
|
|
4923
|
+
const leaf = indexer.getAnimLeaf(currentLeavesSimplified.stateIndex);
|
|
4924
|
+
this.highlightLeaf(leaf);
|
|
4456
4925
|
}
|
|
4457
|
-
|
|
4458
|
-
twistyPlayer.experimentalModel.currentLeavesSimplified.addFreshListener(async (currentLeavesSimplified) => {
|
|
4459
|
-
const indexer = await twistyPlayer.experimentalModel.indexer.get();
|
|
4460
|
-
const leaf = indexer.getAnimLeaf(currentLeavesSimplified.stateIndex);
|
|
4461
|
-
this.highlightLeaf(leaf);
|
|
4462
|
-
});
|
|
4926
|
+
);
|
|
4463
4927
|
}
|
|
4464
4928
|
}
|
|
4465
4929
|
attributeChangedCallback(attributeName, _oldValue, newValue) {
|
|
@@ -4481,11 +4945,11 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
|
|
|
4481
4945
|
this.placeholder = newValue;
|
|
4482
4946
|
return;
|
|
4483
4947
|
case ATTRIBUTE_TWISTY_PLAYER_PROP:
|
|
4484
|
-
if (
|
|
4948
|
+
if (this.#twistyPlayer) {
|
|
4485
4949
|
console.log("cannot set prop");
|
|
4486
4950
|
throw new Error("cannot set prop after twisty player");
|
|
4487
4951
|
}
|
|
4488
|
-
|
|
4952
|
+
this.#twistyPlayerProp = newValue;
|
|
4489
4953
|
return;
|
|
4490
4954
|
}
|
|
4491
4955
|
}
|
|
@@ -4497,28 +4961,6 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
|
|
|
4497
4961
|
];
|
|
4498
4962
|
}
|
|
4499
4963
|
};
|
|
4500
|
-
_textarea = new WeakMap();
|
|
4501
|
-
_carbonCopy = new WeakMap();
|
|
4502
|
-
_carbonCopyPrefix = new WeakMap();
|
|
4503
|
-
_carbonCopyHighlight = new WeakMap();
|
|
4504
|
-
_carbonCopySuffix = new WeakMap();
|
|
4505
|
-
_textareaClassListValidForPuzzleManager = new WeakMap();
|
|
4506
|
-
_twistyPlayer2 = new WeakMap();
|
|
4507
|
-
_twistyPlayerProp = new WeakMap();
|
|
4508
|
-
_algProp = new WeakSet();
|
|
4509
|
-
algProp_get = function() {
|
|
4510
|
-
if (__privateGet(this, _twistyPlayer2) === null) {
|
|
4511
|
-
return null;
|
|
4512
|
-
} else {
|
|
4513
|
-
return __privateGet(this, _twistyPlayer2).experimentalModel[__privateGet(this, _twistyPlayerProp)];
|
|
4514
|
-
}
|
|
4515
|
-
};
|
|
4516
|
-
_onInputHasFired = new WeakMap();
|
|
4517
|
-
_padSuffix = new WeakSet();
|
|
4518
|
-
padSuffix_fn = function(s) {
|
|
4519
|
-
return s.endsWith("\n") ? s + " " : s;
|
|
4520
|
-
};
|
|
4521
|
-
_highlightedLeaf = new WeakMap();
|
|
4522
4964
|
customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
|
|
4523
4965
|
|
|
4524
4966
|
// src/cubing/twisty/views/twizzle/TwizzleLink.css.ts
|
|
@@ -4558,62 +5000,6 @@ twisty-player + .heading {
|
|
|
4558
5000
|
`);
|
|
4559
5001
|
|
|
4560
5002
|
// src/cubing/twisty/views/twizzle/url-params.ts
|
|
4561
|
-
function updateURL(url) {
|
|
4562
|
-
window.history.replaceState("", "", url.toString());
|
|
4563
|
-
}
|
|
4564
|
-
var _prefix;
|
|
4565
|
-
var URLParamUpdater = class {
|
|
4566
|
-
constructor(model, options) {
|
|
4567
|
-
__privateAdd(this, _prefix, void 0);
|
|
4568
|
-
__privateSet(this, _prefix, options?.prefix ?? "");
|
|
4569
|
-
this.listenToAlgProp(model.alg, "alg");
|
|
4570
|
-
this.listenToAlgProp(model.setupAlg, "setup-alg");
|
|
4571
|
-
this.listenToStringSourceProp(model.twistySceneModel.stickering, "stickering");
|
|
4572
|
-
this.listenToStringSourceProp(model.setupAnchor, "setup-anchor");
|
|
4573
|
-
this.listenToStringOrNullProp(model.title, "title");
|
|
4574
|
-
this.listenToStringOrNoValueProp(model.puzzleIDRequest, "puzzle", NO_VALUE);
|
|
4575
|
-
this.listenToStringOrNoValueProp(model.puzzleDescriptionRequest, "puzzle-description", NO_VALUE);
|
|
4576
|
-
}
|
|
4577
|
-
setURLParam(unprefixedKey, value, defaultString) {
|
|
4578
|
-
const prefixedKey = __privateGet(this, _prefix) + unprefixedKey;
|
|
4579
|
-
const url = new URL(location.href);
|
|
4580
|
-
if (value === defaultString) {
|
|
4581
|
-
url.searchParams.delete(prefixedKey);
|
|
4582
|
-
} else {
|
|
4583
|
-
url.searchParams.set(prefixedKey, value);
|
|
4584
|
-
}
|
|
4585
|
-
updateURL(url);
|
|
4586
|
-
}
|
|
4587
|
-
async listenToStringSourceProp(prop, key, defaultString) {
|
|
4588
|
-
const actualDefaultString = defaultString ?? await prop.getDefaultValue();
|
|
4589
|
-
prop.addFreshListener((s) => {
|
|
4590
|
-
this.setURLParam(key, s, actualDefaultString);
|
|
4591
|
-
});
|
|
4592
|
-
}
|
|
4593
|
-
async listenToStringOrNullProp(prop, key, defaultString = "") {
|
|
4594
|
-
prop.addFreshListener((s) => {
|
|
4595
|
-
this.setURLParam(key, s ?? defaultString, defaultString);
|
|
4596
|
-
});
|
|
4597
|
-
}
|
|
4598
|
-
async listenToStringOrNoValueProp(prop, key, defaultString) {
|
|
4599
|
-
prop.addFreshListener((s) => {
|
|
4600
|
-
if (s === NO_VALUE) {
|
|
4601
|
-
s = defaultString;
|
|
4602
|
-
}
|
|
4603
|
-
if (s === NO_VALUE) {
|
|
4604
|
-
this.setURLParam(key, "", "");
|
|
4605
|
-
} else {
|
|
4606
|
-
this.setURLParam(key, s, "");
|
|
4607
|
-
}
|
|
4608
|
-
});
|
|
4609
|
-
}
|
|
4610
|
-
listenToAlgProp(prop, key) {
|
|
4611
|
-
prop.addFreshListener((algWithIssues) => {
|
|
4612
|
-
this.setURLParam(key, algWithIssues.alg.toString(), "");
|
|
4613
|
-
});
|
|
4614
|
-
}
|
|
4615
|
-
};
|
|
4616
|
-
_prefix = new WeakMap();
|
|
4617
5003
|
function getConfigFromURL(prefix = "", url = location.href) {
|
|
4618
5004
|
const paramMapping = {
|
|
4619
5005
|
"alg": "alg",
|
|
@@ -4639,28 +5025,29 @@ function getConfigFromURL(prefix = "", url = location.href) {
|
|
|
4639
5025
|
}
|
|
4640
5026
|
|
|
4641
5027
|
// src/cubing/twisty/views/twizzle/TwizzleLink.ts
|
|
4642
|
-
var _cssElem;
|
|
4643
5028
|
var TwizzleLink = class extends ManagedCustomElement {
|
|
4644
5029
|
constructor() {
|
|
4645
5030
|
super({ mode: "open" });
|
|
4646
5031
|
this.twistyPlayer = null;
|
|
4647
5032
|
this.a = null;
|
|
4648
|
-
__privateAdd(this, _cssElem, void 0);
|
|
4649
5033
|
}
|
|
4650
5034
|
fallback() {
|
|
4651
5035
|
this.contentWrapper.textContent = "";
|
|
4652
5036
|
if (this.a) {
|
|
4653
|
-
const span = this.contentWrapper.appendChild(
|
|
5037
|
+
const span = this.contentWrapper.appendChild(
|
|
5038
|
+
document.createElement("span")
|
|
5039
|
+
);
|
|
4654
5040
|
span.textContent = "\u2757\uFE0F";
|
|
4655
5041
|
span.title = "Could not show a player for link";
|
|
4656
5042
|
this.addElement(this.a);
|
|
4657
5043
|
}
|
|
4658
|
-
if (
|
|
4659
|
-
|
|
5044
|
+
if (this.#cssElem) {
|
|
5045
|
+
this.#cssElem.remove();
|
|
4660
5046
|
}
|
|
4661
5047
|
}
|
|
5048
|
+
#cssElem;
|
|
4662
5049
|
async connectedCallback() {
|
|
4663
|
-
|
|
5050
|
+
this.#cssElem = this.addCSS(twizzleLinkCSS);
|
|
4664
5051
|
this.a = this.querySelector("a");
|
|
4665
5052
|
if (!this.a) {
|
|
4666
5053
|
return;
|
|
@@ -4679,10 +5066,12 @@ var TwizzleLink = class extends ManagedCustomElement {
|
|
|
4679
5066
|
delete config.puzzle;
|
|
4680
5067
|
config.experimentalPuzzleDescription = puzzleDescription;
|
|
4681
5068
|
}
|
|
4682
|
-
this.twistyPlayer = this.addElement(
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
5069
|
+
this.twistyPlayer = this.addElement(
|
|
5070
|
+
new TwistyPlayer({
|
|
5071
|
+
...config,
|
|
5072
|
+
viewerLink: isExplorer ? "experimental-twizzle-explorer" : "auto"
|
|
5073
|
+
})
|
|
5074
|
+
);
|
|
4686
5075
|
if (config.experimentalTitle) {
|
|
4687
5076
|
this.addHeading(config.experimentalTitle).classList.add("title");
|
|
4688
5077
|
}
|
|
@@ -4690,10 +5079,14 @@ var TwizzleLink = class extends ManagedCustomElement {
|
|
|
4690
5079
|
this.addHeading("Setup");
|
|
4691
5080
|
const setupAlgDiv = this.addElement(document.createElement("div"));
|
|
4692
5081
|
setupAlgDiv.classList.add("setup-alg");
|
|
4693
|
-
setupAlgDiv.textContent = new Alg(
|
|
5082
|
+
setupAlgDiv.textContent = new Alg(
|
|
5083
|
+
config.experimentalSetupAlg
|
|
5084
|
+
).toString();
|
|
4694
5085
|
}
|
|
4695
5086
|
this.addHeading("Moves");
|
|
4696
|
-
const twistyAlgViewer = this.addElement(
|
|
5087
|
+
const twistyAlgViewer = this.addElement(
|
|
5088
|
+
new TwistyAlgViewer({ twistyPlayer: this.twistyPlayer })
|
|
5089
|
+
);
|
|
4697
5090
|
twistyAlgViewer.part.add("twisty-alg-viewer");
|
|
4698
5091
|
} else {
|
|
4699
5092
|
this.fallback();
|
|
@@ -4706,7 +5099,6 @@ var TwizzleLink = class extends ManagedCustomElement {
|
|
|
4706
5099
|
return headingDiv;
|
|
4707
5100
|
}
|
|
4708
5101
|
};
|
|
4709
|
-
_cssElem = new WeakMap();
|
|
4710
5102
|
customElementsShim.define("twizzle-link", TwizzleLink);
|
|
4711
5103
|
export {
|
|
4712
5104
|
NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
|