Коммит 956287b3 создал по автору Anton Medvedev's avatar Anton Medvedev
Просмотр файлов

Merge branch 'main' into 'main' 

#104 Создан экран загрузки для бесконечного холста

See merge request teknokomo/universo-monorepo!45
владельцы fbe94f87 b0aa939b
Скрыть пробелы
Построчно Рядом
universo-frontend/src/pages/canvas/ActualCanvas.vue
Просмотр файла @ 956287b3
<template> <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> </template>
<script lang="ts"> <script lang="ts">
...@@ -39,6 +56,9 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -39,6 +56,9 @@ class EndlessCanvas extends Phaser.Scene {
create(): void { create(): void {
this.cameras.main.setBackgroundColor('#abcdef'); this.cameras.main.setBackgroundColor('#abcdef');
// Скрываем экран загрузки здесь, потому что на этом этапе preload уже завершен
document.getElementById('loading-screen').style.display = 'none';
if (window.objekto) { if (window.objekto) {
const topPanel = CreateScrollablePanel(this, window.objekto) const topPanel = CreateScrollablePanel(this, window.objekto)
.setPosition(400, 300) .setPosition(400, 300)
...@@ -51,8 +71,10 @@ class EndlessCanvas extends Phaser.Scene { ...@@ -51,8 +71,10 @@ class EndlessCanvas extends Phaser.Scene {
const config: Phaser.Types.Core.GameConfig = { const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO, type: Phaser.AUTO,
parent: 'phaser-container', parent: 'phaser-container',
width: window.innerWidth - 205, width: window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
height: window.innerHeight, height:
window.innerWidth < 600 ? window.innerHeight - 51 : window.innerHeight - 10,
scale: { scale: {
mode: Phaser.Scale.FIT, mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH, autoCenter: Phaser.Scale.CENTER_BOTH,
...@@ -138,6 +160,24 @@ export default { ...@@ -138,6 +160,24 @@ export default {
window.addEventListener('resize', resizeHandler); window.addEventListener('resize', resizeHandler);
const game = new Phaser.Game(config); 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() { beforeUnmount() {
this.wsSubscribe.unsubscribe(); this.wsSubscribe.unsubscribe();
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать