Glue our translations to the simulator. (#925)

It doesn't need much text so no need for it to have a translation
mechanism of its own. Could revisit if there's third-party demand
- if we had translations at that point we could just inline them.

Co-authored-by: Robert Knight <[email protected]>

Author: microbit-matt-hillsdon

lang/ui.en.json

@@ -779,6 +779,14 @@
     "defaultMessage": "Simulator actions",
     "description": "Aria label for the bar with simulator actions"
   },
+  "simulator-button-a": {
+    "defaultMessage": "Button A",
+    "description": "Button A aria label on the simulator board"
+  },
+  "simulator-button-b": {
+    "defaultMessage": "Button B",
+    "description": "Button B aria label on the simulator board"
+  },
   "simulator-button-hold-label": {
     "defaultMessage": "Hold button {button}",
     "description": "Aria label for simulator toggle button"
@@ -939,6 +947,10 @@
     "defaultMessage": "Sound level",
     "description": "Sound level title"
   },
+  "simulator-start-simulator": {
+    "defaultMessage": "Start simulator",
+    "description": "Aria label for the large play button on the simulator board"
+  },
   "simulator-stop": {
     "defaultMessage": "Stop",
     "description": "Aria label for the stop simulator button"

lang/ui.fr.json

@@ -778,6 +778,14 @@
     "defaultMessage": "Simulator actions",
     "description": "Aria label for the bar with simulator actions"
   },
+  "simulator-button-a": {
+    "defaultMessage": "Button A",
+    "description": "Button A aria label on the simulator board"
+  },
+  "simulator-button-b": {
+    "defaultMessage": "Button B",
+    "description": "Button B aria label on the simulator board"
+  },
   "simulator-button-hold-label": {
     "defaultMessage": "Hold button {button}",
     "description": "Aria label for simulator toggle button"
@@ -938,6 +946,10 @@
     "defaultMessage": "Sound level",
     "description": "Sound level title"
   },
+  "simulator-start-simulator": {
+    "defaultMessage": "Start simulator",
+    "description": "Aria label for the large play button on the simulator board"
+  },
   "simulator-stop": {
     "defaultMessage": "Stop",
     "description": "Aria label for the stop simulator button"

lang/ui.lol.json

@@ -778,6 +778,14 @@
     "defaultMessage": "Simulator actions",
     "description": "Aria label for the bar with simulator actions"
   },
+  "simulator-button-a": {
+    "defaultMessage": "Button A",
+    "description": "Button A aria label on the simulator board"
+  },
+  "simulator-button-b": {
+    "defaultMessage": "Button B",
+    "description": "Button B aria label on the simulator board"
+  },
   "simulator-button-hold-label": {
     "defaultMessage": "Hold button {button}",
     "description": "Aria label for simulator toggle button"
@@ -938,6 +946,10 @@
     "defaultMessage": "Sound level",
     "description": "Sound level title"
   },
+  "simulator-start-simulator": {
+    "defaultMessage": "Start simulator",
+    "description": "Aria label for the large play button on the simulator board"
+  },
   "simulator-stop": {
     "defaultMessage": "Stop",
     "description": "Aria label for the stop simulator button"

src/device/simulator.ts

@@ -111,6 +111,11 @@ export type SensorStateKey = Extract<
   | "buttonB"
 >;
 
+interface Config {
+  language: string;
+  translations: Record<string, string>;
+}
+
 export interface DataLog {
   headings: string[];
   data: DataLogRow[];
@@ -250,6 +255,10 @@ export class SimulatorDeviceConnection
     this.emit(EVENT_FLASH);
   }
 
+  configure(config: Config): void {
+    this.postMessage("config", config);
+  }
+
   private notifyResetComms() {
     // Might be nice to rework so this was all about connection state changes.
     this.emit(EVENT_SERIAL_RESET, {});

src/messages/ui.en.json

@@ -1765,6 +1765,18 @@
       "value": "Simulator actions"
     }
   ],
+  "simulator-button-a": [
+    {
+      "type": 0,
+      "value": "Button A"
+    }
+  ],
+  "simulator-button-b": [
+    {
+      "type": 0,
+      "value": "Button B"
+    }
+  ],
   "simulator-button-hold-label": [
     {
       "type": 0,
@@ -2075,6 +2087,12 @@
       "value": "Sound level"
     }
   ],
+  "simulator-start-simulator": [
+    {
+      "type": 0,
+      "value": "Start simulator"
+    }
+  ],
   "simulator-stop": [
     {
       "type": 0,

src/messages/ui.fr.json

@@ -1765,6 +1765,18 @@
       "value": "Simulator actions"
     }
   ],
+  "simulator-button-a": [
+    {
+      "type": 0,
+      "value": "Button A"
+    }
+  ],
+  "simulator-button-b": [
+    {
+      "type": 0,
+      "value": "Button B"
+    }
+  ],
   "simulator-button-hold-label": [
     {
       "type": 0,
@@ -2075,6 +2087,12 @@
       "value": "Sound level"
     }
   ],
+  "simulator-start-simulator": [
+    {
+      "type": 0,
+      "value": "Start simulator"
+    }
+  ],
   "simulator-stop": [
     {
       "type": 0,

src/messages/ui.lol.json

@@ -1709,6 +1709,18 @@
       "value": "Simulator actions"
     }
   ],
+  "simulator-button-a": [
+    {
+      "type": 0,
+      "value": "Button A"
+    }
+  ],
+  "simulator-button-b": [
+    {
+      "type": 0,
+      "value": "Button B"
+    }
+  ],
   "simulator-button-hold-label": [
     {
       "type": 0,
@@ -2019,6 +2031,12 @@
       "value": "Sound level"
     }
   ],
+  "simulator-start-simulator": [
+    {
+      "type": 0,
+      "value": "Start simulator"
+    }
+  ],
   "simulator-stop": [
     {
       "type": 0,

src/simulator/Simulator.tsx

@@ -5,7 +5,7 @@
  */
 import { AspectRatio, Box, Flex, useToken, VStack } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
-import { useIntl } from "react-intl";
+import { IntlShape, useIntl } from "react-intl";
 import HideSplitViewButton from "../common/SplitView/HideSplitViewButton";
 import { useResizeObserverContentRect } from "../common/use-resize-observer";
 import { topBarHeight } from "../deployment/misc";
@@ -53,6 +53,9 @@ const Simulator = ({
       sim.dispose();
     };
   }, []);
+  useEffect(() => {
+    updateTranslations(simulator.current, intl);
+  }, [simulator, intl]);
   const simControlsRef = useRef<HTMLDivElement>(null);
   const contentRect = useResizeObserverContentRect(simControlsRef);
   const simHeight = contentRect?.height ?? 0;
@@ -118,4 +121,20 @@ const Simulator = ({
   );
 };
 
+const updateTranslations = (
+  simulator: SimulatorDeviceConnection,
+  intl: IntlShape
+) => {
+  const config = {
+    language: intl.locale,
+    translations: Object.fromEntries(
+      ["button-a", "button-b", "touch-logo", "start-simulator"].map((k) => [
+        k,
+        intl.formatMessage({ id: "simulator-" + k }),
+      ])
+    ),
+  };
+  simulator.configure(config);
+};
+
 export default Simulator;