Compare commits
No commits in common. "af41ff5d78dbb8de7cae9448e530233d01df16e5" and "7ee16d5f3e9740989fb679d0885f5e1d340f4b56" have entirely different histories.
af41ff5d78
...
7ee16d5f3e
@ -7,9 +7,9 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
|
<script src="/vendor/color-picker.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.w3-theme-l6 { color:#000 !important; background-color:#999999 !important; border-radius: 10px;}
|
.w3-theme-l6 { color:#000 !important; background-color:#999999 !important}
|
||||||
.w3-theme-l4 { color:#fff !important; background-color:#666666 !important; border-radius: 10px;}
|
.w3-theme-l4 { color:#fff !important; background-color:#666666 !important}
|
||||||
.w3-theme-l1 { color:#fff !important; background-color:#333333 !important; border-radius: 10px;}
|
.w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
|
||||||
.collapsible {
|
.collapsible {
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
color: black;
|
color: black;
|
||||||
@ -28,16 +28,11 @@
|
|||||||
display: none;
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #999999;
|
background-color: #999999;
|
||||||
color: #000;
|
color: #000
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: #333333 3px solid;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #333333;
|
|
||||||
color: #fff
|
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
@ -103,7 +98,6 @@
|
|||||||
width: 5px;
|
width: 5px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
color: #000
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
@ -113,21 +107,6 @@
|
|||||||
color:#fff !important;
|
color:#fff !important;
|
||||||
background-color:#333333dd !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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="w3-theme-l1">
|
<body class="w3-theme-l1">
|
||||||
@ -136,22 +115,34 @@
|
|||||||
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
|
<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="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/>
|
<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>
|
||||||
<div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
|
<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>
|
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a>🞃</a></button>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
<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>
|
<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/>
|
||||||
<input type="text" readonly id="overlayId" style="flex-grow: 1"/>
|
<div popover id="overlay-hint" class="tooltip">
|
||||||
<button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
<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>
|
</div>
|
||||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a></button>
|
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a></button>
|
||||||
@ -170,15 +161,14 @@
|
|||||||
</select>
|
</select>
|
||||||
<br/>
|
<br/>
|
||||||
<color-picker id="themeColor"></color-picker><br/>
|
<color-picker id="themeColor"></color-picker><br/>
|
||||||
<div id="dice-box"></div>
|
<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">
|
||||||
<button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
|
This saves your current theme and theme color for current Name
|
||||||
<button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
|
</div>
|
||||||
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
|
|
||||||
</div><br/>
|
</div><br/>
|
||||||
<p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "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)"/>
|
<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 for="resultSwitch">Show all results </label>
|
||||||
<label class="switch">
|
<label class="switch">
|
||||||
<input type="checkbox" id="resultSwitch">
|
<input type="checkbox" id="resultSwitch">
|
||||||
@ -189,23 +179,6 @@
|
|||||||
<iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" 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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
function url() {
|
function url() {
|
||||||
@ -297,23 +270,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
</body>
|
||||||
<footer class="w3-theme-l1 w3-center w3-padding-16">
|
<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>
|
<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