Translations POC

i18next.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'i18next-cli';
+import { type Plugin, ExtractedKey } from "i18next-cli";
+import { readFile } from "node:fs/promises";
+
+const HTMLPlugin: Plugin = {
+  name: "html-plugin",
+  async onEnd(keys: Map<string, ExtractedKey>) {
+    const content = await readFile("src/index.html", "utf-8");
+    const matches = content.matchAll(/data-(?:text|tip)="([^"]+)"/g);
+    for (const match of matches) {
+      const key = match[1];
+      keys.set(key, {key, defaultValue: key});
+    }
+  }
+};
+
+export default defineConfig({
+  locales: [
+    "en",
+    "fr"
+  ],
+  extract: {
+    input: "src/**/*.{js,ts}",
+    output: "public/locales/{{language}}/{{namespace}}.json",
+    defaultNS: "lang",
+    keySeparator: false
+  },
+  plugins: [
+    HTMLPlugin
+  ]
+});

package.json

@@ -21,7 +21,8 @@
     "test:browser": "vitest --config=vitest.browser.config.ts",
     "test:e2e": "playwright test",
     "lint": "biome check --write",
-    "format": "biome format --write"
+    "format": "biome format --write",
+    "i18n": "npx i18next-cli extract"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.13",
@@ -32,6 +33,7 @@
     "@types/polylabel": "^1.1.3",
     "@vitest/browser": "^4.0.18",
     "@vitest/browser-playwright": "^4.0.18",
+    "i18next-cli": "^1.49.6",
     "playwright": "^1.57.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
@@ -41,6 +43,8 @@
     "alea": "^1.0.1",
     "d3": "^7.9.0",
     "delaunator": "^5.0.1",
+    "i18next": "^25.8.17",
+    "i18next-http-backend": "^3.0.2",
     "polylabel": "^2.0.1"
   },
   "engines": {

public/main.js

@@ -220,6 +220,7 @@ oceanLayers
   .attr("height", graphHeight);
 
 document.addEventListener("DOMContentLoaded", async () => {
+  if (window.locale !== "en") await i18n;
   if (!location.hostname) {
     const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally";
     alertMessage.innerHTML = /* html */ `Fantasy Map Generator cannot run serverless. Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can easily run a local web-server`;

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,
+        });
   }
 }
 

src/utils/index.ts

