Merge 019cea2a6b into 23871b3311

i18next.config.ts

@@ -0,0 +1,33 @@
+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-(?:html|text|tip)="([^"]+)"/g);
+    for (const match of matches) {
+      const key = match[1].replace(/&quot;/g, '"');
+      keys.set(key, {key, defaultValue: key});
+    }
+  }
+};
+
+export default defineConfig({
+  locales: [
+    "en",
+    "fr",
+    "zh"
+  ],
+  extract: {
+    input: "src/**/*.{js,ts}",
+    output: "public/locales/{{language}}/{{namespace}}.json",
+    defaultNS: "lang",
+    keySeparator: "::",
+    nsSeparator: 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",
@@ -33,6 +34,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",
@@ -42,6 +44,8 @@
     "alea": "^1.0.1",
     "d3": "^7.9.0",
     "delaunator": "^5.0.1",
+    "i18next": "^25.8.17",
+    "i18next-http-backend": "^3.0.2",
     "lineclip": "^2.0.0",
     "polylabel": "^2.0.1"
   },

public/icons.css

@@ -234,10 +234,10 @@
 .icon-temperature-low:before {content:'\f76b';} /* '' */
 
 /* Amended FA icons */
-.icon-sort-name-up:after {font-size:.9em;content:'\f15d';}
+.icon-sort-name-up:after {font-size:.9em;content:'\00a0\f15d';}
-.icon-sort-name-down:after {font-size:.9em;content:'\f15e';}
+.icon-sort-name-down:after {font-size:.9em;content:'\00a0\f15e';}
-.icon-sort-number-up:after {font-size:.9em;content:'\f162';}
+.icon-sort-number-up:after {font-size:.9em;content:'\00a0\f162';}
-.icon-sort-number-down:after {font-size:.9em;content:'\f163';}
+.icon-sort-number-down:after {font-size:.9em;content:'\00a0\f163';}
 
 /* Custom icons */
 .icon-w:before {font-style:italic;content:'w:';}

public/main.js

@@ -220,6 +220,7 @@ oceanLayers
   .attr("height", graphHeight);
 
 document.addEventListener("DOMContentLoaded", async () => {
+  await initLocale();
   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`;

public/modules/ui/options.js

@@ -149,6 +149,7 @@ optionsContent.addEventListener("change", event => {
   else if (id === "eraInput") changeEra();
   else if (id === "stateLabelsModeInput") options.stateLabelsMode = value;
   else if (id === "azgaarAssistant") toggleAssistant();
+  else if (id === "language") changeLanguage(value);
 });
 
 optionsContent.addEventListener("click", event => {
@@ -162,8 +163,6 @@ optionsContent.addEventListener("click", event => {
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
   else if (id === "themeColorRestore") restoreDefaultThemeColor();
-  else if (id === "loadGoogleTranslateButton") loadGoogleTranslate();
-  else if (id === "resetLanguage") resetLanguage();
 });
 
 function mapSizeInputChange() {
@@ -462,44 +461,6 @@ function changeDialogsTheme(themeColor, transparency) {
   });
 }
 
-function loadGoogleTranslate() {
-  const script = document.createElement("script");
-  script.src = "https://translate.google.com/translate_a/element.js?cb=initGoogleTranslate";
-  script.onload = () => {
-    byId("loadGoogleTranslateButton")?.remove();
-
-    // replace mapLayers underline <u> with bare text to avoid translation issue
-    document
-      .getElementById("mapLayers")
-      .querySelectorAll("li")
-      .forEach(el => {
-        const text = el.innerHTML.replace(/<u>(.+)<\/u>/g, "$1");
-        el.innerHTML = text;
-      });
-  };
-
-  document.head.appendChild(script);
-}
-
-function initGoogleTranslate() {
-  new google.translate.TranslateElement(
-    {pageLanguage: "en", layout: google.translate.TranslateElement.InlineLayout.VERTICAL},
-    "google_translate_element"
-  );
-}
-
-function resetLanguage() {
-  const languageSelect = document.querySelector("#google_translate_element select");
-  if (!languageSelect.value) return;
-
-  languageSelect.value = "en";
-  languageSelect.handleChange(new Event("change"));
-
-  // do once again to actually reset the language
-  languageSelect.value = "en";
-  languageSelect.handleChange(new Event("change"));
-}
-
 function changeZoomExtent(value) {
   if (+zoomExtentMin.value > +zoomExtentMax.value) {
     [zoomExtentMin.value, zoomExtentMax.value] = [zoomExtentMax.value, zoomExtentMin.value];
@@ -562,6 +523,8 @@ function applyStoredOptions() {
 
   if (stored("tooltipSize")) changeTooltipSize(stored("tooltipSize"));
   if (stored("regions")) changeStatesNumber(stored("regions"));
+  if (stored("language")) setLanguage(stored("language"));
+  else setLanguage("en");
 
   uiSize.max = uiSize.max = getUImaxSize();
   if (stored("uiSize")) changeUiSize(+stored("uiSize"));
@@ -696,6 +659,15 @@ function changeEra() {
   options.era = eraInput.value;
 }
 
+function setLanguage(value) {
+  options.language = value;
+}
+
+function changeLanguage(value) {
+  setLanguage(value);
+  changeLocale();
+}
+
 async function openTemplateSelectionDialog() {
   const HeightmapSelectionDialog = await import("../dynamic/heightmap-selection.js?v=1.96.00");
   HeightmapSelectionDialog.open();

src/modules/index.ts

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

src/modules/locales.ts

@@ -0,0 +1,89 @@
+import i18next, { type TOptions } from "i18next";
+import i18nextHTTPBackend from "i18next-http-backend";
+import { isVowel } from "../utils";
+
+function initTooltips() {
+  for (const tip of document.querySelectorAll("[data-tip]")) {
+    tip.setAttribute(
+      "data-original-tip",
+      tip.getAttribute("data-tip") as string,
+    );
+  }
+}
+
+function updateLabels() {
+  for (const label of document.querySelectorAll("[data-html]")) {
+    const vars: TOptions = {
+      interpolation: { escapeValue: false },
+    };
+    for (const attr of label.attributes) {
+      if (attr.name.startsWith("data-var-")) {
+        vars[attr.name.slice(9)] = attr.value;
+      }
+    }
+    const translation = i18next.t(
+      label.getAttribute("data-html") as string,
+      vars,
+    );
+    if (translation) label.innerHTML = translation;
+  }
+  for (const label of document.querySelectorAll("[data-text]")) {
+    const translation = i18next.t(label.getAttribute("data-text") as string);
+    if (translation) label.textContent = translation;
+  }
+  for (const tip of document.querySelectorAll("[data-original-tip]")) {
+    const translation = i18next.t(
+      tip.getAttribute("data-original-tip") as string,
+    );
+    if (translation) tip.setAttribute("data-tip", translation);
+  }
+}
+
+function addFormatters() {
+  i18next.services.formatter?.add("link", (value, _lng, options) => {
+    return `<a href="${value}" target="_blank">${options.text}</a>`;
+  });
+  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) => {
+    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}`;
+  });
+}
+
+window.initLocale = async () => {
+  await i18next.use(i18nextHTTPBackend).init(
+    {
+      lng: options.language,
+      fallbackLng: "en",
+      backend: {
+        loadPath: "locales/{{lng}}/lang.json",
+      },
+      keySeparator: "::",
+      nsSeparator: false,
+      returnEmptyString: false,
+    },
+    () => {
+      addFormatters();
+      initTooltips();
+      updateLabels();
+    },
+  );
+};
+
+window.changeLocale = () => {
+  i18next.changeLanguage(options.language, updateLabels);
+};

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/provinces-generator.ts

@@ -1,5 +1,6 @@
 import Alea from "alea";
 import { max } from "d3";
+import i18next from "i18next";
 import {
   byId,
   gauss,
@@ -141,7 +142,10 @@ class ProvinceModule {
           : Names.getState(Names.getCultureShort(c), c);
         const formName = rw(form);
         form[formName] += 10;
-        const fullName = `${name} ${formName}`;
+        const fullName = i18next.t("{{provinceName}} {{provinceForm}}", {
+          provinceName: name,
+          provinceForm: i18next.t(`provinceForm::${formName}`),
+        });
         const color = getMixedColor(s.color!);
         const kinship = nameByBurg ? 0.8 : 0.4;
         const type = Burgs.getType(center, burg.port);
@@ -321,7 +325,10 @@ class ProvinceModule {
           return rw(this.forms["Wild"]);
         })();
 
-        const fullName = `${name} ${formName}`;
+        const fullName = i18next.t("{{provinceName}} {{provinceForm}}", {
+          provinceName: name,
+          provinceForm: i18next.t(`provinceForm::${formName}`),
+        });
 
         const dominion = colony
           ? P(0.95)

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,20 @@ export interface State {
   alert?: number;
 }
 
+gender.fr = {
+  ...gender.fr,
+  Confederation: "feminine",
+  Diarchy: "feminine",
+  Horde: "feminine",
+  League: "feminine",
+  Marches: "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 +832,26 @@ class StatesModule {
       "Marches",
     ];
     if (!state.formName) return state.name;
-    if (!state.name && state.formName) return `The ${state.formName}`;
+    const stateGender = gender[options.language as string]?.[state.formName];
+    if (!state.name && state.formName)
+      return i18next.t("The {{noun}}", {
+        noun: i18next.t(`stateForm::${state.formName}`),
+        gender: stateGender,
+      });
     const adjName =
       adjForms.includes(state.formName) && !/-| /.test(state.name);
     return adjName
-      ? `${getAdjective(state.name)} ${state.formName}`
+      ? i18next.t("{{adjective}} {{noun}}", {
-      : `${state.formName} of ${state.name}`;
+          adjective: getAdjective(state.name),
+          noun: i18next.t(`stateForm::${state.formName}`),
+          gender: stateGender,
+        })
+      : i18next.t("{{noun}} of {{complement}}", {
+          noun: i18next.t(`stateForm::${state.formName}`),
+          complement: state.name,
+          gender: stateGender,
+          interpolation: { escapeValue: false },
+        });
   }
 }
 

