creates chatoverlay
This commit is contained in:
142
src/main/resources/templates/chatoverlayconfig.html
Normal file
142
src/main/resources/templates/chatoverlayconfig.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user