From 3f274df813f4d9407decc362a8f30ecac9edb618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 2 Feb 2021 17:11:52 +0100
Subject: [PATCH] Redesigning loading bar

---
 front/src/Phaser/Components/Loader.ts | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts
index a81b7f25..0eda58dc 100644
--- a/front/src/Phaser/Components/Loader.ts
+++ b/front/src/Phaser/Components/Loader.ts
@@ -7,28 +7,35 @@ const LogoFrame: ImageFrameConfig = {frameWidth: 307, frameHeight: 59};
 
 export const addLoader = (scene: Phaser.Scene): void => {
     let loadingText: Phaser.GameObjects.Text|null = null;
+    const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3);
+    const loadingBarHeight: number = 16;
+    const padding: number = 5;
 
     const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
         if(scene.load.textureManager.exists(LogoNameIndex)){
-            return res(scene.add.image(scene.game.renderer.width / 2, 100, LogoNameIndex));
+            return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex));
         }else{
             //add loading if logo image is not ready
-            loadingText = scene.add.text(scene.game.renderer.width / 2, 200, TextName);
+            loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
         }
         scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
         scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
             if(loadingText){
                 loadingText.destroy();
             }
-            return res(scene.add.image(scene.game.renderer.width / 2, 100, LogoNameIndex));
+            return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex));
         });
     });
 
+    const progressContainer = scene.add.graphics();
     const progress = scene.add.graphics();
+    progressContainer.fillStyle(0x444444, 0.8);
+    progressContainer.fillRect((scene.game.renderer.width - loadingBarWidth) / 2 - padding, scene.game.renderer.height / 2 + 50 - padding, loadingBarWidth + padding * 2, loadingBarHeight + padding * 2);
+
     scene.load.on('progress', (value: number) => {
         progress.clear();
-        progress.fillStyle(0xffffff, 1);
-        progress.fillRect(0, 270, 800 * value, 60);
+        progress.fillStyle(0xBBBBBB, 1);
+        progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight);
     });
     scene.load.on('complete', () => {
         if(loadingText){
@@ -38,5 +45,6 @@ export const addLoader = (scene: Phaser.Scene): void => {
             resLoadingImage.destroy();
         });
         progress.destroy();
+        progressContainer.destroy();
     });
-}
\ No newline at end of file
+}