@@ -10,6 +10,7 @@ window.lerp = lerp as typeof window.lerp;
 
 import {
   abbreviate,
+  gender,
   getAdjective,
   isVowel,
   list,
@@ -298,6 +299,7 @@ export {
   findGridCell,
   findPath,
   gauss,
+  gender,
   generateDate,
   generateGrid,
   generateSeed,

src/utils/languageUtils.ts

@@ -1,6 +1,10 @@
 import { last } from "./arrayUtils";
 import { P } from "./probabilityUtils";
 
+export const gender = {
+  fr: {},
+};
+
 /**
  * Check if character is a vowel
  * @param c - The character to check.
@@ -30,139 +34,302 @@ export const trimVowels = (string: string, minLength: number = 3) => {
  * @returns The adjective form of the noun.
  */
 export const getAdjective = (nounToBeAdjective: string) => {
-  const adjectivizationRules = [
-    {
-      name: "guo",
-      probability: 1,
-      condition: / Guo$/,
-      action: (noun: string) => noun.slice(0, -4),
-    },
-    {
-      name: "orszag",
-      probability: 1,
-      condition: /orszag$/,
-      action: (noun: string) =>
-        noun.length < 9 ? `${noun}ian` : noun.slice(0, -6),
-    },
-    {
-      name: "stan",
-      probability: 1,
-      condition: /stan$/,
-      action: (noun: string) =>
-        noun.length < 9 ? `${noun}i` : trimVowels(noun.slice(0, -4)),
-    },
-    {
-      name: "land",
-      probability: 1,
-      condition: /land$/,
-      action: (noun: string) => {
-        if (noun.length > 9) return noun.slice(0, -4);
-        const root = trimVowels(noun.slice(0, -4), 0);
-        if (root.length < 3) return `${noun}ic`;
-        if (root.length < 4) return `${root}lish`;
-        return `${root}ish`;
+  const adjectivizationRules = {
+    en: [
+      {
+        name: "guo",
+        probability: 1,
+        condition: / Guo$/,
+        action: (noun: string) => noun.slice(0, -4),
       },
-    },
-    {
-      name: "que",
-      probability: 1,
-      condition: /que$/,
-      action: (noun: string) => noun.replace(/que$/, "can"),
-    },
-    {
-      name: "a",
-      probability: 1,
-      condition: /a$/,
-      action: (noun: string) => `${noun}n`,
-    },
-    {
-      name: "o",
-      probability: 1,
-      condition: /o$/,
-      action: (noun: string) => noun.replace(/o$/, "an"),
-    },
-    {
-      name: "u",
-      probability: 1,
-      condition: /u$/,
-      action: (noun: string) => `${noun}an`,
-    },
-    {
-      name: "i",
-      probability: 1,
-      condition: /i$/,
-      action: (noun: string) => `${noun}an`,
-    },
-    {
-      name: "e",
-      probability: 1,
-      condition: /e$/,
-      action: (noun: string) => `${noun}an`,
-    },
-    {
-      name: "ay",
-      probability: 1,
-      condition: /ay$/,
-      action: (noun: string) => `${noun}an`,
-    },
-    {
-      name: "os",
-      probability: 1,
-      condition: /os$/,
-      action: (noun: string) => {
-        const root = trimVowels(noun.slice(0, -2), 0);
-        if (root.length < 4) return noun.slice(0, -1);
-        return `${root}ian`;
+      {
+        name: "orszag",
+        probability: 1,
+        condition: /orszag$/,
+        action: (noun: string) =>
+          noun.length < 9 ? `${noun}ian` : noun.slice(0, -6),
       },
-    },
-    {
-      name: "es",
-      probability: 1,
-      condition: /es$/,
-      action: (noun: string) => {
-        const root = trimVowels(noun.slice(0, -2), 0);
-        if (root.length > 7) return noun.slice(0, -1);
-        return `${root}ian`;
+      {
+        name: "stan",
+        probability: 1,
+        condition: /stan$/,
+        action: (noun: string) =>
+          noun.length < 9 ? `${noun}i` : trimVowels(noun.slice(0, -4)),
       },
-    },
-    {
-      name: "l",
-      probability: 0.8,
-      condition: /l$/,
-      action: (noun: string) => `${noun}ese`,
-    },
-    {
-      name: "n",
-      probability: 0.8,
-      condition: /n$/,
-      action: (noun: string) => `${noun}ese`,
-    },
-    {
-      name: "ad",
-      probability: 0.8,
-      condition: /ad$/,
-      action: (noun: string) => `${noun}ian`,
-    },
-    {
-      name: "an",
-      probability: 0.8,
-      condition: /an$/,
-      action: (noun: string) => `${noun}ian`,
-    },
-    {
-      name: "ish",
-      probability: 0.25,
-      condition: /^[a-zA-Z]{6}$/,
-      action: (noun: string) => `${trimVowels(noun.slice(0, -1))}ish`,
-    },
-    {
-      name: "an",
-      probability: 0.5,
-      condition: /^[a-zA-Z]{0,7}$/,
-      action: (noun: string) => `${trimVowels(noun)}an`,
-    },
-  ];
-  for (const rule of adjectivizationRules) {
+      {
+        name: "land",
+        probability: 1,
+        condition: /land$/,
+        action: (noun: string) => {
+          if (noun.length > 9) return noun.slice(0, -4);
+          const root = trimVowels(noun.slice(0, -4), 0);
+          if (root.length < 3) return `${noun}ic`;
+          if (root.length < 4) return `${root}lish`;
+          return `${root}ish`;
+        },
+      },
+      {
+        name: "que",
+        probability: 1,
+        condition: /que$/,
+        action: (noun: string) => noun.replace(/que$/, "can"),
+      },
+      {
+        name: "a",
+        probability: 1,
+        condition: /a$/,
+        action: (noun: string) => `${noun}n`,
+      },
+      {
+        name: "o",
+        probability: 1,
+        condition: /o$/,
+        action: (noun: string) => noun.replace(/o$/, "an"),
+      },
+      {
+        name: "u",
+        probability: 1,
+        condition: /u$/,
+        action: (noun: string) => `${noun}an`,
+      },
+      {
+        name: "i",
+        probability: 1,
+        condition: /i$/,
+        action: (noun: string) => `${noun}an`,
+      },
+      {
+        name: "e",
+        probability: 1,
+        condition: /e$/,
+        action: (noun: string) => `${noun}an`,
+      },
+      {
+        name: "ay",
+        probability: 1,
+        condition: /ay$/,
+        action: (noun: string) => `${noun}an`,
+      },
+      {
+        name: "os",
+        probability: 1,
+        condition: /os$/,
+        action: (noun: string) => {
+          const root = trimVowels(noun.slice(0, -2), 0);
+          if (root.length < 4) return noun.slice(0, -1);
+          return `${root}ian`;
+        },
+      },
+      {
+        name: "es",
+        probability: 1,
+        condition: /es$/,
+        action: (noun: string) => {
+          const root = trimVowels(noun.slice(0, -2), 0);
+          if (root.length > 7) return noun.slice(0, -1);
+          return `${root}ian`;
+        },
+      },
+      {
+        name: "l",
+        probability: 0.8,
+        condition: /l$/,
+        action: (noun: string) => `${noun}ese`,
+      },
+      {
+        name: "n",
+        probability: 0.8,
+        condition: /n$/,
+        action: (noun: string) => `${noun}ese`,
+      },
+      {
+        name: "ad",
+        probability: 0.8,
+        condition: /ad$/,
+        action: (noun: string) => `${noun}ian`,
+      },
+      {
+        name: "an",
+        probability: 0.8,
+        condition: /an$/,
+        action: (noun: string) => `${noun}ian`,
+      },
+      {
+        name: "ish",
+        probability: 0.25,
+        condition: /^[a-zA-Z]{6}$/,
+        action: (noun: string) => `${trimVowels(noun.slice(0, -1))}ish`,
+      },
+      {
+        name: "an",
+        probability: 0.5,
+        condition: /^[a-zA-Z]{0,7}$/,
+        action: (noun: string) => `${trimVowels(noun)}an`,
+      },
+    ],
+    fr: [
+      {
+        name: "guo",
+        probability: 1,
+        condition: / Guo$/,
+        action: (noun: string) => noun.slice(0, -4),
+      },
+      {
+        name: "orszag",
+        probability: 1,
+        condition: /orszag$/,
+        action: (noun: string) =>
+          noun.length < 9 ? `${noun}ian` : noun.slice(0, -6),
+      },
+      {
+        name: "stan",
+        probability: 1,
+        condition: /stan$/,
+        action: (noun: string) => `${noun}ais`,
+      },
+      {
+        name: "land",
+        probability: 1,
+        condition: /land$/,
+        action: (noun: string) => `${noun}ais`,
+      },
+      {
+        name: "que",
+        probability: 1,
+        condition: /que$/,
+        action: (noun: string) => noun.replace(/que$/, "cain"),
+      },
+      {
+        name: "ia",
+        probability: 1,
+        condition: /ia$/,
+        action: (noun: string) => noun.replace(/a$/, "en"),
+      },
+      {
+        name: "a",
+        probability: 1,
+        condition: /a$/,
+        action: (noun: string) => `${noun}n`,
+      },
+      {
+        name: "o",
+        probability: 1,
+        condition: /o$/,
+        action: (noun: string) => `${noun}lais`,
+      },
+      {
+        name: "u",
+        probability: 1,
+        condition: /u$/,
+        action: (noun: string) => `${noun}en`,
+      },
+      {
+        name: "i",
+        probability: 1,
+        condition: /i$/,
+        action: (noun: string) => `${noun}en`,
+      },
+      {
+        name: "ie",
+        probability: 1,
+        condition: /e$/,
+        action: (noun: string) => `${noun}n`,
+      },
+      {
+        name: "e",
+        probability: 0.5,
+        condition: /e$/,
+        action: (noun: string) => noun.replace(/e$/, "ais"),
+      },
+      {
+        name: "e",
+        probability: 0.5,
+        condition: /e$/,
+        action: (noun: string) => noun.replace(/e$/, "ois"),
+      },
+      {
+        name: "e",
+        probability: 0.5,
+        condition: /e$/,
+        action: (noun: string) => noun.replace(/e$/, "ien"),
+      },
+      {
+        name: "e",
+        probability: 1,
+        condition: /e$/,
+        action: (noun: string) => noun.replace(/e$/, "éen"),
+      },
+      {
+        name: "ay",
+        probability: 1,
+        condition: /ay$/,
+        action: (noun: string) => `${noun}en`,
+      },
+      {
+        name: "os",
+        probability: 1,
+        condition: /os$/,
+        action: (noun: string) => {
+          const root = trimVowels(noun.slice(0, -2), 0);
+          if (root.length < 4) return noun.slice(0, -1);
+          return `${root}ien`;
+        },
+      },
+      {
+        name: "es",
+        probability: 1,
+        condition: /es$/,
+        action: (noun: string) => {
+          const root = trimVowels(noun.slice(0, -2), 0);
+          if (root.length > 7) return noun.slice(0, -1);
+          return `${root}ien`;
+        },
+      },
+      {
+        name: "l",
+        probability: 0.8,
+        condition: /l$/,
+        action: (noun: string) => `${noun}ais`,
+      },
+      {
+        name: "n",
+        probability: 0.8,
+        condition: /n$/,
+        action: (noun: string) => `${noun}ais`,
+      },
+      {
+        name: "n",
+        probability: 0.5,
+        condition: /n$/,
+        action: (noun: string) => `${noun}ois`,
+      },
+      {
+        name: "ad",
+        probability: 0.8,
+        condition: /ad$/,
+        action: (noun: string) => `${noun}ien`,
+      },
+      {
+        name: "an",
+        probability: 0.8,
+        condition: /an$/,
+        action: (noun: string) => `${noun}ien`,
+      },
+      {
+        name: "ish",
+        probability: 0.25,
+        condition: /^[a-zA-Z]{6}$/,
+        action: (noun: string) => `${trimVowels(noun.slice(0, -1))}ish`,
+      },
+      {
+        name: "an",
+        probability: 0.5,
+        condition: /^[a-zA-Z]{0,7}$/,
+        action: (noun: string) => `${trimVowels(noun)}an`,
+      },
+    ],
+  };
+  for (const rule of adjectivizationRules[window.locale]) {
     if (P(rule.probability) && rule.condition.test(nounToBeAdjective)) {
       return rule.action(nounToBeAdjective);
     }