adds buttons for simple commands #16

Merged
arindy merged 4 commits from adds-easy-way-to-roll into main 2025-02-10 18:39:00 +01:00
2 changed files with 17 additions and 5 deletions
Showing only changes of commit 9def3240b2 - Show all commits

View File

@ -13,7 +13,6 @@
.collapsible { .collapsible {
background-color: #333333; background-color: #333333;
color: black; color: black;
cursor: pointer;
margin-top: 10px; margin-top: 10px;
padding: 18px; padding: 18px;
width: 100%; width: 100%;
@ -39,6 +38,14 @@
background: #333333; background: #333333;
color: #fff color: #fff
} }
button:hover {
background: #444444;
}
button:active {
background: #222222;
}
input { input {
margin: 10px; margin: 10px;
} }
@ -106,6 +113,11 @@
color: #000 color: #000
} }
.overlayButton:hover {
background: transparent;
}
.tooltip { .tooltip {
position: fixed; position: fixed;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -171,8 +183,8 @@
<color-picker id="themeColor"></color-picker> <color-picker id="themeColor"></color-picker>
<div id="dice-box"></div> <div id="dice-box"></div>
<button style="margin-bottom: 20px" id="preview">Preview 🔎</button> <button style="margin: 10px" id="preview">Preview 🔎</button>
<button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button> <button style="margin: 10px" onclick="saveDice()">Save 💾</button>
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button> <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;"> <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
@ -191,7 +203,7 @@
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;"> <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
<label for="command">Command </label> <label for="command">Command </label>
<input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/> <input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
<button hidden id="roll" onclick="roll()">Roll 🞂</button> <button hidden id="roll" onclick="roll()">Roll 🎲</button>
<button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button> <button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
</div> </div>

View File

@ -31,7 +31,7 @@
resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> ' resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
}) })
} }
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922; ' + resultText node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲 ' + resultText
name.appendChild(node) name.appendChild(node)
document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild); document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
} }