143 lines
6.8 KiB
HTML
143 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dice-Tower - Chatoverlay</title>
|
|
<link rel="stylesheet" href="/vendor/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
|
|
<link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="icon" type="image/png" href="/favicon.png">
|
|
<script src="/vendor/color-picker.js"></script>
|
|
</head>
|
|
<body class="w3-theme-l1">
|
|
|
|
<div class="w3-container w3-content"
|
|
style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between; padding: 25px">
|
|
<h1 style="text-align: center"><i class="fa-solid fa-dice-d20"></i> Dice-Tower - Chatoverlay <i
|
|
class="fa-solid fa-dice-d20"></i></h1>
|
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center;">
|
|
<p>Allows Chat to roll a given amount of one dice</p>
|
|
<p>Example: "!roll 5d20"</p>
|
|
</div>
|
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container"
|
|
style="padding: 25px; text-align: center; margin-bottom: auto;">
|
|
<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>
|
|
<color-picker id="themeColor"></color-picker>
|
|
<div>
|
|
<label for="channel">Channel </label>
|
|
<input type="text" id="channel" style="width: 400px; margin-top: 20px" value="arindy"/>
|
|
<label for="cmd">Command </label>
|
|
<input type="text" id="cmd" style="width: 100px; margin-top: 20px" value="roll"/>
|
|
</div>
|
|
<div>
|
|
<label class="checkbox" id="modsAllowed-container">Allow mods to roll
|
|
<input type="checkbox" id="modsAllowed">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
<label class="checkbox" id="vipAllowed-container">Allow VIPs to roll
|
|
<input type="checkbox" id="vipAllowed">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
<label class="checkbox" id="subsAllowed-container">Allow subs to roll
|
|
<input type="checkbox" id="subsAllowed">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="scale">Dice-Scale </label>
|
|
<input type="number" id="scale" style="width: 50px; margin-top: 20px" value="7"/>
|
|
<label for="maxDice">Max number of dice </label>
|
|
<input type="number" id="maxDice" style="width: 50px; margin-top: 20px" value="20"/>
|
|
</div>
|
|
<div>
|
|
<label for="clearAfter">Clear dice after (in seconds)</label>
|
|
<input type="number" id="clearAfter" style="width: 50px; margin-top: 20px" value="10"/>
|
|
<label for="timeout">Command-timeout (in seconds)</label>
|
|
<input type="number" id="timeout" style="width: 50px; margin-top: 20px" value="10"/>
|
|
</div>
|
|
<div id="dice-box" style="height: 400px"></div>
|
|
<button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
|
|
<button style="margin: 10px" id="generate">Generate overlay-link <i class="fa-solid fa-link"></i></button>
|
|
<div>
|
|
<input type="text" readonly id="link" style="width: 80%; margin-top: 20px"
|
|
onclick="copyToClipboard(this.id)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="snackbar-container">
|
|
<div id="snackbar">.. they see them rolling</div>
|
|
</div>
|
|
<script>
|
|
function copyToClipboard(id) {
|
|
let copyText = document.getElementById(id)
|
|
if (copyText.value.length > 0) {
|
|
copyText.select();
|
|
copyText.setSelectionRange(0, 99999);
|
|
navigator.clipboard.writeText(copyText.value).then(() => {
|
|
showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
|
|
})
|
|
}
|
|
}
|
|
|
|
function showSnackbar(message) {
|
|
let snackbar = document.getElementById("snackbar");
|
|
let snackbarContainer = document.getElementById("snackbar-container");
|
|
snackbar.innerHTML = message;
|
|
snackbar.className = "show";
|
|
snackbarContainer.className = "show";
|
|
setTimeout(() => {
|
|
snackbar.className = "";
|
|
snackbarContainer.className = "";
|
|
}, 3000)
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import DiceBox from "/vendor/dice-box/dice-box.es.js";
|
|
|
|
function url() {
|
|
return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
|
|
}
|
|
|
|
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: +document.getElementById('scale').value
|
|
});
|
|
await diceBox.init()
|
|
diceBox.roll(['1d2', '1d4', '1d6', '1d8', '1d10', '1d12', '1d20', '1d100']);
|
|
}
|
|
document.getElementById('generate').onclick = async () => {
|
|
document.getElementById('link').value = url() +
|
|
"/chatoverlay/" + document.getElementById('channel').value +
|
|
"?cmd=" + document.getElementById('cmd').value +
|
|
"&theme=" + document.getElementById('theme').value +
|
|
"&themeColor=" + encodeURIComponent(document.getElementById('themeColor').value) +
|
|
"&scale=" + document.getElementById('scale').value +
|
|
"&maxDice=" + document.getElementById('maxDice').value +
|
|
"&clearAfter=" + document.getElementById('clearAfter').value +
|
|
"&timeout=" + document.getElementById('timeout').value +
|
|
"&modsAllowed=" + document.getElementById('modsAllowed').checked +
|
|
"&vipAllowed=" + document.getElementById('vipAllowed').checked +
|
|
"&subsAllowed=" + document.getElementById('subsAllowed').checked
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|