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; document.body.onmouseup = onMoveableDivMouseUp;
let mapBackground = document.getElementById('map-background'); 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 // Draw the grid on the grid thing
let canvas = document.getElementById('map-grid'); let svg = 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 lineDashTypes = [ let lineDashTypes = [
[0.1, 0.8, 0.1, 0.0], [0.1, 0.8, 0.1, 0.0],
[0, 0.1, 0.1, 0.6, 0.1, 0.1], [0, 0.1, 0.1, 0.6, 0.1, 0.1],
[0, 0.1, 0.3, 0.2, 0.3, 0.1], [0, 0.1, 0.3, 0.2, 0.3, 0.1],
[0.1, 0.8, 0.1], [0.1, 0.8, 0.1],
] ];
ctx.setLineDash(lineDashTypes[gridDashType].map(i => GRID_SIZE * i)); svg.setAttribute('width', width);
ctx.beginPath(); 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; let i = 0;
while (i < Math.max(width, height)) { while (i < Math.max(width, height)) {
i += GRID_SIZE; i += GRID_SIZE;
ctx.moveTo(i, 0); svg.innerHTML += `<line x1="0" x2="${width}" y1="${i}" y2="${i}" />`;
ctx.lineTo(i, width); svg.innerHTML += `<line x1="${i}" x2="${i}" y1="0" y2="${height}" />`;
ctx.moveTo(0, i);
ctx.lineTo(height, i);
} }
ctx.closePath();
ctx.stroke();
} }
tavern.onlogin = (s) => { tavern.onlogin = (s) => {
@ -168,6 +163,9 @@ tavern.onshowscene = (show) => {
// Remove existing tokens // Remove existing tokens
Array.from(map.children).filter(c => c.classList.contains('token')).forEach(c => map.removeChild(c)); 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) { for (let token of show.tokens) {
tavern.onspawntoken(token); tavern.onspawntoken(token);
} }
@ -183,11 +181,9 @@ function onLoginClick() {
} }
function onGameViewScroll(event) { function onGameViewScroll(event) {
let map = document.getElementById('map'); let map = document.getElementById('map');
let mapBackground = document.getElementById('map-background');
mapScale += (event.wheelDelta / 1800.0); mapScale += (event.wheelDelta / 1800.0);
if (mapScale < 0.1) { mapScale = 0.1; } if (mapScale < 0.1) { mapScale = 0.1; }
map.style.transform = `scale(${mapScale})`; map.style.transform = `scale(${mapScale})`;
updateGridCanvas(mapBackground.width, mapBackground.height, 1.0 / mapScale);
} }
function onGameMouseMove(event) { function onGameMouseMove(event) {
if (event.buttons == 2) { 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> <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
</div> </div>
<div id="map" style="position:absolute; transform-origin: top left; user-select: none;"> <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%"> <img id="map-background" src="https://rustystriker.dev/molly.jpg">
<canvas style="position: absolute; top: 0px; left: 0px;" id="map-grid" width="1000" <svg id="map-grid" xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke" style="position: absolute; top: 0px; left: 0px"></svg>
height="1000"></canvas>
</div> </div>
</div> </div>
</div> </div>