loading progress added

src/components/InteractiveObjects/GenenricObject.js

@@ -27,7 +27,9 @@ class GenericObject{
                                         z: scale*this.object.scale.z
                                     }
                                 }
-                                await engine.dashboard.attach(this.object, placement, true, true);
+                                await engine.dashboard.attach(this.object, {
+                                    placement, rotate: true, plane: true
+                                });
                             }
                         }
                         if (data.description){

src/components/InteractiveObjects/InteractiveObject.js

@@ -16,8 +16,9 @@ import { Particles } from "./Particles";
 import { assignMaterial, assignParams } from "@/lib/MeshUtils";
 
 const InteractiveObjectsImports = { 
-    PuzzleGame1, PuzzleGame2, PuzzleGame4, 
-    GenericObject, CharacterObject, MazeQuizGame, Particles };
+    PuzzleGame1, PuzzleGame2, PuzzleGame4, VideoPlayer,
+    GenericObject, CharacterObject, MazeQuizGame, Particles 
+};
 
 class InteractiveObject {
     constructor(gameEngine, obj) {
@@ -77,9 +78,6 @@ class InteractiveObject {
                     this.object.game = game;
                     break;
                 case 'VideoPlayer':
-                    this.source = await new VideoPlayer(gameEngine, obj.$go.asset.name, gameEngine.assetPath);
-                    this.object = this.source.object;
-                    break;
                 case 'PuzzleGame1':
                 case 'PuzzleGame2':
                 case 'MazeQuizGame':

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js

@@ -47,7 +47,7 @@ class MazeQuizGame {
                 let ud = {...ud1, ...ud2}
                 if (ud?.finish){
                     if (e.started){
-                        engine.dashboard.updateProgress(1)
+                        engine.dashboard.levelProgress.update(1)
                         engine.hero.animationsMap._idle = engine.hero.animationsMap.idle
                         if ( engine.hero.animationsMap?.win){
                             engine.hero.animationsMap.idle = engine.hero.animationsMap.win
@@ -65,7 +65,7 @@ class MazeQuizGame {
                 }
                 if (ud.qid !== undefined && e.started){
                     engine.dashboard.updateText(ud.question.q)
-                    engine.dashboard.updateProgress(ud.qid / questions.length)
+                    engine.dashboard.levelProgress.update(ud.qid / questions.length)
                 }
                 //console.log(e, ud, engine.hero?.animationsMap);
             })

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue

@@ -1,5 +1,4 @@
 <template>
-    <v-checkbox v-model="modelValue.shuffle" label="Shuffle questions"></v-checkbox>
     <v-dialog max-width="1400" scrollable>
         <template v-slot:activator="{ props: activatorProps }">
             <v-btn v-bind="activatorProps">Manage Questions</v-btn>
@@ -30,10 +29,16 @@
                         </v-card>
                     </div>
                 </v-card-text>
-                <v-btn @click="addQuestion" block>Add question</v-btn>
+                <v-card-actions>
+                    <v-btn color="success" @click="addQuestion" block>Add question</v-btn>
+                    <v-btn color="primary" @click="isActive.value = false" >Close</v-btn>
+                </v-card-actions>
             </v-card>
         </template>
     </v-dialog>
+    <v-checkbox v-model="modelValue.shuffle" hide-details label="Shuffle questions"></v-checkbox>
+    <v-number-input density="compact" label="Correct answer points" v-model="modelValue.questionPoints"></v-number-input>
+    <v-number-input density="compact" label="Wrong answer penalty points" v-model="modelValue.questionPenalty"></v-number-input>
 </template>
 
 <script>
@@ -41,6 +46,8 @@ export default {
     props:['modelValue'],
     mounted(){
         this.modelValue.questions ??= [];
+        this.modelValue.questionPoints ??= 10;
+        this.modelValue.questionPenalty ??= 0
     },
     methods:{
         addQuestion(){

src/components/InteractiveObjects/PuzzleGame1.js

@@ -1,4 +1,4 @@
-import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
+import { BoxGeometry, Mesh, MeshStandardMaterial, Group } from 'three';
 import { MotionEngine } from '../../lib/MotionEngine';
 import { centerOrigin } from '@/lib/MeshUtils';
 
@@ -13,8 +13,10 @@ class PuzzleGame1 {
 
             let bm = new BoxGeometry(1, 1, 1);
 
-            let material = new MeshBasicMaterial({
-                map: await engine.loadTexture(data.$go.asset.name)
+            let material = new MeshStandardMaterial({
+                map: await engine.loadTexture(data.$go.asset.name),
+                // roughness:1, metalness:0,
+                // normalMap: await engine.loadTexture('NormalMap.png', '/static/textures/'),
             });
             //material.map.encoding = sRGBEncoding;
 

src/components/InteractiveObjects/VideoPlayer.js

@@ -2,11 +2,11 @@ import * as THREE from 'three';
 
 
 class VideoPlayer {
-    constructor(engine, src, path = ''){
+    constructor(engine, data){
         let vi, plane;
         return new Promise((resolve, reject)=>{
             vi = document.createElement('video');
-            vi.src = path + src;
+            vi.src = engine.assetPath + data.$go.asset.name;
             vi.addEventListener('loadedmetadata', ()=>{
                 this.aspect = vi.videoWidth / vi.videoHeight;
                 let geometry = new THREE.PlaneGeometry( this.aspect, 1 );
@@ -31,13 +31,22 @@ class VideoPlayer {
 
                 vi.addEventListener('play', ()=>{
                     material.opacity = 1
-                    if (engine.dashboard?.active){
-                        engine.dashboard.attach(plane);
+                    if (data.playInHud && engine.dashboard?.active){
+                        engine.dashboard.attach(plane, {
+                            skipTransition: data.skipTransition
+                        });
                     }
                 })
                 vi.addEventListener('pause', ()=>{
-                    material.opacity = 0.5;
-                    engine.dashboard?.detach(plane);
+                    //material.opacity = 0.5;
+                    if (data.playInHud){
+                        engine.dashboard?.detach(plane, {
+                            skipTransition: !data.skipTransition
+                        });
+                    }
+                })
+                vi.addEventListener('ended', ()=>{
+                    this.onfinish?.();
                 })
                 this.video = vi;
                 

src/components/InteractiveObjects/VideoPlayer.vue

@@ -1,10 +1,9 @@
 <template>
-    <v-card v-if="modelValue.go">
-        <v-card-item>
-            <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
-            <div class="text-caption text-center">{{ modelValue.title }}</div>
-        </v-card-item>
-    </v-card>
+    <div v-if="modelValue.go">
+        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
+        <v-checkbox density="compact" v-model="modelValue.playInHud" hide-details label="Play in full screen"></v-checkbox>
+    </div>
     <asset-selector @select="assignVideoObject" :type="['Video']">
         <template v-slot:activator="props">
             <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose video object</v-btn>