allow fullscreen in game preview

src/components/GamePlay/GamePlay.vue

@@ -3,7 +3,7 @@
         <v-btn icon="mdi-fullscreen" @click="fullScreen" variant="text" v-tooltip="l.fullScreen"></v-btn>
     </v-navigation-drawer>
     <div class="container my-3 position-relative ">
-        <div ref="target" @click="targetClick" class="game-play-canvas"
+        <div ref="target" @click="targetClick" class="canvas-wrapper"
             @mousedown="targetPointer($event, 'start')" 
             @mousemove="targetPointer($event, 'drag')" 
             @mouseup="targetPointer($event, 'end')" 

src/components/GamePreview/GamePreview.vue

@@ -18,11 +18,12 @@
             <v-btn :value="true" icon="mdi-cube-outline"></v-btn>
         </v-btn-toggle>
         <v-divider class="my-2"></v-divider>
-        <v-btn variant="tonal" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`" class="mx-1" size="small"></v-btn>
-        <v-btn variant="tonal" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`" class="mx-1" size="small"></v-btn>
+        <v-btn variant="tonal" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`" class="ma-1" size="small"></v-btn>
+        <v-btn variant="tonal" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`" class="ma-1" size="small"></v-btn>
+        <v-btn icon="mdi-fullscreen" @click="fullScreen" variant="tonal" v-tooltip="l.fullScreen" size="small" class="ma-1" ></v-btn>
     </v-navigation-drawer>
     <div class="container my-3 position-relative game-designer-canvas">
-        <div ref="target" @click="targetClick"
+        <div ref="target" @click="targetClick" class="canvas-wrapper"
             @mousedown="targetPointer($event, 'start')" 
             @mousemove="targetPointer($event, 'drag')" 
             @mouseup="targetPointer($event, 'end')" 

src/components/InteractiveObjects/InteractiveObject.js

@@ -97,7 +97,7 @@ class InteractiveObject extends EventManager{
                 o.visible = false;
                 engine.addEventListener('beforeRender', function () {
                     o.getWorldPosition(v);
-                    var dst = engine.camera.position.distanceTo(v);
+                    var dst = engine.cameraWorld.position.distanceTo(v);
                     if (dst <= dstm && !o.visible) {
                         o.visible = true;
                     }else if (dst > dstm && o.visible){

src/lib/GameEngine.js

@@ -23,6 +23,7 @@ import { Telemetry } from './Telemetry.js';
 THREE.Cache.enabled = true
 
 const assetPath = '/asset/default/';
+const defaultLightIntensity = 22;
 
 class GameEngine extends EventManager{
     async init(domNode, opts = {}) {
@@ -51,7 +52,7 @@ class GameEngine extends EventManager{
 
         this.initCameraPivot()
 
-        this.ambientLight = new THREE.AmbientLight( 0x404040, 11 ); // soft white light
+        this.ambientLight = new THREE.AmbientLight( 0x404040, defaultLightIntensity ); // soft white light
         scene.add( this.ambientLight );
 
         // var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 10 );
@@ -142,7 +143,7 @@ class GameEngine extends EventManager{
         //const controls = new MapControls( camera, renderer.domElement );
         this.transformControls = new TransformControls(this.camera, renderer.domElement);
         this.transformControls.addEventListener('dragging-changed', function (event) {
-            controls.enabled = !event.value;
+            gameEngine.orbitControls.enabled = !event.value;
         });
 
         this.pointerControls = new PointerControls(this);
@@ -631,7 +632,7 @@ class GameEngine extends EventManager{
                 t
             },{
                 o: this.ambientLight,
-                a: { intensity: show ? 0.1 : 11},
+                a: { intensity: show ? 0.1 : defaultLightIntensity},
                 t
             }
         ])

src/pages/manage/index.vue

@@ -21,7 +21,7 @@
         <v-card to="/manage/games/list" class="hover-effect">
           <v-img src="/static/header-studio.webp" cover content-class="d-flex flex-column justify-space-between"gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
             <v-btn icon="mdi-plus" class="align-self-end ma-3" to="/manage/games/add" color="white" size="small" v-tooltip="l.createGame"></v-btn>
-            <v-card-title class="text-white text-h5" v-text="l.games"></v-card-title>
+            <v-card-title class="text-white text-h5" v-text="l.gameDirector"></v-card-title>
           </v-img>
         </v-card>
       </v-col>

src/plugins/lang.js

@@ -77,7 +77,8 @@ const lang = {
         visualStyle: 'Visual style',
         gameScenarios: 'Scenarios',
         gameRules: 'Rules',
-        gameDesigner: 'Game studio',
+        gameDesigner: 'Studio',
+        gameDirector: 'Directing',
         games: 'Games',
         play: 'Play',
         darkMode: 'Dark mode',
@@ -233,6 +234,7 @@ const lang = {
         gameScenarios: 'Сценарии',
         gameRules: 'Правила',
         gameDesigner: 'Студио',
+        gameDirector: 'Режисура',
         games: 'Игри',
         play: 'Играй',
         darkMode: 'Тъмен режим',

src/styles/style.scss

@@ -124,13 +124,13 @@ video{
     }
 }
 
-.game-designer-canvas, .game-play-canvas{
+.canvas-wrapper{
     width: 100%;
     max-width: 100vw;
     height: calc(100vh - 288px);
 }
 
-.game-play-canvas:has(canvas:fullscreen){
+.canvas-wrapper:has(canvas:fullscreen){
     width: 100vw;
     height: 100vh;
 }