arindy/dice-tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

saves dice config to localstorage #3

Merged
arindy merged 7 commits from update-styling into main 2025-02-10 01:20:52 +01:00
Conversation 0 Commits 7 Files Changed 4 +30 -31
1 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2dc53ad6f9 - Show all commits

61
src/main/resources/templates/pub/index.html
View File

@ -9,7 +9,7 @@
<script src="/vendor/color-picker.js"></script> <script src="/vendor/color-picker.js"></script>
<style> <style>
.collapsible { .collapsible {
background-color: #b218cd; background-color: grey;
color: black; color: black;
cursor: pointer; cursor: pointer;
margin-top: 10px; margin-top: 10px;
@ -25,7 +25,7 @@
padding: 0 18px; padding: 0 18px;
display: none; display: none;
overflow: hidden; overflow: hidden;
background-color: black; background-color: lightgrey;
} }
button { button {
@ -48,22 +48,22 @@
<label for="overlayId">Dice-Overlay </label><input type="text" readonly id="overlayId" style="width: 75%"/><br/> <label for="overlayId">Dice-Overlay </label><input type="text" readonly id="overlayId" style="width: 75%"/><br/>
<label for="resultsId">Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/> <label for="resultsId">Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/>
<hr style="width:100%;color:black;background-color:black;height:1px"> <hr style="width:100%;color:black;background-color:black;height:1px">
<label for="theme">Theme </label> <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
<select name="theme" id="theme">
<option value="default">Default</option>
<option value="blueGreenMetal">Blue-Green Metal</option>
<option value="diceOfRolling">Dice of Rolling</option>
<option value="gemstone">Gemstone</option>
<option value="gemstoneMarble">Marble Gemstone</option>
<option value="rock">Rock</option>
<option value="rust">Rust</option>
<option value="smooth">Smooth</option>
<option value="wooden">Wooden</option>
</select>
<br/>
<button type="button" class="collapsible">Theme Color</button>
<div class="content"> <div class="content">
<color-picker value="#b218cd" id="themeColor"></color-picker> <label for="theme">Theme </label>
<select name="theme" id="theme" style="margin: 25px">
<option value="default">Default</option>
<option value="blueGreenMetal">Blue-Green Metal</option>
<option value="diceOfRolling">Dice of Rolling</option>
<option value="gemstone">Gemstone</option>
<option value="gemstoneMarble">Marble Gemstone</option>
<option value="rock">Rock</option>
<option value="rust">Rust</option>
<option value="smooth">Smooth</option>
<option value="wooden">Wooden</option>
</select>
<br/>
<color-picker value="#cd72fe" id="themeColor"></color-picker><br/>
</div><br/> </div><br/>
<p>Example Commands: "1d6", "2d8 1d100", "5d6+10"</p> <p>Example Commands: "1d6", "2d8 1d100", "5d6+10"</p>
<label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/> <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
@ -83,7 +83,6 @@
return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : ''); return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
} }
function start(event) { function start(event) {
console.log(event)
if((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) { if((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId'); document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId');
document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results'; document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
@ -117,27 +116,27 @@
for (let i = 0; i < coll.length; i++) { for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () { coll[i].addEventListener("click", function () {
coll[i].style['background-color'] = document.getElementById('themeColor').value; localStorage.setItem("theme", document.getElementById('theme').value)
localStorage.setItem("themeColor", document.getElementById('themeColor').value)
const content = this.nextElementSibling; const content = this.nextElementSibling;
if (content.style.display === "block") { if (content.style.display === "block") {
content.style.display = "none"; content.style.display = "none";
this.classList.remove("active");
} else { } else {
this.classList.add("active");
for (let c of coll) {
const cont = c.nextElementSibling;
if (cont !== content) {
c.classList.remove("active");
cont.style.display = "none";
}
}
content.style.display = "block"; content.style.display = "block";
} }
}); });
} }
if (!localStorage.getItem("userId")) { document.addEventListener("DOMContentLoaded", async() => {
localStorage.setItem("userId", self.crypto.randomUUID()); if (!localStorage.getItem("userId")) {
} localStorage.setItem("userId", self.crypto.randomUUID());
}
if (localStorage.getItem("theme")) {
document.getElementById('theme').value = localStorage.getItem("theme")
}
if (localStorage.getItem("themeColor")) {
document.getElementById('themeColor').setColor(localStorage.getItem("themeColor"));
}
})
</script> </script>
</body> </body>
</html> </html>