arindy/dice-tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

changes to dice-box-threejs
All checks were successful
CI / deploy (push) Successful in 5m30s
Details

Browse Source
This commit is contained in:
Arindy
2025-02-16 11:06:25 +01:00
parent 5d15976c9f
commit 2077bf7cbb
122 changed files with 17739 additions and 53840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/main/resources/templates/chatoverlayconfig.html
View File

@@ -23,18 +23,16 @@
<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>
<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"/>
@@ -57,7 +55,7 @@
</div>
<div>
<label for="scale">Dice-Scale </label>
<input type="number" id="scale" style="width: 50px; margin-top: 20px" value="9"/>
<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>
@@ -67,7 +65,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="height: 400px"></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>
@@ -104,30 +105,139 @@
}
</script>
<script type="module">
import DiceBox from "/vendor/dice-box/dice-box.es.js";
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('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
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.init()
diceBox.roll(['1d2', '1d4', '1d6', '1d8', '1d10', '1d12', '1d20', '1d100']);
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 +
"&themeColor=" + encodeURIComponent(document.getElementById('themeColor').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 +