Merge branch 'translation'

Author: tesseralis

public/locales/en.json

@@ -0,0 +1,33 @@
+{
+  "menu": {
+    "title": "Qaboom!",
+    "1_player": "1 Player",
+    "2_player": "2 Player",
+    "high_scores": "High Scores",
+    "credits": "Credits",
+    "level": "Level {level}"
+  },
+  "credits": {
+    "title": "Credits",
+    "concept_development": "Concept & Development",
+    "content_coord": "Content & Coordination",
+    "music": "Music",
+    "support": "Support",
+    "graphic_design": "Arcade Machine Graphic Design",
+    "building": "Arcade Machine Building",
+    "funded_by": "Funded by",
+    "part_of": "Part of quantum-arcade.org by"
+  },
+  "game": {
+    "go": "GO!",
+    "lvl": "Lvl {level}",
+    "hold": "HOLD",
+    "boom_text": {
+      "small": "boom.",
+      "medium": "BOOM!",
+      "large": "QABOOM!",
+      "all_clear": "ALL QLEAR!"
+    },
+    "enter_name": "Enter your name"
+  }
+}

public/locales/fake.json

@@ -0,0 +1,33 @@
+{
+  "menu": {
+    "title": "FFFFFF",
+    "1_player": "FFFFFF",
+    "2_player": "FFFFFF",
+    "high_scores": "FFFFFF",
+    "credits": "FFFFFF",
+    "level": "{level} FFFFFF"
+  },
+  "credits": {
+    "title": "FFFFFF",
+    "concept_development": "FFFFFF",
+    "content_coord": "FFFFFF",
+    "music": "FFFFFF",
+    "support": "FFFFFF",
+    "graphic_design": "FFFFFF",
+    "building": "FFFFFF",
+    "funded_by": "FFFFFF",
+    "part_of": "FFFFFF"
+  },
+  "game": {
+    "go": "FFFFFF",
+    "lvl": "FFF {level}",
+    "hold": "FFFFFF",
+    "boom_text": {
+      "small": "ffff.",
+      "medium": "FFFF!",
+      "large": "FFFFFF!",
+      "all_clear": "FFF FFFF!"
+    },
+    "enter_name": "FFFFFF"
+  }
+}

src/Game.ts

@@ -11,6 +11,7 @@ import { randomInt } from "mathjs";
 import { campaign } from "./levels";
 import Credits from "./nodes/Credits";
 import HighScoreScreen from "./nodes/HighScoreScreen";
+import { switchLanguage } from "./i18n";
 
 const IDLE_TIMEOUT = 60 * 1000;
 
@@ -35,6 +36,9 @@ export default class Game {
       if (e.key === inputs.refresh) {
         window.location.reload();
       }
+      if (e.key === inputs.translate) {
+        switchLanguage(app.stage);
+      }
     });
 
     const background = new Background();

src/i18n.ts

@@ -0,0 +1,88 @@
+import { AbstractText, Container } from "pixi.js";
+
+let languages: string[] = [];
+const strings: Record<string, any> = {};
+let currentLang: string = "en";
+
+export async function loadLanguages(langs: string[], startLang: string) {
+  languages = langs;
+  for (const code of languages) {
+    const response = await fetch(`/locales/${code}.json`, {
+      cache: "no-cache",
+    });
+    strings[code] = await response.json();
+  }
+  currentLang = startLang;
+}
+
+export async function switchLanguage(node: any) {
+  const currentIndex = languages.findIndex((code) => getCurrentLang() === code);
+  const code = languages[(currentIndex + 1) % languages.length];
+  changeLanguage(code);
+  refreshI18nText(node);
+}
+
+/**
+ * Set a translatable element with the provided tag
+ * that will be re-translated when `refreshI18Text` is called.
+ */
+export function setI18nKey(
+  node: AbstractText,
+  key: string,
+  format: (t: string) => string = (t) => t
+) {
+  (node as any).i18nKey = key;
+  (node as any).i18nFormat = format;
+  translate(node);
+}
+
+/**
+ * Retranslate all translateable text in the current language.
+ */
+export function refreshI18nText(node: any) {
+  if (node instanceof Container) {
+    for (let child of node.children) {
+      refreshI18nText(child);
+    }
+  }
+  if (node instanceof AbstractText) {
+    translate(node);
+  }
+}
+
+export function getCurrentLang() {
+  return currentLang;
+}
+
+export function changeLanguage(newLang: string) {
+  if (!Object.keys(strings).includes(newLang)) {
+    throw new Error(`Unknown code: ${newLang}`);
+  }
+  currentLang = newLang;
+}
+
+export function setFormat(node: AbstractText, format: (t: string) => string) {
+  (node as any).i18nFormat = format;
+  translate(node);
+}
+
+function translate(node: AbstractText) {
+  const key = (node as any).i18nKey;
+  if (!key) {
+    return;
+  }
+  const format = (node as any).i18nFormat;
+  node.text = format(getNestedKey(strings[currentLang], key.split(".")));
+}
+
+function getNestedKey(object: Record<string, any>, path: string[]) {
+  const [head, ...tail] = path;
+  const value = object[head];
+  if (tail.length === 0) {
+    return value;
+  }
+  if (value == null) {
+    return undefined;
+  }
+  return getNestedKey(value, tail);
+}

