Merge branch 'main' into 'main'

#104 Создан экран загрузки для бесконечного холста See merge request teknokomo/universo-monorepo!45

Merge branch 'main' into 'main'
#104 Создан экран загрузки для бесконечного холста See merge request teknokomo/universo-monorepo!45
956287b3 · Anton Medvedev · fbe94f87 · b0aa939b · 956287b3
--- a/universo-frontend/src/pages/canvas/ActualCanvas.vue
+++ b/universo-frontend/src/pages/canvas/ActualCanvas.vue
 <template>
-  <div id="phaser-container" style="min-height: 100vh"></div>
+  <div>
+    <div
+      id="loading-screen"
+      style="
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: white;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      "
+    >
+      <img src="images/logo.png" alt="Loading..." id="loading-logo" />
+    </div>
+    <div id="phaser-container"></div>
+  </div>
 </template>

 <script lang="ts">
@@ -39,6 +56,9 @@ class EndlessCanvas extends Phaser.Scene {
  create(): void {
    this.cameras.main.setBackgroundColor('#abcdef');

+    // Скрываем экран загрузки здесь, потому что на этом этапе preload уже завершен
+    document.getElementById('loading-screen').style.display = 'none';
+
    if (window.objekto) {
      const topPanel = CreateScrollablePanel(this, window.objekto)
        .setPosition(400, 300)
@@ -51,8 +71,10 @@ class EndlessCanvas extends Phaser.Scene {
 const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  parent: 'phaser-container',
-  width: window.innerWidth - 205,
-  height: window.innerHeight,
+  width: window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
+  height:
+    window.innerWidth < 600 ? window.innerHeight - 51 : window.innerHeight - 10,
+
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
@@ -138,6 +160,24 @@ export default {

    window.addEventListener('resize', resizeHandler);
    const game = new Phaser.Game(config);
+
+    window.addEventListener('resize', function (event) {
+      console.log('resize');
+      game.scale.resize(
+        window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
+        window.innerWidth < 600
+          ? window.innerHeight - 51
+          : window.innerHeight - 10,
+      );
+    });
+    // setInterval(() => {
+    //   game.scale.resize(
+    //     window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
+    //     window.innerWidth < 600
+    //       ? window.innerHeight - 51
+    //       : window.innerHeight - 10,
+    //   );
+    // }, 100);
  },
  beforeUnmount() {
    this.wsSubscribe.unsubscribe();