classic puzzle set dimension option

src/components/InteractiveObjects/ClassicPuzzle.js

@@ -3,12 +3,12 @@ import { centerOrigin } from "@/lib/MeshUtils";
 
 class ClassicPuzzle extends EventDispatcher  {
     emits = ['finish']
-    constructor(engine, data, gltfName, objPrefix='Plane'){
+    constructor(engine, data, objPrefix='Plane'){
         super();
         const container = new Group();
         const that = this;
         return new Promise(async (resolve, reject)=>{
-            let gltf = await engine.load('puzzle-3x3.glb', '/static/meshes/classic-puzzle/');
+            let gltf = await engine.load(`puzzle-${data.dimension}.glb`, '/static/meshes/classic-puzzle/');
             let map = await engine.loadTexture(data.$go.asset.name);
             let dragZone = gltf.scene.getObjectByName('DragZone');
             dragZone.material.side = DoubleSide;

src/components/InteractiveObjects/ClassicPuzzle.vue

@@ -1,7 +1,6 @@
 <template>
     <div v-if="modelValue.go">
-        <v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
-        <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
+        <v-select label="Dimension" v-model="modelValue.dimension" :items="['3x3', '5x4', '6x6']" density="compact"></v-select>
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
     </div>
@@ -30,7 +29,7 @@ export default {
         assignTexture(e){
             this.modelValue.go = e.id;
             this.modelValue.title = e.name
-            // this.modelValue.w = 2;
+            this.modelValue.dimension = '3x3';
             // this.modelValue.h = 3;
         }
     }