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 +55 -49
4 changed files with 55 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/kotlin/de/arindy/dicetower/DiceResource.kt
View File

@ -29,7 +29,7 @@ final class DiceResource(@Context val sse: Sse) {
if (!sseBroadcasters.containsKey(id)) {
sseBroadcasters[id] = sse.newBroadcaster()
}
data.roll = data.command.split(" ").toTypedArray<String>()
data.roll = data.command.split(" ", "&", "and").filter { it.isNotEmpty() }.map { it.trim() }.toTypedArray<String>()
data.room = id.split(":")[0]
data.user = id.split(":")[1]
sseBroadcasters[id]?.broadcast(
@ -37,7 +37,7 @@ final class DiceResource(@Context val sse: Sse) {
.mediaType(MediaType.APPLICATION_JSON_TYPE).data(data).build()
)
if (data.roll.all { it.trim().isNotEmpty() }) {
results(data.room!!, Result(data.name))
results(data.room!!, Result(data.name, data.user!!, data.themeColor))
}
}
@ -72,6 +72,6 @@ final class DiceResource(@Context val sse: Sse) {
}
@RegisterForReflection
data class Result(val name: String) {}
data class Result(val name: String, val user: String, val themeColor: String) {}
}

2
src/main/resources/templates/overlay.html
View File

@ -70,6 +70,8 @@
httpRequest.setRequestHeader('Content-Type', 'application/json')
httpRequest.send(JSON.stringify({
name: data.name,
user: data.user,
themeColor: data.themeColor,
results: rollResult,
} ))
}

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

@ -4,12 +4,14 @@
<meta charset="UTF-8">
<title>Dice-Tower</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/vendor/color-picker.js"></script>
<style>
.w3-theme-l6 { color:#000 !important; background-color:#999999 !important}
.w3-theme-l4 { color:#fff !important; background-color:#666666 !important}
.w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
.collapsible {
background-color: #b218cd;
background-color: #333333;
color: black;
cursor: pointer;
margin-top: 10px;
@ -25,7 +27,8 @@
padding: 0 18px;
display: none;
overflow: hidden;
background-color: black;
background-color: #999999;
color: #000
}
button {
@ -36,45 +39,47 @@
}
</style>
</head>
<body class="w3-theme-l4">
<body class="w3-theme-l1">
<div class="w3-container w3-content" style="height: 100vh">
<h1>Dice-Tower</h1>
<p>Welcome to Dice-Tower</p>
<div class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
<label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
<label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
</div>
<div id="dice-tower" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
<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/>
<hr style="width:100%;color:black;background-color:black;height:1px">
<label for="theme">Theme </label>
<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 id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs</button>
<div class="content">
<color-picker value="#b218cd" id="themeColor"></color-picker>
<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/>
</div>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
<div class="content">
<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/>
<p>Example Commands: "1d6", "2d8 1d100", "5d6+10"</p>
<p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
<label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
<button hidden id="roll" onclick="roll()">Roll</button>
</div>
<button id="start" onclick="start()">Start</button>
<div id="results" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
<div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
<h2>Results</h2>
<iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden" onload="this.height=this.contentWindow.document.body.scrollHeight;"></iframe>
<iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
</div>
</div>
@ -83,7 +88,6 @@
return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
}
function start(event) {
console.log(event)
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('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
@ -117,27 +121,27 @@
for (let i = 0; i < coll.length; i++) {
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;
if (content.style.display === "block") {
content.style.display = "none";
this.classList.remove("active");
} 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";
}
});
}
if (!localStorage.getItem("userId")) {
localStorage.setItem("userId", self.crypto.randomUUID());
}
document.addEventListener("DOMContentLoaded", async() => {
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>
</body>
</html>

10
src/main/resources/templates/results.html
View File

@ -5,7 +5,7 @@
<title>Results</title>
</head>
<body>
<div id="results" style="padding: 25px; font-size: x-large">
<div id="results" style="font-size: x-large">
</div>
<script type="module">
function url() {
@ -14,8 +14,8 @@
const evtSource = new EventSource(url() + '/dice/{room}/results');
evtSource.addEventListener('message', function (event) {
let data = JSON.parse(event.data);
let name = document.getElementById(data.name) ?? document.createElement('div');
name.id = data.name;
let name = document.getElementById(data.user) ?? document.createElement('div');
name.id = data.user;
name.replaceChildren(...[]);
let node = document.createElement('p');
let resultText = ''
@ -27,10 +27,10 @@
result.rolls.forEach(roll => {
values.push(roll.value);
})
resultText += ' (' + values.join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>': result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>': '') + ' = <strong style="font-size: x-large">' + result.value + '</strong>) '
resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>': result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>': '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
})
}
node.innerHTML = '<strong>' + data.name + ':</strong> &#127922; ' + resultText
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922; ' + resultText
name.appendChild(node)
document.getElementById('results').appendChild(name);
})