From f5e77ad749ba2e9b7b62bffa66a9c16d32c03abf Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 16 Dec 2020 12:23:34 +0100
Subject: [PATCH] FIX: menu flicker

---
 front/dist/resources/html/gameMenu.html        |  2 +-
 front/dist/resources/html/gameQualityMenu.html |  2 +-
 front/src/Phaser/Menu/MenuScene.ts             | 17 +++++++++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index a5190062..0bbe17e2 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -9,7 +9,7 @@
     }
 </style>
 
-<div id="gameMenu">
+<div id="gameMenu" hidden>
 
     <main>
         <section>
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index 00599386..e40eca7e 100644
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@@ -46,7 +46,7 @@
     }
 </style>
 
-<form id="gameQuality">
+<form id="gameQuality" hidden>
     <section>
         <h3>Game quality</h3>
         <p class="cautiousText">(Editing this settings will restart the game)</p>
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 5d796d00..7e1c0d33 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -38,11 +38,12 @@ export class MenuScene extends Phaser.Scene {
     }
 
     create() {
-        this.menuElement = this.add.dom(closedSideMenuX, 25).createFromCache(gameMenuKey);
+        this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
         this.menuElement.setOrigin(0);
+        this.revealAfterInit(this.menuElement, 'gameMenu');
 
-        this.gameQualityMenuElement = this.add.dom(this.game.renderer.width / 2, -400).createFromCache(gameSettingsMenuKey);
-        this.gameQualityMenuElement.setOrigin(0.5);
+        this.gameQualityMenuElement = this.add.dom(300, -400).createFromCache(gameSettingsMenuKey);
+        this.revealAfterInit(this.gameQualityMenuElement, 'gameQuality');
         
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
@@ -54,6 +55,14 @@ export class MenuScene extends Phaser.Scene {
         });
     }
     
+    private revealAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
+        //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
+        //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
+        setTimeout(() => {
+            (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
+        }, 250);
+    }
+    
     openSideMenu() {
         if (this.sideMenuOpened) return;
         this.sideMenuOpened = true;
@@ -111,7 +120,7 @@ export class MenuScene extends Phaser.Scene {
 
         this.tweens.add({
             targets: this.gameQualityMenuElement,
-            y: this.game.renderer.height / 2,
+            y: 100,
             duration: 1000,
             ease: 'Power3'
         });