Avoid getting the keyboard layout map each frame

As getting this map is an async function, it delayed the UI update hence making it lag behind the camera.

Creating the keyboard layout map at init time and using it later on fixes this lag and removes some async await logic as well!

src/styles/helmetOverlay/notifications.scss

@@ -28,6 +28,7 @@
     pointer-events: all;
 
     background: rgba(0, 0, 0, 0.8);
+    border: 1px solid gray;
 
     animation: popIn 0.5s ease-in-out;
     animation-fill-mode: forwards;
@@ -55,7 +56,7 @@
       .notification-progress-bar {
         // progress bar fill
         height: 100%;
-        width: 30%;
+        width: 100%;
         background-color: white;
         animation-fill-mode: forwards;
       }

src/ts/missions/mission.ts

@@ -84,9 +84,10 @@ export class Mission {
     /**
      * Describes the next task that the player has to complete given the current mission context
      * @param context The current mission context
+     * @param keyboardLayout The keyboard layout map to localize the keys
      */
-    async describeNextTask(context: MissionContext): Promise<string> {
-        return await this.tree.describeNextTask(context);
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
+        return this.tree.describeNextTask(context, keyboardLayout);
     }
 
     /**

src/ts/missions/nodes/actions/sightseeing/missionAsteroidFieldNode.ts

@@ -27,7 +27,6 @@ import { parseDistance } from "../../../../utils/strings/parseToStrings";
 import { Settings } from "../../../../settings";
 import { pressInteractionToStrings } from "../../../../utils/strings/inputControlsString";
 import { GeneralInputs } from "../../../../inputs/generalInputs";
-import { getGlobalKeyboardLayoutMap } from "../../../../utils/keyboardAPI";
 import { getSystemModelFromCoordinates } from "../../../../starSystem/modelFromCoordinates";
 
 const enum AsteroidFieldMissionState {
@@ -134,7 +133,7 @@ export class MissionAsteroidFieldNode implements MissionNode {
         });
     }
 
-    async describeNextTask(context: MissionContext): Promise<string> {
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
         if (this.isCompleted()) {
             return i18n.t("missions:asteroidField:missionCompleted");
         }
@@ -148,8 +147,6 @@ export class MissionAsteroidFieldNode implements MissionNode {
 
         const targetObject = getObjectModelByUniverseId(this.objectId);
 
-        const keyboardLayout = await getGlobalKeyboardLayoutMap();
-
         switch (this.state) {
             case AsteroidFieldMissionState.NOT_IN_SYSTEM:
                 return i18n.t("missions:common:travelToTargetSystem", {

src/ts/missions/nodes/actions/sightseeing/missionFlyByNode.ts

@@ -24,7 +24,6 @@ import { getStarGalacticPosition } from "../../../../utils/coordinates/starSyste
 import { parseDistance } from "../../../../utils/strings/parseToStrings";
 import { Settings } from "../../../../settings";
 import i18n from "../../../../i18n";
-import { getGlobalKeyboardLayoutMap } from "../../../../utils/keyboardAPI";
 import { pressInteractionToStrings } from "../../../../utils/strings/inputControlsString";
 import { GeneralInputs } from "../../../../inputs/generalInputs";
 import { getSystemModelFromCoordinates } from "../../../../starSystem/modelFromCoordinates";
@@ -115,7 +114,7 @@ export class MissionFlyByNode implements MissionNode {
         });
     }
 
-    async describeNextTask(context: MissionContext): Promise<string> {
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
         if (this.isCompleted()) {
             return i18n.t("missions:flyBy:missionCompleted");
         }
@@ -129,8 +128,6 @@ export class MissionFlyByNode implements MissionNode {
 
         const targetObject = getObjectModelByUniverseId(this.objectId);
 
-        const keyboardLayout = await getGlobalKeyboardLayoutMap();
-
         switch (this.state) {
             case FlyByState.NOT_IN_SYSTEM:
                 return i18n.t("missions:common:travelToTargetSystem", {

src/ts/missions/nodes/actions/sightseeing/missionTerminatorLandingNode.ts

@@ -25,7 +25,6 @@ import { getObjectBySystemId, getObjectModelByUniverseId } from "../../../../uti
 import { getStarGalacticPosition } from "../../../../utils/coordinates/starSystemCoordinatesUtils";
 import i18n from "../../../../i18n";
 import { parseDistance } from "../../../../utils/strings/parseToStrings";
-import { getGlobalKeyboardLayoutMap } from "../../../../utils/keyboardAPI";
 import { pressInteractionToStrings } from "../../../../utils/strings/inputControlsString";
 import { GeneralInputs } from "../../../../inputs/generalInputs";
 import { getSystemModelFromCoordinates } from "../../../../starSystem/modelFromCoordinates";
@@ -146,7 +145,7 @@ export class MissionTerminatorLandingNode implements MissionNode {
         });
     }
 
-    async describeNextTask(context: MissionContext): Promise<string> {
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
         if (this.isCompleted()) {
             return i18n.t("missions:terminatorLanding:missionCompleted");
         }
@@ -160,8 +159,6 @@ export class MissionTerminatorLandingNode implements MissionNode {
 
         const targetObject = getObjectModelByUniverseId(this.objectId);
 
-        const keyboardLayout = await getGlobalKeyboardLayoutMap();
-
         switch (this.state) {
             case LandMissionState.NOT_IN_SYSTEM:
                 return i18n.t("missions:common:travelToTargetSystem", {

src/ts/missions/nodes/logic/missionAndNode.ts

@@ -58,9 +58,9 @@ export class MissionAndNode implements MissionNode {
         return this.children.map((child) => child.describe(originSystemCoordinates)).join(` ${i18n.t("common:and")} `);
     }
 
-    describeNextTask(context: MissionContext): Promise<string> {
-        if (this.hasCompletedLock) return Promise.resolve("Mission completed");
-        return Promise.resolve(this.children.map((child) => child.describeNextTask(context)).join(` ${i18n.t("common:and")} `));
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
+        if (this.hasCompletedLock) return "Mission completed";
+        return this.children.map((child) => child.describeNextTask(context, keyboardLayout)).join(` ${i18n.t("common:and")} `);
     }
 
     getTargetSystems(): StarSystemCoordinates[] {

src/ts/missions/nodes/logic/missionOrNode.ts

@@ -58,9 +58,9 @@ export class MissionOrNode implements MissionNode {
         return this.children.map((child) => child.describe(originSystemCoordinates)).join(` ${i18n.t("common:or")} `);
     }
 
-    describeNextTask(context: MissionContext): Promise<string> {
-        if (this.hasCompletedLock) return Promise.resolve("Mission completed");
-        return Promise.resolve(this.children.map((child) => child.describeNextTask(context)).join(` ${i18n.t("common:or")} `));
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
+        if (this.hasCompletedLock) return "Mission completed";
+        return this.children.map((child) => child.describeNextTask(context, keyboardLayout)).join(` ${i18n.t("common:or")} `);
     }
 
     getTargetSystems(): StarSystemCoordinates[] {

src/ts/missions/nodes/logic/missionSequenceNode.ts

@@ -78,10 +78,10 @@ export class MissionSequenceNode implements MissionNode {
         return this.children.map((child) => child.describe(originSystemCoordinates)).join(" then ");
     }
 
-    describeNextTask(context: MissionContext): Promise<string> {
-        if (this.hasCompletedLock) return Promise.resolve("Mission completed");
-        if (this.activeChildIndex >= this.children.length) return Promise.resolve("Mission completed");
-        return this.children[this.activeChildIndex].describeNextTask(context);
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
+        if (this.hasCompletedLock) return "Mission completed";
+        if (this.activeChildIndex >= this.children.length) return "Mission completed";
+        return this.children[this.activeChildIndex].describeNextTask(context, keyboardLayout);
     }
 
     getTargetSystems(): StarSystemCoordinates[] {

src/ts/missions/nodes/logic/missionXorNode.ts

@@ -57,9 +57,9 @@ export class MissionXorNode implements MissionNode {
         return this.children.map((child) => child.describe(originSystemCoordinates)).join(" xor ");
     }
 
-    describeNextTask(context: MissionContext): Promise<string> {
-        if (this.hasCompletedLock) return Promise.resolve("Mission completed");
-        return Promise.resolve(this.children.map((child) => child.describeNextTask(context)).join(" xor "));
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string {
+        if (this.hasCompletedLock) return "Mission completed";
+        return this.children.map((child) => child.describeNextTask(context, keyboardLayout)).join(" xor ");
     }
 
     getTargetSystems(): StarSystemCoordinates[] {

src/ts/missions/nodes/missionNode.ts

@@ -49,8 +49,9 @@ export interface MissionNode {
     /**
      * Describes the next task to be done in the mission subtree.
      * @param context The mission context.
+     * @param keyboardLayout The keyboard layout map to localize the keys.
      */
-    describeNextTask(context: MissionContext): Promise<string>;
+    describeNextTask(context: MissionContext, keyboardLayout: Map<string, string>): string;
 
     /**
      * Returns the target systems of the subtree.

src/ts/starSystem/starSystemView.ts

@@ -37,12 +37,7 @@ import { ChunkForge } from "../planets/telluricPlanet/terrain/chunks/chunkForge"
 import { DefaultControls } from "../defaultControls/defaultControls";
 import { CharacterControls } from "../characterControls/characterControls";
 import { Assets } from "../assets/assets";
-import {
-    getForwardDirection,
-    getRotationQuaternion,
-    setRotationQuaternion,
-    translate
-} from "../uberCore/transforms/basicTransform";
+import { getForwardDirection, getRotationQuaternion, setRotationQuaternion, translate } from "../uberCore/transforms/basicTransform";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { NeutronStar } from "../stellarObjects/neutronStar/neutronStar";
 import { View } from "../utils/view";
@@ -179,6 +174,8 @@ export class StarSystemView implements View {
 
     readonly postProcessManager: PostProcessManager;
 
+    private keyboardLayoutMap: Map<string, string> = new Map();
+
     /**
      * Creates an empty star system view with a scene, a gui and a havok plugin
      * To fill it with a star system, use `loadStarSystem` and then `initStarSystem`
@@ -196,6 +193,10 @@ export class StarSystemView implements View {
         if (canvas === null) throw new Error("Canvas is null");
         this.bodyEditor.setCanvas(canvas);
 
+        getGlobalKeyboardLayoutMap().then((keyboardLayoutMap) => {
+            this.keyboardLayoutMap = keyboardLayoutMap;
+        });
+
         StarSystemInputs.map.toggleUi.on("complete", () => {
             this.isUiEnabled = !this.isUiEnabled;
             Sounds.MENU_HOVER_SOUND.play();
@@ -594,7 +595,7 @@ export class StarSystemView implements View {
         Materials.GRASS_DEPTH_MATERIAL.update(stellarObjects, this.scene.getActiveControls().getTransform().getAbsolutePosition(), deltaSeconds);
     }
 
-    public async updateAfterRender() {
+    public updateAfterRender() {
         if (this.isLoadingSystem) return;
 
         const starSystem = this.getStarSystem();
@@ -604,7 +605,6 @@ export class StarSystemView implements View {
         const activeControls = this.scene.getActiveControls();
 
         const nearestCelestialBody = starSystem.getNearestCelestialBody(activeControls.getTransform().getAbsolutePosition());
-        const nearestOrbitalObject = starSystem.getNearestOrbitalObject(activeControls.getTransform().getAbsolutePosition());
 
         this.bodyEditor.update(nearestCelestialBody, this.postProcessManager, this.scene);
 
@@ -614,7 +614,7 @@ export class StarSystemView implements View {
             physicsEngine: this.scene.getPhysicsEngine() as PhysicsEngineV2
         };
 
-        await this.spaceShipLayer.update(nearestOrbitalObject, activeControls.getTransform(), missionContext);
+        this.spaceShipLayer.update(activeControls.getTransform(), missionContext, this.keyboardLayoutMap);
 
         this.targetCursorLayer.update(activeControls.getActiveCameras()[0]);
         const targetLandingPad = this.spaceshipControls.spaceship.getTargetLandingPad();

src/ts/ui/currentMissionDisplay.ts

@@ -123,7 +123,7 @@ export class CurrentMissionDisplay {
         });
     }
 
-    public async update(context: MissionContext) {
+    public update(context: MissionContext, keyboardLayout: Map<string, string>) {
         const allMissions = this.player.completedMissions.concat(this.player.currentMissions);
         if (this.activeMission === null && this.player.currentMissions.length !== 0) {
             this.setMission(this.player.currentMissions[0]);
@@ -135,10 +135,7 @@ export class CurrentMissionDisplay {
 
         this.rootNode.classList.toggle("completed", this.activeMission.tree.isCompleted());
 
-        const newDescriptionText = this.activeMission.describe();
-        if (newDescriptionText !== this.missionPanelDescription.innerText) this.missionPanelDescription.innerText = newDescriptionText;
-
-        const nextTaskText = await this.activeMission.describeNextTask(context);
+        const nextTaskText = this.activeMission.describeNextTask(context, keyboardLayout);
         if (nextTaskText !== this.missionPanelNextTask.innerText) this.missionPanelNextTask.innerText = nextTaskText;
     }
 

src/ts/ui/spaceShipLayer.ts

@@ -16,7 +16,6 @@
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import overlayHTML from "../../html/helmetOverlay.html";
-import { OrbitalObject } from "../architecture/orbitalObject";
 import { parseSpeed } from "../utils/strings/parseToStrings";
 import { TransformNode } from "@babylonjs/core/Meshes";
 import { Vector3 } from "@babylonjs/core/Maths/math.vector";
@@ -90,7 +89,7 @@ export class SpaceShipLayer {
         this.currentTarget = target;
     }
 
-    public async update(currentBody: OrbitalObject, currentControls: TransformNode, missionContext: MissionContext) {
+    public update(currentControls: TransformNode, missionContext: MissionContext, keyboardLayout: Map<string, string>) {
         if (this.currentTarget !== null) {
             const directionWorld = this.currentTarget.getAbsolutePosition().subtract(currentControls.getAbsolutePosition()).normalize();
             const directionLocal = Vector3.TransformNormal(directionWorld, Matrix.Invert(currentControls.getWorldMatrix()));
@@ -103,7 +102,7 @@ export class SpaceShipLayer {
             this.targetDot.style.left = `${50 - 50 * directionLocal.x}%`;
         }
 
-        await this.currentMissionDisplay.update(missionContext);
+        this.currentMissionDisplay.update(missionContext, keyboardLayout);
     }
 
     displaySpeed(shipThrottle: number, speed: number) {