Move anim class and stylesheet

build.js

@@ -18,7 +18,7 @@ const spriteSheets = [
 	}
 ];
 
-const STYLESHEET_PATH = "./stylesheet.css";
+const STYLESHEET_PATH = "./src/stylesheet.css";
 const STYLESHEET_KEY = "___STYLESHEET___";
 
 const now = new Date();

dist/birb.js

@@ -283,6 +283,50 @@
 				}		}	}
 	}
 
+	class Anim {
+		/**
+		 * @param {Frame[]} frames
+		 * @param {number[]} durations
+		 * @param {boolean} loop
+		 */
+		constructor(frames, durations, loop = true) {
+			this.frames = frames;
+			this.durations = durations;
+			this.loop = loop;
+		}
+
+		getAnimationDuration() {
+			return this.durations.reduce((a, b) => a + b, 0);
+		}
+
+		/**
+		 * @param {CanvasRenderingContext2D} ctx
+		 * @param {number} direction
+		 * @param {number} timeStart The start time of the animation in milliseconds
+		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
+		 * @param {BirdType} [species] The species to use for the animation
+		 * @returns {boolean} Whether the animation is complete
+		 */
+		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+			let time = Date.now() - timeStart;
+			const duration = this.getAnimationDuration();
+			if (this.loop) {
+				time %= duration;
+			}
+			let totalDuration = 0;
+			for (let i = 0; i < this.durations.length; i++) {
+				totalDuration += this.durations[i];
+				if (time < totalDuration) {
+					this.frames[i].draw(ctx, direction, canvasPixelSize, species);
+					return false;
+				}
+			}
+			// Draw the last frame if the animation is complete
+			this.frames[this.frames.length - 1].draw(ctx, direction, canvasPixelSize, species);
+			return true;
+		}
+	}
+
 	// @ts-ignore
 	const SHARED_CONFIG = {
 		birbCssScale: 1,
@@ -684,49 +728,6 @@
 	outline: none;
 }`;
 
-	class Anim {
-		/**
-		 * @param {Frame[]} frames
-		 * @param {number[]} durations
-		 * @param {boolean} loop
-		 */
-		constructor(frames, durations, loop = true) {
-			this.frames = frames;
-			this.durations = durations;
-			this.loop = loop;
-		}
-
-		getAnimationDuration() {
-			return this.durations.reduce((a, b) => a + b, 0);
-		}
-
-		/**
-		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {number} direction
-		 * @param {number} timeStart The start time of the animation in milliseconds
-		 * @param {BirdType} [species] The species to use for the animation
-		 * @returns {boolean} Whether the animation is complete
-		 */
-		draw(ctx, direction, timeStart, species) {
-			let time = Date.now() - timeStart;
-			const duration = this.getAnimationDuration();
-			if (this.loop) {
-				time %= duration;
-			}
-			let totalDuration = 0;
-			for (let i = 0; i < this.durations.length; i++) {
-				totalDuration += this.durations[i];
-				if (time < totalDuration) {
-					this.frames[i].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-					return false;
-				}
-			}
-			// Draw the last frame if the animation is complete
-			this.frames[this.frames.length - 1].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-			return true;
-		}
-	}
-
 	const DEFAULT_BIRD = "bluebird";
 
 	const SPRITE_WIDTH = 32;
@@ -1316,7 +1317,7 @@
 			}
 
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
-			if (currentAnimation.draw(ctx, direction, animStart, SPECIES[currentSpecies])) {
+			if (currentAnimation.draw(ctx, direction, animStart, CANVAS_PIXEL_SIZE, SPECIES[currentSpecies])) {
 				setAnimation(Animations.STILL);
 			}
 
@@ -1531,7 +1532,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);

dist/birb.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Pocket Bird
 // @namespace    https://idreesinc.com
-// @version      2025.10.26.44
+// @version      2025.10.26.55
 // @description  birb
 // @author       Idrees
 // @downloadURL  https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -297,6 +297,50 @@
 				}		}	}
 	}
 
+	class Anim {
+		/**
+		 * @param {Frame[]} frames
+		 * @param {number[]} durations
+		 * @param {boolean} loop
+		 */
+		constructor(frames, durations, loop = true) {
+			this.frames = frames;
+			this.durations = durations;
+			this.loop = loop;
+		}
+
+		getAnimationDuration() {
+			return this.durations.reduce((a, b) => a + b, 0);
+		}
+
+		/**
+		 * @param {CanvasRenderingContext2D} ctx
+		 * @param {number} direction
+		 * @param {number} timeStart The start time of the animation in milliseconds
+		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
+		 * @param {BirdType} [species] The species to use for the animation
+		 * @returns {boolean} Whether the animation is complete
+		 */
+		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+			let time = Date.now() - timeStart;
+			const duration = this.getAnimationDuration();
+			if (this.loop) {
+				time %= duration;
+			}
+			let totalDuration = 0;
+			for (let i = 0; i < this.durations.length; i++) {
+				totalDuration += this.durations[i];
+				if (time < totalDuration) {
+					this.frames[i].draw(ctx, direction, canvasPixelSize, species);
+					return false;
+				}
+			}
+			// Draw the last frame if the animation is complete
+			this.frames[this.frames.length - 1].draw(ctx, direction, canvasPixelSize, species);
+			return true;
+		}
+	}
+
 	// @ts-ignore
 	const SHARED_CONFIG = {
 		birbCssScale: 1,
@@ -698,49 +742,6 @@
 	outline: none;
 }`;
 
