From 583b01d92e0910a765f6441557b0885e26030936 Mon Sep 17 00:00:00 2001
From: Lurkars <lurkars@we.bstly.de>
Date: Mon, 12 May 2025 23:10:33 +0200
Subject: [PATCH] add locale support

---
 LICENSE                       |   0
 README.md                     |   0
 assets/add.svg                |   0
 assets/close.svg              |   0
 assets/dark.svg               |   0
 assets/dices.svg              |   0
 assets/dices/custom.svg       |   0
 assets/export.svg             |   0
 assets/history.svg            |   0
 assets/i18n/de.json           |  19 ++++++
 assets/i18n/en.json           |  19 ++++++
 assets/icons/icon-128x128.png | Bin
 assets/icons/icon-144x144.png | Bin
 assets/icons/icon-152x152.png | Bin
 assets/icons/icon-192x192.png | Bin
 assets/icons/icon-384x384.png | Bin
 assets/icons/icon-512x512.png | Bin
 assets/icons/icon-72x72.png   | Bin
 assets/icons/icon-96x96.png   | Bin
 assets/icons/icon.svg         |   0
 assets/import.svg             |   0
 assets/light.svg              |   0
 assets/menu.svg               |   0
 assets/plus.svg               |   0
 assets/redo.svg               |   0
 assets/roll.svg               |   0
 assets/undo.svg               |   0
 assets/update.svg             |   0
 index.html                    | 105 ++++++++++++++++++++++++----------
 js/libs/moment.js             |   0
 js/libs/sidebar/sidebar.css   |   0
 js/libs/sidebar/sidebar.js    |   0
 manifest.json                 |   0
 script.js                     |  79 +++++++++++++++++++------
 sw.js                         |   0
 35 files changed, 177 insertions(+), 45 deletions(-)
 mode change 100644 => 100755 LICENSE
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 assets/add.svg
 mode change 100644 => 100755 assets/close.svg
 mode change 100644 => 100755 assets/dark.svg
 mode change 100644 => 100755 assets/dices.svg
 mode change 100644 => 100755 assets/dices/custom.svg
 mode change 100644 => 100755 assets/export.svg
 mode change 100644 => 100755 assets/history.svg
 create mode 100755 assets/i18n/de.json
 create mode 100755 assets/i18n/en.json
 mode change 100644 => 100755 assets/icons/icon-128x128.png
 mode change 100644 => 100755 assets/icons/icon-144x144.png
 mode change 100644 => 100755 assets/icons/icon-152x152.png
 mode change 100644 => 100755 assets/icons/icon-192x192.png
 mode change 100644 => 100755 assets/icons/icon-384x384.png
 mode change 100644 => 100755 assets/icons/icon-512x512.png
 mode change 100644 => 100755 assets/icons/icon-72x72.png
 mode change 100644 => 100755 assets/icons/icon-96x96.png
 mode change 100644 => 100755 assets/icons/icon.svg
 mode change 100644 => 100755 assets/import.svg
 mode change 100644 => 100755 assets/light.svg
 mode change 100644 => 100755 assets/menu.svg
 mode change 100644 => 100755 assets/plus.svg
 mode change 100644 => 100755 assets/redo.svg
 mode change 100644 => 100755 assets/roll.svg
 mode change 100644 => 100755 assets/undo.svg
 mode change 100644 => 100755 assets/update.svg
 mode change 100644 => 100755 js/libs/moment.js
 mode change 100644 => 100755 js/libs/sidebar/sidebar.css
 mode change 100644 => 100755 js/libs/sidebar/sidebar.js
 mode change 100644 => 100755 manifest.json
 mode change 100644 => 100755 sw.js

