introduces results for individual players
All checks were successful
CI / deploy (pull_request) Successful in 4m23s
CI / deploy (push) Successful in 4m16s

This commit is contained in:
Arindy
2025-02-10 03:24:20 +01:00
parent 7f40d85022
commit 9b25a69636
5 changed files with 97 additions and 43 deletions

View File

@@ -37,6 +37,60 @@
input {
margin: 10px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 25px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #333333;
}
input:focus + .slider {
box-shadow: 0 0 1px #333333;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body class="w3-theme-l1">
@@ -50,8 +104,9 @@
<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">
<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="overlayId">Dice-Overlay (Only open once) </label><input type="text" readonly id="overlayId" style="width: 70%"/><br/>
<label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/>
<label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="width: 75%"/><br/>
</div>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
<div class="content">
@@ -72,7 +127,12 @@
</div><br/>
<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>
<button hidden id="roll" onclick="roll()">Roll</button><br/><br/>
<label for="resultSwitch">Show all results </label>
<label class="switch">
<input type="checkbox" id="resultSwitch">
<span class="slider"></span>
</label>
</div>
<button id="start" onclick="start()">Start</button>
@@ -91,7 +151,8 @@
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') + '?scale=7';
document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
document.getElementById('resultFrame').src = url() + '/overlay/' + document.getElementById('room').value + '/results';
document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId');
document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
document.getElementById('roll').hidden = false;
document.getElementById('start').hidden = true;
document.getElementById('dice-tower').hidden = false;
@@ -139,6 +200,15 @@
}
});
}
document.getElementById('resultSwitch').addEventListener('change', function() {
if (!this.checked) {
document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
} else {
document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
}
})
document.addEventListener("DOMContentLoaded", async() => {
if (!localStorage.getItem("userId")) {
localStorage.setItem("userId", self.crypto.randomUUID());