adds buttons for simple commands #16
@ -145,10 +145,10 @@
|
|||||||
<body class="w3-theme-l1">
|
<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">
|
<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">Dice-Tower</h1>
|
<h1 style="text-align: center">Dice-Tower</h1>
|
||||||
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto;">
|
||||||
<label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
|
<label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/><br/>
|
||||||
<label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
|
<label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/><br/>
|
||||||
<button id="start" onclick="start()" style="align-self: center">Start 🞂</button>
|
<button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</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 id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
|
||||||
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a>🞃</a></button>
|
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a>🞃</a></button>
|
||||||
@ -239,6 +239,23 @@
|
|||||||
<div popover id="command-hint" class="tooltip">
|
<div popover id="command-hint" class="tooltip">
|
||||||
Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
|
Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 20px; flex-grow: 1" id="how-to">
|
||||||
|
<div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
|
||||||
|
<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>Only open your Dice-Overlay once!</li>
|
||||||
|
<li>You can configure your Overlay with query parameters (more information at the info element next to the link)</li>
|
||||||
|
</ul>
|
||||||
|
<li>Configure your dice</li>
|
||||||
|
<li>Save your dice configuration</li>
|
||||||
|
<li>Start rolling</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
function addDice() {
|
function addDice() {
|
||||||
@ -266,6 +283,7 @@
|
|||||||
document.getElementById('dice-tower').hidden = false;
|
document.getElementById('dice-tower').hidden = false;
|
||||||
document.getElementById('name').hidden = true;
|
document.getElementById('name').hidden = true;
|
||||||
document.getElementById('room').hidden = true;
|
document.getElementById('room').hidden = true;
|
||||||
|
document.getElementById('how-to').hidden = true;
|
||||||
document.getElementById('results').hidden = false;
|
document.getElementById('results').hidden = false;
|
||||||
document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
|
document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
|
||||||
document.getElementById('roomLabel').innerHTML = '<strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
|
document.getElementById('roomLabel').innerHTML = '<strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
|
||||||
|
Loading…
x
Reference in New Issue
Block a user