From 4643ec107e23115d1ffd3b8b3bd6a86d1f7746d2 Mon Sep 17 00:00:00 2001
From: Arindy <dietmar.roth.23@gmail.com>
Date: Mon, 10 Feb 2025 15:53:17 +0100
Subject: [PATCH] enter in color picker now sets the color

---
 .../META-INF/resources/vendor/color-picker.js       | 11 ++++++++---
 src/main/resources/templates/pub/index.html         | 13 ++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/META-INF/resources/vendor/color-picker.js b/src/main/resources/META-INF/resources/vendor/color-picker.js
index f592bb7..d4727e2 100644
--- a/src/main/resources/META-INF/resources/vendor/color-picker.js
+++ b/src/main/resources/META-INF/resources/vendor/color-picker.js
@@ -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 } );
-
     }
 
 
diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index 711dd09..9fef7d7 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -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";
-- 
2.47.2