add locale support

script.js

@@ -12,7 +12,7 @@ class Dice {
         if (this.count > 1) {
             result += this.count;
         }
-        result += "D" + this.sides;
+        result += (localeData && localeData['D'] || "D") + this.sides;
         if (this.addition) {
             result += (this.addition < 0 ? "-" : "+") + Math.abs(this.addition);
         }
@@ -23,7 +23,7 @@ class Dice {
     }
 
     fromText(value) {
-        const result = value.match(dice_regex);
+        const result = value.match(localeData && localeData['regex'] || dice_regex);
         if (result) {
             if (result[1]) {
                 this.count = +result[1];
@@ -35,6 +35,8 @@ class Dice {
             if (result[5]) {
                 this.color = result[5];
             }
+        } else {
+            throw Error("Invalid Text: " + value);
         }
     }
 }
@@ -51,14 +53,16 @@ class DiceHistoryEntry {
 const default_sides = [4, 6, 8, 10, 12, 20, 100];
 const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#6c584c"];
 
-const dice_regex = /(\d+)?[D|d](\d+)([\+|\-]\d+)?(\[(.+)\])?/;
+const dice_regex = new RegExp("(\\d+)?[D|d](\\d+)([\\+|\\-]\\d+)?(\\[(.+)\\])?");
 
-let darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+let darkMode = localStorage.getItem('dark-mode') === 'false' ? false : localStorage.getItem('dark-mode') === 'true' || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+let locale = localStorage.getItem('locale') || 'en';
+let localeData = {};
 
 let dices = [];
 let history = [];
 let redoHistory = [];
-
 let dicesContainer = document.getElementById("dices");
 let historyContainer = document.getElementById("history");
 
@@ -264,6 +268,7 @@ function renderHistory() {
             historyContainer.appendChild(diceTime);
 
             if (entry.time) {
+                entry.time.locale(locale);
                 diceTime.innerText = entry.time.fromNow();
                 diceTime.title = entry.time.format("LLLL");
             }
@@ -468,13 +473,14 @@ function toggleDarkMode() {
         darkMode = false;
         document.body.classList.remove("dark");
         document.getElementById("dark-mode-icon").src = "./assets/dark.svg";
-        document.getElementById("dark-mode-text").innerText = "Dark Mode";
+        document.getElementById("dark-mode-text").innerText = localeData && localeData['dark-mode'] || "Dark Mode";
     } else {
         darkMode = true;
         document.body.classList.add("dark");
         document.getElementById("dark-mode-icon").src = "./assets/light.svg";
-        document.getElementById("dark-mode-text").innerText = "Light Mode";
+        document.getElementById("dark-mode-text").innerText = localeData && localeData['light-mode'] || "Light Mode";
     }
+    localStorage.setItem('dark-mode', darkMode);
     renderDices();
     renderHistory();
 }
@@ -508,6 +514,17 @@ function redo() {
     renderHistory();
 }
 
+function renderDarkMode() {
+    if (darkMode) {
+        document.body.classList.add("dark");
+        document.getElementById("dark-mode-icon").src = "./assets/light.svg";
+        document.getElementById("dark-mode-text").innerText = localeData && localeData['light-mode'] || "Light Mode";
+    } else {
+        document.getElementById("dark-mode-icon").src = "./assets/dark.svg";
+        document.getElementById("dark-mode-text").innerText = localeData && localeData['dark-mode'] || "Dark Mode";
+    }
+}
+
 async function clearAndRefresh() {
     if ('caches' in window) {
         const keyList = await caches.keys();
@@ -516,6 +533,33 @@ async function clearAndRefresh() {
     window.location.reload()
 }
 
+async function setLocale(newLocale) {
+    locale = newLocale;
+    localStorage.setItem('locale', locale);
+    const response = await fetch('assets/i18n/' + locale + '.json');
+    localeData = await response.json();
+    if (localeData) {
+        document.querySelectorAll('[data-i18n]').forEach((el) => {
+            const key = el.getAttribute('data-i18n');
+            if (localeData[key]) {
+                el.innerHTML = localeData[key];
+            }
+        })
+
+        document.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
+            const key = el.getAttribute('data-i18n-placeholder');
+            if (localeData[key]) {
+                el.placeholder = localeData[key];
+            }
+        })
+    }
+    moment.locale(locale);
+    renderDices();
+    renderHistory();
+    renderDarkMode();
+    updateCustom();
+}
+
 if (localStorage.getItem('dices')) {
     dices = JSON.parse(localStorage.getItem('dices')).map((dice) => new Dice(dice.sides, dice.addition, dice.count, dice.color));
 } else {
@@ -542,6 +586,17 @@ document.getElementById("inputText").addEventListener("keyup", (event) => {
 
 
 document.addEventListener("keyup", (event) => {
+    let prevent = false;
+    document.querySelectorAll('input').forEach((input) => {
+        if (input === document.activeElement) {
+            prevent = true;
+        }
+    })
+
+    if (prevent) {
+        return;
+    }
+
     if (!isNaN(+event.key)) {
         let number = +event.key;
         if (number == 0) {
@@ -561,15 +616,7 @@ document.addEventListener("keyup", (event) => {
     }
 });
 
-renderDices();
-renderHistory();
-updateCustom();
-
-if (darkMode) {
-    document.body.classList.add("dark");
-    document.getElementById("dark-mode-icon").src = "./assets/light.svg";
-    document.getElementById("dark-mode-text").innerText = "Light Mode";
-}
+setLocale(locale);
 
 if ("serviceWorker" in navigator) {
     window.addEventListener("load", function () {