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

some updates to the game grid

Browse source
This commit is contained in:
Rusty Striker 2025-06-18 19:47:19 +03:00
parent 3da8c9d5c0
commit 1d63e3d983
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
2 changed files with 42 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

42
assets/web/app.js
View file

@ -5,6 +5,8 @@ var mapOffsetX = 0.0;
var mapOffsetY = 0.0;
var draggedToken = { token: null, offX: 0, offY: 0 };
var draggedDiv = { div: null, offX: 0, offY: 0 };
var gridDashType = 0;
var showGrid = true;
function init() {
let view = document.getElementById('game-view');
@ -13,19 +15,19 @@ function init() {
view.onmouseup = onGameMouseUp;
view.oncontextmenu = () => false;
// allow sending chat message using enter (and shift-enter for new line)
document.getElementById('newmsg-content').onkeypress = (e) => {
document.getElementById('newmsg-content').onkeydown = (e) => {
if (e.key == "Enter" && !e.shiftKey) {
sendChatMessage();
return false;
}
}
document.getElementById('login-username').onkeypress = (e) => {
document.getElementById('login-username').onkeydown = (e) => {
if (e.key == 'Enter') {
document.getElementById('login-pass').focus();
return false;
}
}
document.getElementById('login-pass').onkeypress = (e) => {
document.getElementById('login-pass').onkeydown = (e) => {
if (e.key == 'Enter') {
onLoginClick();
return false;
@ -38,6 +40,38 @@ function init() {
}
document.body.onmousemove = onMoveableDivDrag;
document.body.onmouseup = onMoveableDivMouseUp;
let mapBackground = document.getElementById('map-background');
updateGridCanvas(mapBackground.width, mapBackground.height, 1.0);
}
function updateGridCanvas(width, height, lineWidth) {
// 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 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();
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);
}
ctx.closePath();
ctx.stroke();
}
tavern.onlogin = (s) => {
@ -149,9 +183,11 @@ 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) {

4
assets/web/index.html
View file

@ -64,7 +64,9 @@
<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 src="https://rustystriker.dev/molly.jpg" height="200%">
<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>
</div>
</div>
</div>