fix: minor issues

KevinBLT · Dec 13, 2023 · cbca3a9 · cbca3a9
1 parent 8ec41fc
commit cbca3a9
Showing 1 changed file with 17 additions and 18 deletions.
diff --git a/lib/scratch-card.js b/lib/scratch-card.js
@@ -1,8 +1,9 @@
 class ScratchCard extends HTMLElement {
-  canvas  = document.createElement('canvas');
-  span    = document.createElement('span');
-  ctx     = this.canvas.getContext('2d', { willReadFrequently: true });
-  pointer = {x: 0, y: 0};
+  canvas    = document.createElement('canvas');
+  span      = document.createElement('span');
+  ctx       = this.canvas.getContext('2d', { willReadFrequently: true });
+  pointer   = {x: 0, y: 0};
+  idleTimer = 0;
 
   static observedAttributes = [
     'code', 
@@ -43,19 +44,24 @@ class ScratchCard extends HTMLElement {
   }
 
   get scratchSize() {
-    return parseInt(this.prop('scratch-size') ?? '8');
+    return parseInt(this.prop('scratch-size') ?? '10');
   }
 
   get noiseFactor() {
     return parseInt(this.prop('noise-factor') ?? '20');
   }
 
-  static {
+  onIdle(func) {
+
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+    }
 
+    this.idleTimer = setTimeout(func, 500);
   }
 
   pointFromEvent(e) {
-    const bbox = this.canvas.getBoundingClientRect();
+    const bbox = this.getBoundingClientRect();
 
     return {
       x: e.clientX - bbox.left,
@@ -82,7 +88,6 @@ class ScratchCard extends HTMLElement {
 
       for (const touch of e.targetTouches) {
         Object.assign(this.pointer, this.pointFromEvent(touch));
-        break;
       }  
 
       e.preventDefault();
@@ -97,8 +102,6 @@ class ScratchCard extends HTMLElement {
         this.draw(p.x, p.y);
 
         Object.assign(this.pointer, p);
-
-        break;
       }  
 
       e.preventDefault();
@@ -148,25 +151,23 @@ class ScratchCard extends HTMLElement {
 
       this.ctx.beginPath();
       this.ctx.globalCompositeOperation = 'destination-out';
-
+      
       this.ctx.moveTo(
         p.x + this.random(this.scratchSize), 
         p.y + this.random(this.scratchSize)
       );
 
-      const randomizerCount = 15 * window.devicePixelRatio;
-
-      for (let i = 0; i < randomizerCount; i++ ) {
+      for (let i = 0; i < 20; i++ ) {
         this.ctx.lineTo(
           p.x + this.random(this.scratchSize), 
           p.y + this.random(this.scratchSize)
         );
       }
 
       this.ctx.closePath();
-      this.ctx.fill();
+      this.ctx.fill('evenodd');
 
-      requestIdleCallback(() => this.updatePercentageScratched());
+      this.onIdle(() => this.updatePercentageScratched());
     }
   }
 
@@ -220,8 +221,6 @@ class ScratchCard extends HTMLElement {
     this.ctx.fillStyle = gradient2;
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
   }
-
-
 }
 
 customElements.define('scratch-card', ScratchCard);