232 lines
12 KiB
HTML
232 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dice-Tower</title>
|
|
<meta name="version" content="{version}">
|
|
<link rel="manifest" href="manifest.json" />
|
|
<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>
|
|
<script type="module" src="/dice-preview.js"></script>
|
|
<script type="text/javascript" src="/app.js"></script>
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Dice-Tower">
|
|
<meta name="twitter:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
|
|
<meta name="description" content="Easy to use online dice rolling with customizable overlays.">
|
|
<meta name="twitter:description" content="Easy to use online dice rolling with customizable overlays.">
|
|
<meta property="og:url" content="{http:request.absoluteURI}">
|
|
<meta property="og:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
|
|
<meta property="og:description" content="Easy to use online dice rolling with customizable overlays.">
|
|
<meta property="og:title" content="Dice-Tower">
|
|
<meta property="og:site_name" content="Dice-Tower">
|
|
<meta property="og:type" content="website">
|
|
<meta property="twitter:url" content="{http:request.absoluteURI}">
|
|
<meta property="twitter:domain" content="{http:request.authority}">
|
|
</head>
|
|
<body class="w3-theme-l1">
|
|
<script>
|
|
if (!localStorage.getItem("userId")) {
|
|
localStorage.setItem("userId", self.crypto.randomUUID());
|
|
}
|
|
addEventListener("beforeinstallprompt", (event) => {
|
|
event.preventDefault()
|
|
let install = document.createElement('button');
|
|
install.id = 'install'
|
|
install.style.position = 'absolute'
|
|
install.style.top = '25px'
|
|
install.style.right = '25px'
|
|
install.innerHTML = 'Install Dice-Tower'
|
|
install.onclick = () => event.prompt()
|
|
document.body.appendChild(install)
|
|
});
|
|
</script>
|
|
<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 <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; margin-bottom: auto;">
|
|
<h2 id="nameH" popovertarget="room-hint" data-trigger="hover" style="margin: 0" hidden>Name</h2>
|
|
<div>
|
|
<label for="name" id="nameLabel">Name </label>
|
|
<input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/>
|
|
</div>
|
|
<div>
|
|
<label for="room" id="roomLabel">Room </label>
|
|
<input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/>
|
|
</div>
|
|
<div id="start-container">
|
|
<div>
|
|
<button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Join <i
|
|
class="fa-solid fa-right-to-bracket"></i></button>
|
|
<label class="checkbox" id="gm-container">Join as GM
|
|
<input type="checkbox" id="gm">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="options-container" hidden style="position: absolute; right: 25px; top: 5px">
|
|
<button id="customize" popovertarget="customize-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-palette"></i>
|
|
</button>
|
|
<button id="urls" popovertarget="urls-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-link"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container"
|
|
style="padding: 25px; margin-bottom: auto">
|
|
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px; padding-right: 25px; padding-left: 25px">
|
|
<label style="font-size: large; font-weight: bold; margin: 10px">Roll </label>
|
|
<button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
|
|
onclick="removeDice()">-
|
|
</button>
|
|
<label style="font-size: large; font-weight: bold" id="dice-amount">1</label>
|
|
<button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
|
|
onclick="addDice()">+
|
|
</button>
|
|
<!--<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d2')">D2</button><-->
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d8')">D8</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d10')">D10</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d12')">D12</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d20')">D20</button>
|
|
<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d100')">D100</button>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px 0;">
|
|
<label for="command">Command </label>
|
|
<input popovertarget="command-hint" data-trigger="hover" type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
|
|
<button hidden id="roll" onclick="roll()">Roll <i class="fa-solid fa-dice"></i></button>
|
|
<div style="margin: 20px 25px" id="all-results">
|
|
<label for="resultSwitch">Show all results </label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="resultSwitch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container"
|
|
style="padding: 25px; flex-grow: 1; margin-bottom: auto">
|
|
<iframe id="resultFrame" title="results" style="width: 100%; height: 100%; overflow: hidden; border: 0"></iframe>
|
|
<label for="resultDiceSwitch" style="position: absolute; top: 25px; right: 95px">Show dice </label>
|
|
<label class="switch" style="position: absolute; top: 25px; right: 25px; z-index: 5">
|
|
<input type="checkbox" id="resultDiceSwitch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<div id="results-dice" hidden>
|
|
<iframe id="diceFrame" title="dice" style="width: 50%; height: 100%; overflow: hidden; border: 0; z-index: 4; position: absolute; top: 0; left: 50%"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div popover id="urls-overlay" class="tooltip" style="width: 600px">
|
|
<div id="overlay-urls">
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
|
<label for="overlayId" id="overlayLabel">Dice-Overlay </label>
|
|
<input popovertarget="overlay-hint" data-trigger="hover" type="text" readonly id="overlayId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;"
|
|
hidden id="all-results-urls">
|
|
<label for="resultsId">All-Results-Overlay </label>
|
|
<input popovertarget="all-results-hint" data-trigger="hover" type="text" readonly id="resultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
|
|
<label for="myResultsId">My-Results-Overlay </label>
|
|
<input popovertarget="my-results-hint" data-trigger="hover" type="text" readonly id="myResultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
|
|
</div>
|
|
</div>
|
|
<div popover id="customize-overlay" class="tooltip" style="width: 680px;">
|
|
<div style="text-align: center;">
|
|
<label for="theme">Theme </label>
|
|
<select name="theme" id="theme" style="margin: 0 25px"></select>
|
|
</div>
|
|
<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="#8d8981"></color-picker>
|
|
</div>
|
|
<div style="flex-grow: 1; padding: 10px 0">
|
|
<color-picker id="numberColor" name="Numbers" value="black"></color-picker>
|
|
</div>
|
|
</div>
|
|
<div id="dice-box">
|
|
<div id="app"></div>
|
|
</div>
|
|
|
|
<button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
|
|
<button popovertarget="save-dice-hint" data-trigger="hover" style="margin: 10px" onclick="saveDice()">Save <i class="fa-solid fa-floppy-disk"></i></button>
|
|
</div>
|
|
<div hidden id="overlay-hint">
|
|
<div style="text-align: left">
|
|
<p>Query Params you can Change:</p>
|
|
<ul>
|
|
<li><strong>scale</strong> changes the size of the dice (any value over 1)</li>
|
|
<li><strong>clearAfter</strong> time until dice are cleared (in seconds; remove param or set -1 to keep the
|
|
dice)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div hidden id="all-results-hint">
|
|
<p>Shows all Results in this room</p>
|
|
</div>
|
|
<div hidden id="my-results-hint">
|
|
<p>Shows only my Results in this room</p>
|
|
</div>
|
|
<div hidden id="save-dice-hint">
|
|
<p>This saves your current theme and theme color for <a id="save-dice-hint-name"></a></p>
|
|
</div>
|
|
<div hidden id="command-hint">
|
|
<p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
|
|
</div>
|
|
<div hidden id="room-hint">
|
|
<p>How is your character called?</p>
|
|
</div>
|
|
<div hidden id="madeby-hint">
|
|
<p>
|
|
made by Arindy<br/>
|
|
Click to go to source
|
|
</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px" id="how-to">
|
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px;">
|
|
<h2 style="text-align: center">How-To</h2>
|
|
<ul>
|
|
<li>
|
|
Join a room by entering your character name and the name of the room
|
|
</li>
|
|
<li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
|
|
<ul>
|
|
<li>You can configure your Overlay with query parameters (for more information hover over the link)
|
|
</li>
|
|
</ul>
|
|
<li>Configure your dice</li>
|
|
<li>Save your dice configuration</li>
|
|
<li>Start rolling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px; flex-grow: 1" id="chatOverlay">
|
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
|
|
If you are looking for a way to let your twitch chat roll click <a href target="_blank" id="chatOverlayLink">here</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="snackbar-container">
|
|
<div id="snackbar">.. they see them rolling</div>
|
|
</div>
|
|
</body>
|
|
<footer class="w3-theme-l1 w3-center">
|
|
<a popovertarget="madeby-hint" data-trigger="hover" href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Version {version}</a>
|
|
</footer>
|
|
</html>
|