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

make initiative tracker window that is moveable

Browse source
This commit is contained in:
Rusty Striker 2024-10-12 15:06:32 +03:00
parent 8b9b5db299
commit 0eaffc9a8f
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
1 changed files with 55 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/web/index.html
View file

@ -9,6 +9,7 @@
var mapOffsetX = 0.0;
var mapOffsetY = 0.0;
var draggedToken = { token: null, offX: 0, offY: 0 };
var draggedDiv = { div: null, offX: 0, offY: 0 };
function init() {
let view = document.getElementById('game-view');
@ -40,6 +41,8 @@
document.body.onclick = (e) => {
document.getElementById('msg-context-menu').style.display = 'none';
}
document.body.onmousemove = onMoveableDivDrag;
document.body.onmouseup = onMoveableDivMouseUp;
// TODO: Remove when done dev-ing
tavern.onmessage({ text: 'test', id: 1, source: 'rusty', character: 'bart' });
}
@ -150,7 +153,7 @@
}
function onGameMouseMove(event) {
if(event.buttons == 2) {
// middle click
// right click
let map = document.getElementById('map');
let mult = event.ctrlKey ? 2.0 : 1.0;
mapOffsetX += event.movementX * mult;
@ -203,7 +206,7 @@
holder.appendChild(row);
}
}
document.getElementById('dice-roll-title').innerText = action.display_name ?? action.display;
document.getElementById('dice-roll-title').innerText = action.display_name ?? action.name;
document.getElementById('dice-roll-popup').style.display = 'flex';
}
function rollPopup() {
@ -239,6 +242,30 @@
console.log(rolls);
tavern.action_result(holder.action.name, 'Louise', [], rolls);
}
function onMoveableDivMouseDown(e, id) {
if(e.buttons == 1) {
let div = document.getElementById(id);
let rect = div.getBoundingClientRect();
draggedDiv.div = div;
draggedDiv.offX = e.clientX - rect.x;
draggedDiv.offY = e.clientY - rect.y;
}
}
function onMoveableDivDrag(e) {
if(draggedDiv.div) {
draggedDiv.div.style.right = '';
draggedDiv.div.style.top = `${e.clientY - draggedDiv.offY}px`;
draggedDiv.div.style.left = `${e.clientX - draggedDiv.offX}px`;
}
}
function onMoveableDivMouseUp(e, id) {
draggedDiv.div = null;
}
function showHideDiv(id) {
let div = document.getElementById(id);
div.style.display = div.style.display == 'none' ? 'flex' : 'none';
}
</script>
<style>
html, body {
@ -342,10 +369,10 @@
</div>
</div>
<div id="game-view" style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;" >
<div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 1;" >
<div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;" >
floating<br>stuff
</div>
<div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 2; top: 0px; left: 0px">
<div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
<div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
<div style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
<h3 id="dice-roll-title" style="align-self: center;">
@ -361,6 +388,10 @@
</div>
</div>
</div>
<div style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
<button style="background-color: #ffffd6;"><b>s</b></button>
<button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
</div>
<div id="map" style="position:absolute; transform-origin: top left;">
<img src="https://rustystriker.dev/molly.jpg" height="200%" >
</div>
@ -371,5 +402,25 @@
<li>Delete (TODO)</li>
</ul>
</div>
<div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none; flex-direction: column; top: 40px; right: 8px">
<div style="background-color: black; color:#ffffd6; margin-top: 0px; margin-bottom: 8px; padding: 0 4px; min-width: 150px; user-select: none; display: flex;"
onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker')">
<h3 style="flex-grow: 1;">Initiative</h3>
<!-- it looks bad, for now just click the 'open initiative tracker' button again -->
<button onclick="document.getElementById('initiative-tracker').style.display = 'none';"
style="height: fit-content; align-self: center; background-color: transparent; color:#ffffd6; font-size: 20px; border: 0;">
X
</button>
</div>
<div>
aaaa
</div>
<div>
bbbb
</div>
<div>
cccc
</div>
</div>
</body>
</html>