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

fixes color-picker and icons
All checks were successful
CI / deploy (push) Successful in 4m29s
Details
CI / deploy (pull_request) Successful in 4m25s
Details

Browse Source
This commit is contained in:
Arindy
2025-02-12 00:40:43 +01:00
parent 1dc4940d8c
commit 21ecf42004
31 changed files with 18997 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/main/resources/templates/index.html
View File

@@ -3,9 +3,10 @@
<head>
<meta charset="UTF-8">
<title>Dice-Tower</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/META-INF/resources/vendor/color-picker.js"></script>
<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">
<script src="/vendor/color-picker.js"></script>
<style>
.w3-theme-l6 {
color: #000 !important;
@@ -257,7 +258,7 @@
<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">
<h1 style="text-align: center">Dice-Tower</h1>
<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;">
<label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 50%; margin-top: 20px"
@@ -265,7 +266,8 @@
<label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required
onkeyup="start(event)"/><br/>
<div>
<button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</button>
<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" style="margin-left: 50px">
<span class="checkmark"></span>
@@ -274,7 +276,8 @@
</div>
<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><i
class="fa-solid fa-chevron-down"></i></a></button>
<div class="content">
<div id="overlay-urls">
@@ -282,7 +285,7 @@
<label for="overlayId" id="overlayLabel">Dice-Overlay </label>
<input type="text" readonly id="overlayId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
<button id="overlay-hint-button" popovertarget="overlay-hint" data-trigger="hover"
class="overlayButton">🛈
class="overlayButton"><i class="fa-solid fa-circle-info"></i>
</button>
</div>
</div>
@@ -290,15 +293,18 @@
hidden id="all-results-urls">
<label for="resultsId">All-Results-Overlay </label>
<input type="text" readonly id="resultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
<button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
<button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton"><i
class="fa-solid fa-circle-info"></i></button>
</div>
<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" onclick="copyToClipboard(this.id)"/>
<button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
<button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton"><i
class="fa-solid fa-circle-info"></i></button>
</div>
</div>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a><i
class="fa-solid fa-chevron-down"></i></a>
</button>
<div class="content">
<label for="theme">Theme </label>
@@ -316,9 +322,10 @@
<color-picker id="themeColor"></color-picker>
<div id="dice-box"></div>
<button style="margin: 10px" id="preview">Preview 🔎</button>
<button style="margin: 10px" onclick="saveDice()">Save 💾</button>
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
<button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
<button style="margin: 10px" onclick="saveDice()">Save <i class="fa-solid fa-floppy-disk"></i></button>
<button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton"><i
class="fa-solid fa-circle-info"></i></button>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
<label style="font-size: x-large; font-weight: bold;">Roll </label>
@@ -340,8 +347,9 @@
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
<label for="command">Command </label>
<input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
<button hidden id="roll" onclick="roll()">Roll 🎲</button>
<button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
<button hidden id="roll" onclick="roll()">Roll <i class="fa-solid fa-dice"></i></button>
<button popovertarget="command-hint" data-trigger="hover" class="overlayButton"><i
class="fa-solid fa-circle-info"></i></button>
</div>
<div style="margin: 20px 25px" id="all-results">
@@ -532,10 +540,10 @@
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
this.children[0].innerHTML = "🞃"
this.children[0].innerHTML = "<i class='fa-solid fa-chevron-down'></i>"
} else {
content.style.display = "block";
this.children[0].innerHTML = "🞁"
this.children[0].innerHTML = "<i class='fa-solid fa-chevron-up'></i>"
}
});
}
@@ -576,7 +584,7 @@
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
showSnackbar("Link copied to clipboard: <br/>" + copyText.value);
showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
}
function showSnackbar(message) {

6
src/main/resources/templates/results.html
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<title>Results</title>
<link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
<link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
</head>
<body>
<div id="results" style="font-size: x-large">
@@ -21,7 +23,7 @@
let node = document.createElement('p');
let resultText = ''
if (!data.results) {
resultText = ' rolling...'
resultText = ' <i class="fa-solid fa-dice"></i>'
} else {
data.results.forEach(result => {
let values = []
@@ -31,7 +33,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> '
})
}
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲 ' + resultText
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> ' + resultText
name.appendChild(node)
document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
}