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

token movement now works (and syncs between devices)

Browse source
This commit is contained in:
Rusty Striker 2024-10-09 20:23:02 +03:00
parent be6dd7c0e4
commit 95c2595279
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
6 changed files with 65 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

40
assets/web/index.html
View file

@ -8,6 +8,7 @@
var mapScale = 1.0;
var mapOffsetX = 0.0;
var mapOffsetY = 0.0;
var draggedToken = { token: null, offX: 0, offY: 0 };
function init() {
let view = document.getElementById('game-view');
@ -15,6 +16,7 @@
view.onclick = (e) => console.log('click', e);
view.onauxclick = (e) => console.log(e);
view.onmousemove = onGameMouseMove;
view.onmouseup = onGameMouseUp;
view.oncontextmenu = () => false;
// allow sending chat message using enter (and shift-enter for new line)
document.getElementById('newmsg-content').onkeypress = (e) => {
@ -95,13 +97,20 @@
console.log(t);
let map = document.getElementById('map');
let token = document.createElement('div');
token.className = 'token';
token.className = 'token token-transition';
token.style.top = `${t.y * GRID_SIZE}px`;
token.style.left = `${t.x * GRID_SIZE}px`;
token.token_id = t.token_id;
token.innerHTML = `
<img src='data:image/jpg;base64,${t.img}'>
<img src='data:image/jpg;base64,${t.img}' ondragstart='return false;'>
`
token.onmousedown = (e) => {
token.classList.remove('token-transition');
draggedToken.token = token;
draggedToken.offX = ((e.clientX - mapOffsetX) / mapScale) - parseInt(token.style.left);
draggedToken.offY = ((e.clientY - mapOffsetY) / mapScale) - parseInt(token.style.top);
token.children[0].style.cursor = 'grabbing';
}
map.append(token);
}
tavern.onmovetoken = (m) => {
@ -136,6 +145,25 @@
map.style.left = `${mapOffsetX}px`;
map.style.top = `${mapOffsetY}px`;
}
else if(draggedToken.token != null && event.buttons == 1) {
let top = (event.clientY - mapOffsetY) / mapScale - draggedToken.offY;
let left = (event.clientX - mapOffsetX) / mapScale - draggedToken.offX;
console.log(event.clientX, event.clientY, draggedToken.offX, draggedToken.offY);
draggedToken.token.style.top = `${top}px`;
draggedToken.token.style.left = `${left}px`;
}
}
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 id = t.token_id;
t.classList.add('token-transition');
t.children[0].style.cursor = '';
tavern.move_token(id, x, y);
draggedToken.token = null;
}
}
function sendChatMessage() {
let tb = document.getElementById('newmsg-content');
@ -209,9 +237,11 @@
}
.token {
position: absolute;
}
.token-transition {
transition:
top 0.5s ease-in,
left 0.5s ease-in;
top 0.5s ease-in,
left 0.5s ease-in;
}
.token img {
cursor: grab;
@ -248,7 +278,7 @@
<div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 1;" >
floating<br>stuff
</div>
<div id="map" style="position:absolute;">
<div id="map" style="position:absolute; transform-origin: top left;">
<img src="https://rustystriker.dev/molly.jpg" height="200%" >
</div>
</div>