style: format code with Prettier and StandardJS

.history/src/scripts/canvas/PixelCanvas_20250519135800.js

@@ -21,9 +21,9 @@ class PixelCanvas {
     this.uiCanvas = document.getElementById(options.uiCanvasId);
 
     // Canvas contexts
-    this.ctx = this.canvas.getContext('2d');
-    this.effectsCtx = this.effectsCanvas.getContext('2d');
-    this.uiCtx = this.uiCanvas.getContext('2d');
+    this.ctx = this.canvas.getContext("2d");
+    this.effectsCtx = this.effectsCanvas.getContext("2d");
+    this.uiCtx = this.uiCanvas.getContext("2d");
 
     // Canvas dimensions
     this.width = options.width || 64;
@@ -34,7 +34,7 @@ class PixelCanvas {
     this.zoom = 1;
 
     // Pixel data
-    this.pixels = new Array(this.width * this.height).fill('#000000');
+    this.pixels = new Array(this.width * this.height).fill("#000000");
 
     // Undo/Redo history
     this.history = [];
@@ -54,7 +54,7 @@ class PixelCanvas {
       vignette: false,
       noise: false,
       pixelate: false,
-      intensity: 0.5
+      intensity: 0.5,
     };
 
     // Animation frame for effects
@@ -113,21 +113,24 @@ class PixelCanvas {
    */
   setupEventListeners() {
     // Mouse events
-    this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
-    document.addEventListener('mousemove', this.handleMouseMove.bind(this));
-    document.addEventListener('mouseup', this.handleMouseUp.bind(this));
+    this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    document.addEventListener("mousemove", this.handleMouseMove.bind(this));
+    document.addEventListener("mouseup", this.handleMouseUp.bind(this));
 
     // Prevent context menu on right-click
-    this.canvas.addEventListener('contextmenu', (e) => {
+    this.canvas.addEventListener("contextmenu", (e) => {
       e.preventDefault();
     });
 
     // Update cursor position display
-    this.canvas.addEventListener('mousemove', this.updateCursorPosition.bind(this));
+    this.canvas.addEventListener(
+      "mousemove",
+      this.updateCursorPosition.bind(this),
+    );
 
     // Mouse leave
-    this.canvas.addEventListener('mouseleave', () => {
-      document.getElementById('cursor-position').textContent = 'X: - Y: -';
+    this.canvas.addEventListener("mouseleave", () => {
+      document.getElementById("cursor-position").textContent = "X: - Y: -";
     });
   }
 
@@ -140,15 +143,17 @@ class PixelCanvas {
 
     // Get pixel coordinates
     const rect = this.canvas.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left) / (this.pixelSize * this.zoom));
+    const x = Math.floor(
+      (e.clientX - rect.left) / (this.pixelSize * this.zoom),
+    );
     const y = Math.floor((e.clientY - rect.top) / (this.pixelSize * this.zoom));
 
     // Store last position
     this.lastX = x;
     this.lastY = y;
 
     // Draw a single pixel
-    this.drawPixel(x, y, e.buttons === 2 ? '#000000' : '#ffffff');
+    this.drawPixel(x, y, e.buttons === 2 ? "#000000" : "#ffffff");
 
     // Render the canvas
     this.render();
@@ -163,13 +168,21 @@ class PixelCanvas {
 
     // Get pixel coordinates
     const rect = this.canvas.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left) / (this.pixelSize * this.zoom));
+    const x = Math.floor(
+      (e.clientX - rect.left) / (this.pixelSize * this.zoom),
+    );
     const y = Math.floor((e.clientY - rect.top) / (this.pixelSize * this.zoom));
 
     // Only draw if the position has changed
     if (x !== this.lastX || y !== this.lastY) {
       // Draw a line from last position to current position
-      this.drawLine(this.lastX, this.lastY, x, y, e.buttons === 2 ? '#000000' : '#ffffff');
+      this.drawLine(
+        this.lastX,
+        this.lastY,
+        x,
+        y,
+        e.buttons === 2 ? "#000000" : "#ffffff",
+      );
 
       // Update last position
       this.lastX = x;
@@ -193,13 +206,16 @@ class PixelCanvas {
    */
   updateCursorPosition(e) {
     const rect = this.canvas.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left) / (this.pixelSize * this.zoom));
+    const x = Math.floor(
+      (e.clientX - rect.left) / (this.pixelSize * this.zoom),
+    );
     const y = Math.floor((e.clientY - rect.top) / (this.pixelSize * this.zoom));
 
     if (x >= 0 && x < this.width && y >= 0 && y < this.height) {
-      document.getElementById('cursor-position').textContent = `X: ${x} Y: ${y}`;
+      document.getElementById("cursor-position").textContent =
+        `X: ${x} Y: ${y}`;
     } else {
-      document.getElementById('cursor-position').textContent = 'X: - Y: -';
+      document.getElementById("cursor-position").textContent = "X: - Y: -";
     }
   }
 
@@ -344,21 +360,21 @@ class PixelCanvas {
     // Don't fill if the target color is the same as the fill color
     if (targetColor === fillColor) return;
 
-    const queue = [{x, y}];
+    const queue = [{ x, y }];
 
     while (queue.length > 0) {
-      const {x, y} = queue.shift();
+      const { x, y } = queue.shift();
 
       // Check if this pixel is the target color
       if (this.getPixel(x, y) === targetColor) {
         // Set the pixel to the fill color
         this.drawPixel(x, y, fillColor);
 
         // Add adjacent pixels to the queue
-        if (x > 0) queue.push({x: x - 1, y});
-        if (x < this.width - 1) queue.push({x: x + 1, y});
-        if (y > 0) queue.push({x, y: y - 1});
-        if (y < this.height - 1) queue.push({x, y: y + 1});
+        if (x > 0) queue.push({ x: x - 1, y });
+        if (x < this.width - 1) queue.push({ x: x + 1, y });
+        if (y > 0) queue.push({ x, y: y - 1 });
+        if (y < this.height - 1) queue.push({ x, y: y + 1 });
       }
     }
   }
@@ -382,14 +398,19 @@ class PixelCanvas {
    */
   clear() {
     // Clear pixel data
-    this.pixels.fill('#000000');
+    this.pixels.fill("#000000");
 
     // Clear canvas
-    this.ctx.fillStyle = '#000000';
+    this.ctx.fillStyle = "#000000";
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
     // Clear effects canvas
-    this.effectsCtx.clearRect(0, 0, this.effectsCanvas.width, this.effectsCanvas.height);
+    this.effectsCtx.clearRect(
+      0,
+      0,
+      this.effectsCanvas.width,
+      this.effectsCanvas.height,
+    );
 
     // Clear UI canvas
     this.uiCtx.clearRect(0, 0, this.uiCanvas.width, this.uiCanvas.height);
@@ -400,7 +421,7 @@ class PixelCanvas {
    */
   render() {
     // Clear canvas
-    this.ctx.fillStyle = '#000000';
+    this.ctx.fillStyle = "#000000";
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
     // Draw pixels
@@ -414,7 +435,7 @@ class PixelCanvas {
           x * this.pixelSize * this.zoom,
           y * this.pixelSize * this.zoom,
           this.pixelSize * this.zoom,
-          this.pixelSize * this.zoom
+          this.pixelSize * this.zoom,
         );
       }
     }
@@ -432,7 +453,7 @@ class PixelCanvas {
     this.uiCtx.clearRect(0, 0, this.uiCanvas.width, this.uiCanvas.height);
 
     if (this.zoom >= 4) {
-      this.uiCtx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+      this.uiCtx.strokeStyle = "rgba(255, 255, 255, 0.1)";
       this.uiCtx.lineWidth = 1;
 
       // Draw vertical lines
@@ -458,15 +479,20 @@ class PixelCanvas {
    * @param {Object} effects - Effects settings
    */
   setEffects(effects) {
-    this.effects = {...this.effects, ...effects};
+    this.effects = { ...this.effects, ...effects };
   }
 
   /**
    * Animate the effects
    */
   animateEffects() {
     // Clear effects canvas
-    this.effectsCtx.clearRect(0, 0, this.effectsCanvas.width, this.effectsCanvas.height);
+    this.effectsCtx.clearRect(
+      0,
+      0,
+      this.effectsCanvas.width,
+      this.effectsCanvas.height,
+    );
 
     // Apply grain effect
     if (this.effects.grain) {
@@ -489,7 +515,9 @@ class PixelCanvas {
     }
 
     // Request next frame
-    this.effectsAnimationFrame = requestAnimationFrame(this.animateEffects.bind(this));
+    this.effectsAnimationFrame = requestAnimationFrame(
+      this.animateEffects.bind(this),
+    );
   }
 
   /**
@@ -498,7 +526,7 @@ class PixelCanvas {
   applyGrainEffect() {
     const intensity = this.effects.intensity * 0.1;
 
-    this.effectsCtx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    this.effectsCtx.fillStyle = "rgba(0, 0, 0, 0.5)";
 
     for (let y = 0; y < this.height; y++) {
       for (let x = 0; x < this.width; x++) {
@@ -507,7 +535,7 @@ class PixelCanvas {
             x * this.pixelSize * this.zoom,
             y * this.pixelSize * this.zoom,
             this.pixelSize * this.zoom,
-            this.pixelSize * this.zoom
+            this.pixelSize * this.zoom,
           );
         }
       }
@@ -520,7 +548,7 @@ class PixelCanvas {
   applyStaticEffect() {
     const intensity = this.effects.intensity * 0.05;
 
-    this.effectsCtx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+    this.effectsCtx.fillStyle = "rgba(255, 255, 255, 0.1)";
 
     for (let y = 0; y < this.canvas.height; y += 2) {
       if (Math.random() < intensity) {
@@ -545,24 +573,29 @@ class PixelCanvas {
         const offset = (Math.random() - 0.5) * 10 * intensity;
 
         // Create a temporary canvas to hold the row
-        const tempCanvas = document.createElement('canvas');
+        const tempCanvas = document.createElement("canvas");
         tempCanvas.width = this.canvas.width;
         tempCanvas.height = this.pixelSize * this.zoom;
-        const tempCtx = tempCanvas.getContext('2d');
+        const tempCtx = tempCanvas.getContext("2d");
 
         // Copy the row from the main canvas
         tempCtx.drawImage(
           this.canvas,
-          0, y * this.pixelSize * this.zoom,
-          this.canvas.width, this.pixelSize * this.zoom,
-          0, 0,
-          this.canvas.width, this.pixelSize * this.zoom
+          0,
+          y * this.pixelSize * this.zoom,
+          this.canvas.width,
+          this.pixelSize * this.zoom,
+          0,
+          0,
+          this.canvas.width,
+          this.pixelSize * this.zoom,
         );
 
         // Draw the row with offset
         this.effectsCtx.drawImage(
           tempCanvas,
-          offset * this.pixelSize * this.zoom, y * this.pixelSize * this.zoom
+          offset * this.pixelSize * this.zoom,
+          y * this.pixelSize * this.zoom,
         );
       }
     }
@@ -575,17 +608,21 @@ class PixelCanvas {
     const intensity = this.effects.intensity;
 
     // Scanlines
-    this.effectsCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+    this.effectsCtx.fillStyle = "rgba(0, 0, 0, 0.1)";
     for (let y = 0; y < this.canvas.height; y += 2) {
       this.effectsCtx.fillRect(0, y, this.canvas.width, 1);
     }
 
     // Vignette
     const gradient = this.effectsCtx.createRadialGradient(
-      this.canvas.width / 2, this.canvas.height / 2, 0,
-      this.canvas.width / 2, this.canvas.height / 2, this.canvas.width / 1.5
+      this.canvas.width / 2,
+      this.canvas.height / 2,
+      0,
+      this.canvas.width / 2,
+      this.canvas.height / 2,
+      this.canvas.width / 1.5,
     );
-    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+    gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
     gradient.addColorStop(1, `rgba(0, 0, 0, ${intensity * 0.7})`);
 
     this.effectsCtx.fillStyle = gradient;
@@ -600,7 +637,7 @@ class PixelCanvas {
   setDimensions(width, height) {
     this.width = width;
     this.height = height;
-    this.pixels = new Array(this.width * this.height).fill('#000000');
+    this.pixels = new Array(this.width * this.height).fill("#000000");
     this.initCanvas();
   }
 
@@ -648,10 +685,10 @@ class PixelCanvas {
    */
   exportToPNG() {
     // Create a temporary canvas for export
-    const exportCanvas = document.createElement('canvas');
+    const exportCanvas = document.createElement("canvas");
     exportCanvas.width = this.width;
     exportCanvas.height = this.height;
-    const exportCtx = exportCanvas.getContext('2d');
+    const exportCtx = exportCanvas.getContext("2d");
 
     // Draw pixels at 1:1 scale
     for (let y = 0; y < this.height; y++) {
@@ -665,7 +702,7 @@ class PixelCanvas {
     }
 
     // Return data URL
-    return exportCanvas.toDataURL('image/png');
+    return exportCanvas.toDataURL("image/png");
   }
 
   /**