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

settings popup with grid stuff & make roll popup a bit better

Browse source
This commit is contained in:
Rusty Striker 2025-06-27 14:04:26 +03:00
parent 8bacc43bd8
commit 56ab0642f2
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
3 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/web/index.html
View file

@ -41,13 +41,14 @@
</div>
<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; width: auto; 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;">
THIS IS THE ROLL DISPLAY
</h3>
<div id="dice-roll-holder" style="display: flex; flex-direction: column;">
<div id="dice-roll-holder"
style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;">
</div>
<div style="display: flex;">
@ -60,15 +61,12 @@
</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('settings-window')"><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; user-select: none;">
<img id="map-background" src="https://rustystriker.dev/molly.jpg" onload="updateGrid()"
onerror="alert('Failed loading map')">
<img id="map-background" onload="updateGrid()" onerror="alert('Failed loading map')">
<svg id="map-grid" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px">
<g vector-effect="non-scaling-stroke" id="map-grid-horizontal" />
<g vector-effect="non-scaling-stroke" id="map-grid-vertical" />
</svg>
</div>
</div>
@ -101,6 +99,35 @@
cccc
</div>
</div>
<div id="settings-window" style="position: absolute; background-color: #ffffd6; color:black; display: none;
flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
<div style="min-width: 150px; user-select: none; display: flex;"
onmousedown="onMoveableDivMouseDown(event, 'settings-window')">
<h3 style="flex-grow: 1; margin: 8px 0;">Settings</h3>
<!-- it looks bad, for now just click the 'open initiative tracker' button again -->
<button onclick="document.getElementById('settings-window').style.display = 'none';"
style="height: fit-content; align-self: center; background-color: transparent; font-size: 20px; border: 0;">
X
</button>
</div>
<hr style="width: 100%; margin: 0px; align-self: center;" />
<div style="display: grid; grid-template-columns: auto auto; gap: 16px; margin-top: 8px;">
<div>Grid width</div>
<input id="settings-grid-width" type="number" onchange="updateGridWidth(event.target.value)"
style="width: 55px;">
<div>Grid color</div>
<input id="settings-grid-color" type="color" onchange="updateGridColor(event.target.value)">
<div>Grid type</div>
<select id="settings-grid-type" onchange="updateGridDashType(event.target.selectedIndex)"
style="width: 140px;">
<option value="0" selected>Solid</option>
<option value="1">Cross</option>
<option value="2">Hollow cross</option>
<option value="3">Large hollow cross</option>
<option value="4">Squire</option>
</select>
</div>
</div>
</body>
</html>