fix the shadow fading bug, remove some unused code

index.html

@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <title>Sigmar's Garden Online</title>
-    <link rel="stylesheet" href="style.css?cache=2019-12-09d">
+    <link rel="stylesheet" href="style.css?cache=2019-12-10">
 
     <meta name="author" content="Ondřej Hruška">
     <meta name="description" content="Play Sigmar's Garden online. Opus Magnum minigame re-implemented in JavaScript and SVG.">
@@ -37,6 +37,9 @@
             <filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
                 <feGaussianBlur stdDeviation="5"/>
             </filter>
+            <filter id="filterGlow" x="-10" y="-10" width="300" height="300">
+                <feGaussianBlur stdDeviation="3"/>
+            </filter>
             <linearGradient id="linGradOrbDark">
                 <stop style="stop-color:#000000;stop-opacity:0;" offset="0"/>
                 <stop style="stop-color:#000000;stop-opacity:1" offset="1"/>
@@ -87,6 +90,6 @@
         </div>
     </div>
 </div>
-<script src="script.js?cache=2019-12-09c"></script>
+<script src="script.js?cache=2019-12-10"></script>
 </body>
 </html>

script.js

@@ -325,8 +325,6 @@ class Board {
       .setAttribute('fill', this.orbColors[symbol]);
     orb.appendChild(this.symbolTpls[symbol].cloneNode(true));
 
-    orb.dataset.index = arrayIndex;
-    orb.dataset.symbol = symbol;
     this.$orbs.appendChild(orb);
 
     let object = {
@@ -407,14 +405,12 @@ class Board {
         <circle
            r="50" cy="5" cx="0"
            fill="black"
-           class="orb-shadow"
-           opacity="1"
-           fill-opacity="0.7" />
+           class="orb-shadow" />
         <circle
            r="55" cy="0" cx="0"
            fill="white"
            class="orb-glow"
-           opacity="0" />
+           fill-opacity="0" />
         <circle
            r="49" cy="0" cx="0"
            fill="#9F9F9F"
@@ -929,6 +925,10 @@ class Game {
     this.applySettings();
     this.installButtonHandlers();
 
+    // this.board.testGraphics();
+    // window.orb = this.board.getOrbByIndex(0).node;
+    // return;
+
     // Defer start to give browser time to render the background
     setTimeout(() => {
       this.newGame(args.seed)

style.css

@@ -19,29 +19,6 @@ html, body {
 	background: #201717;
 }
 
-.disabled .orb {
-	opacity: 0.6;
-}
-
-/* Highlighting */
-.highlight-salt .symbol-salt .orb-fill,
-.highlight-air .symbol-air .orb-fill,
-.highlight-fire .symbol-fire .orb-fill,
-.highlight-water .symbol-water .orb-fill,
-.highlight-earth .symbol-earth .orb-fill,
-.highlight-mercury .symbol-mercury .orb-fill,
-.highlight-lead .symbol-lead .orb-fill,
-.highlight-tin .symbol-tin .orb-fill,
-.highlight-iron .symbol-iron .orb-fill,
-.highlight-copper .symbol-copper .orb-fill,
-.highlight-silver .symbol-silver .orb-fill,
-.highlight-gold .symbol-gold .orb-fill,
-.highlight-vitae .symbol-vitae .orb-fill,
-.highlight-mors .symbol-mors .orb-fill {
-	stroke: yellow;
-	stroke-width: 7px;
-}
-
 /* Orb is clickable */
 .orb {
 	cursor: pointer;
@@ -62,32 +39,42 @@ html, body {
 .orb.disabled:hover .orb-glow,
 .cfg-fade-disabled .orb.disabled .orb-shadow,
 .cfg-fade-disabled .orb.disabled:hover .orb-shadow {
-	opacity: 0 !important;
+	fill-opacity: 0;
 }
 
 .cfg-no-fade-disabled.cfg-blur .orb.disabled .orb-shadow,
 .cfg-no-fade-disabled.cfg-blur .orb.disabled:hover .orb-shadow {
-	opacity: 1 !important;
+	fill-opacity: 1;
 }
 
 /* Blur effect */
-.orb-shadow, .orb-glow {
+.orb-shadow {
 	filter: url('#filterDropshadow');
 }
 
+.orb-glow {
+	filter: url('#filterGlow');
+}
+
 /* Hover and select effects */
 .orb-glow, .orb-shadow {
-	transition: opacity linear 0.1s;
+	transition: fill-opacity linear 0.2s;
+}
+
+/* Default opacity */
+.orb .orb-shadow {
+	fill-opacity: 0.7;
 }
 
+/* Glow effect */
 .orb.selected .orb-glow,
 .orb:hover .orb-glow  {
-	opacity: 1;
+	fill-opacity: 1;
 }
 
 .orb.selected .orb-shadow,
 .orb:hover .orb-shadow {
-	opacity: 0;
+	fill-opacity: 0;
 }
 
 /* No-anim version applies animations instantly */
@@ -120,7 +107,9 @@ html, body {
 
 text {
 	paint-order: stroke;
-	font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", "URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif", "Noto Serif", serif;
+	font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD",
+	    "URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif",
+	    "Noto Serif", serif;
 	user-select: none;
 }