diff --git a/assets/redo.svg b/assets/redo.svg new file mode 100644 index 0000000..74d6f38 --- /dev/null +++ b/assets/redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/undo.svg b/assets/undo.svg new file mode 100644 index 0000000..d93f286 --- /dev/null +++ b/assets/undo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/update.svg b/assets/update.svg new file mode 100644 index 0000000..cf1c4bc --- /dev/null +++ b/assets/update.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index e10b173..d58f79c 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Role Playing Game Dices - + @@ -49,6 +49,9 @@
  • Dark Mode
    • + @@ -68,13 +71,16 @@
    -
    + +
    +
    +
    diff --git a/script.js b/script.js index ea03eef..ffc2ca9 100755 --- a/script.js +++ b/script.js @@ -57,6 +57,7 @@ let darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: da let dices = []; let history = []; +let redoHistory = []; let dicesContainer = document.getElementById("dices"); let historyContainer = document.getElementById("history"); @@ -197,9 +198,19 @@ function renderHistory() { historyContainer.innerHTML = ""; if (history.length) { document.getElementById('history-button').classList.remove("disabled"); + document.getElementById('history-undo-button').classList.remove("disabled"); } else { document.getElementById('history-button').classList.add("disabled"); + document.getElementById('history-undo-button').classList.add("disabled"); } + + if (redoHistory.length) { + console.log(redoHistory); + document.getElementById('history-redo-button').classList.remove("disabled"); + } else { + document.getElementById('history-redo-button').classList.add("disabled"); + } + history.forEach((entry) => { if (entry.result) { const diceLabelContainer = document.createElement("div"); @@ -285,6 +296,8 @@ function roll(dice, time = true) { } history.unshift(new DiceHistoryEntry([dice], f, result, time ? moment() : undefined)); localStorage.setItem('history', JSON.stringify(history)); + redoHistory = []; + localStorage.removeItem('redoHistory'); renderHistory(); } @@ -399,12 +412,13 @@ function addDicesText() { function clearHistory() { history = []; localStorage.removeItem('history'); + localStorage.removeItem('redoHistory'); renderHistory(); } function exportData() { const downloadButton = document.createElement('a'); - downloadButton.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify({ dices: dices, history: history }))); + downloadButton.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify({ dices: dices, history: history, redoHistory: redoHistory }))); downloadButton.setAttribute('download', 'rgp-dices-' + new Date().toISOString() + '.json'); document.body.appendChild(downloadButton); downloadButton.click(); @@ -428,6 +442,10 @@ function importData(event) { localStorage.setItem('history', JSON.stringify(history)); renderHistory(); } + if (data.redoHistory) { + redoHistory = data.redoHistory.map((entry) => new DiceHistoryEntry(entry.dices && entry.dices.map((dice) => new Dice(dice.sides, dice.addition, dice.count, dice.color)) || undefined, entry.formula, entry.result, entry.time && moment(entry.time) || undefined)); + localStorage.setItem('redoHistory', JSON.stringify(redoHistory)); + } }); reader.readAsText(event.target.files[0]); @@ -461,6 +479,43 @@ function toggleDarkMode() { renderHistory(); } +function undo() { + while (history.length && history[0].result) { + redoHistory.push(history.shift()); + } + if (history.length && !history[0].result) { + redoHistory.push(history.shift()); + } + + localStorage.setItem('history', JSON.stringify(history)); + localStorage.setItem('redoHistory', JSON.stringify(redoHistory)); + renderHistory(); +} + +function redo() { + if (redoHistory.length && !redoHistory[redoHistory.length - 1].result) { + history.unshift(redoHistory.pop()); + } else if (redoHistory.length) { + history.unshift(new DiceHistoryEntry()); + } + + while (redoHistory.length && redoHistory[redoHistory.length - 1].result) { + history.unshift(redoHistory.pop()); + } + + localStorage.setItem('history', JSON.stringify(history)); + localStorage.setItem('redoHistory', JSON.stringify(redoHistory)); + renderHistory(); +} + +async function clearAndRefresh() { + if ('caches' in window) { + const keyList = await caches.keys(); + await Promise.all(keyList.map(async (key) => await caches.delete(key))); + } + window.location.reload() +} + if (localStorage.getItem('dices')) { dices = JSON.parse(localStorage.getItem('dices')).map((dice) => new Dice(dice.sides, dice.addition, dice.count, dice.color)); } else { @@ -473,6 +528,10 @@ if (localStorage.getItem('history')) { history = JSON.parse(localStorage.getItem('history')).map((entry) => new DiceHistoryEntry(entry.dices && entry.dices.map((dice) => new Dice(dice.sides, dice.addition, dice.count, dice.color)) || undefined, entry.formula, entry.result, entry.time && moment(entry.time) || undefined)); } +if (localStorage.getItem('redoHistory')) { + redoHistory = JSON.parse(localStorage.getItem('history')).map((entry) => new DiceHistoryEntry(entry.dices && entry.dices.map((dice) => new Dice(dice.sides, dice.addition, dice.count, dice.color)) || undefined, entry.formula, entry.result, entry.time && moment(entry.time) || undefined)); +} + document.getElementById("importFile").addEventListener("change", importData); document.getElementById("inputText").addEventListener("keyup", (event) => { @@ -481,6 +540,27 @@ document.getElementById("inputText").addEventListener("keyup", (event) => { } }); + +document.addEventListener("keyup", (event) => { + if (!isNaN(+event.key)) { + let number = +event.key; + if (number == 0) { + number = 10; + } + number--; + if (number < dices.length) { + if (history.length) { + history.unshift(new DiceHistoryEntry()); + } + roll(dices[number]); + } + } else if (event.ctrlKey && event.key.toUpperCase() === 'Z') { + undo(); + } else if (event.ctrlKey && (event.shiftKey && event.key.toUpperCase() === 'Z' || event.key.toUpperCase() === 'Y')) { + redo(); + } +}); + renderDices(); renderHistory(); updateCustom(); diff --git a/style.css b/style.css index 60f56bd..f83dae5 100755 --- a/style.css +++ b/style.css @@ -245,7 +245,7 @@ body { } .history-container { - margin: 2em 0; + margin: 0.5em 0; max-width: 99vw; } diff --git a/sw.js b/sw.js index 6eadc8f..291e31b 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -const rpgDicesVersion = "rpg-dices-v0.2.1" +const rpgDicesVersion = "rpg-dices-v0.2.2" const assets = [ "/", "/index.html",