chore: fullscreen now correct on desktop (#277)

apps/telegram-game/src/App.vue

@@ -7,17 +7,5 @@
 </template>
 
 <script setup lang="ts">
-import { exitFullscreen, isFullScreen } from '@telegram-apps/sdk-vue'
-import { useWindowSize } from '@vueuse/core'
-
 useBackButton()
-
-// Application is in fullscreen mode only on small screens!
-const { width } = useWindowSize()
-
-watch(width, () => {
-  if (width.value > 600 && isFullScreen()) {
-    exitFullscreen()
-  }
-})
 </script>

apps/telegram-game/src/init.ts

@@ -3,10 +3,10 @@ import {
   backButton,
   closingBehavior,
   disableVerticalSwipes,
+  fullScreen,
   initData,
   init as initSDK,
   miniApp,
-  requestFullscreen,
   swipeBehavior,
   themeParams,
   viewport,
@@ -33,6 +33,7 @@ export function init(debug: boolean): void {
   miniApp.mount()
   themeParams.mount()
   swipeBehavior.mount()
+  fullScreen.mount()
   closingBehavior.mount()
   initData.restore()
   void viewport
@@ -42,6 +43,19 @@ export function init(debug: boolean): void {
     })
     .then(() => {
       viewport.bindCssVars()
+
+      if (viewport.requestFullscreen.isAvailable()) {
+        void viewport.requestFullscreen().finally(() => {
+          // Wait
+          setTimeout(() => {
+            // The app is now in fullscreen
+            if (window.innerWidth > 600) {
+              // Application should be in fullscreen mode only on small screens!
+              viewport.exitFullscreen()
+            }
+          }, 50)
+        })
+      }
     })
 
   // Define components-related CSS variables.
@@ -54,9 +68,6 @@ export function init(debug: boolean): void {
   if (closingBehavior.enableConfirmation.isAvailable()) {
     closingBehavior.enableConfirmation()
   }
-  if (requestFullscreen.isAvailable()) {
-    void requestFullscreen()
-  }
 
   // It will listen for changes in viewport size (even with the changes by opening a Virtual Keyboard), then apply the correct size into body of HTML.
   if (window.visualViewport) {

apps/telegram-game/src/views/GameView.vue

@@ -1,16 +1,3 @@
 <template>
   <PageContainer :back="false" />
 </template>
-
-<script setup lang="ts">
-import { exitFullscreen, isFullScreen } from '@telegram-apps/sdk-vue'
-import { useWindowSize } from '@vueuse/core'
-
-const { width } = useWindowSize()
-
-watch(width, () => {
-  if (width.value > 600 && isFullScreen()) {
-    exitFullscreen()
-  }
-})
-</script>

apps/telegram-game/vite.config.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { fileURLToPath, URL } from 'node:url'
 
 import tailwindcss from '@tailwindcss/vite'
@@ -44,6 +45,7 @@ export default defineConfig({
     createConfig(),
     Terminal({
       output: 'terminal',
+      console: process.env.NODE_ENV === 'development' ? 'terminal' : undefined,
     }),
   ],
   server: {