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

Merge pull request 'enter in color picker now sets the color' (#14) from fix-color-picker into main
All checks were successful
CI / deploy (push) Successful in 4m22s
Details

Browse Source 
Reviewed-on: #14
This commit is contained in:
arindy 2025-02-10 16:05:24 +01:00
commit 7ee16d5f3e
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/resources/META-INF/resources/vendor/color-picker.js vendored
View File

@ -63,6 +63,7 @@ class ColorPicker extends HTMLElement {
.rgba-display-wrapper {
height: 100%;
padding: 1.25em;
text-align: center;
}
#rgba-display {
font-family: "Courier New", monospace;
@ -72,11 +73,11 @@ class ColorPicker extends HTMLElement {
display: inline;
border: none;
border-radius: 0.2em;
margin-bottom: 2.5em;
letter-spacing: 0.1em;
width: 8em;
width: 5em;
max-width: 100%;
font-variant-numeric: tabular-nums;
text-align: center;
}
input[type=range] {
width: 100%;
@ -132,13 +133,17 @@ class ColorPicker extends HTMLElement {
this.lightnessInput = this.shadowRoot.getElementById( 'lightness' );
this.colorPreview = this.shadowRoot.getElementById( 'color-preview' );
this.rgbaDisplay = this.shadowRoot.getElementById( 'rgba-display' );
this.rgbaDisplay.onkeyup = (event) => {
if(event.keyCode === 13) {
this.setColor( this.rgbaDisplay.value );
}
}
// Create a temporary canvas to read color values.
let tempCanvas = document.createElement( 'canvas' );
tempCanvas.height = 1;
tempCanvas.width = 1;
this.tempCanvasCTX = tempCanvas.getContext( '2d', { willReadFrequently: true } );
}

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

@ -160,7 +160,11 @@
<option value="wooden">Wooden</option>
</select>
<br/>
<color-picker value="#cd72fe" 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 popover id="save-dice-hint" class="tooltip">
This saves your current theme and theme color for current Name
</div>
</div><br/>
<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)"/>
@ -219,12 +223,15 @@
}
}
function saveDice() {
localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
}
let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";