arcanumcube 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,19 @@
 # Arcanum Cube
 
-Arcanum Cube is a cube puzzle module written in Typescript. Supports creation and manipulation of WebGL mesh groups.
+Arcanum Cube Arcanum Cube is a WebGL cube puzzle module written in TypeScript. You can create Three.js meshes group and twist cube.
+
+## Demo Page
+
+- [Example](https://mawxiwtz.github.io/arcanumcube/) \
+  Rotation only
+
+## Installation
+
+You can add arcanumcube as an npm dependency:
+
+```
+npm install arcanumcube
+```
 
 ## Usage
 
@@ -14,11 +27,14 @@ import * as ARCCUBE from 'arcanumcube';
 2. create a cube object
 
 ```
+const scene = new THREE.Scene();
+    :
 const arccube = new ARCCUBE.WebGLArcanumCube();
 await arccube.init();
 const arccubeGroup = arccube.getGroup();
 arccubeGroup.position.set(0, 0, 0);
 scene.add(arccubeGroup);
+    :
 
 renderer.setAnimationLoop((time) => {
     :
@@ -41,6 +57,10 @@ arccube.tweenTwist('U');
 arccube.reset();
 ```
 
+## Document
+
+Currently under construction
+
 ## License
 
 Released under the MIT license

package/dist/cjs/arcanumcube.cjs

@@ -41,6 +41,9 @@ __export(arcanumcube_exports, {
   DefaultModel: () => DefaultModel,
   DefaultSkin: () => DefaultSkin,
   FACE: () => FACE,
+  GetSkinByName: () => GetSkinByName,
+  GetSkinNameList: () => GetSkinNameList,
+  MatchGoalState: () => MatchGoalState,
   SIDE_MAX: () => SIDE_MAX,
   SIDE_MIDDLE: () => SIDE_MIDDLE,
   SIDE_MIN: () => SIDE_MIN,
@@ -327,6 +330,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;
@@ -471,6 +510,9 @@ var ArcanumCube = class {
     const list = this.getUndoList(steps);
     this.twist(list, true);
   }
+  isSolved() {
+    return MatchGoalState(this.getStickerColors());
+  }
   getHistory() {
     return this._history;
   }
@@ -693,6 +735,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,
@@ -1191,12 +1239,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;
@@ -1230,9 +1280,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) {
@@ -1242,6 +1296,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;
@@ -1266,12 +1321,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);
@@ -1356,7 +1416,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
   /** tween group */
   _tweens;
   /** light at the center of cube */
-  _pointLights;
+  _coreLights;
   constructor(options) {
     super(options);
     this._config = {
@@ -1367,8 +1427,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();
@@ -1376,7 +1442,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);
     }
@@ -1387,11 +1453,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 {
@@ -1405,7 +1468,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 = [];
@@ -1420,7 +1483,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);
@@ -1428,13 +1493,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);
             }
           }
         }
@@ -1444,14 +1514,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) {
@@ -1463,7 +1533,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);
     }
@@ -1647,8 +1717,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);
       });
     }
@@ -1685,7 +1755,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);
@@ -1693,17 +1763,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;
@@ -1711,8 +1789,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;
@@ -1722,10 +1807,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();
     }
   }
@@ -1747,7 +1833,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;
@@ -1784,12 +1870,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;
+    });
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1804,6 +1906,9 @@ var WebGLArcanumCube = class extends ArcanumCube {
   DefaultModel,
   DefaultSkin,
   FACE,
+  GetSkinByName,
+  GetSkinNameList,
+  MatchGoalState,
   SIDE_MAX,
   SIDE_MIDDLE,
   SIDE_MIN,