@houstonp/rubiks-cube 1.0.0 → 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.
Files changed (5) hide show
  1. package/README.md +57 -3
  2. package/index.js +87 -67
  3. package/package.json +1 -1
  4. package/src/animation.js +5 -0
  5. 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
- ## adding the component
5
+ ## Adding the component
6
6
 
7
- You can dd the component to a webpage by adding a module script tag with the index.js file. And then
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
- ## updating the component
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
@@ -89,18 +89,28 @@ class RubiksCube extends HTMLElement {
89
89
  const animationQueue = new AnimationQueue();
90
90
 
91
91
  // initial camera animation
92
- new TWEEN.Tween(camera.position)
93
- .to({ x: 3, y: 3, z: 4 }, 1000)
94
- .easing(TWEEN.Easing.Cubic.InOut)
95
- .start();
92
+ const cameraAnimationGroup = new TWEEN.Group();
93
+ cameraAnimationGroup.add(
94
+ new TWEEN.Tween(camera.position)
95
+ .to({ x: 3, y: 3, z: 4 }, 1000)
96
+ .easing(TWEEN.Easing.Cubic.InOut)
97
+ .start()
98
+ );
99
+
100
+ const sendState = () => {
101
+ const state = cube.getStickerState();
102
+ const event = new CustomEvent("state", { detail: { state } });
103
+ this.dispatchEvent(event);
104
+ };
96
105
 
97
106
  // animation loop
98
107
  function animate() {
99
- TWEEN.update();
108
+ cameraAnimationGroup.update();
100
109
  controls.update();
101
110
  animationQueue.update();
102
111
  const animationGroup = animationQueue.getAnimationGroup();
103
112
  if (animationGroup !== undefined) scene.add(animationGroup);
113
+ if (animationQueue.finished()) sendState();
104
114
  renderer.render(scene, camera);
105
115
  }
106
116
 
@@ -119,74 +129,84 @@ class RubiksCube extends HTMLElement {
119
129
  }
120
130
  });
121
131
  this.addEventListener("camera", (e) => {
122
- console.log(cube.getStickerState());
123
- new TWEEN.Tween(camera.position);
124
132
  if (e.detail.action === "peek-toggle-horizontal") {
125
- new TWEEN.Tween(camera.position)
126
- .to(
127
- {
128
- x: camera.position.x > 0 ? -2.5 : 2.5,
129
- y: camera.position.y > 0 ? 2.5 : -2.5,
130
- z: 4,
131
- },
132
- 200
133
- )
134
- .start();
133
+ cameraAnimationGroup.add(
134
+ new TWEEN.Tween(camera.position)
135
+ .to(
136
+ {
137
+ x: camera.position.x > 0 ? -2.5 : 2.5,
138
+ y: camera.position.y > 0 ? 2.5 : -2.5,
139
+ z: 4,
140
+ },
141
+ 200
142
+ )
143
+ .start()
144
+ );
135
145
  } else if (e.detail.action === "peek-toggle-vertical") {
136
- new TWEEN.Tween(camera.position)
137
- .to(
138
- {
139
- x: camera.position.x > 0 ? 2.5 : -2.5,
140
- y: camera.position.y > 0 ? -2.5 : 2.5,
141
- z: 4,
142
- },
143
- 200
144
- )
145
- .start();
146
+ cameraAnimationGroup.add(
147
+ new TWEEN.Tween(camera.position)
148
+ .to(
149
+ {
150
+ x: camera.position.x > 0 ? 2.5 : -2.5,
151
+ y: camera.position.y > 0 ? -2.5 : 2.5,
152
+ z: 4,
153
+ },
154
+ 200
155
+ )
156
+ .start()
157
+ );
146
158
  } else if (e.detail.action === "peek-right") {
147
- new TWEEN.Tween(camera.position)
148
- .to(
149
- {
150
- x: 2.5,
151
- y: camera.position.y > 0 ? 2.5 : -2.5,
152
- z: 4,
153
- },
154
- 200
155
- )
156
- .start();
159
+ cameraAnimationGroup.add(
160
+ new TWEEN.Tween(camera.position)
161
+ .to(
162
+ {
163
+ x: 2.5,
164
+ y: camera.position.y > 0 ? 2.5 : -2.5,
165
+ z: 4,
166
+ },
167
+ 200
168
+ )
169
+ .start()
170
+ );
157
171
  } else if (e.detail.action === "peek-left") {
158
- new TWEEN.Tween(camera.position)
159
- .to(
160
- {
161
- x: -2.5,
162
- y: camera.position.y > 0 ? 2.5 : -2.5,
163
- z: 4,
164
- },
165
- 200
166
- )
167
- .start();
172
+ cameraAnimationGroup.add(
173
+ new TWEEN.Tween(camera.position)
174
+ .to(
175
+ {
176
+ x: -2.5,
177
+ y: camera.position.y > 0 ? 2.5 : -2.5,
178
+ z: 4,
179
+ },
180
+ 200
181
+ )
182
+ .start()
183
+ );
168
184
  } else if (e.detail.action === "peek-up") {
169
- new TWEEN.Tween(camera.position)
170
- .to(
171
- {
172
- x: camera.position.x > 0 ? 2.5 : -2.5,
173
- y: 2.5,
174
- z: 4,
175
- },
176
- 200
177
- )
178
- .start();
185
+ cameraAnimationGroup.add(
186
+ new TWEEN.Tween(camera.position)
187
+ .to(
188
+ {
189
+ x: camera.position.x > 0 ? 2.5 : -2.5,
190
+ y: 2.5,
191
+ z: 4,
192
+ },
193
+ 200
194
+ )
195
+ .start()
196
+ );
179
197
  } else if (e.detail.action === "peek-down") {
180
- new TWEEN.Tween(camera.position)
181
- .to(
182
- {
183
- x: camera.position.x > 0 ? 2.5 : -2.5,
184
- y: -2.5,
185
- z: 4,
186
- },
187
- 200
188
- )
189
- .start();
198
+ cameraAnimationGroup.add(
199
+ new TWEEN.Tween(camera.position)
200
+ .to(
201
+ {
202
+ x: camera.position.x > 0 ? 2.5 : -2.5,
203
+ y: -2.5,
204
+ z: 4,
205
+ },
206
+ 200
207
+ )
208
+ .start()
209
+ );
190
210
  }
191
211
  });
192
212
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@houstonp/rubiks-cube",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Rubiks Cube Web Component built with threejs",
5
5
  "main": "index.js",
6
6
  "author": "Houston Pearse",
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() {
package/src/cube.js CHANGED
@@ -36,6 +36,7 @@ export default class Cube {
36
36
  };
37
37
  this.group.add(piece);
38
38
  }
39
+ this.stickerState = this.getStickerState();
39
40
  }
40
41
  /**
41
42
  * @param {"x"|"y"|"z"} axis