noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-24 19:59:36 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
2d95496fd99d11d561076be99954d96e696ce42b
Pocket-Bird/dist/userscript/birb.user.js
Idrees Hassan 2d95496fd9 Compress extension in build
2025-11-02 21:40:25 -05:00

2674 lines
74 KiB
JavaScript
Raw Blame History

// ==UserScript==
// @name Pocket Bird
// @namespace https://idreesinc.com
// @version 2025.11.2.73
// @description It's a bird that hops around your web browser, the future is here
// @author Idrees
// @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js
// @updateURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// ==/UserScript==
(function () {
'use strict';
const Directions = {
LEFT: -1,
RIGHT: 1,
};
let debugMode = location.hostname === "127.0.0.1";
/**
* @returns {boolean} Whether debug mode is enabled
*/
function isDebug() {
return debugMode;
}
/**
* @param {boolean} value
*/
function setDebug(value) {
debugMode = value;
}
/**
* Create an HTML element with the specified parameters
* @param {string} className
* @param {string} [textContent]
* @param {string} [id]
* @returns {HTMLElement}
*/
function makeElement(className, textContent, id) {
const element = document.createElement("div");
element.classList.add(className);
if (textContent) {
element.textContent = textContent;
}
if (id) {
element.id = id;
}
return element;
}
/**
* @param {Document|Element} element
* @param {(e: Event) => void} action
*/
function onClick(element, action) {
element.addEventListener("click", (e) => action(e));
element.addEventListener("touchend", (e) => {
if (e instanceof TouchEvent === false) {
return;
} else if (element instanceof HTMLElement === false) {
return;
}
const touch = e.changedTouches[0];
const rect = element.getBoundingClientRect();
if (
touch.clientX >= rect.left &&
touch.clientX <= rect.right &&
touch.clientY >= rect.top &&
touch.clientY <= rect.bottom
) {
action(e);
}
});
}
/**
* @param {HTMLElement|null} element The element to detect drag events on
* @param {boolean} [parent] Whether to move the parent element when the child is dragged
* @param {(top: number, left: number) => void} [callback] Callback for when element is moved
*/
function makeDraggable(element, parent = true, callback = () => { }) {
if (!element) {
return;
}
let isMouseDown = false;
let offsetX = 0;
let offsetY = 0;
let elementToMove = parent ? element.parentElement : element;
if (!elementToMove) {
error("Birb: Parent element not found");
return;
}
element.addEventListener("mousedown", (e) => {
isMouseDown = true;
offsetX = e.clientX - elementToMove.offsetLeft;
offsetY = e.clientY - elementToMove.offsetTop;
});
element.addEventListener("touchstart", (e) => {
isMouseDown = true;
const touch = e.touches[0];
offsetX = touch.clientX - elementToMove.offsetLeft;
offsetY = touch.clientY - elementToMove.offsetTop;
e.preventDefault();
});
document.addEventListener("mouseup", (e) => {
if (isMouseDown) {
callback(elementToMove.offsetTop, elementToMove.offsetLeft);
e.preventDefault();
}
isMouseDown = false;
});
document.addEventListener("touchend", (e) => {
if (isMouseDown) {
callback(elementToMove.offsetTop, elementToMove.offsetLeft);
e.preventDefault();
}
isMouseDown = false;
});
document.addEventListener("mousemove", (e) => {
if (isMouseDown) {
elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
}
});
document.addEventListener("touchmove", (e) => {
if (isMouseDown) {
const touch = e.touches[0];
elementToMove.style.left = `${Math.max(0, touch.clientX - offsetX)}px`;
elementToMove.style.top = `${Math.max(0, touch.clientY - offsetY)}px`;
}
});
}
/**
* @param {() => void} func
* @param {Element} [closeButton]
*/
function makeClosable(func, closeButton) {
if (closeButton) {
onClick(closeButton, func);
}
document.addEventListener("keydown", (e) => {
if (closeButton && !document.body.contains(closeButton)) {
return;
}
if (e.key === "Escape") {
func();
}
});
}
/**
* @returns {boolean} Whether the user is on a mobile device
*/
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function log() {
console.log("Birb: ", ...arguments);
}
function debug() {
if (isDebug()) {
console.debug("Birb: ", ...arguments);
}
}
function error() {
console.error("Birb: ", ...arguments);
}
/**
* Get a layer from a sprite sheet array
* @param {string[][]} spriteSheet The sprite sheet pixel array
* @param {number} spriteIndex The sprite index
* @param {number} width The width of each sprite
* @returns {string[][]}
*/
function getLayer(spriteSheet, spriteIndex, width) {
// From an array of a horizontal sprite sheet, get the layer for a specific sprite
const layer = [];
for (let y = 0; y < width; y++) {
layer.push(spriteSheet[y].slice(spriteIndex * width, (spriteIndex + 1) * width));
}
return layer;
}
/**
* The height of the inner browser window
* Will be the same as getFixedWindowHeight() on most browsers
* On iOS, it will vary to be the height excluding the current address bar size (potentially greater than fixed height)
*/
function getWindowHeight() {
// Necessary because iOS 26 Safari is terrible and won't render
// fixed/sticky elements behind the address bar
return window.innerHeight;
}
/**
* The fixed height of the inner browser window
* Will be the same as getWindowHeight() on most browsers
* On iOS, it will always be the height of the window when the address bar is fully expanded
* @returns The true height of the inner browser window
*/
function getFixedWindowHeight() {
return document.documentElement.clientHeight;
}
/** Indicators for parts of the base bird sprite sheet */
const Sprite = {
THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent",
OUTLINE: "outline",
BORDER: "border",
FOOT: "foot",
BEAK: "beak",
EYE: "eye",
FACE: "face",
HOOD: "hood",
NOSE: "nose",
BELLY: "belly",
UNDERBELLY: "underbelly",
WING: "wing",
WING_EDGE: "wing-edge",
HEART: "heart",
HEART_BORDER: "heart-border",
HEART_SHINE: "heart-shine",
FEATHER_SPINE: "feather-spine",
};
/** @type {Record<string, string>} */
const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT,
"#ffffff": Sprite.BORDER,
"#000000": Sprite.OUTLINE,
"#010a19": Sprite.BEAK,
"#190301": Sprite.EYE,
"#af8e75": Sprite.FOOT,
"#639bff": Sprite.FACE,
"#99e550": Sprite.HOOD,
"#d95763": Sprite.NOSE,
"#f8b143": Sprite.BELLY,
"#ec8637": Sprite.UNDERBELLY,
"#578ae6": Sprite.WING,
"#326ed9": Sprite.WING_EDGE,
"#c82e2e": Sprite.HEART,
"#501a1a": Sprite.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE,
};
class BirdType {
/**
* @param {string} name
* @param {string} description
* @param {Record<string, string>} colors
* @param {string[]} [tags]
*/
constructor(name, description, colors, tags = []) {
this.name = name;
this.description = description;
const defaultColors = {
[Sprite.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000",
[Sprite.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face,
[Sprite.NOSE]: colors.face,
};
/** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags;
}
}
/** @type {Record<string, BirdType>} */
const SPECIES = {
bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9",
}),
shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2dff",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93",
}),
tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9",
}, ["tuft"]),
europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34",
}),
redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c",
}, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255",
[Sprite.NOSE]: "#383838",
[Sprite.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00"
}),
barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9",
}),
mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065",
}),
redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f",
}),
scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633",
}),
americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a",
}),
carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348",
}),
};
class Layer {
/**
* @param {string[][]} pixels
* @param {string} [tag]
*/
constructor(pixels, tag = "default") {
this.pixels = pixels;
this.tag = tag;
}
}
class Frame {
/** @type {{ [tag: string]: string[][] }} */
#pixelsByTag = {};
/**
* @param {Layer[]} layers
*/
constructor(layers) {
/** @type {Set<string>} */
let tags = new Set();
for (let layer of layers) {
tags.add(layer.tag);
}
tags.add("default");
for (let tag of tags) {
let maxHeight = layers.reduce((max, layer) => Math.max(max, layer.pixels.length), 0);
if (layers[0].tag !== "default") {
throw new Error("First layer must have the 'default' tag");
}
this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels
while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT));
}
// Combine layers
for (let i = 1; i < layers.length; i++) {
if (layers[i].tag === "default" || layers[i].tag === tag) {
let layerPixels = layers[i].pixels;
let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
}
}
}
}
this.#pixelsByTag[tag] = this.pixels.map(row => row.slice());
}
}
/**
* @param {string} [tag]
* @returns {string[][]}
*/
getPixels(tag = "default") {
return this.#pixelsByTag[tag] ?? this.#pixelsByTag["default"];
}
/**
* @param {CanvasRenderingContext2D} ctx
* @param {BirdType} [species]
* @param {number} direction
* @param {number} canvasPixelSize
*/
draw(ctx, direction, canvasPixelSize, species) {
// Clear the canvas before drawing the new frame
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const pixels = this.getPixels(species?.tags[0]);
for (let y = 0; y < pixels.length; y++) {
const row = pixels[y];
for (let x = 0; x < pixels[y].length; x++) {
const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
ctx.fillStyle = species?.colors[cell] ?? cell;
ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
} } }
}
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;
this.lastFrameIndex = -1;
this.lastDirection = null;
this.lastTimeStart = null;
}
getAnimationDuration() {
return this.durations.reduce((a, b) => a + b, 0);
}
/**
* Get the current frame index based on elapsed time
* @param {number} time The elapsed time since animation start
* @returns {number} The index of the current frame
*/
getCurrentFrameIndex(time) {
let totalDuration = 0;
for (let i = 0; i < this.durations.length; i++) {
totalDuration += this.durations[i];
if (time < totalDuration) {
return i;
}
}
return this.frames.length - 1;
}
/**
* Clear the cached frame state
*/
#clearCache() {
this.lastFrameIndex = -1;
this.lastDirection = null;
}
/**
* Check if the frame needs to be redrawn
* @param {number} frameIndex The current frame index
* @param {number} direction The current direction
* @returns {boolean} Whether the frame needs to be redrawn
*/
#shouldRedraw(frameIndex, direction) {
return frameIndex !== this.lastFrameIndex || direction !== this.lastDirection;
}
/**
* @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) {
// Reset cache if animation was restarted
if (this.lastTimeStart !== timeStart) {
this.#clearCache();
this.lastTimeStart = timeStart;
}
let time = Date.now() - timeStart;
const duration = this.getAnimationDuration();
if (this.loop) {
time %= duration;
}
const currentFrameIndex = this.getCurrentFrameIndex(time);
if (this.#shouldRedraw(currentFrameIndex, direction)) {
this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
this.lastFrameIndex = currentFrameIndex;
this.lastDirection = direction;
}
// Return whether animation is complete (for non-looping animations)
return !this.loop && time >= duration;
}
}
/**
* @typedef {keyof typeof Animations} AnimationType
*/
const Animations = /** @type {const} */ ({
STILL: "STILL",
BOB: "BOB",
FLYING: "FLYING",
HEART: "HEART"
});
class Birb {
animStart = Date.now();
x = 0;
y = 0;
direction = Directions.RIGHT;
isAbsolutePositioned = false;
visible = true;
/** @type {AnimationType} */
currentAnimation = Animations.STILL;
/**
* @param {number} birbCssScale
* @param {number} canvasPixelSize
* @param {string[][]} spriteSheet The loaded sprite sheet pixel data
* @param {number} spriteWidth
* @param {number} spriteHeight
*/
constructor(birbCssScale, canvasPixelSize, spriteSheet, spriteWidth, spriteHeight) {
this.birbCssScale = birbCssScale;
this.canvasPixelSize = canvasPixelSize;
this.windowPixelSize = canvasPixelSize * birbCssScale;
this.spriteWidth = spriteWidth;
this.spriteHeight = spriteHeight;
// Build layers from sprite sheet
this.layers = {
base: new Layer(getLayer(spriteSheet, 0, this.spriteWidth)),
down: new Layer(getLayer(spriteSheet, 1, this.spriteWidth)),
heartOne: new Layer(getLayer(spriteSheet, 2, this.spriteWidth)),
heartTwo: new Layer(getLayer(spriteSheet, 3, this.spriteWidth)),
heartThree: new Layer(getLayer(spriteSheet, 4, this.spriteWidth)),
tuftBase: new Layer(getLayer(spriteSheet, 5, this.spriteWidth), "tuft"),
tuftDown: new Layer(getLayer(spriteSheet, 6, this.spriteWidth), "tuft"),
wingsUp: new Layer(getLayer(spriteSheet, 7, this.spriteWidth)),
wingsDown: new Layer(getLayer(spriteSheet, 8, this.spriteWidth)),
happyEye: new Layer(getLayer(spriteSheet, 9, this.spriteWidth)),
};
// Build frames from layers
this.frames = {
base: new Frame([this.layers.base, this.layers.tuftBase]),
headDown: new Frame([this.layers.down, this.layers.tuftDown]),
wingsDown: new Frame([this.layers.base, this.layers.tuftBase, this.layers.wingsDown]),
wingsUp: new Frame([this.layers.down, this.layers.tuftDown, this.layers.wingsUp]),
heartOne: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, this.layers.heartOne]),
heartTwo: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, this.layers.heartTwo]),
heartThree: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, this.layers.heartThree]),
heartFour: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, this.layers.heartTwo]),
};
// Build animations from frames
this.animations = {
[Animations.STILL]: new Anim([this.frames.base], [1000]),
[Animations.BOB]: new Anim([
this.frames.base,
this.frames.headDown
], [
420,
420
]),
[Animations.FLYING]: new Anim([
this.frames.base,
this.frames.wingsUp,
this.frames.headDown,
this.frames.wingsDown,
], [
30,
80,
30,
60,
]),
[Animations.HEART]: new Anim([
this.frames.heartOne,
this.frames.heartTwo,
this.frames.heartThree,
this.frames.heartFour,
this.frames.heartThree,
this.frames.heartFour,
this.frames.heartThree,
this.frames.heartFour,
], [
60,
80,
250,
250,
250,
250,
250,
250,
], false),
};
// Create canvas element
this.canvas = document.createElement("canvas");
this.canvas.id = "birb";
this.canvas.width = this.frames.base.getPixels()[0].length * canvasPixelSize;
this.canvas.height = spriteHeight * canvasPixelSize;
this.ctx = this.canvas.getContext("2d");
// Append to document
document.body.appendChild(this.canvas);
}
/**
* Draw the current animation frame
* @param {BirdType} species The species color data
* @returns {boolean} Whether the animation has completed (for non-looping animations)
*/
draw(species) {
const anim = this.animations[this.currentAnimation];
return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
}
/**
* @returns {AnimationType} The current animation key
*/
getCurrentAnimation() {
return this.currentAnimation;
}
/**
* Set the current animation by name and reset the animation timer
* @param {AnimationType} animationName
*/
setAnimation(animationName) {
this.currentAnimation = animationName;
this.animStart = Date.now();
}
/**
* Get the frames object
* @returns {Record<string, Frame>}
*/
getFrames() {
return this.frames;
}
/**
* Get the canvas element
* @returns {HTMLCanvasElement}
*/
getElement() {
return this.canvas;
}
/**
* Get the canvas width in CSS pixels
* @returns {number}
*/
getElementWidth() {
return this.canvas.width * this.birbCssScale;
}
/**
* Get the canvas height in CSS pixels
* @returns {number}
*/
getElementHeight() {
return this.canvas.height * this.birbCssScale;
}
getElementTop() {
const rect = this.canvas.getBoundingClientRect();
return rect.top;
}
/**
* Set the X position
* @param {number} x
*/
setX(x) {
this.x = x;
let mod = this.getElementWidth() / -2 - (this.windowPixelSize * (this.direction === Directions.RIGHT ? 2 : -2));
this.canvas.style.left = `${x + mod}px`;
}
/**
* Set the Y position
* @param {number} y
*/
setY(y) {
this.y = y;
let bottom;
if (this.isAbsolutePositioned) {
// Position is absolute, convert from fixed
// Account for address bar shrinkage on iOS
bottom = y - window.scrollY - (getWindowHeight() - getFixedWindowHeight());
} else {
// Position is fixed
bottom = y;
}
this.canvas.style.bottom = `${bottom}px`;
}
/**
* Get the current X position
* @returns {number}
*/
getX() {
return this.x;
}
/**
* Get the current Y position
* @returns {number}
*/
getY() {
return this.y;
}
/**
* Set the direction the bird is facing
* @param {number} direction
*/
setDirection(direction) {
this.direction = direction;
}
/**
* Set whether the element should be absolutely positioned
* @param {boolean} absolute
*/
setAbsolutePositioned(absolute) {
this.isAbsolutePositioned = absolute;
if (absolute) {
this.canvas.classList.add("birb-absolute");
} else {
this.canvas.classList.remove("birb-absolute");
}
// Update Y position to apply the new positioning mode
this.setY(this.y);
}
/**
* Set visibility of the bird
* @param {boolean} visible
*/
setVisible(visible) {
this.visible = visible;
this.canvas.style.display = visible ? "" : "none";
}
/**
* Get visibility of the bird
* @returns {boolean}
*/
isVisible() {
return this.visible;
}
}
const SAVE_KEY = "birbSaveData";
/**
* @typedef {import('./application.js').BirbSaveData} BirbSaveData
*/
/**
* @abstract
*/
class Context {
/**
* @abstract
* @returns {boolean} Whether this context is applicable
*/
isContextActive() {
throw new Error("Method not implemented");
}
/**
* @abstract
* @returns {Promise<BirbSaveData|{}>}
*/
async getSaveData() {
throw new Error("Method not implemented");
}
/**
* @abstract
* @param {BirbSaveData} saveData
*/
async putSaveData(saveData) {
throw new Error("Method not implemented");
}
/**
* @abstract
*/
resetSaveData() {
throw new Error("Method not implemented");
}
}
class LocalContext extends Context {
/**
* @override
* @returns {boolean}
*/
isContextActive() {
return window.location.hostname === "127.0.0.1"
|| window.location.hostname === "localhost"
|| window.location.hostname.startsWith("192.168.");
}
/**
* @override
* @returns {Promise<BirbSaveData|{}>}
*/
async getSaveData() {
log("Loading save data from localStorage");
return JSON.parse(localStorage.getItem(SAVE_KEY) ?? "{}");
}
/**
* @override
* @param {BirbSaveData} saveData
*/
async putSaveData(saveData) {
log("Saving data to localStorage");
localStorage.setItem(SAVE_KEY, JSON.stringify(saveData));
}
/** @override */
resetSaveData() {
log("Resetting save data in localStorage");
localStorage.removeItem(SAVE_KEY);
}
}
class UserScriptContext extends Context {
/**
* @override
* @returns {boolean}
*/
isContextActive() {
// @ts-expect-error
return typeof GM_getValue === "function";
}
/**
* @override
* @returns {Promise<BirbSaveData|{}>}
*/
async getSaveData() {
log("Loading save data from UserScript storage");
/** @type {BirbSaveData|{}} */
let saveData = {};
// @ts-expect-error
saveData = GM_getValue(SAVE_KEY, {}) ?? {};
return saveData;
}
/**
* @override
* @param {BirbSaveData} saveData
*/
async putSaveData(saveData) {
log("Saving data to UserScript storage");
// @ts-expect-error
GM_setValue(SAVE_KEY, saveData);
}
/** @override */
resetSaveData() {
log("Resetting save data in UserScript storage");
// @ts-expect-error
GM_deleteValue(SAVE_KEY);
}
}
class BrowserExtensionContext extends Context {
/**
* @override
* @returns {boolean}
*/
isContextActive() {
// @ts-expect-error
return typeof chrome !== "undefined";
}
/**
* @override
* @returns {Promise<BirbSaveData|{}>}
*/
async getSaveData() {
log("Loading save data from browser extension storage");
return new Promise((resolve) => {
// @ts-expect-error
chrome.storage.sync.get([SAVE_KEY], (result) => {
resolve(result[SAVE_KEY] ?? {});
});
});
}
/**
* @override
* @param {BirbSaveData} saveData
*/
async putSaveData(saveData) {
log("Saving data to browser extension storage");
// @ts-expect-error
chrome.storage.sync.set({ [SAVE_KEY]: saveData }, function () {
// @ts-expect-error
if (chrome.runtime.lastError) {
// @ts-expect-error
console.error(chrome.runtime.lastError);
} else {
console.log("Settings saved successfully");
}
});
}
/** @override */
resetSaveData() {
log("Resetting save data in browser extension storage");
// @ts-expect-error
chrome.storage.sync.clear();
}
}
const CONTEXTS = [
new UserScriptContext(),
new BrowserExtensionContext(),
new LocalContext()
];
function getContext() {
for (const context of CONTEXTS) {
if (context.isContextActive()) {
return context;
}
}
error("No applicable context found, defaulting to LocalContext");
return CONTEXTS[0];
}
/**
* @typedef {Object} SavedStickyNote
* @property {string} id
* @property {string} site
* @property {string} content
* @property {number} top
* @property {number} left
*/
class StickyNote {
/**
* @param {string} id
* @param {string} [site]
* @param {string} [content]
* @param {number} [top]
* @param {number} [left]
*/
constructor(id, site = "", content = "", top = 0, left = 0) {
this.id = id;
this.site = site;
this.content = content;
this.top = top;
this.left = left;
}
}
/**
* Parse URL parameters into a key-value map
* @param {string} url
* @returns {Record<string, string>}
*/
function parseUrlParams(url) {
const queryString = url.split("?")[1];
if (!queryString) return {};
return queryString.split("&").reduce((params, param) => {
const [key, value] = param.split("=");
return { ...params, [key]: value };
}, {});
}
/**
* @param {StickyNote} stickyNote
* @returns {boolean} Whether the given sticky note is applicable to the current site/page
*/
function isStickyNoteApplicable(stickyNote) {
const stickyNoteUrl = stickyNote.site;
const currentUrl = window.location.href;
const stickyNoteWebsite = stickyNoteUrl.split("?")[0];
const currentWebsite = currentUrl.split("?")[0];
if (stickyNoteWebsite !== currentWebsite) {
return false;
}
const stickyNoteParams = parseUrlParams(stickyNoteUrl);
const currentParams = parseUrlParams(currentUrl);
if (window.location.hostname === "www.youtube.com") {
if (currentParams.v !== undefined && currentParams.v !== stickyNoteParams.v) {
return false;
}
}
return true;
}
/**
* @param {StickyNote} stickyNote
* @param {() => void} onSave
* @param {() => void} onDelete
* @returns {HTMLElement}
*/
function renderStickyNote(stickyNote, onSave, onDelete) {
const noteElement = makeElement("birb-window");
noteElement.classList.add("birb-sticky-note");
// Create header
const header = makeElement("birb-window-header");
const titleDiv = makeElement("birb-window-title", "Sticky Note");
const closeButton = makeElement("birb-window-close", "x");
header.appendChild(titleDiv);
header.appendChild(closeButton);
// Create content
const content = makeElement("birb-window-content");
const textarea = document.createElement("textarea");
textarea.className = "birb-sticky-note-input";
textarea.style.width = "150px";
textarea.placeholder = "Write your notes here and they'll stick to the page!";
textarea.value = stickyNote.content;
content.appendChild(textarea);
noteElement.appendChild(header);
noteElement.appendChild(content);
noteElement.style.top = `${stickyNote.top}px`;
noteElement.style.left = `${stickyNote.left}px`;
document.body.appendChild(noteElement);
makeDraggable(header, true, (top, left) => {
stickyNote.top = top;
stickyNote.left = left;
onSave();
});
if (closeButton) {
makeClosable(() => {
if (stickyNote.content.trim() === "" || confirm("Are you sure you want to delete this sticky note?")) {
onDelete();
noteElement.remove();
}
}, closeButton);
}
if (textarea && textarea instanceof HTMLTextAreaElement) {
let saveTimeout;
// Save after debounce
textarea.addEventListener("input", () => {
stickyNote.content = textarea.value;
if (saveTimeout) {
clearTimeout(saveTimeout);
}
saveTimeout = setTimeout(() => {
onSave();
}, 250);
});
}
// On window resize
window.addEventListener("resize", () => {
const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`;
const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`;
noteElement.style.transform = `scale(var(--birb-ui-scale)) translate(-${modLeft}, -${modTop})`;
});
return noteElement;
}
/**
* @param {StickyNote[]} stickyNotes
* @param {() => void} onSave
* @param {(note: StickyNote) => void} onDelete
*/
function drawStickyNotes(stickyNotes, onSave, onDelete) {
// Remove all existing sticky notes
const existingNotes = document.querySelectorAll(".birb-sticky-note");
existingNotes.forEach(note => note.remove());
// Render all sticky notes
for (let stickyNote of stickyNotes) {
if (isStickyNoteApplicable(stickyNote)) {
renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
}
}
}
/**
* @param {StickyNote[]} stickyNotes
* @param {() => void} onSave
* @param {(note: StickyNote) => void} onDelete
*/
function createNewStickyNote(stickyNotes, onSave, onDelete) {
const id = Date.now().toString();
const site = window.location.href;
const stickyNote = new StickyNote(id, site, "");
const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
stickyNote.top = parseInt(element.style.top, 10);
stickyNote.left = parseInt(element.style.left, 10);
stickyNotes.push(stickyNote);
onSave();
}
const MENU_ID = "birb-menu";
const MENU_EXIT_ID = "birb-menu-exit";
class MenuItem {
/**
* @param {string} text
* @param {() => void} action
* @param {boolean} [removeMenu]
* @param {boolean} [isDebug]
*/
constructor(text, action, removeMenu = true, isDebug = false) {
this.text = text;
this.action = action;
this.removeMenu = removeMenu;
this.isDebug = isDebug;
}
}
class DebugMenuItem extends MenuItem {
/**
* @param {string} text
* @param {() => void} action
*/
constructor(text, action, removeMenu = true) {
super(text, action, removeMenu, true);
}
}
class Separator extends MenuItem {
constructor() {
super("", () => { });
}
}
/**
* @param {MenuItem} item
* @param {() => void} removeMenuCallback
* @returns {HTMLElement}
*/
function makeMenuItem(item, removeMenuCallback) {
if (item instanceof Separator) {
return makeElement("birb-window-separator");
}
let menuItem = makeElement("birb-menu-item", item.text);
onClick(menuItem, () => {
if (item.removeMenu) {
removeMenuCallback();
}
item.action();
});
return menuItem;
}
/**
* Add the menu to the page if it doesn't already exist
* @param {MenuItem[]} menuItems
* @param {string} title
* @param {(menu: HTMLElement) => void} updateLocationCallback
*/
function insertMenu(menuItems, title, updateLocationCallback) {
if (document.querySelector("#" + MENU_ID)) {
return;
}
let menu = makeElement("birb-window", undefined, MENU_ID);
let header = makeElement("birb-window-header");
const titleDiv = makeElement("birb-window-title", title);
header.appendChild(titleDiv);
let content = makeElement("birb-window-content");
const removeCallback = () => removeMenu();
for (const item of menuItems) {
if (!item.isDebug || isDebug()) {
content.appendChild(makeMenuItem(item, removeCallback));
}
}
menu.appendChild(header);
menu.appendChild(content);
document.body.appendChild(menu);
makeDraggable(document.querySelector(".birb-window-header"));
let menuExit = makeElement("birb-window-exit", undefined, MENU_EXIT_ID);
onClick(menuExit, removeCallback);
document.body.appendChild(menuExit);
makeClosable(removeCallback);
updateLocationCallback(menu);
}
/**
* Remove the menu from the page
*/
function removeMenu() {
const menu = document.querySelector("#" + MENU_ID);
if (menu) {
menu.remove();
}
const exitMenu = document.querySelector("#" + MENU_EXIT_ID);
if (exitMenu) {
exitMenu.remove();
}
}
/**
* @returns {boolean} Whether the menu element is on the page
*/
function isMenuOpen() {
return document.querySelector("#" + MENU_ID) !== null;
}
/**
* @param {MenuItem[]} menuItems
* @param {(menu: HTMLElement) => void} updateLocationCallback
*/
function switchMenuItems(menuItems, updateLocationCallback) {
const menu = document.querySelector("#" + MENU_ID);
if (!menu || !(menu instanceof HTMLElement)) {
return;
}
const content = menu.querySelector(".birb-window-content");
if (!content) {
error("Birb: Content not found");
return;
}
while (content.firstChild) {
content.removeChild(content.firstChild);
}
const removeCallback = () => removeMenu();
for (const item of menuItems) {
if (!item.isDebug || isDebug()) {
content.appendChild(makeMenuItem(item, removeCallback));
}
}
updateLocationCallback(menu);
}
/**
* @typedef {import('./stickyNotes.js').SavedStickyNote} SavedStickyNote
*/
/**
* @typedef {Object} BirbSaveData
* @property {string[]} unlockedSpecies
* @property {string} currentSpecies
* @property {Partial<Settings>} settings
* @property {SavedStickyNote[]} [stickyNotes]
*/
/**
* @typedef {typeof DEFAULT_SETTINGS} Settings
*/
const DEFAULT_SETTINGS = {
birbMode: false
};
// Rendering constants
const SPRITE_WIDTH = 32;
const SPRITE_HEIGHT = 32;
const FEATHER_SPRITE_WIDTH = 32;
const BIRB_CSS_SCALE = 1;
const UI_CSS_SCALE = isMobile() ? 0.9 : 1;
const CANVAS_PIXEL_SIZE = 1;
const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * BIRB_CSS_SCALE;
// Build-time assets
const STYLESHEET = `:root {
--birb-border-size: 2px;
--birb-neg-border-size: calc(var(--birb-border-size) * -1);
--birb-double-border-size: calc(var(--birb-border-size) * 2);
--birb-neg-double-border-size: calc(var(--birb-neg-border-size) * 2);
--birb-highlight: #ffa3cb;
--birb-border-color: var(--birb-highlight);
--birb-background-color: #ffecda;
--birb-mix-color: color-mix(in srgb, var(--birb-highlight) 50%, var(--birb-background-color));
--birb-scale: ${BIRB_CSS_SCALE};
--birb-ui-scale: ${UI_CSS_SCALE};
}
#birb {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(var(--birb-scale)) !important;
transform-origin: bottom;
z-index: 2147483638 !important;
cursor: pointer;
}
.birb-absolute {
position: absolute !important;
}
.birb-decoration {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(var(--birb-scale)) !important;
transform-origin: bottom;
z-index: 2147483630 !important;
}
.birb-window {
font-family: "Monocraft", monospace !important;
line-height: initial !important;
color: #000000 !important;
z-index: 2147483639 !important;
position: fixed;
background-color: var(--birb-background-color);
box-shadow:
var(--birb-border-size) 0 var(--birb-border-color),
var(--birb-neg-border-size) 0 var(--birb-border-color),
0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--birb-border-size) var(--birb-border-color),
var(--birb-double-border-size) 0 var(--birb-border-color),
var(--birb-neg-double-border-size) 0 var(--birb-border-color),
0 var(--birb-neg-double-border-size) var(--birb-border-color),
0 var(--birb-double-border-size) var(--birb-border-color),
0 0 0 var(--birb-border-size) var(--birb-border-color),
0 0 0 var(--birb-double-border-size) white,
var(--birb-double-border-size) 0 0 var(--birb-border-size) white,
var(--birb-neg-double-border-size) 0 0 var(--birb-border-size) white,
0 var(--birb-neg-double-border-size) 0 var(--birb-border-size) white,
0 var(--birb-double-border-size) 0 var(--birb-border-size) white;
box-sizing: border-box;
display: flex;
flex-direction: column;
transform: scale(var(--birb-ui-scale)) !important;
animation: pop-in 0.08s;
transition-timing-function: ease-in;
}
#birb-menu {
transition-duration: 0.2s;
transition-timing-function: ease-out;
min-width: 140px;
z-index: 2147483639 !important;
}
#birb-menu-exit {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483637 !important;
}
@keyframes pop-in {
0% {
opacity: 1;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(var(--birb-ui-scale));
}
}
.birb-window-header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
padding-right: 30px;
background-color: var(--birb-highlight);
box-shadow:
var(--birb-border-size) 0 var(--birb-highlight),
var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--birb-neg-border-size) var(--birb-highlight),
var(--birb-neg-border-size) var(--birb-border-size) var(--birb-border-color),
var(--birb-border-size) var(--birb-border-size) var(--birb-border-color);
color: var(--birb-border-color) !important;
font-size: 16px;
}
.birb-window-title {
text-align: center;
flex-grow: 1;
user-select: none;
color: var(--birb-background-color);
}
.birb-window-close {
position: absolute;
top: 1px;
right: 0;
color: var(--birb-background-color);
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-close:hover {
transform: scale(1.1);
}
.birb-window-content {
box-sizing: border-box;
background-color: var(--birb-background-color);
margin-top: var(--birb-border-size);
flex-grow: 1;
box-shadow:
var(--birb-border-size) 0 var(--birb-background-color),
var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--birb-border-size) var(--birb-background-color),
0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--birb-border-size) var(--birb-border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: calc(var(--birb-double-border-size));
padding-bottom: var(--birb-border-size);
}
.birb-pico-8-content {
background: #111111;
box-shadow: none;
display: flex;
justify-content: center;
overflow: hidden;
border: none;
}
.birb-pico-8-content iframe {
width: 300px;
margin-left: -15px;
margin-right: -30px;
margin-top: -10px;
margin-bottom: -23px;
border: none;
aspect-ratio: 1;
}
.birb-music-player-content {
background: var(--birb-background-color);
box-shadow:
var(--birb-border-size) 0 var(--birb-background-color),
var(--birb-neg-border-size) 0 var(--birb-background-color),
0 var(--birb-border-size) var(--birb-background-color),
0 var(--birb-neg-border-size) var(--birb-border-color),
0 var(--birb-border-size) var(--birb-border-color);
display: flex;
justify-content: center;
overflow: hidden;
padding: 10px;
}
.birb-menu-item {
width: calc(100% - var(--birb-double-border-size));
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
opacity: 0.7 !important;
user-select: none;
display: flex;
justify-content: space-between;
cursor: pointer;
color: black !important;
}
.birb-menu-item:hover {
opacity: 1 !important;
background: var(--birb-highlight) !important;
color: white !important;
box-shadow:
var(--birb-border-size) 0 var(--birb-highlight),
var(--birb-neg-border-size) 0 var(--birb-highlight),
0 var(--birb-neg-border-size) var(--birb-highlight),
0 var(--birb-border-size) var(--birb-highlight);
}
.birb-menu-item-arrow {
display: inline-block;
}
.birb-window-separator {
width: 100%;
height: var(--birb-border-size);
background-color: var(--birb-border-color);
box-sizing: border-box;
margin-top: var(--birb-double-border-size);
margin-bottom: var(--birb-double-border-size);
opacity: 0.4;
}
#birb-field-guide {
width: 322px !important;
}
.birb-grid-content {
display: grid;
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
gap: 10px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.birb-grid-item {
width: 64px;
height: 64px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.birb-grid-item:hover {
border-color: var(--birb-highlight);
}
.birb-grid-item canvas {
image-rendering: pixelated;
transform: scale(2) !important;
padding-bottom: var(--birb-border-size);
}
.birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--birb-border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--birb-border-size) white;
background: rgba(255, 221, 177, 0.5);
}
.birb-grid-item-locked {
cursor: auto;
filter: grayscale(100%) sepia(30%);
}
.birb-grid-item-locked canvas {
filter: contrast(90%);
}
.birb-grid-item-selected {
border: var(--birb-border-size) solid var(--birb-highlight);
background: var(--birb-mix-color);
}
.birb-field-guide-description {
max-width: calc(100% - 20px);
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 10px;
font-size: 14px;
box-sizing: border-box;
color: rgb(124, 108, 75);
}
#birb-feather {
cursor: pointer;
}
.birb-message-content {
box-sizing: border-box;
margin: 2px;
width: 100%;
padding: 10px;
font-size: 14px;
color: rgb(124, 108, 75);
}
.birb-sticky-note {
position: absolute;
box-sizing: border-box;
}
.birb-sticky-note > .birb-window-content {
padding: 0;
}
.birb-sticky-note-input {
width: 100%;
height: 100%;
padding: 10px !important;
resize: both !important;
min-width: 175px !important;
min-height: 135px !important;
box-sizing: border-box !important;
font-family: "Monocraft", monospace !important;
font-size: 14px !important;
color: black !important;
background-color: transparent !important;
border: none !important;
}
.birb-sticky-note-input:focus {
outline: none;
}`;
const SPRITE_SHEET = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAAgCAYAAABjE6FEAAAAAXNSR0IArs4c6QAABD5JREFUeJztnTFrFEEYht9JLAJidwju2YpdBAvzAyIWaXJXpRS0MBCwEBTJDwghhaAgGLTSyupMY2UqG9PYWQRb7yJyYJEIacxnkZ11bm5n9+7Y3Zm9ex8Imezd7Te7O9+zM7N7G4AQQgghhBBCCJkJlO8KkPAREXG9ppRiGyK1hY23BvgUkI7dbjYBAJ1ud6BcRR0IITOKxLSiSFpRNFTOkmNR8VtRJF8WF0U2NobKZccnpEzmfFeA5NNuNvG00UCn3R4qV8nB58942mgkZULqDgVYI3wJqNPtYrvfH1i23e8nQ2BCCCkFcwj8ZXEx+alqCJxWhypjE0ICQFKoOrZPAZl1oPwImTFE5Hzy3/hddXzfAvIhf0LK5ILvCtSNgxs3vMRVSikREZ+3nvB2F0JmFN3z0b0/9oKqx9cUBJleeEYfAzPp2BuqFr3v9W4XkcqPgS1dtoEZIe0CAM/AxAOy220JAG/zn3HsoNs/83R0cu8DNM+85g9yvqJVJBQwAYDdbksXvcx/KqWSOoTW+7Pzwkee1pHMiyDmzjQaH/QyETHfU0qDsIc+xnKIiITWEEl5PGh+8HqsfQp4FMxUWNvpJcvoPzdOAZriOVy7DzwCdm6/SV7f7bYH5mPKkFEIAiZE41vAGYhSKpHetHNlXsnRXynkWDhXIiIydzEaWHbveQ8f1+ew8uoMAHDy+wgA8P5JNHCWKUJGQwLGoIBvrbTxoPlBv7ewuITUDHGJ7/uPY3x9cd3LBaOyuDKvZOXVGT6uz6EICWYKELGA7r9O70JrASKWIAwZpQYb4yD4FjAJm7Wdnrx/Es36cc6VX6jD9VBwDoH1jbeu1035wZpzSGOSYfLZn96QgLX87Nj2cNy1TaPGJuFwurcsC6v7SpcBYGHVr/x8C3htp+d1Ys8VP+4I1SbPMisaCwune8vY+PUJAPDy8m0AwN3DdyMF+P7jGAAm6orr+Gk9UFvAGt0TTVkXQAnWlv/i26/8+KULuPp6mLgEZOZbySJy9j7rJMGRBWizsLqPmw8Pce3qpdTPWgdiIgH5FjAhmlDEpzndWxYzB+x8q0BA4sr/mRAgDAmmYYsPE/S+fAuYkJDpby3JxoUOMDjyqap9OwWIGkkwV4CI5/VsCZ18OwEANDYPXJ/9H2RC6fgWMCGh099aShr4nZ9vgfO2712C5oXJkPMut2JpEtLyS6OxeVDYhvsWMCEkF9GdEFuEWoIh599Ij8OKNwL9raXM9xUpP2RciTYFbNep6DoQQjJRX19cP084hwhDJleAWkJ5EixTPDo2UoRXVR0IIU4UzofeAyKcKsynYXSePU6eiqHLZT6gwPqid2r8sutACMnHfmJO6Pk41n+FU0qh8+xx8rdZRom9Lr3erPjs+RESBvGXEYAa5ONYj8Q3h6J2uQry4oe+swmZduqWg2Pfl+dcUQUb7js+IWS6+Ac8zd6eLzTjoQAAAABJRU5ErkJggg==";
const FEATHER_SPRITE_SHEET = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARhJREFUWIXtlbENwjAQRf8hSiZIRQ+9WQNRUFIAKzACBSsAA1Ag1mAABqCCBomG3hQQ9OMEx4ZDNH5SikSJ3/fZ5wCJRCKRSPwZ0RzMWmtLAhGvQyUAi9mXP/aFaGjJRQQiguHihMvcFMJUVUYlAMuHixPGy4en1WmVQqgHYHkuZjiEj6a2/LjtYzTY0eiZbgC37Mxh1UN3sn/dr6cCz/LHB/DJj9s+2oMdbtdz6TtfFwQHcMvOInfmQNjsgchNWLXmdfK6gyioAu/6uKrsm1kWLAciKuCuey5nYuXAh234bdmZ6INIUw4E/Ix49xtjCmXfzLL8nY/ktdgnAKwxxgIoXIyqmAOwvIqfiN0ALNd21HYBO9XXGMAdnZTYyHWzWjQAAAAASUVORK5CYII=";
// Element IDs
const FIELD_GUIDE_ID = "birb-field-guide";
const FEATHER_ID = "birb-feather";
const DEFAULT_BIRD = "bluebird";
// Birb movement
const HOP_SPEED = 0.07;
const FLY_SPEED = isMobile() ? 0.175 : 0.25;
const HOP_DISTANCE = 35;
// Timing constants (in milliseconds)
const UPDATE_INTERVAL = 1000 / 60; // 60 FPS
const AFK_TIME = isDebug() ? 0 : 1000 * 5;
const PET_BOOST_DURATION = 1000 * 60 * 5;
const PET_MENU_COOLDOWN = 1000;
const URL_CHECK_INTERVAL = 500;
const HOP_DELAY = 500;
// Random event chances per tick
const HOP_CHANCE = 1 / (60 * 2.5); // Every 2.5 seconds
const FOCUS_SWITCH_CHANCE = 1 / (60 * 20); // Every 20 seconds
const FEATHER_CHANCE = 1 / (60 * 60 * 60 * 2); // Every 2 hours
// Feathers
const FEATHER_FALL_SPEED = 1;
const PET_FEATHER_BOOST = 2;
// Focus element constraints
const MIN_FOCUS_ELEMENT_WIDTH = 100;
const MIN_FOCUS_ELEMENT_TOP = 80;
/** @type {Partial<Settings>} */
let userSettings = {};
/**
* Load the sprite sheet and return the pixel-map template
* @param {string} dataUri
* @param {boolean} [templateColors]
* @returns {Promise<string[][]>}
*/
function loadSpriteSheetPixels(dataUri, templateColors = true) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = dataUri;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Failed to get canvas context'));
return;
}
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, img.width, img.height);
const pixels = imageData.data;
const hexArray = [];
for (let y = 0; y < img.height; y++) {
const row = [];
for (let x = 0; x < img.width; x++) {
const index = (y * img.width + x) * 4;
const r = pixels[index];
const g = pixels[index + 1];
const b = pixels[index + 2];
const a = pixels[index + 3];
if (a === 0) {
row.push(Sprite.TRANSPARENT);
continue;
}
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
if (!templateColors) {
row.push(hex);
continue;
}
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT);
}
row.push(SPRITE_SHEET_COLOR_MAP[hex]);
}
hexArray.push(row);
}
resolve(hexArray);
};
img.onerror = (err) => {
reject(err);
};
});
}
log("Loading sprite sheets...");
Promise.all([
loadSpriteSheetPixels(SPRITE_SHEET),
loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)
]).then(([birbPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels;
const FEATHER_SPRITE_SHEET = featherPixels;
const featherLayers = {
feather: new Layer(getLayer(FEATHER_SPRITE_SHEET, 0, FEATHER_SPRITE_WIDTH)),
};
const featherFrames = {
feather: new Frame([featherLayers.feather]),
};
const FEATHER_ANIMATIONS = {
feather: new Anim([
featherFrames.feather,
], [
1000,
]),
};
const menuItems = [
new MenuItem(`Pet ${birdBirb()}`, pet),
new MenuItem("Field Guide", insertFieldGuide),
new MenuItem("Sticky Note", () => createNewStickyNote(stickyNotes, save, deleteStickyNote)),
new MenuItem(`Hide ${birdBirb()}`, () => birb.setVisible(false)),
new DebugMenuItem("Freeze/Unfreeze", () => {
frozen = !frozen;
}),
new DebugMenuItem("Reset Data", resetSaveData),
new DebugMenuItem("Unlock All", () => {
for (let type in SPECIES) {
unlockBird(type);
}
}),
new DebugMenuItem("Add Feather", () => {
activateFeather();
}),
new DebugMenuItem("Disable Debug", () => {
setDebug(false);
}),
new Separator(),
new MenuItem("Settings", () => switchMenuItems(settingsItems, updateMenuLocation), false),
];
const settingsItems = [
new MenuItem("Go Back", () => switchMenuItems(menuItems, updateMenuLocation), false),
new Separator(),
new MenuItem("Toggle Birb Mode", () => {
userSettings.birbMode = !userSettings.birbMode;
save();
const message = makeElement("birb-message-content");
message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
if (userSettings.birbMode) {
message.appendChild(document.createElement("br"));
message.appendChild(document.createElement("br"));
message.appendChild(document.createTextNode("Welcome back to 2012"));
}
insertModal(`${birdBirb()} Mode`, message);
}),
new Separator(),
new MenuItem("2025.11.2.73", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.2.73"); }, false),
];
const styleElement = document.createElement("style");
/** @type {Birb} */
let birb;
const States = {
IDLE: "idle",
HOP: "hop",
FLYING: "flying",
};
let frozen = false;
let stateStart = Date.now();
let currentState = States.IDLE;
let ticks = 0;
// Bird's current position
let birdY = 0;
let birdX = 40;
// Bird's starting position (when flying)
let startX = 0;
let startY = 0;
// Bird's target position (when flying)
let targetX = 0;
let targetY = 0;
/** @type {HTMLElement|null} */
let focusedElement = null;
let focusedBounds = { left: 0, right: 0, top: 0 };
let lastActionTimestamp = Date.now();
/** @type {number[]} */
let petStack = [];
let currentSpecies = DEFAULT_BIRD;
let unlockedSpecies = [DEFAULT_BIRD];
// let visible = true;
let lastPetTimestamp = 0;
/** @type {StickyNote[]} */
let stickyNotes = [];
async function load() {
/** @type {BirbSaveData|Object} */
let saveData = await getContext().getSaveData();
debug("Loaded data: " + JSON.stringify(saveData));
if (!('settings' in saveData)) {
log("No user settings found in save data, starting fresh");
}
userSettings = saveData.settings ?? {};
unlockedSpecies = saveData.unlockedSpecies ?? [DEFAULT_BIRD];
currentSpecies = saveData.currentSpecies ?? DEFAULT_BIRD;
stickyNotes = [];
if (saveData.stickyNotes) {
for (let note of saveData.stickyNotes) {
if (note.id) {
stickyNotes.push(new StickyNote(note.id, note.site, note.content, note.top, note.left));
}
}
}
log(stickyNotes.length + " sticky notes loaded");
switchSpecies(currentSpecies);
}
function save() {
/** @type {BirbSaveData} */
const saveData = {
unlockedSpecies,
currentSpecies,
settings: userSettings
};
if (stickyNotes.length > 0) {
saveData.stickyNotes = stickyNotes.map(note => ({
id: note.id,
site: note.site,
content: note.content,
top: note.top,
left: note.left
}));
}
getContext().putSaveData(saveData);
}
function resetSaveData() {
getContext().resetSaveData();
load();
}
/**
* Get the user settings merged with default settings
* @returns {Settings} The merged settings
*/
function settings() {
return { ...DEFAULT_SETTINGS, ...userSettings };
}
/**
* Bird or birb, you decide
*/
function birdBirb() {
return settings().birbMode ? "Birb" : "Bird";
}
function init() {
log("Sprite sheets loaded successfully, initializing bird...");
if (window !== window.top) {
// Skip installation if within an iframe
log("In iframe, skipping Birb script initialization");
return;
}
// Preload font
const MONOCRAFT_SRC = "https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf";
const fontLink = document.createElement("link");
fontLink.rel = "stylesheet";
fontLink.href = `url(${MONOCRAFT_SRC}) format('opentype')`;
document.head.appendChild(fontLink);
// Add stylesheet font-face
const fontFace = `
@font-face {
font-family: 'Monocraft';
src: url(${MONOCRAFT_SRC}) format('opentype');
font-weight: normal;
font-style: normal;
}
`;
try {
const fontStyle = document.createElement("style");
fontStyle.textContent = fontFace;
document.head.appendChild(fontStyle);
} catch (e) {
error("Failed to load font: " + e);
}
load().then(onLoad);
}
function onLoad() {
styleElement.textContent = STYLESHEET;
document.head.appendChild(styleElement);
birb = new Birb(BIRB_CSS_SCALE, CANVAS_PIXEL_SIZE, SPRITE_SHEET, SPRITE_WIDTH, SPRITE_HEIGHT);
birb.setAnimation(Animations.BOB);
window.addEventListener("scroll", () => {
lastActionTimestamp = Date.now();
});
onClick(document, (e) => {
lastActionTimestamp = Date.now();
if (e.target instanceof Node && document.querySelector("#" + MENU_EXIT_ID)?.contains(e.target)) {
removeMenu();
}
});
const birbElement = birb.getElement();
onClick(birbElement, () => {
if (birb.getCurrentAnimation() === Animations.HEART && (Date.now() - lastPetTimestamp < PET_MENU_COOLDOWN)) {
// Currently being pet, don't open menu
return;
}
insertMenu(menuItems, `${birdBirb().toLowerCase()}OS`, updateMenuLocation);
});
birbElement.addEventListener("mouseover", () => {
lastActionTimestamp = Date.now();
if (currentState === States.IDLE) {
petStack.push(Date.now());
if (petStack.length > 10) {
petStack.shift();
}
const pets = petStack.filter((time) => Date.now() - time < 1000).length;
if (pets >= 3) {
pet();
// Clear the stack
petStack = [];
}
}
});
birbElement.addEventListener("touchmove", (e) => {
pet();
});
drawStickyNotes(stickyNotes, save, deleteStickyNote);
let lastUrl = (window.location.href ?? "").split("?")[0];
setInterval(() => {
const currentUrl = (window.location.href ?? "").split("?")[0];
if (currentUrl !== lastUrl) {
log("URL changed, updating sticky notes");
lastUrl = currentUrl;
drawStickyNotes(stickyNotes, save, deleteStickyNote);
}
}, URL_CHECK_INTERVAL);
setInterval(update, UPDATE_INTERVAL);
focusOnElement(true);
}
function update() {
ticks++;
// Hide bird if the browser is fullscreen
if (document.fullscreenElement) {
birb.setVisible(false);
// Won't be restored on fullscreen exit
}
if (currentState === States.IDLE && !frozen && !isMenuOpen()) {
if (Date.now() - stateStart > HOP_DELAY && Math.random() < HOP_CHANCE && birb.getCurrentAnimation() !== Animations.HEART) {
hop();
} else if (Date.now() - lastActionTimestamp > AFK_TIME) {
// Idle for a while, do something
if (focusedElement === null) {
// Fly to an element
focusOnElement();
lastActionTimestamp = Date.now();
} else if (Math.random() < FOCUS_SWITCH_CHANCE) {
// Fly to another element if idle for a longer while
focusOnElement();
lastActionTimestamp = Date.now();
}
}
} else if (currentState === States.HOP) {
if (updateParabolicPath(HOP_SPEED)) {
setState(States.IDLE);
}
}
// Double the chance of a feather if recently pet
const petMod = Date.now() - lastPetTimestamp < PET_BOOST_DURATION ? PET_FEATHER_BOOST : 1;
if (birb.isVisible() && Math.random() < FEATHER_CHANCE * petMod) {
lastPetTimestamp = 0;
activateFeather();
}
updateFeather();
}
function draw() {
requestAnimationFrame(draw);
if (!birb || !birb.isVisible()) {
return;
}
updateFocusedElementBounds();
// Update the bird's position
if (currentState === States.IDLE) {
if (focusedElement && !isWithinHorizontalBounds()) {
flySomewhere();
}
birdY = getFocusedY();
} else if (currentState === States.FLYING) {
// Fly to target location (even if in the air)
if (updateParabolicPath(FLY_SPEED, 2)) {
setState(States.IDLE);
}
}
const oldTargetY = targetY;
targetY = getFocusedY();
// Adjust startY to account for scrolling
startY += targetY - oldTargetY;
if (targetY < 0 || targetY > getWindowHeight()) {
// Fly to another element or the ground if the focused element moves out of bounds
flySomewhere();
}
if (birb.draw(SPECIES[currentSpecies])) {
birb.setAnimation(Animations.STILL);
}
// Clamp startY, birdY, targetY to a bit above the top of the window
const maxY = getWindowHeight() * 1.5;
startY = Math.min(startY, maxY);
birdY = Math.min(birdY, maxY);
targetY = Math.min(targetY, maxY);
// Update HTML element position
birb.setX(birdX);
birb.setY(birdY);
}
/**
* @param {StickyNote} stickyNote
*/
function deleteStickyNote(stickyNote) {
stickyNotes = stickyNotes.filter(note => note.id !== stickyNote.id);
save();
}
/**
* Create a window element with header and content
* @param {string} id
* @param {string} title
* @param {HTMLElement} contentElement
* @param {() => void} [onClose]
* @returns {HTMLElement}
*/
function createWindow(id, title, contentElement, onClose) {
const window = makeElement("birb-window", undefined, id);
const header = makeElement("birb-window-header");
const titleElement = makeElement("birb-window-title");
titleElement.textContent = title;
const closeButton = makeElement("birb-window-close");
closeButton.textContent = "x";
header.appendChild(titleElement);
header.appendChild(closeButton);
const contentWrapper = makeElement("birb-window-content");
contentWrapper.appendChild(contentElement);
window.appendChild(header);
window.appendChild(contentWrapper);
document.body.appendChild(window);
makeDraggable(header);
makeClosable(() => {
window.remove();
}, closeButton);
return window;
}
function activateFeather() {
if (document.querySelector("#" + FEATHER_ID)) {
return;
}
const speciesToUnlock = Object.keys(SPECIES).filter((species) => !unlockedSpecies.includes(species));
if (speciesToUnlock.length === 0) {
// No more species to unlock
return;
}
const birdType = speciesToUnlock[Math.floor(Math.random() * speciesToUnlock.length)];
insertFeather(birdType);
}
/**
* @param {string} birdType
*/
function insertFeather(birdType) {
let type = SPECIES[birdType];
const featherCanvas = document.createElement("canvas");
featherCanvas.id = FEATHER_ID;
featherCanvas.classList.add("birb-decoration");
featherCanvas.width = FEATHER_SPRITE_WIDTH * CANVAS_PIXEL_SIZE;
featherCanvas.height = FEATHER_SPRITE_WIDTH * CANVAS_PIXEL_SIZE;
const x = featherCanvas.width * 2 + Math.random() * (window.innerWidth - featherCanvas.width * 4);
featherCanvas.style.marginLeft = `${x}px`;
featherCanvas.style.top = `${-featherCanvas.height}px`;
const featherCtx = featherCanvas.getContext("2d");
if (!featherCtx) {
return;
}
FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
document.body.appendChild(featherCanvas);
onClick(featherCanvas, () => {
unlockBird(birdType);
removeFeather();
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
removeFieldGuide();
insertFieldGuide();
}
});
}
function removeFeather() {
const feather = document.querySelector("#" + FEATHER_ID);
if (feather) {
feather.remove();
}
}
/**
* @param {string} birdType
*/
function unlockBird(birdType) {
if (!unlockedSpecies.includes(birdType)) {
unlockedSpecies.push(birdType);
const message = makeElement("birb-message-content");
message.appendChild(document.createTextNode("You've found a "));
const bold = document.createElement("b");
bold.textContent = SPECIES[birdType].name;
message.appendChild(bold);
message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
insertModal("New Bird Unlocked!", message);
}
save();
}
function updateFeather() {
const feather = document.querySelector("#birb-feather");
if (!feather || !(feather instanceof HTMLElement)) {
return;
}
const y = parseInt(feather.style.top || "0") + FEATHER_FALL_SPEED;
feather.style.top = `${Math.min(y, getWindowHeight() - feather.offsetHeight)}px`;
if (y < getWindowHeight() - feather.offsetHeight) {
feather.style.left = `${Math.sin(3.14 * 2 * (ticks / 120)) * 25}px`;
}
}
/**
* @param {HTMLElement} element
*/
function centerElement(element) {
element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
element.style.top = `${getWindowHeight() / 2 - element.offsetHeight / 2}px`;
}
/**
* @param {string} title
* @param {HTMLElement} content
*/
function insertModal(title, content) {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
const modal = createWindow("birb-modal", title, content);
modal.style.width = "270px";
centerElement(modal);
}
/**
* @param {HTMLElement} menu
*/
function updateMenuLocation(menu) {
let x = birdX;
let y = birb.getElementTop() + birb.getElementHeight() / 2 + WINDOW_PIXEL_SIZE * 10;
const offset = 20;
if (x < window.innerWidth / 2) {
// Left side
x += offset;
} else {
// Right side
x -= (menu.offsetWidth + offset) * UI_CSS_SCALE;
}
if (y > getWindowHeight() / 2) {
// Top side
y -= (menu.offsetHeight + offset + 10) * UI_CSS_SCALE;
} else {
// Bottom side
y += offset;
}
menu.style.left = `${x}px`;
menu.style.top = `${y}px`;
}
function insertFieldGuide() {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
const contentContainer = document.createElement("div");
const content = makeElement("birb-grid-content");
const description = makeElement("birb-field-guide-description");
contentContainer.appendChild(content);
contentContainer.appendChild(description);
const fieldGuide = createWindow(
FIELD_GUIDE_ID,
"Field Guide",
contentContainer
);
const generateDescription = (/** @type {string} */ speciesId) => {
const type = SPECIES[speciesId];
const unlocked = unlockedSpecies.includes(speciesId);
const boldName = document.createElement("b");
boldName.textContent = type.name;
const spacer = document.createElement("div");
spacer.style.height = "0.3em";
const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
const fragment = document.createDocumentFragment();
fragment.appendChild(boldName);
fragment.appendChild(spacer);
fragment.appendChild(descText);
return fragment;
};
description.appendChild(generateDescription(currentSpecies));
for (const [id, type] of Object.entries(SPECIES)) {
const unlocked = unlockedSpecies.includes(id);
const speciesElement = makeElement("birb-grid-item");
if (id === currentSpecies) {
speciesElement.classList.add("birb-grid-item-selected");
}
const speciesCanvas = document.createElement("canvas");
speciesCanvas.width = SPRITE_WIDTH * CANVAS_PIXEL_SIZE;
speciesCanvas.height = SPRITE_HEIGHT * CANVAS_PIXEL_SIZE;
const speciesCtx = speciesCanvas.getContext("2d");
if (!speciesCtx) {
return;
}
birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
speciesElement.appendChild(speciesCanvas);
content.appendChild(speciesElement);
if (unlocked) {
onClick(speciesElement, () => {
switchSpecies(id);
document.querySelectorAll(".birb-grid-item").forEach((element) => {
element.classList.remove("birb-grid-item-selected");
});
speciesElement.classList.add("birb-grid-item-selected");
});
} else {
speciesElement.classList.add("birb-grid-item-locked");
}
speciesElement.addEventListener("mouseover", () => {
description.textContent = "";
description.appendChild(generateDescription(id));
});
speciesElement.addEventListener("mouseout", () => {
description.textContent = "";
description.appendChild(generateDescription(currentSpecies));
});
}
centerElement(fieldGuide);
}
function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) {
fieldGuide.remove();
}
}
/**
* @param {string} type
*/
function switchSpecies(type) {
currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]);
save();
}
/**
* Update the birds location from the start to the target location on a parabolic path
* @param {number} speed The speed of the bird along the path
* @param {number} [intensity] The intensity of the parabolic path
* @returns {boolean} Whether the bird has reached the target location
*/
function updateParabolicPath(speed, intensity = 2.5) {
const dx = targetX - startX;
const dy = targetY - startY;
const distance = Math.sqrt(dx * dx + dy * dy);
const time = Date.now() - stateStart;
if (distance > Math.max(window.innerWidth, getWindowHeight()) / 2) {
speed *= 1.3;
}
const amount = Math.min(1, time / (distance / speed));
const { x, y } = parabolicLerp(startX, startY, targetX, targetY, amount, intensity);
birdX = x;
birdY = y;
const complete = Math.abs(birdX - targetX) < 1 && Math.abs(birdY - targetY) < 1;
if (complete) {
birdX = targetX;
birdY = targetY;
} else {
birb.setDirection(targetX > birdX ? Directions.RIGHT : Directions.LEFT);
}
return complete;
}
function getFocusedElementRandomX() {
return Math.random() * (focusedBounds.right - focusedBounds.left) + focusedBounds.left;
}
function isWithinHorizontalBounds() {
return birdX >= focusedBounds.left && birdX <= focusedBounds.right;
}
function getFocusedY() {
return getWindowHeight() - focusedBounds.top;
}
/**
* Fly to either an element or the ground
*/
function flySomewhere() {
// On mobile, always prefer to focus on an element
// If not mobile, 50% chance to focus on ground
// if ((!isMobile() && coinFlip()) || !focusOnElement()) {
// focusOnGround();
// }
if (!focusOnElement()) {
focusOnGround();
}
}
function focusOnGround() {
focusedElement = null;
updateFocusedElementBounds();
flyTo(Math.random() * window.innerWidth, 0);
}
/**
* Focus on an element within the viewport
* @param {boolean} [teleport] Whether to teleport to the element instead of flying
* @returns Whether an element to focus on was found
*/
function focusOnElement(teleport = false) {
if (frozen) {
return false;
}
const elements = document.querySelectorAll("img, video, .birb-sticky-note");
const inWindow = Array.from(elements).filter((img) => {
const rect = img.getBoundingClientRect();
return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight();
});
const visible = Array.from(inWindow).filter((img) => {
const style = window.getComputedStyle(img);
if (style.display === "none" || style.visibility === "hidden" || (style.opacity && parseFloat(style.opacity) < 0.25)) {
return false;
}
return true;
});
/** @type {HTMLElement[]} */
// @ts-expect-error
const largeElements = Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH);
// Ensure the bird doesn't land on fixed or sticky elements
const nonFixedElements = largeElements.filter((el) => {
const style = window.getComputedStyle(el);
return style.position !== "fixed" && style.position !== "sticky";
});
if (nonFixedElements.length === 0) {
return false;
}
const randomElement = nonFixedElements[Math.floor(Math.random() * nonFixedElements.length)];
focusedElement = randomElement;
log("Focusing on element: ", focusedElement);
updateFocusedElementBounds();
if (teleport) {
teleportTo(getFocusedElementRandomX(), getFocusedY());
} else {
flyTo(getFocusedElementRandomX(), getFocusedY());
}
return randomElement !== null;
}
/**
* @param {number} x
* @param {number} y
*/
function teleportTo(x, y) {
birdX = x;
birdY = y;
setState(States.IDLE);
}
function updateFocusedElementBounds() {
if (focusedElement === null) {
// Update ground location to bottom of window
focusedBounds = { left: 0, right: window.innerWidth, top: getWindowHeight() };
return;
}
let { left, right, top } = focusedElement.getBoundingClientRect();
if (focusedElement.classList.contains("birb-sticky-note")) {
top -= 4.5 * UI_CSS_SCALE;
if (focusedBounds.left !== left) {
// Sticky note has moved
const oldWidth = focusedBounds.right - focusedBounds.left;
const newWidth = right - left;
if (oldWidth === newWidth) {
// Move bird along with note
if (currentState === States.IDLE) {
birdX += left - focusedBounds.left;
} else if (currentState === States.HOP) {
startX += left - focusedBounds.left;
startY += top - focusedBounds.top;
targetX += left - focusedBounds.left;
targetY += top - focusedBounds.top;
}
}
}
}
focusedBounds = { left, right, top };
}
function hop() {
if (frozen) {
return;
}
if (currentState === States.IDLE) {
setState(States.HOP);
birb.setAnimation(Animations.FLYING);
if ((Math.random() < 0.5 && birdX - HOP_DISTANCE > focusedBounds.left) || birdX + HOP_DISTANCE > focusedBounds.right) {
targetX = birdX - HOP_DISTANCE;
} else {
targetX = birdX + HOP_DISTANCE;
}
targetY = getFocusedY();
}
}
function pet() {
if (currentState === States.IDLE && birb.getCurrentAnimation() !== Animations.HEART) {
birb.setAnimation(Animations.HEART);
lastPetTimestamp = Date.now();
}
}
/**
* @param {number} x
* @param {number} y
*/
function flyTo(x, y) {
targetX = x;
targetY = y;
setState(States.FLYING);
birb.setAnimation(Animations.FLYING);
}
/**
* @returns {boolean} Whether the bird should be absolutely positioned
*/
function isAbsolute() {
return focusedElement !== null && (currentState === States.IDLE || currentState === States.HOP);
}
/**
* Set the current state and reset the state timer
* @param {string} state
*/
function setState(state) {
stateStart = Date.now();
startX = birdX;
startY = birdY;
currentState = state;
if (state === States.IDLE) {
birb.setAnimation(Animations.BOB);
}
birb.setAbsolutePositioned(isAbsolute());
birb.setY(birdY);
}
// Helper functions
/**
* @param {number} startX
* @param {number} startY
* @param {number} endX
* @param {number} endY
* @param {number} amount
* @param {number} [intensity]
* @returns {{x: number, y: number}}
*/
function parabolicLerp(startX, startY, endX, endY, amount, intensity = 1.2) {
const dx = endX - startX;
const dy = endY - startY;
const distance = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
const midX = startX + Math.cos(angle) * distance / 2;
const midY = startY + Math.sin(angle) * distance / 2 + distance / 4 * intensity;
const t = amount;
const x = (1 - t) ** 2 * startX + 2 * (1 - t) * t * midX + t ** 2 * endX;
const y = (1 - t) ** 2 * startY + 2 * (1 - t) * t * midY + t ** 2 * endY;
return { x, y };
}
// Run the birb
init();
draw();
}).catch((e) => {
error("Error while loading sprite sheets: ", e);
});
})();
Reference in New Issue View Git Blame Copy Permalink