@houstonp/rubiks-cube 1.0.1 → 1.0.2
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 +57 -3
- package/index.js +8 -3
- package/package.json +1 -1
- package/src/animation.js +5 -0
- package/src/cube.js +1 -0
package/README.md
CHANGED
|
@@ -2,11 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
This package is a rubiks cube web component built with threejs. Camera animation smoothing is done with the tweenjs package.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Adding the component
|
|
6
6
|
|
|
7
|
-
You can
|
|
7
|
+
You can add the component to a webpage by adding an import statement in the index.js file. And then
|
|
8
8
|
by adding the webcomponent tag.
|
|
9
9
|
|
|
10
|
+
```js
|
|
11
|
+
//index.js
|
|
12
|
+
import "@houstonp/rubiks-cube";
|
|
13
|
+
```
|
|
14
|
+
|
|
10
15
|
```html
|
|
11
16
|
<!DOCTYPE html>
|
|
12
17
|
<html lang="en">
|
|
@@ -20,7 +25,54 @@ by adding the webcomponent tag.
|
|
|
20
25
|
</html>
|
|
21
26
|
```
|
|
22
27
|
|
|
23
|
-
##
|
|
28
|
+
## state of the component
|
|
29
|
+
|
|
30
|
+
A state event occurs when a movement animation is completed. The event details contains the current state of the cube. The state is an object containing the stickers of each face. A sticker is either "up", "down", "left", "right", "front" or "back".
|
|
31
|
+
|
|
32
|
+
To listen for the state event, add an event listener to the rubiks-cube element.
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
const cube = document.querySelector("rubiks-cube");
|
|
36
|
+
cube.addEventListener("state", (e) => {
|
|
37
|
+
console.log(e.detail.state);
|
|
38
|
+
});
|
|
39
|
+
/*
|
|
40
|
+
{
|
|
41
|
+
up: [
|
|
42
|
+
[sticker, sticker, sticker],
|
|
43
|
+
[sticker, sticker, sticker],
|
|
44
|
+
[sticker, sticker, sticker],
|
|
45
|
+
],
|
|
46
|
+
down: [
|
|
47
|
+
[sticker, sticker, sticker],
|
|
48
|
+
[sticker, sticker, sticker],
|
|
49
|
+
[sticker, sticker, sticker],
|
|
50
|
+
],
|
|
51
|
+
left: [
|
|
52
|
+
[sticker, sticker, sticker],
|
|
53
|
+
[sticker, sticker, sticker],
|
|
54
|
+
[sticker, sticker, sticker],
|
|
55
|
+
],
|
|
56
|
+
right: [
|
|
57
|
+
[sticker, sticker, sticker],
|
|
58
|
+
[sticker, sticker, sticker],
|
|
59
|
+
[sticker, sticker, sticker],
|
|
60
|
+
],
|
|
61
|
+
front: [
|
|
62
|
+
[sticker, sticker, sticker],
|
|
63
|
+
[sticker, sticker, sticker],
|
|
64
|
+
[sticker, sticker, sticker],
|
|
65
|
+
],
|
|
66
|
+
back: [
|
|
67
|
+
[sticker, sticker, sticker],
|
|
68
|
+
[sticker, sticker, sticker],
|
|
69
|
+
[sticker, sticker, sticker],
|
|
70
|
+
],
|
|
71
|
+
}
|
|
72
|
+
*/
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Updating the component
|
|
24
76
|
|
|
25
77
|
The Rubiks cube web component listens for custom events to perform twists, rotations and camera changes. As per convention, the starting rotation has green facing forward, white facing up and red facing to the right.
|
|
26
78
|
|
|
@@ -37,6 +89,8 @@ The camera position specified in the event details must be one of the following:
|
|
|
37
89
|
- `peek-toggle-horizontal` - Camera is moved to the opposite side of the cube in the horizontal plane
|
|
38
90
|
- `peek-toggle-vertical` - Camera is moved to the opposite side of the cube in the vertical plane
|
|
39
91
|
|
|
92
|
+
Note: The camera position cannot change to perform an equivalent cube rotation.
|
|
93
|
+
|
|
40
94
|
#### Example
|
|
41
95
|
|
|
42
96
|
```js
|
package/index.js
CHANGED
|
@@ -97,6 +97,12 @@ class RubiksCube extends HTMLElement {
|
|
|
97
97
|
.start()
|
|
98
98
|
);
|
|
99
99
|
|
|
100
|
+
const sendState = () => {
|
|
101
|
+
const state = cube.getStickerState();
|
|
102
|
+
const event = new CustomEvent("state", { detail: { state } });
|
|
103
|
+
this.dispatchEvent(event);
|
|
104
|
+
};
|
|
105
|
+
|
|
100
106
|
// animation loop
|
|
101
107
|
function animate() {
|
|
102
108
|
cameraAnimationGroup.update();
|
|
@@ -104,6 +110,7 @@ class RubiksCube extends HTMLElement {
|
|
|
104
110
|
animationQueue.update();
|
|
105
111
|
const animationGroup = animationQueue.getAnimationGroup();
|
|
106
112
|
if (animationGroup !== undefined) scene.add(animationGroup);
|
|
113
|
+
if (animationQueue.finished()) sendState();
|
|
107
114
|
renderer.render(scene, camera);
|
|
108
115
|
}
|
|
109
116
|
|
|
@@ -122,8 +129,6 @@ class RubiksCube extends HTMLElement {
|
|
|
122
129
|
}
|
|
123
130
|
});
|
|
124
131
|
this.addEventListener("camera", (e) => {
|
|
125
|
-
console.log(cube.getStickerState());
|
|
126
|
-
|
|
127
132
|
if (e.detail.action === "peek-toggle-horizontal") {
|
|
128
133
|
cameraAnimationGroup.add(
|
|
129
134
|
new TWEEN.Tween(camera.position)
|
|
@@ -150,7 +155,7 @@ class RubiksCube extends HTMLElement {
|
|
|
150
155
|
)
|
|
151
156
|
.start()
|
|
152
157
|
);
|
|
153
|
-
} else if (e.
|
|
158
|
+
} else if (e.detail.action === "peek-right") {
|
|
154
159
|
cameraAnimationGroup.add(
|
|
155
160
|
new TWEEN.Tween(camera.position)
|
|
156
161
|
.to(
|
package/package.json
CHANGED
package/src/animation.js
CHANGED
|
@@ -57,6 +57,10 @@ export class AnimationQueue {
|
|
|
57
57
|
this.currentAnimation.update();
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
finished() {
|
|
61
|
+
return this.currentAnimation?.finished();
|
|
62
|
+
}
|
|
63
|
+
|
|
60
64
|
/**
|
|
61
65
|
*
|
|
62
66
|
* @returns {THREE.Group | undefined}
|
|
@@ -119,6 +123,7 @@ export class Animation {
|
|
|
119
123
|
});
|
|
120
124
|
this._cube.group.add(...this._layerGroup.children);
|
|
121
125
|
this._layerGroup.clear();
|
|
126
|
+
this._cube.stickerState = this._cube.getStickerState();
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
update() {
|