src/inputs.ts

@@ -9,6 +9,7 @@ export interface PlayerInput {
 export const inputs = {
   refresh: "r",
   pause: "p",
+  translate: "t",
   player1: {
     left: "a",
     right: "d",

src/main.ts

@@ -1,7 +1,11 @@
 import Game from "./Game";
+import { loadLanguages } from "./i18n";
 
 (async () => {
-  // TODO pass in configuration and translations.
+  const urlParams = new URLSearchParams(window.location.search);
+  await loadLanguages(["en"], urlParams.get("lang") || "en");
+  // load "fake" language for testing translations
+  // await loadLanguages(["en", "fake"], urlParams.get("lang") || "en");
   const game = new Game();
   await game.start();
 })();

src/nodes/Board.ts

@@ -27,6 +27,7 @@ import { playScoreSound, playSound } from "../audio";
 import QubitPair from "./QubitPair";
 import GatePiece from "./GatePiece";
 import { animate } from "motion";
+import { setI18nKey } from "../i18n";
 
 export const startingCell = new Point(Math.floor(BOARD_WIDTH / 2 - 1), 0);
 const RECT_MARGIN = PIECE_RADIUS / 2;
@@ -305,22 +306,22 @@ export default class Board extends GameNode {
     if (!(this.current instanceof MeasurementPiece)) {
       return;
     }
-    const boomText = this.isEmpty()
-      ? "ALL QLEAR!"
+    const boomKey = this.isEmpty()
+      ? "all_clear"
       : count >= 15
-      ? `QABOOM!`
+      ? "large"
       : count >= 6
-      ? "BOOM!"
-      : "boom.";
+      ? "medium"
+      : "small";
     const text = new HTMLText({
-      text: boomText,
       style: new TextStyle({
         fontSize: Math.min(BOARD_WIDTH * CELL_SIZE * 1.25, 60 + 5 * count),
         fontFamily: TEXT_FONT,
         fontWeight: "bold",
         fill: theme.colors.primary,
       }),
     });
+    setI18nKey(text, `game.boom_text.${boomKey}`);
     // Have the text above everything else
     text.zIndex = 100;
     text.anchor = { x: 0.5, y: 0.5 };

src/nodes/Countdown.ts

@@ -4,6 +4,7 @@ import GameNode from "./GameNode";
 import { playScoreSound, playSound } from "../audio";
 import { delay } from "../util";
 import { pulse } from "../animations";
+import { setI18nKey } from "../i18n";
 
 export default class Countdown extends GameNode {
   text: HTMLText;
@@ -33,7 +34,7 @@ export default class Countdown extends GameNode {
       pulse(this.text, 1.5);
       await delay(1000 * (5 / 8));
     }
-    this.text.text = "GO!";
+    setI18nKey(this.text, "game.go");
     playSound("levelUp");
     await delay(1000);
   }

src/nodes/Credits.ts

@@ -7,6 +7,7 @@ import imaginaryLogoPath from "../assets/img/imaginary-logo.png";
 import mpiLogoPath from "../assets/img/mpi-logo.png";
 import { inputs } from "../inputs";
 import { LayoutContainer } from "@pixi/layout/components";
+import { setI18nKey } from "../i18n";
 
 export default class Credits extends GameNode {
   onFinish?: () => void;
@@ -40,7 +41,6 @@ export default class Credits extends GameNode {
 
     const titleText = new HTMLText({
       layout: true,
-      text: "Credits",
       style: {
         align: "center",
         fill: theme.colors.primary,
@@ -49,6 +49,7 @@ export default class Credits extends GameNode {
         fontSize: 72,
       },
     });
+    setI18nKey(titleText, "credits.title");
     credits.addChild(titleText);
 
     const columns = new Container({
@@ -77,28 +78,30 @@ export default class Credits extends GameNode {
     columns.addChild(column1);
     columns.addChild(column2);
 
-    column1.addChild(this.drawCredit("Concept & Development", "Nat Alison"));
+    column1.addChild(
+      this.drawCredit("credits.concept_development", "Nat Alison")
+    );
 
     column1.addChild(
       this.drawCredit(
-        "Content & Coordination",
+        "credits.content_coord",
         "Christian Stussak",
         "Andreas Matt",
         "Skye Rothstein"
       )
     );
-    column1.addChild(this.drawCredit("Music", "Landis Seralian"));
+    column1.addChild(this.drawCredit("credits.music", "Landis Seralian"));
 
-    column2.addChild(this.drawCredit("Support", "Karla Schön", "Oliver Schön"));
     column2.addChild(
-      this.drawCredit("Arcade Machine Graphic Design", "Eric Londaits")
+      this.drawCredit("credits.support", "Karla Schön", "Oliver Schön")
+    );
+    column2.addChild(
+      this.drawCredit("credits.graphic_design", "Eric Londaits")
     ),
-      column2.addChild(
-        this.drawCredit("Arcade Machine Building", "Retr-O-Mat")
-      );
+      column2.addChild(this.drawCredit("credits.building", "Retr-O-Mat"));
   }
 
-  drawCredit(title: string, ...names: string[]) {
+  drawCredit(key: string, ...names: string[]) {
     const credit = new Container({
       layout: {
         display: "flex",
@@ -108,7 +111,6 @@ export default class Credits extends GameNode {
     });
     const titleText = new HTMLText({
       layout: true,
-      text: title,
       style: {
         align: "center",
         fill: theme.colors.primary,
@@ -117,6 +119,7 @@ export default class Credits extends GameNode {
         fontSize: 40,
       },
     });
+    setI18nKey(titleText, key);
     credit.addChild(titleText);
 
     for (let [_i, name] of names.entries()) {
@@ -169,7 +172,6 @@ export default class Credits extends GameNode {
     const ministryLogoTexture = await Assets.load(ministryLogoPath);
     const titleText = new HTMLText({
       layout: true,
-      text: "Funded by",
       style: {
         align: "center",
         fill: "black",
@@ -178,6 +180,7 @@ export default class Credits extends GameNode {
         fontSize: 40,
       },
     });
+    setI18nKey(titleText, "credits.funded_by");
     fundedBy.addChild(titleText);
     fundedBy.addChild(this.drawImage(ministryLogoTexture, 250));
     logos.addChild(fundedBy);
@@ -194,7 +197,6 @@ export default class Credits extends GameNode {
     const mpiLogoTexture = await Assets.load(mpiLogoPath);
     const titleText2 = new HTMLText({
       layout: true,
-      text: "Part of quantum-arcade.org by",
       style: {
         align: "center",
         fill: "black",
@@ -203,6 +205,7 @@ export default class Credits extends GameNode {
         fontSize: 40,
       },
     });
+    setI18nKey(titleText2, "credits.part_of");
     partOf.addChild(titleText2);
     const partOfSprites = new Container({
       layout: {

src/nodes/HighScoreScreen.ts

@@ -4,6 +4,7 @@ import GameNode from "./GameNode";
 import { HEIGHT, TEXT_FONT, theme, WIDTH } from "../constants";
 import { getScores, type Score } from "../storage";
 import { inputs } from "../inputs";
+import { setI18nKey } from "../i18n";
 
 // The high score screen displayed in the main menu
 // TODO: deduplicate from `ScoreScreen`
@@ -27,14 +28,14 @@ export default class HighScoreScreen extends GameNode {
     );
     const scores = getScores();
     const highScoresLabel = new HTMLText({
-      text: "High Scores",
       style: {
         fill: theme.colors.primary,
         fontFamily: TEXT_FONT,
         fontSize: 72,
         fontWeight: "bold",
       },
     });
+    setI18nKey(highScoresLabel, "menu.high_scores");
     highScoresLabel.position.y = -300;
     highScoresLabel.anchor = { x: 0.5, y: 0.5 };
     this.view.addChild(highScoresLabel);