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

use the background from show scene and start transfer of grid to svg instead of canvas

Browse source
This commit is contained in:
Rusty Striker 2025-06-20 18:07:44 +03:00
parent 46e3ac73af
commit 2a7324b133
Signed by: RustyStriker
GPG key ID: 9DBDBC7C48FC3C31
2 changed files with 18 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

36
assets/web/app.js
View file

@ -42,36 +42,31 @@ function init() {
document.body.onmouseup = onMoveableDivMouseUp;
let mapBackground = document.getElementById('map-background');
updateGridCanvas(mapBackground.width, mapBackground.height, 1.0);
updateGridCanvas(mapBackground.width, mapBackground.height);
}
function updateGridCanvas(width, height, lineWidth) {
function updateGridCanvas(width, height) {
// Draw the grid on the grid thing
let canvas = document.getElementById('map-grid');
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
ctx.reset();
if (!showGrid) { return; }
ctx.lineWidth = lineWidth ?? 1.0;
let svg = document.getElementById('map-grid');
let lineDashTypes = [
[0.1, 0.8, 0.1, 0.0],
[0, 0.1, 0.1, 0.6, 0.1, 0.1],
[0, 0.1, 0.3, 0.2, 0.3, 0.1],
[0.1, 0.8, 0.1],
]
ctx.setLineDash(lineDashTypes[gridDashType].map(i => GRID_SIZE * i));
ctx.beginPath();
];
svg.setAttribute('width', width);
svg.setAttribute('height', height);
svg.innerHTML = '';
svg.setAttribute('stroke', 'black');
svg.setAttribute('stroke-width', '15');
svg.setAttribute('stroke-dash-array', lineDashTypes[gridDashType].join(' '))
let i = 0;
while (i < Math.max(width, height)) {
i += GRID_SIZE;
ctx.moveTo(i, 0);
ctx.lineTo(i, width);
ctx.moveTo(0, i);
ctx.lineTo(height, i);
svg.innerHTML += `<line x1="0" x2="${width}" y1="${i}" y2="${i}" />`;
svg.innerHTML += `<line x1="${i}" x2="${i}" y1="0" y2="${height}" />`;
}
ctx.closePath();
ctx.stroke();
}
tavern.onlogin = (s) => {
@ -168,6 +163,9 @@ tavern.onshowscene = (show) => {
// Remove existing tokens
Array.from(map.children).filter(c => c.classList.contains('token')).forEach(c => map.removeChild(c));
let background = document.getElementById('map-background');
background.src = show.background ?? '';
updateGridCanvas(background.width, background.height);
for (let token of show.tokens) {
tavern.onspawntoken(token);
}
@ -183,11 +181,9 @@ function onLoginClick() {
}
function onGameViewScroll(event) {
let map = document.getElementById('map');
let mapBackground = document.getElementById('map-background');
mapScale += (event.wheelDelta / 1800.0);
if (mapScale < 0.1) { mapScale = 0.1; }
map.style.transform = `scale(${mapScale})`;
updateGridCanvas(mapBackground.width, mapBackground.height, 1.0 / mapScale);
}
function onGameMouseMove(event) {
if (event.buttons == 2) {

5
assets/web/index.html
View file

@ -64,9 +64,8 @@
<button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
</div>
<div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
<img id="map-background" src="https://rustystriker.dev/molly.jpg" height="200%">
<canvas style="position: absolute; top: 0px; left: 0px;" id="map-grid" width="1000"
height="1000"></canvas>
<img id="map-background" src="https://rustystriker.dev/molly.jpg">
<svg id="map-grid" xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke" style="position: absolute; top: 0px; left: 0px"></svg>
</div>
</div>
</div>