-	class Anim {
-		/**
-		 * @param {Frame[]} frames
-		 * @param {number[]} durations
-		 * @param {boolean} loop
-		 */
-		constructor(frames, durations, loop = true) {
-			this.frames = frames;
-			this.durations = durations;
-			this.loop = loop;
-		}
-
-		getAnimationDuration() {
-			return this.durations.reduce((a, b) => a + b, 0);
-		}
-
-		/**
-		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {number} direction
-		 * @param {number} timeStart The start time of the animation in milliseconds
-		 * @param {BirdType} [species] The species to use for the animation
-		 * @returns {boolean} Whether the animation is complete
-		 */
-		draw(ctx, direction, timeStart, species) {
-			let time = Date.now() - timeStart;
-			const duration = this.getAnimationDuration();
-			if (this.loop) {
-				time %= duration;
-			}
-			let totalDuration = 0;
-			for (let i = 0; i < this.durations.length; i++) {
-				totalDuration += this.durations[i];
-				if (time < totalDuration) {
-					this.frames[i].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-					return false;
-				}
-			}
-			// Draw the last frame if the animation is complete
-			this.frames[this.frames.length - 1].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-			return true;
-		}
-	}
-
 	const DEFAULT_BIRD = "bluebird";
 
 	const SPRITE_WIDTH = 32;
