add locale support

This commit is contained in:
2025-05-12 23:10:33 +02:00
parent c4d2349b6a
commit 583b01d92e
35 changed files with 177 additions and 45 deletions
+76 -29
View File
@@ -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>