front: added animated Loader logo

front/src/Phaser/Components/Loader.ts

@@ -2,8 +2,10 @@ import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
 import { DirtyScene } from "../Game/DirtyScene";
 
 const LogoNameIndex: string = "logoLoading";
+const LogoAnimationNameIndex: string = "logoAnimationLoading";
 const TextName: string = "Loading...";
 const LogoResource: string = "static/images/logo.png";
+const LogoAnimationResource: string = "static/images/logo.webm";
 const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
 
 const loadingBarHeight: number = 16;
@@ -14,6 +16,7 @@ export class Loader {
     private progress!: Phaser.GameObjects.Graphics;
     private progressAmount: number = 0;
     private logo: Phaser.GameObjects.Image | undefined;
+    private animation: Phaser.GameObjects.Video | undefined;
     private loadingText: Phaser.GameObjects.Text | null = null;
 
     public constructor(private scene: Phaser.Scene) {}
@@ -27,7 +30,14 @@ export class Loader {
         const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
 
         const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
-            if (this.scene.load.textureManager.exists(LogoNameIndex)) {
+            if (this.scene.load.cacheManager.video.exists(LogoAnimationNameIndex)) {
+                this.animation = this.scene.add.video(
+                    this.scene.game.renderer.width / 2,
+                    this.scene.game.renderer.height / 2 - 150,
+                    LogoAnimationNameIndex);
+                this.animation.play(true);
+                return res(this.animation);
+            } else if (this.scene.load.textureManager.exists(LogoNameIndex)) {
                 return res(
                     (this.logo = this.scene.add.image(
                         this.scene.game.renderer.width / 2,
@@ -44,10 +54,14 @@ export class Loader {
                 );
             }
             this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
+            this.scene.load.video(LogoAnimationNameIndex, LogoAnimationResource, 'loadeddata', false, true);
             this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
                 if (this.loadingText) {
                     this.loadingText.destroy();
                 }
+                if (this.animation) {
+                    return res(this.animation);
+                }
                 return res(
                     (this.logo = this.scene.add.image(
                         this.scene.game.renderer.width / 2,
@@ -56,6 +70,20 @@ export class Loader {
                     ))
                 );
             });
+            this.scene.load.once(`filecomplete-video-${LogoAnimationNameIndex}`, () => {
+                if (this.loadingText) {
+                    this.loadingText.destroy();
+                }
+                if (this.logo) {
+                    this.logo.destroy();
+                }
+                this.animation = this.scene.add.video(
+                    this.scene.game.renderer.width / 2,
+                    this.scene.game.renderer.height / 2 - 150,
+                    LogoAnimationNameIndex);
+                this.animation.play(true);
+                return res(this.animation);
+            });
         });
 
         this.progressContainer = this.scene.add.graphics();
@@ -86,6 +114,9 @@ export class Loader {
     }
 
     public removeLoader(): void {
+        if (this.scene.load.cacheManager.video.exists(LogoAnimationNameIndex)) {
+            this.scene.load.cacheManager.video.remove(LogoAnimationNameIndex);
+        }
         if (this.scene.load.textureManager.exists(LogoNameIndex)) {
             this.scene.load.textureManager.remove(LogoNameIndex);
         }
@@ -114,6 +145,11 @@ export class Loader {
             this.logo.x = this.scene.game.renderer.width / 2;
             this.logo.y = this.scene.game.renderer.height / 2 - 150;
         }
+
+        if (this.animation) {
+            this.animation.x = this.scene.game.renderer.width / 2;
+            this.animation.y = this.scene.game.renderer.height / 2 - 150;
+        }
     }
 
     private drawProgress() {