RustyStriker/open_tavern
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

settings popup with grid stuff & make roll popup a bit better

Browse source
This commit is contained in:
Rusty Striker 2025-06-27 14:04:26 +03:00
parent 8bacc43bd8
commit 56ab0642f2
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
3 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

29
assets/web/app.js
View file

@ -1,3 +1,7 @@
const LOCAL_GRID_TYPE = "GRID_DASH_TYPE";
const LOCAL_GRID_COLOR = "GRID_COLOR";
const LOCAL_GRID_WIDTH = "GRID_WIDTH";
// init - game view (map)
var mapScale = 1.0;
var mapOffsetX = 0.0;
@ -5,10 +9,10 @@ var mapOffsetY = 0.0;
var draggedToken = { token: null, offX: 0, offY: 0 };
var draggedDiv = { div: null, offX: 0, offY: 0 };
var gridDashType = 1;
var gridLineWidth = 2;
var gridLineWidth = 0;
var gridColor = 'black';
var gridSize = 200; // Grid size in pixels
var gridOffset = [0, 0]
var gridColor = 'red';
var gridOffset = [0, 0];
var showGrid = true;
const LINE_DASH_TYPES = [
[1.0, 0.0],
@ -50,6 +54,13 @@ function init() {
}
document.body.onmousemove = onMoveableDivDrag;
document.body.onmouseup = onMoveableDivMouseUp;
// Load user grid settings from local storage
document.getElementById('settings-grid-color').value = gridColor = localStorage.getItem(LOCAL_GRID_COLOR) ?? 'black';
let savedGridWidth = parseInt(localStorage.getItem(LOCAL_GRID_WIDTH));
let savedGridType = parseInt(localStorage.getItem(LOCAL_GRID_TYPE));
document.getElementById('settings-grid-width').value = gridLineWidth = isNaN(savedGridWidth) ? 2 : savedGridWidth;
document.getElementById('settings-grid-type').selectedIndex = gridDashType = isNaN(savedGridType) ? 0 : savedGridType;
}
function updateGrid() {
@ -58,6 +69,7 @@ function updateGrid() {
let width = mapBackground.width;
let height = mapBackground.height;
let svg = document.getElementById('map-grid');
if (gridLineWidth <= 0) { gridLineWidth = 1; }
svg.setAttribute('width', width);
svg.setAttribute('height', height);
@ -77,15 +89,18 @@ function updateGridDashType(type) {
gridDashType = Math.max(0, Math.min(LINE_DASH_TYPES.length - 1, type));
let svg = document.getElementById('map-grid');
svg.setAttribute('stroke-dasharray', LINE_DASH_TYPES[gridDashType].map(v => v * gridSize).join(' '))
localStorage.setItem(LOCAL_GRID_TYPE, gridDashType);
}
function updateGridColor(color) {
let svg = document.getElementById('map-grid');
svg.setAttribute('stroke', color);
gridColor = color;
localStorage.setItem(LOCAL_GRID_COLOR, color);
}
function updateGridWidth(width) {
let svg = document.getElementById('map-grid');
gridLineWidth = width;
localStorage.setItem(LOCAL_GRID_WIDTH, width);
svg.setAttribute('stroke-width', gridLineWidth);
}
@ -251,18 +266,20 @@ function openRollsPopup(action) {
holder.innerHTML = ''; // remove all holder children
holder.action = action;
if (action.rolls != undefined && Array.isArray(action.rolls)) {
let i = 0;
for (const r of action.rolls) {
// name (extra) (dice_amount)d(dice_type) + constant | enabled
console.log(r);
let row = document.createElement('div');
row.style.display = 'flex';
row.className = 'dice-roll-row';
row.roll = r;
row.innerHTML = `
<p style='flex-grow: 1;'>${r.name} ${r.extra != null ? '(' + r.extra + ')' : ''}</p>
<p style='margin-right: 8px;'>${r.dice_amount}d${r.dice_type} + ${r.constant}</p>
<input type='checkbox' ${r.enabled ? 'checked' : ''} />
<label for='dice-roll-row-${i}'>${r.dice_amount}d${r.dice_type} + ${r.constant}</label>
<input id='dice-roll-row-${i}' type='checkbox' ${r.enabled ? 'checked' : ''} />
`;
holder.appendChild(row);
i += 1;
}
}
document.getElementById('dice-roll-title').innerText = action.display_name ?? action.name;