253 lines
9.2 KiB
HTML
253 lines
9.2 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: 0 25px"></select>
|
|
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline">
|
|
<div style="flex-grow: 1; padding: 0 10px">
|
|
<color-picker id="faceColor" name="Face" value="black"></color-picker>
|
|
</div>
|
|
<div style="flex-grow: 1; padding: 10px 0">
|
|
<color-picker id="numberColor" name="Numbers" value="white"></color-picker>
|
|
</div>
|
|
</div>
|
|
<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; margin-left: 0" 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="15"/>
|
|
<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="60"/>
|
|
</div>
|
|
|
|
<div id="dice-box" style="width: 850px; height: 400px">
|
|
<div id="app"></div>
|
|
</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-threejs.es.js";
|
|
let diceBox
|
|
|
|
const Themes = {
|
|
cloudy: {
|
|
name: "Clouds (Transparent)"
|
|
},
|
|
cloudy_2: {
|
|
name: "Clouds"
|
|
},
|
|
fire: {
|
|
name: "Fire"
|
|
},
|
|
marble: {
|
|
name: "Marble"
|
|
},
|
|
water: {
|
|
name: "Water"
|
|
},
|
|
ice: {
|
|
name: "Ice"
|
|
},
|
|
paper: {
|
|
name: "Paper"
|
|
},
|
|
speckles: {
|
|
name: "Speckles"
|
|
},
|
|
glitter: {
|
|
name: "Glitter"
|
|
},
|
|
glitter_2: {
|
|
name: "Glitter (Transparent)"
|
|
},
|
|
stars: {
|
|
name: "Stars"
|
|
},
|
|
stainedglass: {
|
|
name: "Stained Glass"
|
|
},
|
|
wood: {
|
|
name: "Wood"
|
|
},
|
|
metal: {
|
|
name: "Stainless Steel"
|
|
},
|
|
skulls: {
|
|
name: "Skulls"
|
|
},
|
|
leopard: {
|
|
name: "Leopard"
|
|
},
|
|
tiger: {
|
|
name: "Tiger"
|
|
},
|
|
cheetah: {
|
|
name: "Cheetah"
|
|
},
|
|
dragon: {
|
|
name: "Dragon"
|
|
},
|
|
lizard: {
|
|
name: "Lizard"
|
|
},
|
|
bird: {
|
|
name: "Bird"
|
|
},
|
|
astral: {
|
|
name: "Astral Sea"
|
|
},
|
|
bronze01: {
|
|
name: "Bronze 1"
|
|
},
|
|
bronze02: {
|
|
name: "Bronze 2"
|
|
},
|
|
bronze03: {
|
|
name: "Bronze 3"
|
|
},
|
|
bronze03a: {
|
|
name: "Bronze 3a"
|
|
},
|
|
bronze03b: {
|
|
name: "Bronze 3b"
|
|
},
|
|
bronze04: {
|
|
name: "Bronze 4"
|
|
},
|
|
none: {
|
|
name: "none"
|
|
}
|
|
}
|
|
|
|
function url() {
|
|
return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const themeSelector = document.getElementById('theme');
|
|
for (const theme in Themes) {
|
|
let option = document.createElement('option');
|
|
option.value = theme;
|
|
option.innerText = Themes[theme].name;
|
|
themeSelector.appendChild(option);
|
|
}
|
|
themeSelector.value = 'cloudy';
|
|
document.getElementById('preview').onclick = async () => {
|
|
document.getElementById('app').replaceChildren(...[])
|
|
diceBox = new DiceBox("#app", {
|
|
assetPath: "/vendor/dice-box/",
|
|
light_intensity: 2,
|
|
gravity_multiplier: 600,
|
|
baseScale: 120,
|
|
strength: Math.floor(Math.random() * 4),
|
|
});
|
|
await diceBox.initialize();
|
|
diceBox.clearDice();
|
|
await diceBox.updateConfig({
|
|
theme_customColorset: {
|
|
background: document.getElementById('faceColor').value,
|
|
foreground: document.getElementById('numberColor').value,
|
|
texture: document.getElementById('theme').value
|
|
}
|
|
});
|
|
await 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 +
|
|
"&faceColor=" + encodeURIComponent(document.getElementById('faceColor').value) +
|
|
"&numberColor=" + encodeURIComponent(document.getElementById('numberColor').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>
|