arcanumcube 0.1.1 → 0.1.3

package/README.md

@@ -1,8 +1,22 @@
 # 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](https://mawxiwtz.github.io/arcanumcube/)
+## Demo Page
+
+- [Example1](https://mawxiwtz.github.io/arcanumcube/) \
+  Rotation only
+
+- [Example2](https://mawxiwtz.github.io/arcanumcube-demo/) \
+  Demo of playing and solving with AI
+
+## Installation
+
+You can add arcanumcube as an npm dependency:
+
+```
+npm install arcanumcube
+```
 
 ## Usage
 
@@ -16,11 +30,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) => {
     :
@@ -43,6 +60,10 @@ arccube.tweenTwist('U');
 arccube.reset();
 ```
 
+## Document
+
+Currently under construction
+
 ## License
 
 Released under the MIT license

package/dist/cjs/{arcanumcube.cjs → arcanumcube.js}

@@ -43,6 +43,7 @@ __export(arcanumcube_exports, {
   FACE: () => FACE,
   GetSkinByName: () => GetSkinByName,
   GetSkinNameList: () => GetSkinNameList,
+  MatchGoalState: () => MatchGoalState,
   SIDE_MAX: () => SIDE_MAX,
   SIDE_MIDDLE: () => SIDE_MIDDLE,
   SIDE_MIN: () => SIDE_MIN,
@@ -329,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;
@@ -473,6 +510,9 @@ var ArcanumCube = class {
     const list = this.getUndoList(steps);
     this.twist(list, true);
   }
+  isSolved() {
+    return MatchGoalState(this.getStickerColors());
+  }
   getHistory() {
     return this._history;
   }
@@ -716,7 +756,7 @@ var standardSkin = {
   cube: {
     material: () => {
       return new THREE.MeshStandardMaterial({
-        color: 1118481,
+        color: 3092271,
         metalness: 0.8,
         roughness: 0.4
       });
@@ -1200,7 +1240,8 @@ var WebGLCube = class extends Cube {
       gap: 0.01,
       enableShadow: false,
       skin: DefaultSkin,
-      wireframe: false
+      wireframe: false,
+      wireframeColor: 32768
     };
     if (opts) {
       Object.assign(this._config, opts);
@@ -1244,7 +1285,7 @@ var WebGLCube = class extends Cube {
     }
     if (config.wireframe) {
       mat.wireframe = config.wireframe;
-      mat.color = new THREE3.Color("#080");
+      mat.color = new THREE3.Color(config.wireframeColor);
     }
     const m = new THREE3.Mesh(geo, mat);
     m.name = this.type;
@@ -1285,7 +1326,7 @@ var WebGLCube = class extends Cube {
       }
       if (config.wireframe) {
         pmat.wireframe = config.wireframe;
-        pmat.color = new THREE3.Color("#080");
+        pmat.color = new THREE3.Color(config.wireframeColor);
       }
       const pm = new THREE3.Mesh(pgeo, pmat);
       pm.name = CUBE.STICKER;
@@ -1375,7 +1416,9 @@ var WebGLArcanumCube = class extends ArcanumCube {
   /** tween group */
   _tweens;
   /** light at the center of cube */
-  _pointLights;
+  _coreLights;
+  /** status of locking the twist */
+  _lockTwist;
   constructor(options) {
     super(options);
     this._config = {
@@ -1387,8 +1430,12 @@ var WebGLArcanumCube = class extends ArcanumCube {
       gap: 0.01,
       enableShadow: false,
       skin: DefaultSkin,
-      enableLight: false,
-      wireframe: false
+      enableCoreLight: false,
+      coreLightColor: 33023,
+      coreLightIntensity: 30,
+      wireframe: false,
+      wireframeColor: 32768,
+      twistOptions: {}
     };
     this._matrix = [];
     this._group = new THREE3.Group();
@@ -1396,7 +1443,8 @@ var WebGLArcanumCube = class extends ArcanumCube {
     this._cubeMap = {};
     this._cancelDragDeg = 15;
     this._tweens = new TWEEN.Group();
-    this._pointLights = [];
+    this._coreLights = [];
+    this._lockTwist = false;
     if (options) {
       Object.assign(this._config, options);
     }
@@ -1422,7 +1470,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 = [];
@@ -1438,7 +1486,8 @@ var WebGLArcanumCube = class extends ArcanumCube {
             enableShadow: config.enableShadow,
             skin: config.skin,
             envMap: config.envMap,
-            wireframe: config.wireframe
+            wireframe: config.wireframe,
+            wireframeColor: config.wireframeColor
           });
           cube.init();
           xarray.push(cube);
@@ -1446,18 +1495,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(
-                config.wireframe ? 32768 : 33023,
-                30,
+                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);
             }
           }
         }
@@ -1467,8 +1516,8 @@ 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);
       });
     }
@@ -1492,8 +1541,14 @@ var WebGLArcanumCube = class extends ArcanumCube {
     }
     await this.init();
   }
+  lockTwist(flag) {
+    this._lockTwist = flag;
+  }
+  isTwisting() {
+    return this._tweens.getAll().length > 0;
+  }
   reset(duration = 1800) {
-    if (this._tweens.getAll().length > 0) return;
+    if (this._lockTwist || this.isTwisting()) return;
     if (this._selectedCube) this.deselectCube();
     if (this._selectedSticker) this.deselectSticker();
     this._twistGroup = void 0;
@@ -1670,8 +1725,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);
       });
     }
@@ -1680,7 +1735,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
     return twistGroup;
   }
   dragTwist(twist, rad) {
-    if (this._tweens.getAll().length > 0) return;
+    if (this._lockTwist || this.isTwisting()) return;
     if (!this._draggingTwist || this._draggingTwist.twist != twist) {
       this._draggingTwist = {
         twist,
@@ -1695,7 +1750,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
     this._draggingTwist.group.quaternion.copy(q);
   }
   dragTwistEnd() {
-    if (this._tweens.getAll().length > 0) return;
+    if (this._lockTwist || this.isTwisting()) return;
     if (this._draggingTwist) {
       const deg = this._draggingTwist.rad * 180 / Math.PI;
       if (deg > this._cancelDragDeg) {
@@ -1708,7 +1763,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);
@@ -1716,17 +1771,25 @@ var WebGLArcanumCube = class extends ArcanumCube {
   }
   // twisting(複数回対応)
   // durationを0にするとTweenなしとなる
-  tweenTwist(twist, reverse = false, duration = 500, cancel = false) {
-    if (this._tweens.getAll().length > 0) return;
+  tweenTwist(twist, reverse = false, duration = 500, cancel = false, options) {
+    if (this._lockTwist || this.isTwisting()) return;
+    options = { ...this._config.twistOptions, ...options };
     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;
@@ -1734,8 +1797,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;
@@ -1745,10 +1815,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();
     }
   }
@@ -1770,7 +1841,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;
@@ -1807,12 +1878,30 @@ 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 (options.onSolved && this.isSolved()) {
+        options.onSolved(this);
+      }
     });
     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 = {
@@ -1829,6 +1918,7 @@ var WebGLArcanumCube = class extends ArcanumCube {
   FACE,
   GetSkinByName,
   GetSkinNameList,
+  MatchGoalState,
   SIDE_MAX,
   SIDE_MIDDLE,
   SIDE_MIN,