Compare commits
4 Commits
7ee16d5f3e
...
af41ff5d78
| Author | SHA1 | Date | |
|---|---|---|---|
| af41ff5d78 | |||
|
153b25e53f | ||
|
|
2e6267e7b4 | ||
|
|
821e939b3d |
@ -7,9 +7,9 @@
|
||||
<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}
|
||||
.w3-theme-l6 { color:#000 !important; background-color:#999999 !important; border-radius: 10px;}
|
||||
.w3-theme-l4 { color:#fff !important; background-color:#666666 !important; border-radius: 10px;}
|
||||
.w3-theme-l1 { color:#fff !important; background-color:#333333 !important; border-radius: 10px;}
|
||||
.collapsible {
|
||||
background-color: #333333;
|
||||
color: black;
|
||||
@ -28,11 +28,16 @@
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background-color: #999999;
|
||||
color: #000
|
||||
color: #000;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
border: #333333 3px solid;
|
||||
border-radius: 10px;
|
||||
background: #333333;
|
||||
color: #fff
|
||||
}
|
||||
input {
|
||||
margin: 10px;
|
||||
@ -98,6 +103,7 @@
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
font-size: large;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@ -107,6 +113,21 @@
|
||||
color:#fff !important;
|
||||
background-color:#333333dd !important
|
||||
}
|
||||
|
||||
#dice-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#dice-box canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 20px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w3-theme-l1">
|
||||
@ -115,34 +136,22 @@
|
||||
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
|
||||
<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/>
|
||||
<button id="start" onclick="start()" style="align-self: center">Start</button>
|
||||
<button id="start" onclick="start()" style="align-self: center">Start 🞂</button>
|
||||
</div>
|
||||
<div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
|
||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a>🞃</a></button>
|
||||
|
||||
<div class="content">
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
||||
<label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label><input type="text" readonly id="overlayId" style="flex-grow: 1"/><button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button><br/>
|
||||
<div popover id="overlay-hint" class="tooltip">
|
||||
<p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p>
|
||||
<p>Query Params you can Change:</p>
|
||||
<ul>
|
||||
<li><strong>scale</strong> changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)</li>
|
||||
<li><strong>clearAfter</strong> time until dice are cleared (in seconds)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label>
|
||||
<input type="text" readonly id="overlayId" style="flex-grow: 1"/>
|
||||
<button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
||||
<label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
|
||||
<div popover id="all-results-hint" class="tooltip">
|
||||
<p>Shows all Results in this room</p>
|
||||
</div>
|
||||
<label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
||||
<label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
|
||||
<div popover id="my-results-hint" class="tooltip">
|
||||
<p>Shows only my Results in this room</p>
|
||||
</div>
|
||||
<label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a></button>
|
||||
@ -161,14 +170,15 @@
|
||||
</select>
|
||||
<br/>
|
||||
<color-picker id="themeColor"></color-picker><br/>
|
||||
<button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
|
||||
<div popover id="save-dice-hint" class="tooltip">
|
||||
This saves your current theme and theme color for current Name
|
||||
</div>
|
||||
<div id="dice-box"></div>
|
||||
|
||||
<button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
|
||||
<button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
|
||||
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
||||
</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><br/><br/>
|
||||
<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">
|
||||
@ -179,6 +189,23 @@
|
||||
<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 popover id="overlay-hint" class="tooltip">
|
||||
<p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p>
|
||||
<p>Query Params you can Change:</p>
|
||||
<ul>
|
||||
<li><strong>scale</strong> changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)</li>
|
||||
<li><strong>clearAfter</strong> time until dice are cleared (in seconds)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div popover id="all-results-hint" class="tooltip">
|
||||
<p>Shows all Results in this room</p>
|
||||
</div>
|
||||
<div popover id="my-results-hint" class="tooltip">
|
||||
<p>Shows only my Results in this room</p>
|
||||
</div>
|
||||
<div popover id="save-dice-hint" class="tooltip">
|
||||
This saves your current theme and theme color for current Name
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function url() {
|
||||
@ -270,6 +297,23 @@
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script type="module">
|
||||
import DiceBox from "/vendor/dice-box/dice-box.es.js";
|
||||
document.addEventListener("DOMContentLoaded", async() => {
|
||||
document.getElementById('preview').onclick = async () => {
|
||||
document.getElementById('dice-box').replaceChildren(...[])
|
||||
const diceBox = new DiceBox("#dice-box", {
|
||||
assetPath: "/vendor/assets/",
|
||||
theme: document.getElementById('theme').value,
|
||||
themeColor: document.getElementById('themeColor').value,
|
||||
scale: 14
|
||||
});
|
||||
await diceBox.init()
|
||||
diceBox.roll(['1d2','1d4','1d6','1d8','1d10','1d12','1d20','1d100']);
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<footer class="w3-theme-l1 w3-center w3-padding-16">
|
||||
<a href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Dice-Tower on my GitTea</a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user