Lurkars/rpg-dices
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve styling, sort dices

Browse Source
This commit is contained in:
Lurkars
2025-11-07 22:14:42 +01:00
parent 1919dad1bf
commit 25254b04dd
2 changed files with 299 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+136 -22
View File
@@ -23,6 +23,9 @@ class Dice {
}
fromText(value) {
if (!value) {
return;
}
const result = value.match(localeData && localeData['regex'] || dice_regex);
if (result) {
if (result[1]) {
@@ -51,7 +54,7 @@ class DiceHistoryEntry {
}
const default_sides = [4, 6, 8, 10, 12, 20, 100];
const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#6c584c"];
const default_colors = ["#de324c", "#f4895f", "#d8b400ff", "#95cf92", "#369acc", "#9656a2", "#6c584c"];
const dice_regex = new RegExp("(\\d+)?[D|d](\\d+)([\\+|\\-]\\d+)?(\\[(.+)\\])?");
@@ -209,7 +212,6 @@ function renderHistory() {
}
if (redoHistory.length) {
console.log(redoHistory);
document.getElementById('history-redo-button').classList.remove("disabled");
} else {
document.getElementById('history-redo-button').classList.add("disabled");
@@ -217,13 +219,42 @@ function renderHistory() {
history.forEach((entry) => {
if (entry.result) {
// Create main history entry container
const historyEntry = document.createElement("div");
historyEntry.classList.add("history-entry");
// Create header section
const entryHeader = document.createElement("div");
entryHeader.classList.add("history-entry-header");
// Create dice label section
const diceLabelContainer = document.createElement("div");
diceLabelContainer.classList.add("label");
if (entry.dices) {
entry.dices.forEach((diceData, i) => {
const dice = new Dice(diceData.sides, diceData.addition, diceData.count, diceData.color);
// Add dice icon
const diceIcon = document.createElement("span");
diceIcon.classList.add("dice-icon");
if (default_sides.indexOf(dice.sides) != -1) {
diceIcon.style.maskImage = `url(./assets/dices/${dice.sides}.svg)`;
} else {
diceIcon.style.maskImage = "url(./assets/dices/custom.svg)";
}
diceIcon.style.color = dice.color;
// revert b/w on dark-mode
if (darkMode) {
if (["#000", "#000000", "black", "rgb(0,0,0)", "rgb(0, 0, 0)"].indexOf(dice.color) != -1) {
diceIcon.style.color = "#fff";
} else if (["#fff", "#ffffff", "white", "rgb(255,255,255)", "rgb(255, 255, 255)"].indexOf(dice.color) != -1) {
diceIcon.style.color = "#000";
}
}
diceLabelContainer.appendChild(diceIcon);
const diceLabel = document.createElement("label");
diceLabel.innerHTML = dice.toText() + (i == entry.dices.length - 1 ? ": " : "");
diceLabel.innerHTML = dice.toText();
diceLabel.style.color = dice.color;
// revert b/w on dark-mode
if (darkMode) {
@@ -234,6 +265,7 @@ function renderHistory() {
}
}
diceLabelContainer.appendChild(diceLabel);
if (i < entry.dices.length - 1) {
const diceLabelAdd = document.createElement("span");
diceLabelAdd.innerHTML = "&nbsp;+&nbsp;";
@@ -241,48 +273,130 @@ function renderHistory() {
}
})
}
historyContainer.appendChild(diceLabelContainer);
const diceResult = document.createElement("span");
// Create result display
const diceResult = document.createElement("div");
diceResult.classList.add("result");
diceResult.innerText = entry.result;
historyContainer.appendChild(diceResult);
const diceFormulaContainer = document.createElement("span");
diceFormulaContainer.classList.add("formula-container");
historyContainer.appendChild(diceFormulaContainer);
entryHeader.appendChild(diceLabelContainer);
if (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);
// Only show result in header if there's no formula
if (!entry.formula) {
entryHeader.appendChild(diceResult);
}
const diceTime = document.createElement("span");
// Create time display
const diceTime = document.createElement("div");
diceTime.classList.add("time");
historyContainer.appendChild(diceTime);
if (entry.time) {
entry.time.locale(locale);
diceTime.innerText = entry.time.fromNow();
diceTime.title = entry.time.format("LLLL");
}
entryHeader.appendChild(diceTime);
historyEntry.appendChild(entryHeader);
// Create details section if formula exists
if (entry.formula) {
const entryDetails = document.createElement("div");
entryDetails.classList.add("history-entry-details");
const diceFormulaContainer = document.createElement("div");
diceFormulaContainer.classList.add("formula-container");
const diceFormulaResult = document.createElement("span");
diceFormulaResult.classList.add("result");
diceFormulaResult.innerText = entry.result;
const diceFormulaEqual = document.createElement("span");
diceFormulaEqual.innerText = " = ";
diceFormulaContainer.appendChild(diceFormulaResult);
diceFormulaContainer.appendChild(diceFormulaEqual);
const diceFormula = document.createElement("span");
diceFormula.classList.add("formula");
// If we have dices, show colored breakdown
if (entry.dices && entry.dices.length >= 1) {
// Parse the formula to show which dice contributed what
const formulaParts = entry.formula.split(" + ");
let partIndex = 0;
// Create a mapping of which dice contributes which parts
let dicePartMapping = [];
entry.dices.forEach(dice => {
for (let i = 0; i < dice.count; i++) {
if (partIndex < formulaParts.length && !isNaN(parseInt(formulaParts[partIndex]))) {
dicePartMapping.push({
partIndex: partIndex,
dice: dice
});
partIndex++;
}
}
});
formulaParts.forEach((part, index) => {
const mapping = dicePartMapping.find(m => m.partIndex === index);
if (mapping) {
// This part comes from a dice roll
const partSpan = document.createElement("span");
partSpan.innerText = part;
partSpan.style.color = mapping.dice.color;
// revert b/w on dark-mode
if (darkMode) {
if (["#000", "#000000", "black", "rgb(0,0,0)", "rgb(0, 0, 0)"].indexOf(mapping.dice.color) != -1) {
partSpan.style.color = "#fff";
} else if (["#fff", "#ffffff", "white", "rgb(255,255,255)", "rgb(255, 255, 255)"].indexOf(mapping.dice.color) != -1) {
partSpan.style.color = "#000";
}
}
diceFormula.appendChild(partSpan);
} else {
// This is an addition value (modifier)
const partSpan = document.createElement("span");
partSpan.innerText = part;
diceFormula.appendChild(partSpan);
}
if (index < formulaParts.length - 1) {
const plusSpan = document.createElement("span");
plusSpan.innerText = " + ";
diceFormula.appendChild(plusSpan);
}
});
} else {
// Fallback to plain text
diceFormula.innerText = entry.formula;
}
diceFormulaContainer.appendChild(diceFormula);
entryDetails.appendChild(diceFormulaContainer);
historyEntry.appendChild(entryDetails);
}
historyContainer.appendChild(historyEntry);
} else {
// Add separator for different roll sessions
historyContainer.appendChild(document.createElement("hr"));
}
})
}
function formula(dice) {
let rolls = [];
for (let index = 0; index < dice.count; index++) {
rolls.push(Math.floor(Math.random() * dice.sides + 1));
}
rolls.sort((a, b) => b - a);
let formula = "";
for (let index = 0; index < dice.count; index++) {
formula += Math.floor(Math.random() * dice.sides + 1);
formula += rolls[index];
if (index < dice.count - 1) {
formula += " + ";
}