diff --git a/LICENSE b/LICENSE
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/assets/add.svg b/assets/add.svg
old mode 100644
new mode 100755
diff --git a/assets/close.svg b/assets/close.svg
old mode 100644
new mode 100755
diff --git a/assets/dark.svg b/assets/dark.svg
old mode 100644
new mode 100755
diff --git a/assets/dices.svg b/assets/dices.svg
old mode 100644
new mode 100755
diff --git a/assets/dices/custom.svg b/assets/dices/custom.svg
old mode 100644
new mode 100755
diff --git a/assets/export.svg b/assets/export.svg
old mode 100644
new mode 100755
diff --git a/assets/history.svg b/assets/history.svg
old mode 100644
new mode 100755
diff --git a/assets/i18n/de.json b/assets/i18n/de.json
new file mode 100755
index 0000000..8db7004
--- /dev/null
+++ b/assets/i18n/de.json
@@ -0,0 +1,19 @@
+{
+    "title": "Rollenspiel Würfel",
+    "reset-dices": "Würfel zurücksetzen",
+    "clear-history": "Verlauf löschen",
+    "export-data": "Daten exportieren",
+    "import-data": "Daten importieren",
+    "dark-mode": "Dunkler Modus",
+    "light-mode": "Heller Modus",
+    "update": "Update versuchen",
+    "add-selected": "Ausgewählte addieren",
+    "roll-selected": "Ausgewählte würfeln",
+    "new-dices": "Neue Würfel",
+    "roll": "Würfeln",
+    "custom": "Benutzerdefiniert",
+    "new-dice": "Neuer Würfel",
+    "regex": "(\\d+)?[w|W](\\d+)([\\+|\\-]\\d+)?(\\[(.+)\\])?",
+    "regex-placeholder": "1W6+1 + 2W4",
+    "D": "W"
+}
\ No newline at end of file
diff --git a/assets/i18n/en.json b/assets/i18n/en.json
new file mode 100755
index 0000000..22cbf53
--- /dev/null
+++ b/assets/i18n/en.json
@@ -0,0 +1,19 @@
+{
+    "title": "Role Playing Game Dices",
+    "reset-dices": "Reset Dices",
+    "clear-history": "Clear History",
+    "export-data": "Export Data",
+    "import-data": "Import Data",
+    "dark-mode": "Dark Mode",
+    "light-mode": "Light Mode",
+    "update": "Try to Update",
+    "add-selected": "Add Selected",
+    "roll-selected": "Roll Selected",
+    "new-dices": "New Dices",
+    "roll": "Roll",
+    "custom": "Custom",
+    "new-dice": "New Dice",
+    "regex": "(\\d+)?[d|D](\\d+)([\\+|\\-]\\d+)?(\\[(.+)\\])?",
+    "regex-placeholder": "1D6+1 + 2D4",
+    "D": "D"
+}
\ No newline at end of file
diff --git a/assets/icons/icon-128x128.png b/assets/icons/icon-128x128.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-144x144.png b/assets/icons/icon-144x144.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-152x152.png b/assets/icons/icon-152x152.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-192x192.png b/assets/icons/icon-192x192.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-384x384.png b/assets/icons/icon-384x384.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-512x512.png b/assets/icons/icon-512x512.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-72x72.png b/assets/icons/icon-72x72.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon-96x96.png b/assets/icons/icon-96x96.png
old mode 100644
new mode 100755
diff --git a/assets/icons/icon.svg b/assets/icons/icon.svg
old mode 100644
new mode 100755
diff --git a/assets/import.svg b/assets/import.svg
old mode 100644
new mode 100755
diff --git a/assets/light.svg b/assets/light.svg
old mode 100644
new mode 100755
diff --git a/assets/menu.svg b/assets/menu.svg
old mode 100644
new mode 100755
diff --git a/assets/plus.svg b/assets/plus.svg
old mode 100644
new mode 100755
diff --git a/assets/redo.svg b/assets/redo.svg
old mode 100644
new mode 100755
diff --git a/assets/roll.svg b/assets/roll.svg
old mode 100644
new mode 100755
diff --git a/assets/undo.svg b/assets/undo.svg
old mode 100644
new mode 100755
diff --git a/assets/update.svg b/assets/update.svg
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
index d58f79c..d3d9f14 100755
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <meta charset="UTF-8">
-<title>Role Playing Game Dices</title>
+<title data-i18n="title">Role Playing Game Dices</title>
 <meta name="application-name" content="Role Playing Game Dices">
 <meta name="application-version" content="v0.2.2">
 
@@ -37,20 +37,45 @@
         <label id="sidebar-toggle-close" class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input"><img
                 src="./assets/close.svg"></label>
         <ul class="menu">
-            <li onclick="resetDices()"><img src="./assets/dices.svg"> Reset Dices</li>
-            <li onclick="clearHistory()"><img src="./assets/history.svg"> Clear History</li>
-            <li onclick="exportData()"><img src="./assets/export.svg"> Export Data</li>
-            <li><label><img src="./assets/import.svg"> Import Data
+            <li onclick="resetDices()">
+                <img src="./assets/dices.svg">
+                <span data-i18n="reset-dices">Reset Dices</span>
+            </li>
+            <li onclick="clearHistory()">
+                <img src="./assets/history.svg">
+                <span data-i18n="clear-history">Clear History</span>
+            </li>
+            <li onclick="exportData()">
+                <img src="./assets/export.svg">
+                <span data-i18n="export-data">Export Data</span>
+            </li>
+            <li>
+                <label>
+                    <img src="./assets/import.svg">
+                    <span data-i18n="import-data">Import Data</span>
                     <input id="importFile" type="file" accept="application/json" />
                 </label>
             </li>
         </ul>
         <ul class="menu">
-            <li onclick="toggleDarkMode()"><img id="dark-mode-icon" src="./assets/dark.svg"><span
-                    id="dark-mode-text">Dark Mode</span></li>
+            <li onclick="toggleDarkMode()">
+                <img id="dark-mode-icon" src="./assets/dark.svg">
+                <span id="dark-mode-text">Dark Mode</span>
+            </li>
         </ul>
         <ul class="menu">
