diff --git a/build.js b/build.js index 26c4de0..b954f80 100644 --- a/build.js +++ b/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(); diff --git a/dist/birb.js b/dist/birb.js index 799d569..8b4c3f9 100644 --- a/dist/birb.js +++ b/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); diff --git a/dist/birb.user.js b/dist/birb.user.js index 062d19f..6d24af6 100644 --- a/dist/birb.user.js +++ b/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); diff --git a/manifest.json b/manifest.json index 1526bbe..f700c72 100644 --- a/manifest.json +++ b/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": [ { diff --git a/src/anim.js b/src/anim.js new file mode 100644 index 0000000..7294edb --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/birb.js b/src/birb.js index 1fd7e31..8765a5d 100644 --- a/src/birb.js +++ b/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); diff --git a/stylesheet.css b/src/stylesheet.css similarity index 100% rename from stylesheet.css rename to src/stylesheet.css