solve the lag problem

script.js

@@ -92,6 +92,22 @@ function isXyOutside(x, y) {
     || (y > 5 && x < y - 5);
 }
 
+/**
+ * Get if a coordinate is on the board border.
+ *
+ * @param x
+ * @param y
+ * @return {boolean|boolean}
+ */
+function isXyBorder(x, y) {
+  return x === 0
+    || x === 10
+    || y === 0
+    || y === 10
+    || (y <= 5 && x === 5 + y)
+    || (y > 5 && x === y - 5);
+}
+
 /**
  * Game board
  *
@@ -335,6 +351,7 @@ class Board {
       <polygon 
         points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
         transform="translate(0,0) scale(10.7) rotate(30)"
+        class="board-bg-hex"
         fill="#7e6c56" />
     `);
     this.$bg.appendChild(polygon);
@@ -361,6 +378,18 @@ class Board {
       this.$bg.appendChild(elem);
     });
 
+    // inner fill so the inner tiles don't have to use blur shadow
+    // The color is precisely the shadow in the middle of the border shadows
+    // superimposed over the background brown.
+    let polygon2 = Svg.fromXML(`
+      <polygon 
+        points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
+        transform="translate(0,0) scale(9.3) rotate(30)"
+        class="tile-shadow"
+        fill="#372F26" />
+    `);
+    this.$bg.appendChild(polygon2);
+
     this.buf1.forEach((elem) => {
       this.$bg.appendChild(elem);
     });
@@ -449,7 +478,7 @@ class Board {
     const scaleShadow = scale + 0.1;
 
     this.tileShadowTpl = Svg.fromXMLg(`
-      <g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})">    
+      <g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})" class="tile-shadow">
         <path
            transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
            d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
@@ -520,9 +549,11 @@ class Board {
     }));
     */
 
-    let polygon_shadow = this.tileShadowTpl.cloneNode(true);
-    polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
-    this.buf0.push(polygon_shadow);
+    if (isXyBorder(x, y)) {
+      let polygon_shadow = this.tileShadowTpl.cloneNode(true);
+      polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
+      this.buf0.push(polygon_shadow);
+    }
 
     const index = xyToGridIndex(x, y);
     let tile = this.tileTpl.cloneNode(true);

style.css

@@ -87,11 +87,16 @@ html, body {
 
 /* No-blur version uses white ring around selected orbs, and has no shadow */
 .cfg-no-blur .orb-shadow,
-.cfg-no-blur .orb-glow {
+.cfg-no-blur .orb-glow,
+.cfg-no-blur .tile-shadow {
 	filter: none !important;
 	opacity: 0 !important;
 }
 
+.cfg-no-blur .board-bg-hex {
+	fill: #534334;
+}
+
 .cfg-no-blur .orb.selected .orb-fill,
 .cfg-no-blur .orb:hover .orb-fill {
 	stroke: white;