Fix for old configs & arrow opacity affects GUI too

Psyyke · Sep 30, 2024 · 272491b · 272491b
1 parent 628dbea
commit 272491b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 29 deletions.
diff --git a/assets/js/acas-backend-instance.js b/assets/js/acas-backend-instance.js
@@ -172,31 +172,31 @@ class BackendInstance {
         }
     }
 
-    getArrowStyle(type, fill) {
+    getArrowStyle(type, fill, opacity) {
         const baseStyleArr = [
             'stroke: rgb(0 0 0 / 50%);',
             'stroke-width: 2px;',
             'stroke-linejoin: round;'
         ];
-
+    
         switch(type) {
             case 'best': 
                 return [
-                    `fill: ${fill ? fill : 'limegreen'};`,
-                    'opacity: 0.9;',
+                    `fill: ${fill || 'limegreen'};`,
+                    `opacity: ${opacity || 0.9};`,
                     ...baseStyleArr
                 ].join('\n');
             case 'secondary': 
                 return [
                     ...baseStyleArr,
                     `fill: ${fill ? fill : 'dodgerblue'};`,
-                    'opacity: 0.7;'
+                    `opacity: ${opacity || 0.7};`,
                 ].join('\n');
             case 'opponent':
                 return [
                     ...baseStyleArr,
                     `fill: ${fill ? fill : 'crimson'};`,
-                    'opacity: 0.5;'
+                    `opacity: ${opacity || 0.3};`,
                 ].join('\n');
         }
     };
@@ -209,6 +209,7 @@ class BackendInstance {
                 const maxScale = 1;
                 const minScale = 0.5;
                 const totalRanks = moveObjArr.length;
+                const arrowOpacity = this.getConfigValue(this.configKeys.arrowOpacity, profile) / 100;
                 const showOpponentMoveGuess = this.getConfigValue(this.configKeys.showOpponentMoveGuess, profile);
                 const showOpponentMoveGuessConstantly = this.getConfigValue(this.configKeys.showOpponentMoveGuessConstantly, profile);
                 const primaryArrowColorHex = this.getConfigValue(this.configKeys.primaryArrowColorHex, profile);
@@ -223,14 +224,14 @@ class BackendInstance {
 
                     let playerArrowElem = null;
                     let oppArrowElem = null;
-                    let arrowStyle = this.getArrowStyle('best', primaryArrowColorHex);
+                    let arrowStyle = this.getArrowStyle('best', primaryArrowColorHex, arrowOpacity);
                     let lineWidth = 30;
                     let arrowheadWidth = 80;
                     let arrowheadHeight = 60;
                     let startOffset = 30;
 
                     if(idx !== 0) {
-                        arrowStyle = this.getArrowStyle('secondary', secondaryArrowColorHex);
+                        arrowStyle = this.getArrowStyle('secondary', secondaryArrowColorHex, arrowOpacity);
 
                         const arrowScale = totalRanks === 2
                             ? 0.75
@@ -252,7 +253,7 @@ class BackendInstance {
                     if(oppMovesExist && showOpponentMoveGuess) {
                         oppArrowElem = this.BoardDrawer.createShape('arrow', [oppFrom, oppTo],
                             {
-                                style: this.getArrowStyle('opponent', opponentArrowColorHex),
+                                style: this.getArrowStyle('opponent', opponentArrowColorHex, arrowOpacity),
                                 lineWidth, arrowheadWidth, arrowheadHeight, startOffset
                             }
                         );

diff --git a/assets/js/acas-globals.js b/assets/js/acas-globals.js
@@ -250,17 +250,6 @@ function getGmConfigValue(key, instanceID, profileID) {
 
     const config = USERSCRIPT.GM_getValue(USERSCRIPT.dbValues.AcasConfig);
 
-    const instanceValue = config?.instance?.[instanceID]?.[key];
-    const globalValue = config?.global?.[key];
-
-    if(instanceValue !== undefined) {
-        return instanceValue;
-    }
-
-    if(globalValue !== undefined) {
-        return globalValue;
-    }
-
     if(profileID) {
         const globalProfileValue = config?.global?.['profiles']?.[profileID]?.[key];
         const instanceProfileValue = config?.instance?.[instanceID]?.['profiles']?.[profileID]?.[key];
@@ -274,6 +263,17 @@ function getGmConfigValue(key, instanceID, profileID) {
         }
     }
 
+    const instanceValue = config?.instance?.[instanceID]?.[key];
+    const globalValue = config?.global?.[key];
+
+    if(instanceValue !== undefined) {
+        return instanceValue;
+    }
+
+    if(globalValue !== undefined) {
+        return globalValue;
+    }
+
     return null;
 }
 

diff --git a/index.html b/index.html
@@ -246,15 +246,13 @@
 						</div>
 						<div class="setting-panel">
 							<div class="setting-panel-title">Visual 👁️‍🗨️</div>
-							<div class="input-combination-box">
-								<div class="checkbox-input custom-input"><div><div class="input-title">Moves on external site</div>
-									<div class="input-subtitle">Show move arrows on chess site's board (e.g. chess.com's board)</div></div><div class="checkbox-container">
-									<input type="checkbox" data-key="displayMovesOnExternalSite" data-default-value="true"><div class="checkbox-fill">✓</div></div>
-								</div>
-								<div class="textfield-input sub-input custom-input"><div><div class="input-title">Arrow opacity (1 - 100%)</div>
-									<div class="input-subtitle">Change the opacity of arrows on the external site, refresh external site to see changes</div></div>
-									<input type="textfield" data-key="arrowOpacity" data-default-value="50" data-between="1-100">
-								</div>
+							<div class="checkbox-input custom-input"><div><div class="input-title">Moves on external site</div>
+								<div class="input-subtitle">Show move arrows on chess site's board (e.g. chess.com's board)</div></div><div class="checkbox-container">
+								<input type="checkbox" data-key="displayMovesOnExternalSite" data-default-value="true"><div class="checkbox-fill">✓</div></div>
+							</div>
+							<div class="textfield-input custom-input"><div><div class="input-title">Arrow opacity (1 - 100%)</div>
+								<div class="input-subtitle">Change the opacity of the arrows</div></div>
+								<input type="textfield" data-key="arrowOpacity" data-default-value="50" data-between="1-100">
 							</div>
 							<div class="color-input custom-input"><div><div class="input-title">Primary Arrow Color</div>
 								<div class="input-subtitle">The best move color</div></div>