diff --git a/assets/icons/icon-128x128.png b/assets/icons/icon-128x128.png index 434d85f..c9ea815 100644 Binary files a/assets/icons/icon-128x128.png and b/assets/icons/icon-128x128.png differ diff --git a/assets/icons/icon-144x144.png b/assets/icons/icon-144x144.png index 044d55e..eabcb06 100644 Binary files a/assets/icons/icon-144x144.png and b/assets/icons/icon-144x144.png differ diff --git a/assets/icons/icon-152x152.png b/assets/icons/icon-152x152.png index 2cb6757..c8c6995 100644 Binary files a/assets/icons/icon-152x152.png and b/assets/icons/icon-152x152.png differ diff --git a/assets/icons/icon-192x192.png b/assets/icons/icon-192x192.png index 4d1dd66..0ce7055 100644 Binary files a/assets/icons/icon-192x192.png and b/assets/icons/icon-192x192.png differ diff --git a/assets/icons/icon-384x384.png b/assets/icons/icon-384x384.png index 0fa0b24..f62dd17 100644 Binary files a/assets/icons/icon-384x384.png and b/assets/icons/icon-384x384.png differ diff --git a/assets/icons/icon-512x512.png b/assets/icons/icon-512x512.png index fead533..2abc9f8 100644 Binary files a/assets/icons/icon-512x512.png and b/assets/icons/icon-512x512.png differ diff --git a/assets/icons/icon-72x72.png b/assets/icons/icon-72x72.png index 6a72f1f..ab9c034 100644 Binary files a/assets/icons/icon-72x72.png and b/assets/icons/icon-72x72.png differ diff --git a/assets/icons/icon-96x96.png b/assets/icons/icon-96x96.png index ddf5306..1f5e1dc 100644 Binary files a/assets/icons/icon-96x96.png and b/assets/icons/icon-96x96.png differ diff --git a/assets/icons/icon.svg b/assets/icons/icon.svg new file mode 100644 index 0000000..de9f7b7 --- /dev/null +++ b/assets/icons/icon.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index f86c007..8312178 100755 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ -RPG Dices +Role Playing Game Dices + + + @@ -55,6 +58,32 @@
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+
+ +
+
+ + +
+
D @@ -78,27 +107,8 @@
- -
- -
-
- - -
- -
-
- - - -
- -
-
diff --git a/js/libs/sidebar/sidebar.js b/js/libs/sidebar/sidebar.js index 6f06d37..1d2545e 100644 --- a/js/libs/sidebar/sidebar.js +++ b/js/libs/sidebar/sidebar.js @@ -1,17 +1,13 @@ window.Sidebar = function () { - let sidebar = document.querySelector("#sidebar"); - let close = document.querySelector("#sidebar-toggle-close"); - let toggle = document.querySelector("#sidebar-toggle-input"); - - sidebar.addEventListener("click", function (event) { - if (document.body.clientWidth < 1280) { - toggle.checked = false; - } - }) - - close.addEventListener("click", function (event) { - if (document.body.clientWidth < 1280) { - event.preventDefault(); - } - }) - } \ No newline at end of file + let sidebar = document.querySelector("#sidebar"); + let close = document.querySelector("#sidebar-toggle-close"); + let toggle = document.querySelector("#sidebar-toggle-input"); + + sidebar.addEventListener("click", function (event) { + toggle.checked = false; + }) + + close.addEventListener("click", function (event) { + event.preventDefault(); + }) +} \ No newline at end of file diff --git a/script.js b/script.js index c8bd438..6d66459 100755 --- a/script.js +++ b/script.js @@ -49,7 +49,7 @@ class DiceHistoryEntry { } const default_sides = [4, 6, 8, 10, 12, 20, 100]; -const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#000000"]; +const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#6c584c"]; const dice_regex = /(\d+)?[D|d](\d+)([\+|\-]\d+)?(\[(.+)\])?/; @@ -228,12 +228,18 @@ function renderHistory() { diceResult.innerText = entry.result; historyContainer.appendChild(diceResult); - const diceFormula = document.createElement("span"); - diceFormula.classList.add("formula"); - historyContainer.appendChild(diceFormula); + const diceFormulaContainer = document.createElement("span"); + diceFormulaContainer.classList.add("formula-container"); + historyContainer.appendChild(diceFormulaContainer); if (entry.formula) { - diceFormula.innerText = " = " + entry.formula; + const diceFormulaEqual = document.createElement("span"); + diceFormulaEqual.innerText = " = "; + diceFormulaContainer.appendChild(diceFormulaEqual); + const diceFormula = document.createElement("span"); + diceFormula.classList.add("formula"); + diceFormula.innerText = entry.formula; + diceFormulaContainer.appendChild(diceFormula); } const diceTime = document.createElement("span"); @@ -463,6 +469,12 @@ if (localStorage.getItem('history')) { document.getElementById("importFile").addEventListener("change", importData); +document.getElementById("inputText").addEventListener("keyup", (event) => { + if (event.key.toUpperCase() === 'ENTER') { + this.rollText(); + } +}); + renderDices(); renderHistory(); updateCustom(); @@ -474,11 +486,10 @@ if (darkMode) { } if ("serviceWorker" in navigator) { - window.addEventListener("load", function() { - navigator.serviceWorker - .register("/sw.js") - .then(res => console.trace("service worker registered")) - .catch(err => console.error("service worker not registered", err)) + window.addEventListener("load", function () { + navigator.serviceWorker + .register("/sw.js") + .then(res => console.trace("service worker registered")) + .catch(err => console.error("service worker not registered", err)) }) - } - \ No newline at end of file +} diff --git a/style.css b/style.css index bbf747f..aa9c3b1 100755 --- a/style.css +++ b/style.css @@ -59,14 +59,19 @@ body { margin-right: 0.2em; } -.container, +.container { + display: flex; + justify-content: center; + align-items: start; +} + .dices-container, .history-container { display: flex; flex-direction: column; justify-content: center; align-items: center; - max-width: 100%; + min-width: 400px; } .dices-container { @@ -204,18 +209,17 @@ body { display: grid; align-items: center; row-gap: 1em; - grid-template-columns: auto auto; + grid-template-columns: auto; } .form-container .actions { display: flex; - flex-wrap: wrap; justify-content: space-between; align-items: center; } .form { - font-size: 1.5em; + font-size: 1.2em; display: flex; flex-wrap: wrap; justify-content: start; @@ -254,7 +258,6 @@ body { .history-container .actions button { font-size: 1em; - margin: 0 0.5em; } .history { @@ -273,6 +276,8 @@ body { .history .label { font-size: 1.2em; + display: flex; + flex-wrap: wrap; } .history .result { @@ -281,7 +286,14 @@ body { font-weight: bold; } -.history .formula { +.history .formula-container { + display: flex; + margin: 0 0.5em; +} + + +.history .formula-container .formula { + display: flex; margin: 0 0.5em; } @@ -300,6 +312,7 @@ button { border: none; outline: none; font-size: 1.3em; + margin: 0.5em; } button:hover { @@ -352,18 +365,19 @@ body.dark .form select { border-color: #fff; } -@media screen and (min-width: 768px) { - .container { - padding: 0 250px; - } -} - @media screen and (max-width: 767px) { .dices { font-size: 0.65em; } - .form-container { - grid-template-columns: auto; + .container { + flex-direction: column; + align-items: center; + } + + .dices-container, + .history-container { + min-width: auto; + width: 100%; } } \ No newline at end of file diff --git a/sw.js b/sw.js index a1799d0..61b5a1b 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -const rpgDicesVersion = "rpg-dices-v0.1" +const rpgDicesVersion = "rpg-dices-v0.2.0" const assets = [ "/", "/index.html", @@ -25,7 +25,8 @@ const assets = [ "/assets/dices/12.svg", "/assets/dices/20.svg", "/assets/dices/100.svg", - "/assets/dices/custom.svg", + "/assets/dices/custom.svg",, + "/assets/icons/icon.svg", ] self.addEventListener("install", installEvent => {