src/types/global.ts

@@ -89,6 +89,8 @@ declare global {
   var scale: number;
   var changeFont: () => void;
   var getFriendlyHeight: (coords: [number, number]) => string;
+  var initLocale: () => void;
+  var changeLocale: () => void;
   var addLakesInDeepDepressions: () => void;
   var openNearSeaLakes: () => void;
   var calculateMapCoordinates: () => void;

src/utils/index.ts

@@ -9,6 +9,7 @@ window.lerp = lerp as typeof window.lerp;
 
 import {
   abbreviate,
+  gender,
   getAdjective,
   isVowel,
   list,
@@ -297,6 +298,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: Record<string, Record<string, string>> = {
+  fr: {},
+};
+
 /**
  * Check if character is a vowel
  * @param c - The character to check.
@@ -30,7 +34,8 @@ export const trimVowels = (string: string, minLength: number = 3) => {
  * @returns The adjective form of the noun.
  */
 export const getAdjective = (nounToBeAdjective: string) => {
-  const adjectivizationRules = [
+  const adjectivizationRules: Record<string, any> = {
+    en: [
       {
         name: "guo",
         probability: 1,
@@ -161,8 +166,172 @@ export const getAdjective = (nounToBeAdjective: string) => {
         condition: /^[a-zA-Z]{0,7}$/,
         action: (noun: string) => `${trimVowels(noun)}an`,
       },
-  ];
+    ],
-  for (const rule of adjectivizationRules) {
+    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: /ie$/,
+        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`,
+      },
+    ],
+  };
+  const rules =
+    adjectivizationRules[options.language] ?? adjectivizationRules.en;
+  for (const rule of rules) {
     if (P(rule.probability) && rule.condition.test(nounToBeAdjective)) {
       return rule.action(nounToBeAdjective);
     }