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

map grid

Browse source
This commit is contained in:
Rusty Striker 2025-06-22 20:49:54 +03:00
parent 2a7324b133
commit bb7d3c48ea
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
6 changed files with 98 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

81
assets/web/app.js
View file

@ -1,12 +1,22 @@
// init - game view (map)
const GRID_SIZE = 200; // Grid size in pixels
var mapScale = 1.0;
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 gridDashType = 1;
var gridLineWidth = 2;
var gridSize = 200; // Grid size in pixels
var gridOffset = [0, 0]
var gridColor = 'red';
var showGrid = true;
const LINE_DASH_TYPES = [
[1.0, 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.3, 0.2, 0.3, 0.1],
[0.1, 0.8, 0.1],
];
function init() {
let view = document.getElementById('game-view');
@ -40,34 +50,44 @@ function init() {
}
document.body.onmousemove = onMoveableDivDrag;
document.body.onmouseup = onMoveableDivMouseUp;
let mapBackground = document.getElementById('map-background');
updateGridCanvas(mapBackground.width, mapBackground.height);
}
function updateGridCanvas(width, height) {
function updateGrid() {
// Draw the grid on the grid thing
let mapBackground = document.getElementById('map-background');
let width = mapBackground.width;
let height = mapBackground.height;
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],
];
svg.setAttribute('width', width);
svg.setAttribute('height', height);
svg.setAttribute('stroke', gridColor);
svg.setAttribute('stroke-width', gridLineWidth);
svg.setAttribute('stroke-dasharray', LINE_DASH_TYPES[gridDashType].map(v => v * gridSize).join(' '))
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;
svg.innerHTML += `<line x1="0" x2="${width}" y1="${i}" y2="${i}" />`;
svg.innerHTML += `<line x1="${i}" x2="${i}" y1="0" y2="${height}" />`;
while (i <= Math.max(width, height)) {
svg.innerHTML += `<line x1="${gridOffset[0] - gridSize}" x2="${width + gridOffset[0]}" y1="${i + gridOffset[1]}" y2="${i + gridOffset[1]}" vector-effect="non-scaling-stroke" />`;
svg.innerHTML += `<line x1="${i + gridOffset[0]}" x2="${i + gridOffset[0]}" y1="${gridOffset[1] - gridSize}" y2="${height + gridOffset[1]}" vector-effect="non-scaling-stroke" />`;
i += gridSize;
}
}
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(' '))
}
function updateGridColor(color) {
let svg = document.getElementById('map-grid');
svg.setAttribute('stroke', color);
gridColor = color;
}
function updateGridWidth(width) {
let svg = document.getElementById('map-grid');
gridLineWidth = width;
svg.setAttribute('stroke-width', gridLineWidth);
}
tavern.onlogin = (s) => {
if (s) {
@ -136,11 +156,11 @@ tavern.onspawntoken = (t) => {
let map = document.getElementById('map');
let token = document.createElement('div');
token.className = 'token token-transition';
token.style.top = `${t.y * GRID_SIZE}px`;
token.style.left = `${t.x * GRID_SIZE}px`;
token.style.top = `${t.y * gridSize + gridOffset[1]}px`;
token.style.left = `${t.x * gridSize + gridOffset[0]}px`;
token.token_id = t.token_id;
token.innerHTML = `
<img src='${t.img}' ondragstart='return false;'>
<img src='${t.img}' style="width: ${gridSize}px; height: ${gridSize}px;" ondragstart='return false;'>
`
token.onmousedown = (e) => {
token.classList.remove('token-transition');
@ -154,8 +174,8 @@ tavern.onspawntoken = (t) => {
tavern.onmovetoken = (m) => {
let token = Array.from(document.getElementsByClassName('token')).filter(t => t.token_id == m.token_id)[0]
if (token) {
token.style.top = `${m.y * GRID_SIZE}px`;
token.style.left = `${m.x * GRID_SIZE}px`;
token.style.top = `${(m.y * gridSize) + gridOffset[1]}px`;
token.style.left = `${(m.x * gridSize) + gridOffset[0]}px`;
}
}
tavern.onshowscene = (show) => {
@ -164,8 +184,13 @@ tavern.onshowscene = (show) => {
Array.from(map.children).filter(c => c.classList.contains('token')).forEach(c => map.removeChild(c));
let background = document.getElementById('map-background');
gridOffset = show.grid_offset;
Array.from(document.getElementsByClassName('token')).forEach(t => {
t.children[0].style.width = `${gridSize}px`;
t.children[0].style.height = `${gridSize}px`;
});
gridSize = show.grid_cell_size;
background.src = show.background ?? '';
updateGridCanvas(background.width, background.height);
for (let token of show.tokens) {
tavern.onspawntoken(token);
}
@ -205,8 +230,8 @@ function onGameMouseMove(event) {
function onGameMouseUp() {
if (draggedToken.token != null) {
let t = draggedToken.token;
let x = Math.floor(0.5 + parseInt(t.style.left) / GRID_SIZE);
let y = Math.floor(0.5 + parseInt(t.style.top) / GRID_SIZE);
let x = Math.floor(0.5 + (-gridOffset[0] + parseInt(t.style.left)) / gridSize);
let y = Math.floor(0.5 + (-gridOffset[1] + parseInt(t.style.top)) / gridSize);
let id = t.token_id;
t.classList.add('token-transition');
t.children[0].style.cursor = '';