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

enter in color picker now sets the color #14

Merged
arindy merged 1 commits from fix-color-picker into main 2025-02-10 16:05:24 +01:00
Conversation 0 Commits 1 Files Changed 2 +18 -6
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 { .rgba-display-wrapper {
height: 100%; height: 100%;
padding: 1.25em; padding: 1.25em;
text-align: center;
} }
#rgba-display { #rgba-display {
font-family: "Courier New", monospace; font-family: "Courier New", monospace;
@ -72,11 +73,11 @@ class ColorPicker extends HTMLElement {
display: inline; display: inline;
border: none; border: none;
border-radius: 0.2em; border-radius: 0.2em;
margin-bottom: 2.5em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
width: 8em; width: 5em;
max-width: 100%; max-width: 100%;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: center;
} }
input[type=range] { input[type=range] {
width: 100%; width: 100%;
@ -132,13 +133,17 @@ class ColorPicker extends HTMLElement {
this.lightnessInput = this.shadowRoot.getElementById( 'lightness' ); this.lightnessInput = this.shadowRoot.getElementById( 'lightness' );
this.colorPreview = this.shadowRoot.getElementById( 'color-preview' ); this.colorPreview = this.shadowRoot.getElementById( 'color-preview' );
this.rgbaDisplay = this.shadowRoot.getElementById( 'rgba-display' ); 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. // Create a temporary canvas to read color values.
let tempCanvas = document.createElement( 'canvas' ); let tempCanvas = document.createElement( 'canvas' );
tempCanvas.height = 1; tempCanvas.height = 1;
tempCanvas.width = 1; tempCanvas.width = 1;
this.tempCanvasCTX = tempCanvas.getContext( '2d', { willReadFrequently: true } ); 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> <option value="wooden">Wooden</option>
</select> </select>
<br/> <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/> </div><br/>
<p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p> <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)"/> <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"); let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) { for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () { 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; const content = this.nextElementSibling;
if (content.style.display === "block") { if (content.style.display === "block") {
content.style.display = "none"; content.style.display = "none";