@@ -1330,7 +1331,7 @@
 			}
 
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
-			if (currentAnimation.draw(ctx, direction, animStart, SPECIES[currentSpecies])) {
+			if (currentAnimation.draw(ctx, direction, animStart, CANVAS_PIXEL_SIZE, SPECIES[currentSpecies])) {
 				setAnimation(Animations.STILL);
 			}
 
@@ -1545,7 +1546,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Pocket Bird",
     "description": "It's a bird, in your browser. What more could you want?",
-    "version": "2025.10.26.44",
+    "version": "2025.10.26.55",
     "homepage_url": "https://idreesinc.com",
     "content_scripts": [
         {

src/anim.js

@@ -0,0 +1,48 @@
+import Frame from "./frame.js";
+import { BirdType } from "./sprites";
+
+class Anim {
+	/**
+	 * @param {Frame[]} frames
+	 * @param {number[]} durations
+	 * @param {boolean} loop
+	 */
+	constructor(frames, durations, loop = true) {
+		this.frames = frames;
+		this.durations = durations;
+		this.loop = loop;
+	}
+
+	getAnimationDuration() {
+		return this.durations.reduce((a, b) => a + b, 0);
+	}
+
+	/**
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {number} direction
+	 * @param {number} timeStart The start time of the animation in milliseconds
+	 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
+	 * @param {BirdType} [species] The species to use for the animation
+	 * @returns {boolean} Whether the animation is complete
+	 */
+	draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		let time = Date.now() - timeStart;
+		const duration = this.getAnimationDuration();
+		if (this.loop) {
+			time %= duration;
+		}
+		let totalDuration = 0;
+		for (let i = 0; i < this.durations.length; i++) {
+			totalDuration += this.durations[i];
+			if (time < totalDuration) {
+				this.frames[i].draw(ctx, direction, canvasPixelSize, species);
+				return false;
+			}
+		}
+		// Draw the last frame if the animation is complete
+		this.frames[this.frames.length - 1].draw(ctx, direction, canvasPixelSize, species);
+		return true;
+	}
+}
+
+export default Anim;

src/birb.js

@@ -11,6 +11,7 @@ import {
 
 import Frame from './frame.js';
 import Layer from './layer.js';
+import Anim from './anim.js';
 
 // @ts-ignore
 const SHARED_CONFIG = {
@@ -70,49 +71,6 @@ let userSettings = {};
 
 const STYLESHEET = `___STYLESHEET___`;
 
-class Anim {
-	/**
-	 * @param {Frame[]} frames
-	 * @param {number[]} durations
-	 * @param {boolean} loop
-	 */
-	constructor(frames, durations, loop = true) {
-		this.frames = frames;
-		this.durations = durations;
-		this.loop = loop;
-	}
-
-	getAnimationDuration() {
-		return this.durations.reduce((a, b) => a + b, 0);
-	}
-
-	/**
-	 * @param {CanvasRenderingContext2D} ctx
-	 * @param {number} direction
-	 * @param {number} timeStart The start time of the animation in milliseconds
-	 * @param {BirdType} [species] The species to use for the animation
-	 * @returns {boolean} Whether the animation is complete
-	 */
-	draw(ctx, direction, timeStart, species) {
-		let time = Date.now() - timeStart;
-		const duration = this.getAnimationDuration();
-		if (this.loop) {
-			time %= duration;
-		}
-		let totalDuration = 0;
-		for (let i = 0; i < this.durations.length; i++) {
-			totalDuration += this.durations[i];
-			if (time < totalDuration) {
-				this.frames[i].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-				return false;
-			}
-		}
-		// Draw the last frame if the animation is complete
-		this.frames[this.frames.length - 1].draw(ctx, direction, CANVAS_PIXEL_SIZE, species);
-		return true;
-	}
-}
-
 const DEFAULT_BIRD = "bluebird";
 
 const SPRITE_WIDTH = 32;
@@ -710,7 +668,7 @@ Promise.all([
 		}
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		if (currentAnimation.draw(ctx, direction, animStart, SPECIES[currentSpecies])) {
+		if (currentAnimation.draw(ctx, direction, animStart, CANVAS_PIXEL_SIZE, SPECIES[currentSpecies])) {
 			setAnimation(Animations.STILL);
 		}
 
@@ -909,7 +867,7 @@ Promise.all([
 			return;
 		}
 		// Draw the decoration
-		DECORATION_ANIMATIONS.mac.draw(decorationCtx, Directions.LEFT, Date.now());
+		DECORATION_ANIMATIONS.mac.draw(decorationCtx, Directions.LEFT, CANVAS_PIXEL_SIZE, Date.now());
 		// Add the decoration to the page
 		document.body.appendChild(decorationCanvas);
 		makeDraggable(decorationCanvas, false);
@@ -945,7 +903,7 @@ Promise.all([
 		if (!featherCtx) {
 			return;
 		}
-		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), type);
+		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
 		document.body.appendChild(featherCanvas);
 		onClick(featherCanvas, () => {
 			unlockBird(birdType);