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

adds a dice preview #15

Merged
arindy merged 3 commits from fix-color-picker into main 2025-02-10 17:20:27 +01:00
Conversation 0 Commits 3 Files Changed 1 +59 -21
1 changed files with 59 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 821e939b3d - Show all commits

80
src/main/resources/templates/pub/index.html
View File

@ -107,6 +107,21 @@
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">
@ -122,27 +137,15 @@
<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><input type="text" readonly id="overlayId" style="flex-grow: 1"/><button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button><br/> <label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label>
<div popover id="overlay-hint" class="tooltip"> <input type="text" readonly id="overlayId" style="flex-grow: 1"/>
<p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p> <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button>
<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><br/> <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>
<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><br/> <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>
<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>
@ -161,10 +164,11 @@
</select> </select>
<br/> <br/>
<color-picker id="themeColor"></color-picker><br/> <color-picker id="themeColor"></color-picker><br/>
<button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button> <div id="dice-box"></div>
<div popover id="save-dice-hint" class="tooltip">
This saves your current theme and theme color for current Name <button style="margin-bottom: 20px" id="preview">Preview</button>
</div> <button style="margin-bottom: 20px" onclick="saveDice()">Save</button>
<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)"/>
@ -179,6 +183,23 @@
<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() {
@ -270,6 +291,23 @@
} }
}) })
</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>