-            <li onclick="clearAndRefresh()"><img id="dark-mode-icon" src="./assets/update.svg"><span>Try to Update</span></li>
+            <li onclick="setLocale('en')">
+                <span>English</span>
+            </li>
+            <li onclick="setLocale('de')">
+                <span>Deutsch</span>
+            </li>
+        </ul>
+        <ul class="menu">
+            <li onclick="clearAndRefresh()">
+                <img id="dark-mode-icon" src="./assets/update.svg">
+                <span data-i18n="update">Try to Update</span>
+            </li>
         </ul>
         <script>
             Sidebar();
@@ -62,10 +87,14 @@
 
             <div class="form-container">
                 <div class="actions">
-                    <button id="roll-add-button" onclick="addSelected()"><img src="./assets/add.svg"> Add
-                        Selected</button>
-                    <button id="roll-button" onclick="rollSelected()"><img src="./assets/roll.svg"> Roll
-                        Selected</button>
+                    <button id="roll-add-button" onclick="addSelected()">
+                        <img src="./assets/add.svg">
+                        <span data-i18n="add-selected">Add Selected</span>
+                    </button>
+                    <button id="roll-button" onclick="rollSelected()">
+                        <img src="./assets/roll.svg">
+                        <span data-i18n="roll-selected">Roll Selected</span>
+                    </button>
                 </div>
             </div>
         </div>
@@ -73,35 +102,47 @@
         <div class="history-container">
 
             <div class="actions">
-                <button id="history-undo-button" onclick="undo()"><img src="./assets/undo.svg"></button>
-                <button id="history-button" onclick="clearHistory()"><img src="./assets/history.svg"> Clear
-                    History</button>
-                    <button id="history-redo-button" onclick="redo()"><img src="./assets/redo.svg"></button>
+                <button id="history-undo-button" onclick="undo()">
+                    <img src="./assets/undo.svg">
+                </button>
+                <button id="history-button" onclick="clearHistory()">
+                    <img src="./assets/history.svg">
+                    <span data-i18n="clear-history">Clear History</span>
+                </button>
+                <button id="history-redo-button" onclick="redo()">
+                    <img src="./assets/redo.svg">
+                </button>
             </div>
 
             <div class="history" id="history"></div>
 
             <div class="form-container">
                 <div class="form">
-                    <input type="text" id="inputText" placeholder="1D6+1 + 2W4">
+                    <input type="text" id="inputText" placeholder="1D6+1 + 2D4" data-i18n-placeholder="regex-placeholder">
                 </div>
                 <div class="actions">
-                    <button onclick="addDicesText()"><img src="./assets/plus.svg"> New Dices</button>
-                    <button onclick="rollText()"><img src="./assets/roll.svg"> Roll</button>
+                    <button onclick="addDicesText()">
+                        <img src="./assets/plus.svg">
+                        <span data-i18n="new-dices">New Dices</span>
+                    </button>
+                    <button onclick="rollText()">
+                        <img src="./assets/roll.svg">
+                        <span data-i18n="roll">Roll</span>
+                    </button>
                 </div>
 
                 <div class="form">
                     <input min="1" value="1" type="number" id="inputCount">
                     D
                     <select value="6" id="inputSides" onchange="updateCustom()">
-                        <option>4</option>
-                        <option>6</option>
-                        <option>8</option>
-                        <option>10</option>
-                        <option>12</option>
-                        <option>20</option>
-                        <option>100</option>
-                        <option value="">custom</option>
+                        <option value="4">4</option>
+                        <option value="6">6</option>
+                        <option value="8">8</option>
+                        <option value="10">10</option>
+                        <option value="12">12</option>
+                        <option value="20">20</option>
+                        <option value="100">100</option>
+                        <option value="" data-i18n="custom">custom</option>
                     </select>
                     <input class="hidden" min="2" value="2" type="number" id="inputCustom">
                     +
@@ -110,8 +151,14 @@
                     <input type="color" id="inputColor">
                 </div>
                 <div class="actions">
-                    <button onclick="addDiceForm()"><img src="./assets/plus.svg"> New Dice</button>
-                    <button onclick="rollForm()"><img src="./assets/roll.svg"> Roll</button>
+                    <button onclick="addDiceForm()">
+                        <img src="./assets/plus.svg">
+                        <span data-i18n="new-dice">New Dice</span>
+                    </button>
+                    <button onclick="rollForm()">
+                        <img src="./assets/roll.svg">
+                        <span data-i18n="roll">Roll</span>
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/js/libs/moment.js b/js/libs/moment.js
old mode 100644
new mode 100755
diff --git a/js/libs/sidebar/sidebar.css b/js/libs/sidebar/sidebar.css
old mode 100644
new mode 100755
diff --git a/js/libs/sidebar/sidebar.js b/js/libs/sidebar/sidebar.js
old mode 100644
new mode 100755
diff --git a/manifest.json b/manifest.json
old mode 100644
new mode 100755
diff --git a/script.js b/script.js
index ffc2ca9..4149f15 100755
--- a/script.js
+++ b/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 () {
diff --git a/sw.js b/sw.js
old mode 100644
new mode 100755