arcanumcube 0.1.0 → 0.1.2

package/dist/esm/arcanumcube.module.js

@@ -264,6 +264,42 @@ function getRandomTwistList(steps = 0) {
   }
   return list;
 }
+var SIDE_FACES = Object.freeze([
+  [1, 2, 4, 5],
+  [2, 0, 5, 3],
+  [0, 1, 3, 4],
+  [2, 1, 5, 4],
+  [0, 2, 3, 5],
+  [1, 0, 4, 3]
+]);
+function getInitialState(up, front) {
+  const down = (up + 3) % 6;
+  const side = SIDE_FACES[up];
+  const state = new Array(CUBE_SIZE * CUBE_SIZE).fill(up);
+  for (let i = 0; i < 4; i++) {
+    if (i == 2) {
+      const downs = [...Array(CUBE_SIZE * CUBE_SIZE)].fill(down);
+      state.push(...downs);
+    }
+    const sides = [...Array(CUBE_SIZE * CUBE_SIZE)].fill(side[(front + i) % 4]);
+    state.push(...sides);
+  }
+  return state;
+}
+function isSameArrays(arr1, arr2) {
+  if (arr1.length !== arr2.length) return false;
+  return !arr1.some((v, i) => v !== arr2[i]);
+}
+var GOAL_STATE_LIST = [];
+for (let up = 0; up < 6; up++) {
+  for (let front = 0; front < 4; front++) {
+    GOAL_STATE_LIST.push(getInitialState(up, front));
+  }
+}
+Object.freeze(GOAL_STATE_LIST);
+function MatchGoalState(state) {
+  return GOAL_STATE_LIST.some((s) => isSameArrays(state, s));
+}
 var Cube = class {
   type;
   position;
@@ -408,6 +444,9 @@ var ArcanumCube = class {
     const list = this.getUndoList(steps);
     this.twist(list, true);
   }
+  isSolved() {
+    return MatchGoalState(this.getStickerColors());
+  }
   getHistory() {
     return this._history;
   }
@@ -630,6 +669,12 @@ function createDefaultLogoTexture() {
   texture.needsUpdate = true;
   return texture;
 }
+function GetSkinByName(name) {
+  return SkinMap[name];
+}
+function GetSkinNameList() {
+  return Object.keys(SkinMap);
+}
 var standardSkin = {
   name: "Standard",
   enableEnvMap: false,
@@ -1128,12 +1173,14 @@ var WebGLCube = class extends Cube {
       stickerScale: 0.92,
       gap: 0.01,
       enableShadow: false,
-      skin: DefaultSkin.name
+      skin: DefaultSkin,
+      wireframe: false,
+      wireframeColor: 32768
     };
     if (opts) {
       Object.assign(this._config, opts);
     }
-    this._skin = SkinMap[this._config.skin];
+    this._skin = this._config.skin;
   }
   getGroup() {
     return this._group;
@@ -1167,9 +1214,13 @@ var WebGLCube = class extends Cube {
     const geo = mesh.geometry.clone();
     geo.scale(scale, scale, scale);
     const mat = this._skin.cube.material();
-    if (this._skin.enableEnvMap && config.envMap && (mat instanceof THREE3.MeshStandardMaterial || mat instanceof THREE3.MeshBasicMaterial)) {
+    if (this._skin.enableEnvMap && config.envMap && (mat instanceof THREE3.MeshStandardMaterial || mat instanceof THREE3.MeshBasicMaterial || mat instanceof THREE3.MeshPhysicalMaterial)) {
       mat.envMap = config.envMap;
     }
+    if (config.wireframe) {
+      mat.wireframe = config.wireframe;
+      mat.color = new THREE3.Color(config.wireframeColor);
+    }
     const m = new THREE3.Mesh(geo, mat);
     m.name = this.type;
     for (const r of angles) {
@@ -1179,6 +1230,7 @@ var WebGLCube = class extends Cube {
       m.geometry.rotateZ(Math.PI * axis[2] * steps / 2);
     }
     m.castShadow = config.enableShadow;
+    m.receiveShadow = config.enableShadow;
     m.position.x += (x - 1) * CUBE_SIDE_LEN * (1 + config.gap) * scale;
     m.position.y += (y - 1) * CUBE_SIDE_LEN * (1 + config.gap) * scale;
     m.position.z += (z - 1) * CUBE_SIDE_LEN * (1 + config.gap) * scale;
@@ -1203,12 +1255,17 @@ var WebGLCube = class extends Cube {
       pgeo.scale(scale * config.stickerScale, scale, scale * config.stickerScale);
       sticker.color = sticker.face;
       const pmat = this._skin.sticker.material(x, y, z, sticker.color);
-      if (this._skin.enableEnvMap && config.envMap && (pmat instanceof THREE3.MeshStandardMaterial || pmat instanceof THREE3.MeshBasicMaterial)) {
+      if (this._skin.enableEnvMap && config.envMap && (pmat instanceof THREE3.MeshStandardMaterial || pmat instanceof THREE3.MeshBasicMaterial || pmat instanceof THREE3.MeshPhysicalMaterial)) {
         pmat.envMap = config.envMap;
       }
+      if (config.wireframe) {
+        pmat.wireframe = config.wireframe;
+        pmat.color = new THREE3.Color(config.wireframeColor);
+      }
       const pm = new THREE3.Mesh(pgeo, pmat);
       pm.name = CUBE.STICKER;
       pm.castShadow = config.enableShadow;
+      m.receiveShadow = config.enableShadow;
       const stickerAngle = STICKER_FACE_2_ANGLE[sticker.face];
       pm.geometry.rotateX(Math.PI * stickerAngle[0] / 180);
       pm.geometry.rotateY(Math.PI * stickerAngle[1] / 180);
@@ -1293,7 +1350,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
   /** tween group */
   _tweens;
   /** light at the center of cube */
-  _pointLights;
+  _coreLights;
   constructor(options) {
     super(options);
     this._config = {
@@ -1304,8 +1361,14 @@ var WebGLArcanumCube = class extends ArcanumCube {
       stickerScale: 0.92,
       gap: 0.01,
       enableShadow: false,
-      skin: DefaultSkin.name,
-      enableLight: false
+      skin: DefaultSkin,
+      autoReset: true,
+      enableCoreLight: false,
+      coreLightColor: 33023,
+      coreLightIntensity: 30,
+      wireframe: false,
+      wireframeColor: 32768,
+      twistOptions: {}
     };
     this._matrix = [];
     this._group = new THREE3.Group();
@@ -1313,7 +1376,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
     this._cubeMap = {};
     this._cancelDragDeg = 15;
     this._tweens = new TWEEN.Group();
-    this._pointLights = [];
+    this._coreLights = [];
     if (options) {
       Object.assign(this._config, options);
     }
@@ -1324,11 +1387,8 @@ var WebGLArcanumCube = class extends ArcanumCube {
   getCubeObjectList() {
     return this._cubeObjectList;
   }
-  static getSkinNameList() {
-    return Object.keys(SkinMap);
-  }
   async init() {
-    const skin = SkinMap[this._config.skin];
+    const skin = this._config.skin;
     if (skin.modelLoading) {
       this._init();
     } else {
@@ -1342,7 +1402,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
     this._cubeMap = {};
     this._matrix = [];
     this._history = [];
-    this._pointLights = [];
+    this._coreLights = [];
     const fixedGroups = new THREE3.Group();
     const config = this._config;
     const yarray = [];
@@ -1357,7 +1417,9 @@ var WebGLArcanumCube = class extends ArcanumCube {
             gap: config.gap,
             enableShadow: config.enableShadow,
             skin: config.skin,
-            envMap: config.envMap
+            envMap: config.envMap,
+            wireframe: config.wireframe,
+            wireframeColor: config.wireframeColor
           });
           cube.init();
           xarray.push(cube);
@@ -1365,13 +1427,18 @@ var WebGLArcanumCube = class extends ArcanumCube {
           this._cubeObjectList.push(entityGroup);
           this._cubeMap[entityGroup.id] = cube;
           fixedGroups.add(cube.getGroup());
-          if (config.enableLight) {
+          if (config.enableCoreLight) {
             if (x !== SIDE_MIN && y !== SIDE_MIN && z !== SIDE_MIN) {
-              const light = new THREE3.PointLight(33023, 30, 20, 0.1);
+              const light = new THREE3.PointLight(
+                config.wireframe ? config.wireframeColor : config.coreLightColor,
+                config.coreLightIntensity,
+                20,
+                0.1
+              );
               light.position.x = (x - 1 / 2) * CUBE_SIDE_LEN * (1 + config.gap) * config.scale;
               light.position.y = (y - 1 / 2) * CUBE_SIDE_LEN * (1 + config.gap) * config.scale;
               light.position.z += (z - 1 / 2) * CUBE_SIDE_LEN * (1 + config.gap) * config.scale;
-              this._pointLights.push(light);
+              this._coreLights.push(light);
             }
           }
         }
@@ -1381,14 +1448,14 @@ var WebGLArcanumCube = class extends ArcanumCube {
     }
     this._matrix = yarray;
     this._group.clear();
-    if (config.enableLight) {
-      this._pointLights.forEach((light) => {
+    if (config.enableCoreLight) {
+      this._coreLights.forEach((light) => {
         this._group.add(light);
       });
     }
     this._group.add(fixedGroups);
   }
-  async setSkin(name) {
+  async setSkin(skin) {
     const dispose = (obj) => {
       if (obj instanceof THREE3.Group) {
         for (const o of obj.children) {
@@ -1400,7 +1467,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
         obj.geometry.dispose();
       }
     };
-    this._config.skin = name;
+    this._config.skin = skin;
     for (const obj of this._group.children) {
       dispose(obj);
     }
@@ -1584,8 +1651,8 @@ var WebGLArcanumCube = class extends ArcanumCube {
       }
     }
     this._group.clear();
-    if (this._config.enableLight) {
-      this._pointLights.forEach((light) => {
+    if (this._config.enableCoreLight) {
+      this._coreLights.forEach((light) => {
         this._group.add(light);
       });
     }
@@ -1622,7 +1689,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
   // twist randomly several steps
   scramble(steps = 0, duration = 3e3) {
     const list = getRandomTwistList(steps);
-    this.tweenTwist(list, false, duration);
+    this.tweenTwist(list, false, duration, false);
   }
   undo(steps = 1, duration = 300) {
     const list = this.getUndoList(steps);
@@ -1630,17 +1697,25 @@ var WebGLArcanumCube = class extends ArcanumCube {
   }
   // twisting(複数回対応)
   // durationを0にするとTweenなしとなる
-  tweenTwist(twist, reverse = false, duration = 500, cancel = false) {
+  tweenTwist(twist, reverse = false, duration = 500, cancel = false, options) {
     if (this._tweens.getAll().length > 0) return;
+    if (options == null) options = this._config.twistOptions;
     if (duration === 0) {
       if (Array.isArray(twist)) {
         if (twist.length == 0) return;
-        for (const c of twist) {
+        options?.onStart && options.onStart(this);
+        const len = twist.length;
+        for (let i = 0; i < len; i++) {
+          const c = twist[i];
           this._immediatelyTwist(c, reverse);
+          options?.onTwisted && options.onTwisted(this, c, i + 1, len);
         }
       } else {
+        options?.onStart && options.onStart(this);
         this._immediatelyTwist(twist, reverse);
+        options?.onTwisted && options.onTwisted(this, twist, 1, 1);
       }
+      options?.onComplete && options.onComplete(this);
       return;
     }
     let firstTween = void 0;
@@ -1648,8 +1723,15 @@ var WebGLArcanumCube = class extends ArcanumCube {
     if (Array.isArray(twist)) {
       if (twist.length == 0) return;
       const lap = duration / twist.length;
-      for (const c of twist) {
-        const t = this._tweenTwist(c, reverse, lap, cancel);
+      const len = twist.length;
+      for (let i = 0; i < len; i++) {
+        const c = twist[i];
+        const opts = {};
+        const ontwisted = options?.onTwisted;
+        if (ontwisted)
+          opts.onTwisted = (self, twist2, n1, n2) => ontwisted(this, twist2, i + 1, len);
+        if (i === len - 1 && options?.onComplete) opts.onComplete = options.onComplete;
+        const t = this._tweenTwist(c, reverse, lap, cancel, opts);
         this._tweens.add(t);
         if (!tween) {
           firstTween = tween = t;
@@ -1659,10 +1741,11 @@ var WebGLArcanumCube = class extends ArcanumCube {
         }
       }
     } else {
-      firstTween = this._tweenTwist(twist, reverse, duration, cancel);
+      firstTween = this._tweenTwist(twist, reverse, duration, cancel, options);
       this._tweens.add(firstTween);
     }
     if (firstTween) {
+      options?.onStart && options.onStart(this);
       firstTween.start();
     }
   }
@@ -1684,7 +1767,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
     super.twist(twist, reverse);
   }
   // twist with tween
-  _tweenTwist(twist, reverse, duration, cancel) {
+  _tweenTwist(twist, reverse, duration, cancel, options = {}) {
     let qa;
     if (this._draggingTwist) {
       this._twistGroup = this._draggingTwist.group;
@@ -1721,12 +1804,28 @@ var WebGLArcanumCube = class extends ArcanumCube {
         super.twist(twist, reverse);
       }
       this._tweens.remove(tween);
+      options.onTwisted && options.onTwisted(this, twist, 1, 1);
+      options.onComplete && options.onComplete(this);
+      if (this._config.autoReset && this.isSolved()) this.reset(0);
     });
     return tween;
   }
   updateTweens() {
     this._tweens.update();
   }
+  // set color of core lights
+  setCoreLightColor(color) {
+    const c = new THREE3.Color(color);
+    this._coreLights.forEach((l) => {
+      l.color = c;
+    });
+  }
+  // change intensity of core lights
+  setCoreLightIntensity(intensity) {
+    this._coreLights.forEach((l) => {
+      l.intensity = intensity;
+    });
+  }
 };
 export {
   ArcanumCube,
@@ -1740,6 +1839,9 @@ export {
   DefaultModel,
   DefaultSkin,
   FACE,
+  GetSkinByName,
+  GetSkinNameList,
+  MatchGoalState,
   SIDE_MAX,
   SIDE_MIDDLE,
   SIDE_MIN,