small UI fixes

src/components/InteractiveObjects/ClassicPuzzle.js

@@ -1,6 +1,7 @@
 import { Color, Group, DoubleSide, RepeatWrapping, MeshStandardMaterial, VideoTexture } from "three"
 import { EventManager } from '@/lib/EventManager';
 import { centerOrigin } from "@/lib/MeshUtils";
+import Utils from "#/app/Utils";
 
 class ClassicPuzzle extends EventManager {
     emits = ['finish', 'interaction']
@@ -32,10 +33,15 @@ class ClassicPuzzle extends EventManager {
             
             let dragZone = gltf.scene.getObjectByName('DragZone');
             dragZone.material.side = DoubleSide;
+            let pCount = 0;
             let eventsFn= {
-                start(){
+                async start(){
                     that.dispatchEvent({type:'interaction'});
-                    if (vi?.paused) vi.play();
+                    if (vi?.paused) {
+                        await vi.play();
+                        await Utils.wait(5000);
+                        done != pCount && vi.pause();
+                    }
                 },
                 drag(){},
                 end(e){
@@ -59,7 +65,6 @@ class ClassicPuzzle extends EventManager {
                     }
                 }
             }
-            let pCount = 0;
             dragZone.visible = false;
 
             let defaultMaterial = new MeshStandardMaterial({