Translations POC

src/modules/index.ts

@@ -1,3 +1,4 @@
+import "./locales";
 import "./voronoi";
 import "./heightmap-generator";
 import "./features";

src/modules/locales.ts

@@ -0,0 +1,55 @@
+import i18next from "i18next";
+import i18nextHTTPBackend from "i18next-http-backend";
+import { isVowel } from "../utils";
+
+window.locale = "fr";
+
+function updateLabels() {
+  for (const label of document.querySelectorAll("[data-text]")) {
+    const translation = i18next.t(label.getAttribute("data-text"));
+    if (translation) label.innerHTML = translation;
+  }
+  for (const tip of document.querySelectorAll("[data-tip]")) {
+    const translation = i18next.t(tip.getAttribute("data-tip"));
+    if (translation) tip.setAttribute("data-tip", translation);
+  }
+}
+
+window.i18n = i18next.use(i18nextHTTPBackend).init(
+  {
+    lng: window.locale,
+    //debug: true,
+    backend: {
+      loadPath: "locales/{{lng}}/lang.json",
+    },
+  },
+  () => {
+    if (document.readyState === "complete") {
+      updateLabels();
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        updateLabels();
+      });
+    }
+  },
+);
+
+i18next.services.formatter.add("gender", (value, lng, options) => {
+  if (lng !== "fr") return value;
+  else if (options.gender === "feminine") {
+    return value.endsWith("en") ? `${value}ne` : `${value}e`;
+  } else return value;
+});
+
+i18next.services.formatter.add("of", (value, lng, options) => {
+  if (lng !== "fr") return value;
+  else if (isVowel(value[0].toLowerCase())) return `d'${value}`;
+  else return `de ${value}`;
+});
+
+i18next.services.formatter.add("the", (value, lng, options) => {
+  if (lng !== "fr") return value;
+  else if (isVowel(value[0].toLowerCase())) return `L'${value}`;
+  else if (options.gender === "feminine") return `La ${value}`;
+  else return `Le ${value}`;
+});

src/modules/names-generator.ts

@@ -1,3 +1,4 @@
+import i18next from "i18next";
 import { capitalize, isVowel, last, P, ra, rand } from "../utils";
 
 declare global {
@@ -263,7 +264,7 @@ class NamesGenerator {
     } else if (P(0.4)) return name; // 60% for cc and vc
 
     // define suffix
-    let suffix = "ia"; // standard suffix
+    let suffix = i18next.t("ia"); // standard suffix
 
     const rnd = Math.random(),
       l = name.length;

src/modules/states-generator.ts

@@ -1,8 +1,10 @@
 import { mean, median, sum } from "d3";
+import i18next from "i18next";
 import {
   byId,
   each,
   gauss,
+  gender,
   getAdjective,
   getMixedColor,
   getPolesOfInaccessibility,
@@ -56,6 +58,19 @@ export interface State {
   alert?: number;
 }
 
+gender.fr = {
+  ...gender.fr,
+  Confederation: "feminine",
+  Diarchy: "feminine",
+  Horde: "feminine",
+  League: "feminine",
+  Oligarchy: "feminine",
+  Tetrarchy: "feminine",
+  Theocracy: "feminine",
+  "Trade Company": "feminine",
+  Union: "feminine",
+};
+
 class StatesModule {
   private createStates() {
     const states: State[] = [{ i: 0, name: "Neutrals" } as State];
@@ -816,12 +831,25 @@ class StatesModule {
       "Marches",
     ];
     if (!state.formName) return state.name;
-    if (!state.name && state.formName) return `The ${state.formName}`;
+    const stateGender = gender[window.locale]?.[state.formName];
+    if (!state.name && state.formName)
+      return i18next.t("The {{noun}}", {
+        noun: i18next.t(state.formName),
+        gender: stateGender,
+      });
     const adjName =
       adjForms.includes(state.formName) && !/-| /.test(state.name);
     return adjName
-      ? `${getAdjective(state.name)} ${state.formName}`
-      : `${state.formName} of ${state.name}`;
+      ? i18next.t("{{adjective}} {{noun}}", {
+          adjective: getAdjective(state.name),
+          noun: i18next.t(state.formName),
+          gender: stateGender,
+        })
+      : i18next.t("{{noun}} of {{complement}}", {
+          noun: i18next.t(state.formName),
+          complement: state.name,
+          gender: stateGender,
+        });
   }
 }