Merge pull request #151 from BarthPaleologue/KeyboardLayout

Localize keybindings with KeyboardLayoutMap

src/locales/en-US/tutorials/flightTutorial.json

@@ -7,7 +7,7 @@
     "spaceShipRotationText2": "The yellow arrow on the screen is there to help you understand the orientation of the spaceship. Its opacity also indicates the rate of rotation.",
     "spaceShipRotationText3": "Try to get a feel for the controls by rotating the spaceship. You will get better at it with practice.",
     "spaceShipThrustTitle": "Spaceship Thrust",
-    "spaceShipThrustText1": "Assuming a QWERTY layout, you can throttle the main engines with {{keyIncrease}} and {{keyDecrease}}. Pressing {{keyKill}} will set the throttle to zero.",
+    "spaceShipThrustText1": "You can throttle the main engines with {{keyIncrease}} and {{keyDecrease}}. Pressing {{keyKill}} will set the throttle to zero.",
     "spaceShipThrustText2": "Your throttle is displayed as a vertical progress bar on the bottom right of the screen alongside your speed.",
     "spaceShipThrustText3": "Try flying around in the asteroid field to get familiar with the controls.",
     "spaceShipWarpDriveTitle": "Warp Drive",

src/locales/fr-FR/tutorials/flightTutorial.json

@@ -7,7 +7,7 @@
     "spaceShipRotationText2": "La flèche jaune à l'écran est là pour vous aider à comprendre l'orientation du vaisseau. Son opacité indique également la vitesse de rotation.",
     "spaceShipRotationText3": "Essayez de vous familiariser avec les commandes en faisant tourner le vaisseau. Vous vous améliorerez avec la pratique.",
     "spaceShipThrustTitle": "Propulsion du vaisseau",
-    "spaceShipThrustText1": "Sur un clavier QWERTY, vous pouvez ajuster la propulsion avec {{keyIncrease}} and {{keyDecrease}}. Presser {{keyKill}} mettra la propulsion à zéro.",
+    "spaceShipThrustText1": "Vous pouvez ajuster la propulsion avec {{keyIncrease}} et {{keyDecrease}}. Presser {{keyKill}} mettra la propulsion à zéro.",
     "spaceShipThrustText2": "Votre propulsion est affichée sous forme de barre de progression verticale en bas à droite de l'écran, à côté de votre vitesse.",
     "spaceShipThrustText3": "Essayez de voler dans le champ d'astéroïdes pour vous familiariser avec les commandes.",
     "spaceShipWarpDriveTitle": "Moteur à distorsion",

src/ts/cosmosJourneyer.ts

@@ -107,8 +107,8 @@ export class CosmosJourneyer {
         this.sidePanels = new SidePanels(this.starSystemView);
 
         this.mainMenu = new MainMenu(this.sidePanels, starSystemView);
-        this.mainMenu.onStartObservable.add(() => {
-            this.tutorialLayer.setTutorial(FlightTutorial.title, FlightTutorial.getContentPanelsHtml());
+        this.mainMenu.onStartObservable.add(async () => {
+            this.tutorialLayer.setTutorial(FlightTutorial.title, await FlightTutorial.getContentPanelsHtml());
 
             this.starSystemView.switchToSpaceshipControls();
         });
@@ -117,10 +117,10 @@ export class CosmosJourneyer {
             await this.loadSaveData(saveData);
         });
 
-        this.sidePanels.tutorialsPanelContent.onTutorialSelected.add((tutorial) => {
+        this.sidePanels.tutorialsPanelContent.onTutorialSelected.add(async (tutorial) => {
             this.mainMenu.hide();
             this.resume();
-            this.tutorialLayer.setTutorial(tutorial.title, tutorial.getContentPanelsHtml());
+            this.tutorialLayer.setTutorial(tutorial.title, await tutorial.getContentPanelsHtml());
             this.starSystemView.targetCursorLayer.setEnabled(true);
             this.starSystemView.getSpaceshipControls().spaceship.disableWarpDrive();
             this.starSystemView.getSpaceshipControls().spaceship.setMainEngineThrottle(0);

src/ts/spaceship/shipControls.ts

@@ -34,6 +34,7 @@ import { Transformable } from "../architecture/transformable";
 import { ManagesLandingPads } from "../utils/managesLandingPads";
 import { Sounds } from "../assets/sounds";
 import { LandingPadSize } from "../assets/procedural/landingPad/landingPad";
+import { getGlobalKeyboardLayoutMap } from "../utils/keyboardAPI";
 
 export class ShipControls implements Controls {
     readonly spaceship: Spaceship;
@@ -66,12 +67,14 @@ export class ShipControls implements Controls {
 
         this.scene = scene;
 
-        SpaceShipControlsInputs.map.toggleWarpDrive.on("complete", () => {
+        SpaceShipControlsInputs.map.toggleWarpDrive.on("complete", async () => {
             if (!this.spaceship.canEngageWarpDrive() && this.spaceship.getWarpDrive().isDisabled()) {
                 Sounds.CANNOT_ENGAGE_WARP_DRIVE.play();
                 return;
             }
 
+            const keyboardLayoutMap = await getGlobalKeyboardLayoutMap();
+
             this.spaceship.toggleWarpDrive();
             if (this.spaceship.getWarpDrive().isEnabled()) {
                 Sounds.ENGAGING_WARP_DRIVE.play();
@@ -88,7 +91,7 @@ export class ShipControls implements Controls {
                         this.closestLandableFacility.getTransform().getAbsolutePosition()
                     );
                     if (distanceToLandingFacility < 500e3) {
-                        const bindingsString = pressInteractionToStrings(SpaceShipControlsInputs.map.emitLandingRequest).join(", ");
+                        const bindingsString = pressInteractionToStrings(SpaceShipControlsInputs.map.emitLandingRequest, keyboardLayoutMap).join(", ");
                         createNotification(`Don't forget to send a landing request with ${bindingsString} before approaching the facility`, 5000);
                     }
                 }
@@ -125,13 +128,14 @@ export class ShipControls implements Controls {
         this.baseFov = this.thirdPersonCamera.fov;
         this.targetFov = this.baseFov;
 
-        this.spaceship.onLandingObservable.add(() => {
+        this.spaceship.onLandingObservable.add(async () => {
+            const keyboardLayoutMap = await getGlobalKeyboardLayoutMap();
             Sounds.LANDING_COMPLETE.play();
             Sounds.STRAUSS_BLUE_DANUBE.setVolume(0, 2);
             Sounds.STRAUSS_BLUE_DANUBE.stop(2);
 
             if (!this.spaceship.isLandedAtFacility()) {
-                const bindingsString = pressInteractionToStrings(StarSystemInputs.map.toggleSpaceShipCharacter).join(", ");
+                const bindingsString = pressInteractionToStrings(StarSystemInputs.map.toggleSpaceShipCharacter, keyboardLayoutMap).join(", ");
                 createNotification(i18n.t("notifications:landingComplete", { bindingsString: bindingsString }), 5000);
             }
         });

src/ts/starSystem/starSystemView.ts

@@ -73,6 +73,7 @@ import { SpaceStationLayer } from "../ui/spaceStation/spaceStationLayer";
 import { SeededStarSystemModel } from "./seededStarSystemModel";
 import { placeSpaceStations } from "../society/spaceStationPlacement";
 import { isSystemInHumanBubble } from "../society/starSystemSociety";
+import { getGlobalKeyboardLayoutMap } from "../utils/keyboardAPI";
 
 /**
  * The star system view is the part of Cosmos Journeyer responsible to display the current star system, along with the
@@ -294,10 +295,12 @@ export class StarSystemView implements View {
             this.targetCursorLayer.setTarget(null);
         });
 
-        StarSystemInputs.map.toggleSpaceShipCharacter.on("complete", () => {
+        StarSystemInputs.map.toggleSpaceShipCharacter.on("complete", async () => {
             const characterControls = this.getCharacterControls();
             const shipControls = this.getSpaceshipControls();
 
+            const keyboardLayoutMap = await getGlobalKeyboardLayoutMap();
+
             if (this.scene.getActiveControls() === shipControls) {
                 console.log("disembark");
 
@@ -332,7 +335,7 @@ export class StarSystemView implements View {
                     if (!(control instanceof AxisComposite)) {
                         throw new Error("Up down is not an axis composite");
                     }
-                    createNotification(i18n.t("notifications:howToLiftOff", { bindingsString: axisCompositeToString(control)[1][1] }), 5000);
+                    createNotification(i18n.t("notifications:howToLiftOff", { bindingsString: axisCompositeToString(control, keyboardLayoutMap)[1][1] }), 5000);
                 }
             }
         });

src/ts/tutorials/flightTutorial.ts

@@ -27,6 +27,7 @@ import rotationImageSrc from "../../asset/tutorials/flightTutorial/rotation.webp
 import thrustImageSrc from "../../asset/tutorials/flightTutorial/thrust.webp";
 import warpImageSrc from "../../asset/tutorials/flightTutorial/warp.webp";
 import congratsImageSrc from "../../asset/tutorials/flightTutorial/congrats.webp";
+import { getGlobalKeyboardLayoutMap } from "../utils/keyboardAPI";
 
 export const FlightTutorial: Tutorial = {
     title: i18n.t("tutorials:flightTutorial:title"),
@@ -43,15 +44,16 @@ export const FlightTutorial: Tutorial = {
         orbitalObjectIndex: 2
     },
 
-    getContentPanelsHtml(): string[] {
+    async getContentPanelsHtml(): Promise<string[]> {
+        const keybordLayoutMap = await getGlobalKeyboardLayoutMap();
         const welcomePanelHtml = `
         <div class="tutorialContent">
             <img src="${welcomeImageSrc}" alt="Welcome to Cosmos Journeyer">
             <p>${i18n.t("tutorials:flightTutorial:welcome")}</p>
             ${i18n.t("tutorials:common:navigationInfo", {
-                nextKeys: pressInteractionToStrings(TutorialControlsInputs.map.nextPanel).join(` ${i18n.t("common:or")} `),
-                previousKeys: pressInteractionToStrings(TutorialControlsInputs.map.prevPanel).join(` ${i18n.t("common:or")} `),
-                quitKeys: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial).join(` ${i18n.t("common:or")} `)
+                nextKeys: pressInteractionToStrings(TutorialControlsInputs.map.nextPanel, keybordLayoutMap).join(` ${i18n.t("common:or")} `),
+                previousKeys: pressInteractionToStrings(TutorialControlsInputs.map.prevPanel, keybordLayoutMap).join(` ${i18n.t("common:or")} `),
+                quitKeys: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial, keybordLayoutMap).join(` ${i18n.t("common:or")} `)
             })}
         </div>`;
 
@@ -68,15 +70,15 @@ export const FlightTutorial: Tutorial = {
         if (!(control instanceof AxisComposite)) {
             throw new Error("Expected control to be an AxisComposite");
         }
-        const throttleStrings = axisCompositeToString(control);
+        const throttleStrings = axisCompositeToString(control, keybordLayoutMap);
 
         const thrustPanelHtml = `
         <div class="tutorialContent">
             <h2>${i18n.t("tutorials:flightTutorial:spaceShipThrustTitle")}</h2>
             <p>${i18n.t("tutorials:flightTutorial:spaceShipThrustText1", {
                 keyIncrease: throttleStrings[1][1],
                 keyDecrease: throttleStrings[0][1],
-                keyKill: pressInteractionToStrings(SpaceShipControlsInputs.map.throttleToZero).join(` ${i18n.t("common:or")} `)
+                keyKill: pressInteractionToStrings(SpaceShipControlsInputs.map.throttleToZero, keybordLayoutMap).join(` ${i18n.t("common:or")} `)
             })}</p>
             <img src="${thrustImageSrc}" alt="Spaceship Thrust">
             <p>${i18n.t("tutorials:flightTutorial:spaceShipThrustText2")}</p>
@@ -87,7 +89,7 @@ export const FlightTutorial: Tutorial = {
         <div class="tutorialContent">
             <h2>${i18n.t("tutorials:flightTutorial:spaceShipWarpDriveTitle")}</h2>
             <p>${i18n.t("tutorials:flightTutorial:spaceShipWarpDriveText1")}</p>
-            <p>${i18n.t("tutorials:flightTutorial:spaceShipWarpDriveText2", { keyToggle: pressInteractionToStrings(SpaceShipControlsInputs.map.toggleWarpDrive).join(` ${i18n.t("common:or")} `) })}</p>
+            <p>${i18n.t("tutorials:flightTutorial:spaceShipWarpDriveText2", { keyToggle: pressInteractionToStrings(SpaceShipControlsInputs.map.toggleWarpDrive, keybordLayoutMap).join(` ${i18n.t("common:or")} `) })}</p>
             <p>${i18n.t("tutorials:flightTutorial:spaceShipWarpDriveText3")}</p>
             <img src="${warpImageSrc}" alt="Warp Drive">
         </div>`;
@@ -98,7 +100,7 @@ export const FlightTutorial: Tutorial = {
             <p>${i18n.t("tutorials:flightTutorial:congratulationsText1")}</p>
             
             ${i18n.t("tutorials:common:tutorialEnding", {
-                keyQuit: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial).join(` ${i18n.t("common:or")} `)
+                keyQuit: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial, keybordLayoutMap).join(` ${i18n.t("common:or")} `)
             })}
         </div>`;
 

src/ts/tutorials/templateTutorial.ts

@@ -4,30 +4,32 @@ import { Tutorial } from "./tutorial";
 
 import welcomeImageSrc from "../../asset/tutorials/flightTutorial/welcome.webp";
 import i18n from "../i18n";
+import { getGlobalKeyboardLayoutMap } from "../utils/keyboardAPI";
 
 export const TemplateTutorial: Tutorial = {
     title: "Template Tutorial",
     coverImageSrc: welcomeImageSrc,
     description: "This is a template tutorial to help building more tutorials!",
-    getContentPanelsHtml(): string[] {
+    async getContentPanelsHtml(): Promise<string[]> {
+        const keyboardLayoutMap = await getGlobalKeyboardLayoutMap();
         const welcomePanelHtml = `
         <div class="tutorialContent">
             <img src="${welcomeImageSrc}" alt="Welcome to Cosmos Journeyer">
             <p>Welcome, Commander! This is a tutorial about tutorials! Now this is meta.</p>
             
             ${i18n.t("tutorials:common:navigationInfo", {
                 // This displays a small internationalized text to explain the keys to navigate the tutorial
-                nextKeys: pressInteractionToStrings(TutorialControlsInputs.map.nextPanel).join(` ${i18n.t("common:or")} `),
-                previousKeys: pressInteractionToStrings(TutorialControlsInputs.map.prevPanel).join(` ${i18n.t("common:or")} `),
-                quitKeys: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial).join(` ${i18n.t("common:or")} `)
+                nextKeys: pressInteractionToStrings(TutorialControlsInputs.map.nextPanel, keyboardLayoutMap).join(` ${i18n.t("common:or")} `),
+                previousKeys: pressInteractionToStrings(TutorialControlsInputs.map.prevPanel, keyboardLayoutMap).join(` ${i18n.t("common:or")} `),
+                quitKeys: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial, keyboardLayoutMap).join(` ${i18n.t("common:or")} `)
             })}
         </div>`;
 
         const endPanelHtml = `
         <div class="tutorialContent">
             ${i18n.t("tutorials:common:tutorialEnding", {
                 // This displays a small internationalized text to explain the keys to end the tutorial
-                keyQuit: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial).join(` ${i18n.t("common:or")} `)
+                keyQuit: pressInteractionToStrings(TutorialControlsInputs.map.quitTutorial, keyboardLayoutMap).join(` ${i18n.t("common:or")} `)
             })}
         </div>`;
 

src/ts/tutorials/tutorial.ts

@@ -24,5 +24,5 @@ export interface Tutorial {
 
     universeObjectIdentifier?: UniverseObjectIdentifier;
 
-    getContentPanelsHtml(): string[];
+    getContentPanelsHtml(): Promise<string[]>;
 }