Update manifest.json

README.md

@@ -13,10 +13,6 @@ It's a pet bird that hops around your computer, what more could you want?
 
 ### Get it for [Mozilla Firefox](https://addons.mozilla.org/en-US/firefox/addon/pocket-bird/)
 
-### Get it for [Obsidian (beta)](https://github.com/IdreesInc/Pocket-Bird#Obsidian)
-
-### Get it for [TamperMonkey](https://github.com/IdreesInc/Pocket-Bird#Userscript)
-
 #### Join the [Discord](https://discord.gg/6yxE9prcNc) to help me beta test new features and suggest ideas!
 
 ## Features
@@ -41,11 +37,7 @@ It's a pet bird that hops around your computer, what more could you want?
 
 ### Obsidian
 
-1. Install the [Beta Plugin Manager (BRAT)](https://obsidian.md/plugins?id=obsidian42-brat) plugin for Obsidian
+_Coming soon!_
-2. Enable the BRAT plugin and open its settings
-3. In the BRAT settings, click "Add Beta Plugin" and enter the following URL: `https://github.com/IdreesInc/PB-Obsidian-Releases`
-4. Select "Latest version" and click "Add Plugin"
-5. Enjoy a pet bird in your Obsidian notes!
 
 ### Userscript
 
@@ -56,14 +48,6 @@ It's a pet bird that hops around your computer, what more could you want?
 3. Install my Pocket Bird script by going to this link and clicking install: [https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js](https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js)
 4. Now any websites you visit will have a little bird hopping around!
 
-### Your Own Website
-
-Pocket Bird can also be embedded directly into your own website! Just include the following code snippet anywhere in your HTML:
-
-```html
-<script src="https://cdn.jsdelivr.net/gh/IdreesInc/Pocket-Bird@main/dist/web/birb.embed.js"></script>
-```
-
 ## FAQ
 
 ### How do I pet the bird?
@@ -90,16 +74,6 @@ Open the Pocket Bird menu by clicking the bird and select "Settings". From there
 
 If you are running Pocket bird on a browser, the extension needs these permissions in order to insert the bird and sticky notes into your webpages. Pocket Bird does not collect any of your data or browsing history and all data is stored locally on your device!
 
-## Sites With Pocket Bird
-
-Here are some websites where you can find Pocket Bird hopping around:
-
-- [https://grepjason.sh](https://grepjason.sh)
-- [https://binarydigit.dev](https://binarydigit.dev)
-
-*If you've added Pocket Bird to your website, let me know and I'll add it to this list!*
-
-
 ## Getting in Touch
 
 If you'd like to get in touch, check out the [Discord](https://discord.gg/6yxE9prcNc) to suggest features, report bugs, and stay updated on development!

build.js

@@ -12,24 +12,19 @@ const IMAGES_DIR = "./images";
 const FONTS_DIR = "./fonts";
 const DIST_DIR = "./dist";
 
-const WEB_DIR = DIST_DIR + "/web";
+const BROWSER_MANIFEST = "./platform-specific/extension/manifest.json";
+const OBSIDIAN_MANIFEST = "./platform-specific/obsidian/manifest.json";
+const USERSCRIPT_HEADER = "./platform-specific/userscript/header.txt"; 
+const OBSIDIAN_WRAPPER = "./platform-specific/obsidian/wrapper.js";
+
 const USERSCRIPT_DIR = DIST_DIR + "/userscript";
 const EXTENSION_DIR = DIST_DIR + "/extension";
 const OBSIDIAN_DIR = DIST_DIR + "/obsidian";
 
 const STYLESHEET_PATH = SRC_DIR + "/stylesheet.css";
-
+const APPLICATION_ENTRY = SRC_DIR + "/application.js";
-const WEB_ENTRY = SRC_DIR + "/platforms/web/web.js";
+const BUNDLED_OUTPUT = DIST_DIR + "/birb.bundled.js";
-const USERSCRIPT_ENTRY = SRC_DIR + "/platforms/userscript/userscript.js";
+const BIRB_OUTPUT = DIST_DIR + "/birb.js";
-const BROWSER_EXTENSION_ENTRY = SRC_DIR + "/platforms/extension/extension.js";
-const OBSIDIAN_ENTRY = SRC_DIR + "/platforms/obsidian/obsidian.js";
-
-const BROWSER_MANIFEST = SRC_DIR + "/platforms/extension/manifest.json";
-const OBSIDIAN_MANIFEST = SRC_DIR + "/platforms/obsidian/manifest.json";
-const USERSCRIPT_HEADER = SRC_DIR + "/platforms/userscript/header.txt";
-const OBSIDIAN_WRAPPER = SRC_DIR + "/platforms/obsidian/wrapper.js";
-
-const TEMP_BUNDLED_OUTPUT = DIST_DIR + "/birb.bundled.js";
 
 const MONOCRAFT_URL = "https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf";
 
@@ -46,10 +41,6 @@ const spriteSheets = [
 	{
 		key: "__FEATHER_SPRITE_SHEET__",
 		path: SPRITES_DIR + "/feather.png"
-	},
-	{
-		key: "__HATS_SPRITE_SHEET__",
-		path: SPRITES_DIR + "/hats.png"
 	}
 ];
 
@@ -76,138 +67,119 @@ if (buildCache.version && buildCache.version.startsWith(versionDate)) {
 	}
 }
 
-// const version = `${versionDate}.${buildNumber}`;
+const version = `${versionDate}.${buildNumber}`;
-const version = `${versionDate}`; // Disable build number for now
 
 // Update build cache
 buildCache.version = version;
 writeFileSync(BUILD_CACHE_PATH, JSON.stringify(buildCache), 'utf8');
 
-/**
+// =============================================
- * @param {string} entryPoint
+// Build JavaScript function
- * @param {boolean} [embedFont]
+// =============================================
- * @returns {Promise<string>}
- */
-async function generateCode(entryPoint, embedFont = false) {
-	// Bundle with rollup
-	const bundle = await rollup({
-		input: entryPoint,
-	});
 
-	await bundle.write({
+// Bundle with rollup
-		file: TEMP_BUNDLED_OUTPUT,
+const bundle = await rollup({
-		format: 'iife',
+	input: APPLICATION_ENTRY,
-	});
+});
 
-	await bundle.close();
+await bundle.write({
+	file: BUNDLED_OUTPUT,
+	format: 'iife',
+});
 
-	let birbJs = readFileSync(TEMP_BUNDLED_OUTPUT, 'utf8');
+await bundle.close();
 
-	// Delete bundled file
+let birbJs = readFileSync(BUNDLED_OUTPUT, 'utf8');
-	unlinkSync(TEMP_BUNDLED_OUTPUT);
 
-	// Replace version placeholder
+// Delete bundled file
-	birbJs = birbJs.replaceAll(VERSION_KEY, version);
+unlinkSync(BUNDLED_OUTPUT);
 
-	// Compile and insert sprite sheets
+// Replace version placeholder
-	for (const spriteSheet of spriteSheets) {
+birbJs = birbJs.replaceAll(VERSION_KEY, version);
-		const dataUri = readFileSync(spriteSheet.path, 'base64');
-		birbJs = birbJs.replaceAll(spriteSheet.key, `data:image/png;base64,${dataUri}`);
-	}
 
-	// Insert stylesheet
+// Compile and insert sprite sheets
-	const stylesheetContent = readFileSync(STYLESHEET_PATH, 'utf8');
+for (const spriteSheet of spriteSheets) {
-	birbJs = birbJs.replace(STYLESHEET_KEY, stylesheetContent);
+	const dataUri = readFileSync(spriteSheet.path, 'base64');
-
+	birbJs = birbJs.replaceAll(spriteSheet.key, `data:image/png;base64,${dataUri}`);
-	if (embedFont) {
-		// Encode font to data URI
-		const monocraftFontData = readFileSync(FONTS_DIR + '/Monocraft.otf', 'base64');
-		const monocraftDataUri = `data:font/otf;base64,${monocraftFontData}`;
-		birbJs = birbJs.replaceAll(MONOCRAFT_SRC_KEY, monocraftDataUri);
-	} else {
-		birbJs = birbJs.replaceAll(MONOCRAFT_SRC_KEY, MONOCRAFT_URL);
-	}
-	return birbJs;
 }
 
-async function buildWeb() {
+// Insert stylesheet
-	const birbJs = await generateCode(WEB_ENTRY);
+const stylesheetContent = readFileSync(STYLESHEET_PATH, 'utf8');
-	mkdirSync(WEB_DIR, { recursive: true });
+birbJs = birbJs.replace(STYLESHEET_KEY, stylesheetContent).replace(MONOCRAFT_SRC_KEY, MONOCRAFT_URL);
-	writeFileSync(WEB_DIR + '/birb.js', birbJs);
-	writeFileSync(WEB_DIR + '/birb.embed.js', birbJs);
-}
 
-async function buildUserscript() {
-	const birbJs = await generateCode(USERSCRIPT_ENTRY);
 
-	// Get userscript header
+// Write bundled JavaScript function
-	const userScriptHeader = readFileSync(USERSCRIPT_HEADER, 'utf8').replaceAll(VERSION_KEY, version);
+writeFileSync(BIRB_OUTPUT, birbJs);
 
-	mkdirSync(USERSCRIPT_DIR, { recursive: true });
+// =============================================
-	const userScript = userScriptHeader + "\n" + birbJs;
+// Build userscript
-	writeFileSync(USERSCRIPT_DIR + '/birb.user.js', userScript);
+// =============================================
-}
 
-async function buildExtension() {
+// Get userscript header
-	const birbJs = await generateCode(BROWSER_EXTENSION_ENTRY);
+const userScriptHeader = readFileSync(USERSCRIPT_HEADER, 'utf8').replaceAll(VERSION_KEY, version);
 
-	mkdirSync(EXTENSION_DIR, { recursive: true });
+mkdirSync(USERSCRIPT_DIR, { recursive: true });
+const userScript = userScriptHeader + "\n" + birbJs;
+writeFileSync(USERSCRIPT_DIR + '/birb.user.js', userScript);
 
-	// Copy birb.js
+// =============================================
-	writeFileSync(EXTENSION_DIR + '/birb.js', birbJs);
+// Build browser extension
+// =============================================
 
-	// Copy manifest.json
+mkdirSync(EXTENSION_DIR, { recursive: true });
-	let browserManifest = readFileSync(BROWSER_MANIFEST, 'utf8');
-	browserManifest = browserManifest.replace(VERSION_KEY, version);
-	writeFileSync(EXTENSION_DIR + '/manifest.json', browserManifest);
 
-	// Copy icons folder
+// Copy birb.js
-	mkdirSync(EXTENSION_DIR + '/images/icons', { recursive: true });
+writeFileSync(EXTENSION_DIR + '/birb.js', birbJs);
-	cpSync(IMAGES_DIR + '/icons/transparent', EXTENSION_DIR + '/images/icons/transparent', { recursive: true });
 
-	// Copy fonts folder
+// Copy manifest.json
-	mkdirSync(EXTENSION_DIR + '/fonts', { recursive: true });
+let browserManifest = readFileSync(BROWSER_MANIFEST, 'utf8');
-	cpSync(FONTS_DIR, EXTENSION_DIR + '/fonts', { recursive: true });
+browserManifest = browserManifest.replace(VERSION_KEY, version);
+writeFileSync(EXTENSION_DIR + '/manifest.json', browserManifest);
 
-	// Compress extension folder into zip
+// Copy icons folder
-	const output = createWriteStream(DIST_DIR + "/extension.zip");
+mkdirSync(EXTENSION_DIR + '/images/icons', { recursive: true });
-	const archive = archiver('zip');
+cpSync(IMAGES_DIR + '/icons/transparent', EXTENSION_DIR + '/images/icons/transparent', { recursive: true });
 
-	output.on('close', () => {
+// Copy fonts folder
-		console.log(`Created zip file: ${archive.pointer()} total bytes`);
+mkdirSync(EXTENSION_DIR + '/fonts', { recursive: true });
-	});
+cpSync(FONTS_DIR, EXTENSION_DIR + '/fonts', { recursive: true });
 
-	archive.on('error', (err) => {
+// Compress extension folder into zip
-		throw err;
+const output = createWriteStream(DIST_DIR + "/extension.zip");
-	});
+const archive = archiver('zip');
 
-	archive.pipe(output);
+output.on('close', () => {
-	archive.directory(EXTENSION_DIR + '/', false);
+	console.log(`Created zip file: ${archive.pointer()} total bytes`);
-	archive.finalize();
+});
-}
 
-async function buildObsidian() {
+archive.on('error', (err) => {
-	const birbJs = await generateCode(OBSIDIAN_ENTRY, true);
+	throw err;
+});
 
-	mkdirSync(OBSIDIAN_DIR, { recursive: true });
+archive.pipe(output);
+archive.directory(EXTENSION_DIR + '/', false);
+archive.finalize();
 
-	// Wrap birb.js with plugin boilerplate
+// =============================================
-	let obsidianPlugin = readFileSync(OBSIDIAN_WRAPPER, 'utf8').replace(VERSION_KEY, version).replace(CODE_KEY, birbJs);
+// Build Obsidian plugin
+// =============================================
 
-	// Create main.js with plugin code
+mkdirSync(OBSIDIAN_DIR, { recursive: true });
-	writeFileSync(OBSIDIAN_DIR + '/main.js', obsidianPlugin);
 
-	// Copy manifest.json
+// Wrap birb.js with plugin boilerplate
-	let obsidianManifest = readFileSync(OBSIDIAN_MANIFEST, 'utf8');
+let obsidianPlugin = readFileSync(OBSIDIAN_WRAPPER, 'utf8').replace(VERSION_KEY, version).replace(CODE_KEY, birbJs);
-	obsidianManifest = obsidianManifest.replace(/"version":\s*".*"/, `"version": "${version}"`);
-	writeFileSync(OBSIDIAN_DIR + '/manifest.json', obsidianManifest);
-}
 
-console.log("Starting build...");
+// Encode font to data URI since Obsidian plugins can't have external font files
+const monocraftFontData = readFileSync(FONTS_DIR + '/Monocraft.otf', 'base64');
+const monocraftDataUri = `data:font/otf;base64,${monocraftFontData}`;
+obsidianPlugin = obsidianPlugin.replace(MONOCRAFT_URL, monocraftDataUri);
 
-await buildWeb();
+// Create main.js with plugin code
-await buildUserscript();
+writeFileSync(OBSIDIAN_DIR + '/main.js', obsidianPlugin);
-await buildExtension();
-await buildObsidian();
 
-console.log("Build completed successfully!");
+// Copy manifest.json
+let obsidianManifest = readFileSync(OBSIDIAN_MANIFEST, 'utf8');
+obsidianManifest = obsidianManifest.replace(/"version":\s*".*"/, `"version": "${version}"`);
+writeFileSync(OBSIDIAN_DIR + '/manifest.json', obsidianManifest);
+
+console.log(`Build complete: ${version}`);

dist/extension/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Pocket Bird",
     "description": "It's a pet bird in your browser, what more could you want?",
-    "version": "2026.1.24",
+    "version": "2025.11.14.205",
     "homepage_url": "https://idreesinc.com",
     "icons": {
         "48": "images/icons/transparent/48x48x1.png",

dist/obsidian/manifest.json

@@ -1,9 +1,9 @@
 {
     "id": "pocket-bird",
     "name": "Pocket Bird",
-    "version": "2026.1.24",
+    "version": "2025.11.14",
     "minAppVersion": "0.15.0",
-    "description": "Add a pet bird to fly around your notes and keep you company!",
+    "description": "It's a pet bird in your Obsidian, what more could you want?",
     "author": "Idrees Hassan",
     "authorUrl": "https://idreesinc.com",
     "isDesktopOnly": false

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pocket-bird",
     "name": "Pocket Bird",
-    "version": "__VERSION__",
+    "version": "2025.11.14.205",
     "minAppVersion": "0.15.0",
     "description": "Add a pet bird to fly around your notes and keep you company!",
     "author": "Idrees Hassan",

platform-specific/obsidian/manifest.json

@@ -0,0 +1,10 @@
+{
+    "id": "pocket-bird",
+    "name": "Pocket Bird",
+    "version": "__VERSION__",
+    "minAppVersion": "0.15.0",
+    "description": "It's a pet bird in your Obsidian, what more could you want?",
+    "author": "Idrees Hassan",
+    "authorUrl": "https://idreesinc.com",
+    "isDesktopOnly": false
+}

preview/index.html

@@ -26,6 +26,6 @@
     </div>
     <div id="spacer"></div>
     <!-- <script type="module" src="spritesheet-compiler.js"></script> -->
-    <script src="../dist/web/birb.js"></script>
+    <script src="../dist/birb.js"></script>
 </body>
 </html>

src/Frame.js

@@ -0,0 +1,76 @@
+import { Directions } from './shared.js';
+import { Sprite, BirdType } from './sprites.js';
+import Layer from './layer.js';
+
+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);
+			};
+		};
+	}
+}
+
+export default Frame;

src/Layer.js

@@ -0,0 +1,12 @@
+class Layer {
+	/**
+	 * @param {string[][]} pixels
+	 * @param {string} [tag]
+	 */
+	constructor(pixels, tag = "default") {
+		this.pixels = pixels;
+		this.tag = tag;
+	}
+}
+
+export default Layer;

src/anim.js

@@ -1,5 +1,5 @@
 import Frame from "./frame.js";
-import { BirdType } from "./sprites.js";
+import { BirdType } from "./sprites";
 
 class Anim {
 	/**
@@ -59,11 +59,10 @@ class Anim {
 	 * @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 {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+	 * @param {BirdType} [species] The species to use for the animation
-	 * @param {string[]} tags The tags to use for the animation
 	 * @returns {boolean} Whether the animation is complete
 	 */
-	draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
+	draw(ctx, direction, timeStart, canvasPixelSize, species) {
 		// Reset cache if animation was restarted
 		if (this.lastTimeStart !== timeStart) {
 			this.#clearCache();
@@ -80,7 +79,7 @@ class Anim {
 		const currentFrameIndex = this.getCurrentFrameIndex(time);
 		
 		if (this.#shouldRedraw(currentFrameIndex, direction)) {
-			this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
+			this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
 			this.lastFrameIndex = currentFrameIndex;
 			this.lastDirection = direction;
 		}

src/animation/sprites.js

@@ -1,209 +0,0 @@
-import { TAG } from "./layer.js";
-
-/**
- * Palette color names
- * @type {Record<string, string>}
- */
-export const PALETTE = {
-	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",
-};
-
-/**
- * Mapping of sprite sheet colors to palette colors
- * @type {Record<string, string>} 
- */
-export const SPRITE_SHEET_COLOR_MAP = {
-	"transparent": PALETTE.TRANSPARENT,
-	"#fff000": PALETTE.THEME_HIGHLIGHT,
-	"#ffffff": PALETTE.BORDER,
-	"#000000": PALETTE.OUTLINE,
-	"#010a19": PALETTE.BEAK,
-	"#190301": PALETTE.EYE,
-	"#af8e75": PALETTE.FOOT,
-	"#639bff": PALETTE.FACE,
-	"#99e550": PALETTE.HOOD,
-	"#d95763": PALETTE.NOSE,
-	"#f8b143": PALETTE.BELLY,
-	"#ec8637": PALETTE.UNDERBELLY,
-	"#578ae6": PALETTE.WING,
-	"#326ed9": PALETTE.WING_EDGE,
-	"#c82e2e": PALETTE.HEART,
-	"#501a1a": PALETTE.HEART_BORDER,
-	"#ff6b6b": PALETTE.HEART_SHINE,
-	"#373737": PALETTE.FEATHER_SPINE,
-};
-
-export 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 = {
-			[PALETTE.TRANSPARENT]: "transparent",
-			[PALETTE.OUTLINE]: "#000000",
-			[PALETTE.BORDER]: "#ffffff",
-			[PALETTE.BEAK]: "#000000",
-			[PALETTE.EYE]: "#000000",
-			[PALETTE.HEART]: "#c82e2e",
-			[PALETTE.HEART_BORDER]: "#501a1a",
-			[PALETTE.HEART_SHINE]: "#ff6b6b",
-			[PALETTE.FEATHER_SPINE]: "#373737",
-			[PALETTE.HOOD]: colors.face,
-			[PALETTE.NOSE]: colors.face,
-		};
-		/** @type {Record<string, string>} */
-		this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
-		this.tags = tags;
-	}
-}
-
-/** @type {Record<string, BirdType>} */
-export const SPECIES = {
-	bluebird: new BirdType("Eastern Bluebird",
-		"Native to North American and very social, though can be timid around people.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#639bff",
-		[PALETTE.BELLY]: "#f8b143",
-		[PALETTE.UNDERBELLY]: "#ec8637",
-		[PALETTE.WING]: "#578ae6",
-		[PALETTE.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.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#ffffff",
-		[PALETTE.BELLY]: "#ebe9e8",
-		[PALETTE.UNDERBELLY]: "#ebd9d0",
-		[PALETTE.WING]: "#f3d3c1",
-		[PALETTE.WING_EDGE]: "#2d2d2d",
-		[PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
-	}),
-	tuftedTitmouse: new BirdType("Tufted Titmouse",
-		"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#c7cad7",
-		[PALETTE.BELLY]: "#e4e5eb",
-		[PALETTE.UNDERBELLY]: "#d7cfcb",
-		[PALETTE.WING]: "#b1b5c5",
-		[PALETTE.WING_EDGE]: "#9d9fa9",
-		[PALETTE.THEME_HIGHLIGHT]: "#b9abcf",
-	}, [TAG.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.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#ffaf34",
-		[PALETTE.HOOD]: "#aaa094",
-		[PALETTE.BELLY]: "#ffaf34",
-		[PALETTE.UNDERBELLY]: "#babec2",
-		[PALETTE.WING]: "#aaa094",
-		[PALETTE.WING_EDGE]: "#888580",
-		[PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
-	}),
-	redCardinal: new BirdType("Red Cardinal",
-		"Native to the eastern United States, this strikingly red bird is hard to miss.", {
-		[PALETTE.BEAK]: "#d93619",
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#31353d",
-		[PALETTE.HOOD]: "#e83a1b",
-		[PALETTE.BELLY]: "#e83a1b",
-		[PALETTE.UNDERBELLY]: "#dc3719",
-		[PALETTE.WING]: "#d23215",
-		[PALETTE.WING_EDGE]: "#b1321c",
-	}, [TAG.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.", {
-		[PALETTE.BEAK]: "#ffaf34",
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#fff255",
-		[PALETTE.NOSE]: "#383838",
-		[PALETTE.HOOD]: "#383838",
-		[PALETTE.BELLY]: "#fff255",
-		[PALETTE.UNDERBELLY]: "#f5ea63",
-		[PALETTE.WING]: "#e8e079",
-		[PALETTE.WING_EDGE]: "#191919",
-		[PALETTE.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.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#db7c4d",
-		[PALETTE.BELLY]: "#f7e1c9",
-		[PALETTE.UNDERBELLY]: "#ebc9a3",
-		[PALETTE.WING]: "#2252a9",
-		[PALETTE.WING_EDGE]: "#1c448b",
-		[PALETTE.HOOD]: "#2252a9",
-	}),
-	mistletoebird: new BirdType("Mistletoebird",
-		"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
-		[PALETTE.FOOT]: "#6c6a7c",
-		[PALETTE.FACE]: "#352e6d",
-		[PALETTE.BELLY]: "#fd6833",
-		[PALETTE.UNDERBELLY]: "#e6e1d8",
-		[PALETTE.WING]: "#342b7c",
-		[PALETTE.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.", {
-		[PALETTE.BEAK]: "#f71919",
-		[PALETTE.FOOT]: "#af7575",
-		[PALETTE.FACE]: "#cb092b",
-		[PALETTE.BELLY]: "#ae1724",
-		[PALETTE.UNDERBELLY]: "#831b24",
-		[PALETTE.WING]: "#7e3030",
-		[PALETTE.WING_EDGE]: "#490f0f",
-	}),
-	scarletRobin: new BirdType("Scarlet Robin",
-		"Native to Australia, this striking robin can be found in Eucalyptus forests.", {
-		[PALETTE.FOOT]: "#494949",
-		[PALETTE.FACE]: "#3d3d3d",
-		[PALETTE.BELLY]: "#fc5633",
-		[PALETTE.UNDERBELLY]: "#dcdcdc",
-		[PALETTE.WING]: "#2b2b2b",
-		[PALETTE.WING_EDGE]: "#ebebeb",
-		[PALETTE.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.", {
-		[PALETTE.BEAK]: "#e89f30",
-		[PALETTE.FOOT]: "#9f8075",
-		[PALETTE.FACE]: "#2d2d2d",
-		[PALETTE.BELLY]: "#eb7a3a",
-		[PALETTE.UNDERBELLY]: "#eb7a3a",
-		[PALETTE.WING]: "#444444",
-		[PALETTE.WING_EDGE]: "#232323",
-		[PALETTE.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.", {
-		[PALETTE.FOOT]: "#af8e75",
-		[PALETTE.FACE]: "#edc7a9",
-		[PALETTE.NOSE]: "#f7eee5",
-		[PALETTE.HOOD]: "#c58a5b",
-		[PALETTE.BELLY]: "#e1b796",
-		[PALETTE.UNDERBELLY]: "#c79e7c",
-		[PALETTE.WING]: "#c58a5b",
-		[PALETTE.WING_EDGE]: "#866348",
-	}),
-};

src/application.js

@@ -1,13 +1,10 @@
-import Frame from './animation/frame.js';
+import Frame from './frame.js';
-import Layer, { TAG } from './animation/layer.js';
+import Layer from './layer.js';
-import Anim from './animation/anim.js';
+import Anim from './anim.js';
 import { Birb, Animations } from './birb.js';
-import { Birdsong } from './sound.js';
+import { getContext, ObsidianContext } from './context.js';
-import { Context, ObsidianContext } from './context.js';
 
 import {
-	getContext,
-	setContext,
 	Directions,
 	isDebug,
 	setDebug,
@@ -19,14 +16,14 @@ import {
 	log,
 	debug,
 	error,
-	getLayerPixels,
+	getLayer,
 	getWindowHeight
 } from './shared.js';
 import {
-	PALETTE,
+	Sprite,
 	SPRITE_SHEET_COLOR_MAP,
 	SPECIES
-} from './animation/sprites.js';
+} from './sprites.js';
 import {
 	StickyNote,
 	createNewStickyNote,
@@ -43,7 +40,6 @@ import {
 	switchMenuItems,
 	MENU_EXIT_ID
 } from './menu.js';
-import { HAT, HAT_METADATA, createHatItemAnimation } from './hats.js';
 
 
 /**
@@ -54,8 +50,6 @@ import { HAT, HAT_METADATA, createHatItemAnimation } from './hats.js';
  * @typedef {Object} BirbSaveData
  * @property {string[]} unlockedSpecies
  * @property {string} currentSpecies
- * @property {string[]} unlockedHats
- * @property {string} currentHat
  * @property {Partial<Settings>} settings
  * @property {SavedStickyNote[]} [stickyNotes]
  */
@@ -64,8 +58,7 @@ import { HAT, HAT_METADATA, createHatItemAnimation } from './hats.js';
  * @typedef {typeof DEFAULT_SETTINGS} Settings
  */
 const DEFAULT_SETTINGS = {
-	birbMode: false,
+	birbMode: false
-	soundEnabled: true
 };
 
 // Rendering constants
@@ -81,16 +74,12 @@ const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * BIRB_CSS_SCALE;
 const STYLESHEET = `___STYLESHEET___`;
 const SPRITE_SHEET = "__SPRITE_SHEET__";
 const FEATHER_SPRITE_SHEET = "__FEATHER_SPRITE_SHEET__";
-const HATS_SPRITE_SHEET = "__HATS_SPRITE_SHEET__";
 
 // Element IDs
 const FIELD_GUIDE_ID = "birb-field-guide";
 const FEATHER_ID = "birb-feather";
-const WARDROBE_ID = "birb-wardrobe";
-const HAT_ID = "birb-hat";
 
 const DEFAULT_BIRD = "bluebird";
-const DEFAULT_HAT = HAT.NONE;
 
 // Birb movement
 const HOP_SPEED = 0.07;
@@ -99,8 +88,8 @@ const HOP_DISTANCE = 35;
 
 // Timing constants (in milliseconds)
 const UPDATE_INTERVAL = 1000 / 60; // 60 FPS
-const AFK_TIME = isDebug() ? 0 : 1000 * 5; // 5 seconds
+const AFK_TIME = isDebug() ? 0 : 1000 * 5;
-const SUPER_AFK_TIME = 1000 * 60 * 60; // 1 hour
+const PET_BOOST_DURATION = 1000 * 60 * 5;
 const PET_MENU_COOLDOWN = 1000;
 const URL_CHECK_INTERVAL = 150;
 const HOP_DELAY = 500;
@@ -109,15 +98,10 @@ const HOP_DELAY = 500;
 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
-const HAT_CHANCE = 1 / (60 * 60 * 10); // Every 10 minutes
 
 // Feathers
 const FEATHER_FALL_SPEED = 1;
-
-// Petting boosts
-const PET_BOOST_DURATION = 1000 * 60 * 5; // 5 minutes
 const PET_FEATHER_BOOST = 2;
-const PET_HAT_BOOST = 1.5;
 
 // Focus element constraints
 const MIN_FOCUS_ELEMENT_WIDTH = 100;
@@ -125,33 +109,74 @@ const MIN_FOCUS_ELEMENT_WIDTH = 100;
 /** @type {Partial<Settings>} */
 let userSettings = {};
 
-
 /**
- * @param {Context} context
+ * Load the sprite sheet and return the pixel-map template
+ * @param {string} dataUri
+ * @param {boolean} [templateColors]
+ * @returns {Promise<string[][]>}
  */
-export async function initializeApplication(context) {
+function loadSpriteSheetPixels(dataUri, templateColors = true) {
-	log("birbOS booting up...");
+	return new Promise((resolve, reject) => {
-	setContext(context);
+		const img = new Image();
-	log("Loading sprite sheets...");
+		img.src = dataUri;
-	const birbPixels = await loadSpriteSheetPixels(SPRITE_SHEET);
+		img.onload = () => {
-	const featherPixels = await loadSpriteSheetPixels(FEATHER_SPRITE_SHEET);
+			const canvas = document.createElement('canvas');
-	const hatsPixels = await loadSpriteSheetPixels(HATS_SPRITE_SHEET);
+			canvas.width = img.width;
-	startApplication(birbPixels, featherPixels, hatsPixels);
+			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...");
- * @param {string[][]} birbPixels
+
- * @param {string[][]} featherPixels
+Promise.all([
- * @param {string[][]} hatsPixels
+	loadSpriteSheetPixels(SPRITE_SHEET),
- */
+	loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)
-function startApplication(birbPixels, featherPixels, hatsPixels) {
+]).then(([birbPixels, featherPixels]) => {
 
 	const SPRITE_SHEET = birbPixels;
 	const FEATHER_SPRITE_SHEET = featherPixels;
-	const HATS_SPRITE_SHEET = hatsPixels;
 
 	const featherLayers = {
-		feather: new Layer(getLayerPixels(FEATHER_SPRITE_SHEET, 0, FEATHER_SPRITE_WIDTH)),
+		feather: new Layer(getLayer(FEATHER_SPRITE_SHEET, 0, FEATHER_SPRITE_WIDTH)),
 	};
 
 	const featherFrames = {
@@ -169,7 +194,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	const menuItems = [
 		new MenuItem(`Pet ${birdBirb()}`, pet),
 		new MenuItem("Field Guide", insertFieldGuide),
-		new MenuItem("Wardrobe", insertWardrobe),
 		new ConditionalMenuItem("Sticky Note", () => createNewStickyNote(stickyNotes, save, deleteStickyNote), () => getContext().areStickyNotesEnabled()),
 		new MenuItem(`Hide ${birdBirb()}`, () => birb.setVisible(false)),
 		new DebugMenuItem("Freeze/Unfreeze", () => {
@@ -180,9 +204,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			for (let type in SPECIES) {
 				unlockBird(type);
 			}
-			for (let hat in HAT) {
-				unlockHat(HAT[hat]);
-			}
 		}),
 		new DebugMenuItem("Add Feather", () => {
 			activateFeather();
@@ -197,16 +218,12 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	const settingsItems = [
 		new MenuItem("Go Back", () => switchMenuItems(menuItems, updateMenuLocation), false),
 		new Separator(),
-		new MenuItem(() => `${settings().soundEnabled ? "Disable" : "Enable"} Sound`, () => {
+		new MenuItem("Toggle Birb Mode", () => {
-			userSettings.soundEnabled = !settings().soundEnabled;
+			userSettings.birbMode = !userSettings.birbMode;
-			save();
-		}),
-		new MenuItem(() => `Toggle ${birdBirb(true)} Mode`, () => {
-			userSettings.birbMode = !settings().birbMode;
 			save();
 			const message = makeElement("birb-message-content");
 			message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
-			if (settings().birbMode) {
+			if (userSettings.birbMode) {
 				message.appendChild(document.createElement("br"));
 				message.appendChild(document.createElement("br"));
 				message.appendChild(document.createTextNode("Welcome back to 2012"));
@@ -214,7 +231,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			insertModal(`${birdBirb()} Mode`, message);
 		}),
 		new Separator(),
-		new MenuItem(() => `Source Code ${isPetBoostActive() ? " ❤" : ""}`, () => { window.open("https://github.com/IdreesInc/Pocket-Bird"); }),
 		new MenuItem("__VERSION__", () => { alert("Thank you for using Pocket Bird! You are on version: __VERSION__") }, false),
 	];
 
@@ -229,8 +245,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		FLYING: "flying",
 	};
 
-	const birdsong = new Birdsong();
-
 	let frozen = false;
 	let stateStart = Date.now();
 	let currentState = States.IDLE;
@@ -252,8 +266,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	let petStack = [];
 	let currentSpecies = DEFAULT_BIRD;
 	let unlockedSpecies = [DEFAULT_BIRD];
-	let unlockedHats = [DEFAULT_HAT];
-	let currentHat = DEFAULT_HAT;
 	// let visible = true;
 	let lastPetTimestamp = 0;
 	/** @type {StickyNote[]} */
@@ -272,8 +284,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		userSettings = saveData.settings ?? {};
 		unlockedSpecies = saveData.unlockedSpecies ?? [DEFAULT_BIRD];
 		currentSpecies = saveData.currentSpecies ?? DEFAULT_BIRD;
-		unlockedHats = saveData.unlockedHats ?? [DEFAULT_HAT];
-		currentHat = saveData.currentHat ?? DEFAULT_HAT;
 		stickyNotes = [];
 
 		if (saveData.stickyNotes) {
@@ -286,16 +296,13 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 
 		log(stickyNotes.length + " sticky notes loaded");
 		switchSpecies(currentSpecies);
-		switchHat(currentHat);
 	}
 
 	function save() {
 		/** @type {BirbSaveData} */
 		const saveData = {
-			unlockedSpecies: unlockedSpecies,
+			unlockedSpecies,
-			currentSpecies: currentSpecies,
+			currentSpecies,
-			unlockedHats: unlockedHats,
-			currentHat: currentHat,
 			settings: userSettings
 		};
 
@@ -328,8 +335,8 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	/**
 	 * Bird or birb, you decide
 	 */
-	function birdBirb(invert = false) {
+	function birdBirb() {
-		return settings().birbMode !== invert ? "Birb" : "Bird";
+		return settings().birbMode ? "Birb" : "Bird";
 	}
 
 	function init() {
@@ -348,7 +355,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		styleElement.textContent = STYLESHEET;
 		document.head.appendChild(styleElement);
 
-		birb = new Birb(BIRB_CSS_SCALE, CANVAS_PIXEL_SIZE, SPRITE_SHEET, SPRITE_WIDTH, SPRITE_HEIGHT, HATS_SPRITE_SHEET);
+		birb = new Birb(BIRB_CSS_SCALE, CANVAS_PIXEL_SIZE, SPRITE_SHEET, SPRITE_WIDTH, SPRITE_HEIGHT);
 		birb.setAnimation(Animations.BOB);
 
 		window.addEventListener("scroll", () => {
@@ -369,7 +376,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 				// Currently being pet, don't open menu
 				return;
 			}
-
 			insertMenu(menuItems, `${birdBirb().toLowerCase()}OS`, updateMenuLocation);
 		});
 
@@ -399,7 +405,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		setInterval(() => {
 			const currentPath = getContext().getPath().split("?")[0];
 			if (currentPath !== lastPath) {
-				log("Path changed from '" + lastPath + "' to '" + currentPath + "'");
+				log("Path changed, updating sticky notes: " + currentPath);
 				lastPath = currentPath;
 				drawStickyNotes(stickyNotes, save, deleteStickyNote);
 			}
@@ -440,17 +446,12 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			}
 		}
 
-		if (birb.isVisible() && Date.now() - lastActionTimestamp < SUPER_AFK_TIME) {
+		// Double the chance of a feather if recently pet
-			if (Math.random() < FEATHER_CHANCE * (isPetBoostActive() ? PET_FEATHER_BOOST : 1)) {
+		const petMod = Date.now() - lastPetTimestamp < PET_BOOST_DURATION ? PET_FEATHER_BOOST : 1;
-				lastPetTimestamp = 0;
+		if (birb.isVisible() && Math.random() < FEATHER_CHANCE * petMod) {
-				activateFeather();
+			lastPetTimestamp = 0;
-			}
+			activateFeather();
-			if (Math.random() < (HAT_CHANCE * (isPetBoostActive() ? PET_HAT_BOOST : 1))) {
-				lastPetTimestamp = 0;
-				insertHat();
-			}
 		}
-
 		updateFeather();
 	}
 
@@ -485,7 +486,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			flySomewhere();
 		}
 
-		if (birb.draw(SPECIES[currentSpecies], currentHat)) {
+		if (birb.draw(SPECIES[currentSpecies])) {
 			birb.setAnimation(Animations.STILL);
 		}
 
@@ -577,7 +578,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		if (!featherCtx) {
 			return;
 		}
-		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
+		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
 		document.body.appendChild(featherCanvas);
 		onClick(featherCanvas, () => {
 			unlockBird(birdType);
@@ -596,62 +597,12 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		}
 	}
 
-	/**
-	 * Insert the hat as an item element in the document if possible
-	 */
-	function insertHat() {
-		if (document.querySelector("#" + HAT_ID)) {
-			return;
-		}
-		// Select a random hat that hasn't been unlocked yet
-		const availableHats = Object.values(HAT)
-			.filter(hat => hat !== HAT.NONE && !unlockedHats.includes(hat));
-		if (availableHats.length === 0) {
-			return;
-		}
-		const hatId = availableHats[Math.floor(Math.random() * availableHats.length)];
-
-		// Find a random valid element to place the hat on
-		const element = getRandomValidElement();
-		if (!element) {
-			return;
-		}
-
-		// Create hat element
-		const hatCanvas = document.createElement("canvas");
-		hatCanvas.id = HAT_ID;
-		hatCanvas.classList.add("birb-item");
-		hatCanvas.width = 14 * CANVAS_PIXEL_SIZE;
-		hatCanvas.height = 14 * CANVAS_PIXEL_SIZE;
-		const hatCtx = hatCanvas.getContext("2d");
-		if (!hatCtx) {
-			return;
-		}
-		onClick(hatCanvas, () => {
-			unlockHat(hatId);
-			hatCanvas.remove();
-		});
-
-		// Create hat animation
-		const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
-		hatAnimation.draw(hatCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, SPECIES[currentSpecies].colors, [TAG.DEFAULT]);
-
-		// Position hat above the element
-		const rect = element.getBoundingClientRect();
-		hatCanvas.style.left = (rect.left + rect.width / 2 - hatCanvas.width / 2) + "px";
-		hatCanvas.style.top = (rect.top - hatCanvas.height + window.scrollY) + "px";
-
-		// Append to document
-		document.body.appendChild(hatCanvas);
-	}
-
 	/**
 	 * @param {string} birdType
 	 */
 	function unlockBird(birdType) {
 		if (!unlockedSpecies.includes(birdType)) {
 			unlockedSpecies.push(birdType);
-			save();
 			const message = makeElement("birb-message-content");
 			message.appendChild(document.createTextNode("You've found a "));
 			const bold = document.createElement("b");
@@ -660,24 +611,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
 			insertModal("New Bird Unlocked!", message);
 		}
-	}
+		save();
-
-	/**
-	 * @param {string} hatId 
-	 */
-	function unlockHat(hatId) {
-		if (!unlockedHats.includes(hatId)) {
-			unlockedHats.push(hatId);
-			save();
-			switchHat(hatId);
-			const message = makeElement("birb-message-content");
-			message.appendChild(document.createTextNode("You've unlocked the "));
-			const bold = document.createElement("b");
-			bold.textContent = HAT_METADATA[hatId].name;
-			message.appendChild(bold);
-			message.appendChild(document.createTextNode("! To see all of your unlocked accessories, click the Wardrobe from the menu."));
-			insertModal("New Hat Found!", message);
-		}
 	}
 
 	function updateFeather() {
@@ -744,8 +678,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		if (document.querySelector("#" + FIELD_GUIDE_ID)) {
 			return;
 		}
-		// Remove wardrobe if open
-		removeWardrobe();
 
 		const contentContainer = document.createElement("div");
 		const content = makeElement("birb-grid-content");
@@ -793,7 +725,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			if (!speciesCtx) {
 				return;
 			}
-			birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
+			birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
 			speciesElement.appendChild(speciesCanvas);
 			content.appendChild(speciesElement);
 			if (unlocked) {
@@ -826,114 +758,13 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		}
 	}
 
-	function insertWardrobe() {
-		console.log("Inserting wardrobe");
-		if (document.querySelector("#" + WARDROBE_ID)) {
-			return;
-		}
-		// Remove field guide if open
-		removeFieldGuide();
-
-		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 wardrobe = createWindow(
-			WARDROBE_ID,
-			"Wardrobe",
-			contentContainer
-		);
-
-		const generateDescription = (/** @type {string} */ hat) => {
-			const metadata = HAT_METADATA[hat] ?? { name: "Unknown Hat", description: "todo" };
-			const unlocked = unlockedHats.includes(hat);
-
-			const boldName = document.createElement("b");
-			boldName.textContent = metadata.name;
-
-			const spacer = document.createElement("div");
-			spacer.style.height = "0.3em";
-
-			const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : metadata.description);
-
-			const fragment = document.createDocumentFragment();
-			fragment.appendChild(boldName);
-			fragment.appendChild(spacer);
-			fragment.appendChild(descText);
-
-			return fragment;
-		};
-
-		description.appendChild(generateDescription(currentHat));
-		for (const hat of Object.values(HAT)) {
-			const unlocked = unlockedHats.includes(hat);
-			const hatElement = makeElement("birb-grid-item");
-			if (hat === currentHat) {
-				hatElement.classList.add("birb-grid-item-selected");
-			}
-			const hatCanvas = document.createElement("canvas");
-			hatCanvas.width = SPRITE_WIDTH * CANVAS_PIXEL_SIZE;
-			hatCanvas.height = SPRITE_HEIGHT * CANVAS_PIXEL_SIZE;
-			const hatCtx = hatCanvas.getContext("2d");
-			if (!hatCtx) {
-				return;
-			}
-			birb.getFrames().base.draw(
-				hatCtx,
-				Directions.RIGHT,
-				CANVAS_PIXEL_SIZE,
-				SPECIES[currentSpecies].colors,
-				[...SPECIES[currentSpecies].tags, hat]
-			);
-			hatElement.appendChild(hatCanvas);
-			content.appendChild(hatElement);
-			if (unlocked) {
-				onClick(hatElement, () => {
-					switchHat(hat);
-					document.querySelectorAll(".birb-grid-item").forEach((element) => {
-						element.classList.remove("birb-grid-item-selected");
-					});
-					hatElement.classList.add("birb-grid-item-selected");
-				});
-			} else {
-				hatElement.classList.add("birb-grid-item-locked");
-			}
-			hatElement.addEventListener("mouseover", () => {
-				description.textContent = "";
-				description.appendChild(generateDescription(hat));
-			});
-			hatElement.addEventListener("mouseout", () => {
-				description.textContent = "";
-				description.appendChild(generateDescription(currentHat));
-			});
-		}
-		centerElement(wardrobe);
-	}
-
-	function removeWardrobe() {
-		const wardrobe = document.querySelector("#" + WARDROBE_ID);
-		if (wardrobe) {
-			wardrobe.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[PALETTE.THEME_HIGHLIGHT]);
+		document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]);
-		save();
-	}
-
-	/**
-	 * @param {string} hat
-	 */
-	function switchHat(hat) {
-		currentHat = hat;
 		save();
 	}
 
@@ -998,9 +829,14 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	}
 
 	/**
-	 * @returns {HTMLElement|null} The random element, or null if no valid element was found
+	 * 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 getRandomValidElement() {
+	function focusOnElement(teleport = false) {
+		if (frozen) {
+			return false;
+		}
 		const MIN_FOCUS_ELEMENT_TOP = getContext().getFocusElementTopMargin();
 		const elements = document.querySelectorAll(getContext().getFocusableElements().join(", "));
 		const inWindow = Array.from(elements).filter((img) => {
@@ -1015,11 +851,10 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			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 fixedAllowed = getContext() instanceof ObsidianContext;
+		const fixedAllowed = getContext() instanceof ObsidianContext;
-		// TODO: FIX
-		const fixedAllowed = true;
 		const nonFixedElements = largeElements.filter((el) => {
 			if (fixedAllowed) {
 				return true;
@@ -1028,22 +863,10 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			return style.position !== "fixed" && style.position !== "sticky";
 		});
 		if (nonFixedElements.length === 0) {
-			return null;
-		}
-		const randomElement = nonFixedElements[Math.floor(Math.random() * nonFixedElements.length)];
-		return randomElement;
-	}
-
-	/**
-	 * 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;
 		}
-		focusedElement = getRandomValidElement();
+		const randomElement = nonFixedElements[Math.floor(Math.random() * nonFixedElements.length)];
+		focusedElement = randomElement;
 		log("Focusing on element: ", focusedElement);
 		updateFocusedElementBounds();
 		if (teleport) {
@@ -1051,7 +874,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		} else {
 			flyTo(getFocusedElementRandomX(), getFocusedY());
 		}
-		return focusedElement !== null;
+		return randomElement !== null;
 	}
 
 	/**
@@ -1115,18 +938,11 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 
 	function pet() {
 		if (currentState === States.IDLE && birb.getCurrentAnimation() !== Animations.HEART) {
-			if (settings().soundEnabled) {
-				birdsong.chirp();
-			}
 			birb.setAnimation(Animations.HEART);
 			lastPetTimestamp = Date.now();
 		}
 	}
 
-	function isPetBoostActive() {
-		return Date.now() - lastPetTimestamp < PET_BOOST_DURATION;
-	}
-
 	/**
 	 * @param {number} x
 	 * @param {number} y
@@ -1192,61 +1008,6 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	// Run the birb
 	init();
 	draw();
-}
+}).catch((e) => {
-
+	error("Error while loading sprite sheets: ", e);
-/**
+});
- * 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(PALETTE.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) {
-						// Return the color as-is if not found in the map
-						row.push(hex);
-						continue;
-					}
-					row.push(SPRITE_SHEET_COLOR_MAP[hex]);
-				}
-				hexArray.push(row);
-			}
-			resolve(hexArray);
-		};
-		img.onerror = (err) => {
-			reject(err);
-		};
-	});
-}

src/birb.js

@@ -1,9 +1,8 @@
-import { Directions, getLayerPixels, getWindowHeight, getFixedWindowHeight } from './shared.js';
+import { Directions, getLayer, getWindowHeight, getFixedWindowHeight } from './shared.js';
-import Layer from './animation/layer.js';
+import Layer from './layer.js';
-import Frame from './animation/frame.js';
+import Frame from './frame.js';
-import Anim from './animation/anim.js';
+import Anim from './anim.js';
-import { BirdType, PALETTE } from './animation/sprites.js';
+import { BirdType } from './sprites.js';
-import { createHatLayers } from './hats.js';
 
 /**
  * @typedef {keyof typeof Animations} AnimationType
@@ -32,9 +31,8 @@ export class Birb {
 	 * @param {string[][]} spriteSheet The loaded sprite sheet pixel data
 	 * @param {number} spriteWidth
 	 * @param {number} spriteHeight
-	 * @param {string[][]} hatSpriteSheet The loaded hat sprite sheet pixel data
 	 */
-	constructor(birbCssScale, canvasPixelSize, spriteSheet, spriteWidth, spriteHeight, hatSpriteSheet) {
+	constructor(birbCssScale, canvasPixelSize, spriteSheet, spriteWidth, spriteHeight) {
 		this.birbCssScale = birbCssScale;
 		this.canvasPixelSize = canvasPixelSize;
 		this.windowPixelSize = canvasPixelSize * birbCssScale;
@@ -43,31 +41,28 @@ export class Birb {
 
 		// Build layers from sprite sheet
 		this.layers = {
-			base: new Layer(getLayerPixels(spriteSheet, 0, this.spriteWidth)),
+			base: new Layer(getLayer(spriteSheet, 0, this.spriteWidth)),
-			down: new Layer(getLayerPixels(spriteSheet, 1, this.spriteWidth)),
+			down: new Layer(getLayer(spriteSheet, 1, this.spriteWidth)),
-			heartOne: new Layer(getLayerPixels(spriteSheet, 2, this.spriteWidth)),
+			heartOne: new Layer(getLayer(spriteSheet, 2, this.spriteWidth)),
-			heartTwo: new Layer(getLayerPixels(spriteSheet, 3, this.spriteWidth)),
+			heartTwo: new Layer(getLayer(spriteSheet, 3, this.spriteWidth)),
-			heartThree: new Layer(getLayerPixels(spriteSheet, 4, this.spriteWidth)),
+			heartThree: new Layer(getLayer(spriteSheet, 4, this.spriteWidth)),
-			tuftBase: new Layer(getLayerPixels(spriteSheet, 5, this.spriteWidth), "tuft"),
+			tuftBase: new Layer(getLayer(spriteSheet, 5, this.spriteWidth), "tuft"),
-			tuftDown: new Layer(getLayerPixels(spriteSheet, 6, this.spriteWidth), "tuft"),
+			tuftDown: new Layer(getLayer(spriteSheet, 6, this.spriteWidth), "tuft"),
-			wingsUp: new Layer(getLayerPixels(spriteSheet, 7, this.spriteWidth)),
+			wingsUp: new Layer(getLayer(spriteSheet, 7, this.spriteWidth)),
-			wingsDown: new Layer(getLayerPixels(spriteSheet, 8, this.spriteWidth)),
+			wingsDown: new Layer(getLayer(spriteSheet, 8, this.spriteWidth)),
-			happyEye: new Layer(getLayerPixels(spriteSheet, 9, this.spriteWidth)),
+			happyEye: new Layer(getLayer(spriteSheet, 9, this.spriteWidth)),
 		};
 
-		// Build hat layers
-		const hatLayers = createHatLayers(hatSpriteSheet);
-
 		// Build frames from layers
 		this.frames = {
-			base: new Frame([this.layers.base, this.layers.tuftBase, ...hatLayers.base]),
+			base: new Frame([this.layers.base, this.layers.tuftBase]),
-			headDown: new Frame([this.layers.down, this.layers.tuftDown, ...hatLayers.down]),
+			headDown: new Frame([this.layers.down, this.layers.tuftDown]),
-			wingsDown: new Frame([this.layers.base, this.layers.tuftBase, this.layers.wingsDown, ...hatLayers.base]),
+			wingsDown: new Frame([this.layers.base, this.layers.tuftBase, this.layers.wingsDown]),
-			wingsUp: new Frame([this.layers.down, this.layers.tuftDown, this.layers.wingsUp, ...hatLayers.down]),
+			wingsUp: new Frame([this.layers.down, this.layers.tuftDown, this.layers.wingsUp]),
-			heartOne: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, ...hatLayers.base, this.layers.heartOne]),
+			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, ...hatLayers.base,this.layers.heartTwo]),
+			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, ...hatLayers.base, this.layers.heartThree]),
+			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, ...hatLayers.base, this.layers.heartTwo]),
+			heartFour: new Frame([this.layers.base, this.layers.tuftBase, this.layers.happyEye, this.layers.heartTwo]),
 		};
 
 		// Build animations from frames
@@ -126,16 +121,14 @@ export class Birb {
 
 	/**
 	 * Draw the current animation frame
-	 * @param {BirdType} species The species data
+	 * @param {BirdType} species The species color data
-	 * @param {string} [hat] The name of the current hat
 	 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 	 */
-	draw(species, hat) {
+	draw(species) {
 		const anim = this.animations[this.currentAnimation];
-		return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
+		return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
 	}
 
-
 	/**
 	 * @returns {AnimationType} The current animation key
 	 */

src/context.js

@@ -1,8 +1,7 @@
 import { debug, log, error } from "./shared.js";
 
-export const SAVE_KEY = "birbSaveData";
+const SAVE_KEY = "birbSaveData";
 const ROOT_PATH = "";
-const SET_CONTEXT = "__CONTEXT__"
 
 /**
  * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -13,6 +12,14 @@ const SET_CONTEXT = "__CONTEXT__"
  */
 export class Context {
 
+	/**
+	 * @abstract
+	 * @returns {boolean} Whether this context is applicable
+	 */
+	isContextActive() {
+		throw new Error("Method not implemented");
+	}
+
 	/**
 	 * @abstract
 	 * @returns {Promise<BirbSaveData|{}>}
@@ -96,6 +103,16 @@ export class Context {
 
 export 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|{}>}
@@ -123,6 +140,15 @@ export class LocalContext extends Context {
 
 export class UserScriptContext extends Context {
 
+	/**
+	 * @override
+	 * @returns {boolean}
+	 */
+	isContextActive() {
+		// @ts-expect-error
+		return typeof GM_getValue === "function";
+	}
+
 	/**
 	 * @override
 	 * @returns {Promise<BirbSaveData|{}>}
@@ -154,7 +180,16 @@ export class UserScriptContext extends Context {
 	}
 }
 
-export class BrowserExtensionContext extends Context {
+class BrowserExtensionContext extends Context {
+
+	/**
+	 * @override
+	 * @returns {boolean}
+	 */
+	isContextActive() {
+		// @ts-expect-error
+		return typeof chrome !== "undefined";
+	}
 
 	/**
 	 * @override
@@ -181,9 +216,9 @@ export class BrowserExtensionContext extends Context {
 			// @ts-expect-error
 			if (chrome.runtime.lastError) {
 				// @ts-expect-error
-				error(chrome.runtime.lastError);
+				console.error(chrome.runtime.lastError);
 			} else {
-				log("Settings saved successfully");
+				console.log("Settings saved successfully");
 			}
 		});
 	}
@@ -197,6 +232,14 @@ export class BrowserExtensionContext extends Context {
 }
 
 export class ObsidianContext extends Context {
+	/**
+	 * @override
+	 * @returns {boolean}
+	 */
+	isContextActive() {
+		// @ts-expect-error
+		return typeof app !== "undefined" && typeof app.vault !== "undefined";
+	}
 
 	/**
 	 * @override
@@ -276,6 +319,23 @@ export class ObsidianContext extends Context {
 	}
 }
 
+const CONTEXTS = [
+	new UserScriptContext(),
+	new ObsidianContext(),
+	new BrowserExtensionContext(),
+	new LocalContext()
+];
+
+export function getContext() {
+	for (const context of CONTEXTS) {
+		if (context.isContextActive()) {
+			return context;
+		}
+	}
+	error("No applicable context found, defaulting to LocalContext");
+	return new LocalContext();
+}
+
 /**
  * Parse URL parameters into a key-value map
  * @param {string} url

src/frame.js

@@ -1,6 +1,6 @@
-import { Directions } from '../shared.js';
+import { Directions } from './shared.js';
-import { PALETTE, BirdType } from './sprites.js';
+import { Sprite, BirdType } from './sprites.js';
-import Layer, { TAG } from './layer.js';
+import Layer from './layer.js';
 
 class Frame {
 
@@ -16,25 +16,25 @@ class Frame {
 		for (let layer of layers) {
 			tags.add(layer.tag);
 		}
-		tags.add(TAG.DEFAULT);
+		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 !== TAG.DEFAULT) {
+			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(PALETTE.TRANSPARENT));
+				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 === TAG.DEFAULT || layers[i].tag === tag) {
+				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] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
+							this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
 						}
 					}
 				}
@@ -44,36 +44,29 @@ class Frame {
 	}
 
 	/**
-	 * @param {string[]} [tags]
+	 * @param {string} [tag]
 	 * @returns {string[][]}
 	 */
-	getPixels(tags = [TAG.DEFAULT]) {
+	getPixels(tag = "default") {
-		for (let i = tags.length - 1; i >= 0; i--) {
+		return this.#pixelsByTag[tag] ?? this.#pixelsByTag["default"];
-			const tag = tags[i];
-			if (this.#pixelsByTag[tag]) {
-				return this.#pixelsByTag[tag];
-			}
-		}
-		return this.#pixelsByTag[TAG.DEFAULT];
 	}
 
 	/**
 	 * @param {CanvasRenderingContext2D} ctx
-	 * @param {number} direction
+	 * @param {BirdType} [species]
+	* @param {number} direction
 	 * @param {number} canvasPixelSize
-	 * @param {{ [key: string]: string }} colorScheme
-	 * @param {string[]} tags
 	 */
-	draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
+	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(tags);
+		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 = colorScheme[cell] ?? cell;
+				ctx.fillStyle = species?.colors[cell] ?? cell;
 				ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 			};
 		};

src/hats.js

@@ -1,240 +0,0 @@
-import Anim from "./animation/anim.js";
-import Frame from "./animation/frame.js";
-import Layer, { TAG } from "./animation/layer.js";
-import { PALETTE } from "./animation/sprites.js";
-import { getLayerPixels } from "./shared.js";
-
-const HAT_WIDTH = 12;
-
-export const HAT = {
-	NONE: "none",
-	TOP_HAT: "top-hat",
-	FEZ: "fez",
-	WIZARD_HAT: "wizard-hat",
-	BASEBALL_CAP: "baseball-cap",
-	FLOWER_HAT: "flower-hat",
-	COWBOY_HAT: "cowboy-hat",
-	BEANIE: "beanie",
-	SUN_HAT: "sun-hat",
-	VIKING_HELMET: "viking-helmet",
-	STRAW_HAT: "straw-hat",
-	CORDOVAN_HAT: "cordovan-hat"
-};
-
-/** @type {{ [hatId: string]: { name: string, description: string } }} */
-export const HAT_METADATA = {
-	[HAT.NONE]: {
-		name: "Invisible Hat",
-		description: "It's like you're wearing nothing at all!"
-	},
-	[HAT.TOP_HAT]: {
-		name: "Top Hat",
-		description: "The mark of a true gentlebird."
-	},
-	[HAT.VIKING_HELMET]: {
-		name: "Viking Helmet",
-		description: "Sure, vikings never actually wore this style of helmet, but why let facts get in the way of good fashion?"
-	},
-	[HAT.COWBOY_HAT]: {
-		name: "Cowboy Hat",
-		description: "You can't jam with the console cowboys without the appropriate attire."
-	},
-	[HAT.FEZ]: {
-		name: "Fez",
-		description: "It's a fez. Fezzes are cool."
-	},
-	[HAT.WIZARD_HAT]: {
-		name: "Wizard Hat",
-		description: "Grants the bearer terrifying mystical power, but luckily birds only use it to summon old ladies with bread crumbs."
-	},
-	[HAT.BASEBALL_CAP]: {
-		name: "Baseball Cap",
-		description: "Birds unfortunately only ever hit 'fowl' balls..."
-	},
-	[HAT.FLOWER_HAT]: {
-		name: "Flower Hat",
-		description: "To be fair, this is less of a hat and more of a dirt clod that your pet happened to pick up."
-	},
-	[HAT.BEANIE]: {
-		name: "Beanie",
-		description: "Keeps feathers warm on those long migrations south!"
-	},
-	[HAT.SUN_HAT]: {
-		name: "Sun Hat",
-		description: "Perfect for frolicking through enchanted flower fields."
-	},
-	[HAT.STRAW_HAT]: {
-		name: "Straw Hat",
-		description: "A classic design, though keep away from water as this particular hat is seemingly unable to float."
-	},
-	[HAT.CORDOVAN_HAT]: {
-		name: "Cordovan Hat",
-		description: "A traditional Spanish hat that stays put even in the wildest of sword fights."
-	}
-};
-
-/**
- * @param {string[][]} spriteSheet 
- * @returns {{ base: Layer[], down: Layer[] }}
- */
-export function createHatLayers(spriteSheet) {
-	const hatLayers = {
-		base: [],
-		down: []
-	};
-	for (let i = 0; i < Object.keys(HAT).length; i++) {
-		const hatName = Object.keys(HAT)[i];
-		if (hatName === 'NONE') {
-			continue;
-		}
-		const index = i - 1;
-		const hatKey = HAT[hatName];
-		const hatLayer = buildHatLayer(spriteSheet, hatKey, index);
-		const downHatLayer = buildHatLayer(spriteSheet, hatKey, index, 1);
-		hatLayers.base.push(hatLayer);
-		hatLayers.down.push(downHatLayer);
-	}
-	return hatLayers;
-}
-
-/**
- * @param {string[][]} spriteSheet
- * @param {string} hatId 
- * @returns {Anim}
- */
-export function createHatItemAnimation(hatId, spriteSheet) {
-	const hatLayer = buildHatItemLayer(spriteSheet, hatId);
-	const frames = [
-		new Frame([hatLayer])
-	];
-	return new Anim(frames, [1000], true);
-}
-
-/**
- * @param {string[][]} spriteSheet 
- * @param {string} hatName
- * @param {number} hatIndex
- * @param {number} [yOffset=0]
- * @returns {Layer}
- */
-function buildHatLayer(spriteSheet, hatName, hatIndex, yOffset = 0) {
-	const LEFT_PADDING = 6;
-	const RIGHT_PADDING = 14;
-	const TOP_PADDING = 5 + yOffset;
-	const BOTTOM_PADDING = Math.max(0, 15 - yOffset);
-
-	let hatPixels = getLayerPixels(spriteSheet, hatIndex, HAT_WIDTH);
-	hatPixels = pad(hatPixels, TOP_PADDING, BOTTOM_PADDING, LEFT_PADDING, RIGHT_PADDING);
-	hatPixels = drawOutline(hatPixels, false);
-
-	return new Layer(hatPixels, hatName);
-}
-
-/**
- * @param {string[][]} spriteSheet 
- * @param {string} hatId 
- * @returns {Layer}
- */
-function buildHatItemLayer(spriteSheet, hatId) {
-	if (hatId === HAT.NONE) {
-		return new Layer([], TAG.DEFAULT);
-	}
-	const hatIndex = Object.values(HAT).indexOf(hatId) - 1;
-	let hatPixels = getLayerPixels(spriteSheet, hatIndex, HAT_WIDTH);
-	hatPixels = pad(hatPixels, 1, 1, 1, 1);
-	hatPixels = drawOutline(hatPixels, true);
-	hatPixels = pushToBottom(hatPixels);
-	return new Layer(hatPixels, TAG.DEFAULT);
-}
-
-/**
- * Add transparent padding around the pixel array
- * @param {string[][]} pixels 
- * @param {number} top 
- * @param {number} bottom 
- * @param {number} left 
- * @param {number} right 
- * @returns {string[][]}
- */
-function pad(pixels, top, bottom, left, right) {
-	const paddedPixels = [];
-	const rowLength = pixels[0].length + left + right;
-	// Top padding
-	for (let y = 0; y < top; y++) {
-		paddedPixels.push(Array(rowLength).fill(PALETTE.TRANSPARENT));
-	}
-	// Left and right padding
-	for (let y = 0; y < pixels.length; y++) {
-		const row = [];
-		for (let x = 0; x < left; x++) {
-			row.push(PALETTE.TRANSPARENT);
-		}
-		for (let x = 0; x < pixels[y].length; x++) {
-			row.push(pixels[y][x]);
-		}
-		for (let x = 0; x < right; x++) {
-			row.push(PALETTE.TRANSPARENT);
-		}
-		paddedPixels.push(row);
-	}
-	// Bottom padding
-	for (let y = 0; y < bottom; y++) {
-		paddedPixels.push(Array(rowLength).fill(PALETTE.TRANSPARENT));
-	}
-	return paddedPixels;
-}
-
-/**
- * Draw an outline around non-transparent pixels
- * @param {string[][]} pixels 
- * @param {boolean} [outlineBottom=false]
- * @return {string[][]}
- */
-function drawOutline(pixels, outlineBottom = false) {
-	let neighborOffsets = [
-		[-1, 0],
-		[1, 0],
-		[0, -1],
-		[-1, -1],
-		[1, -1],
-	];
-	if (outlineBottom) {
-		neighborOffsets.push([0, 1], [-1, 1], [1, 1]);
-	}
-	for (let y = 0; y < pixels.length; y++) {
-		for (let x = 0; x < pixels[y].length; x++) {
-			const pixel = pixels[y][x];
-			if (pixel !== PALETTE.TRANSPARENT && pixel !== PALETTE.BORDER) {
-				for (let [dx, dy] of neighborOffsets) {
-					const newX = x + dx;
-					const newY = y + dy;
-					if (newY >= 0 && newY < pixels.length && newX >= 0 && newX < pixels[newY].length && pixels[newY][newX] === PALETTE.TRANSPARENT) {
-						pixels[newY][newX] = PALETTE.BORDER;
-					}
-				}
-			}
-		}
-	}
-	return pixels;
-}
-
-/**
- * Trim transparent rows from the bottom and push them to the top
- * @param {string[][]} pixels
- * @returns {string[][]}
- */
-function pushToBottom(pixels) {
-	let trimmedPixels = pixels.slice();
-	let trimCount = 0;
-	while (trimmedPixels.length > 1) {
-		const firstRow = trimmedPixels[trimmedPixels.length - 1];
-		if (firstRow.every(pixel => pixel === PALETTE.TRANSPARENT)) {
-			trimmedPixels.pop();
-			trimCount++;
-		} else {
-			break;
-		}
-	}
-	trimmedPixels = pad(trimmedPixels, trimCount, 0, 0, 0);
-	return trimmedPixels;
-}

src/layer.js

@@ -1,14 +1,9 @@
-export const TAG = {
-	DEFAULT: "default",
-	TUFT: "tuft",
-};
-
 class Layer {
 	/**
 	 * @param {string[][]} pixels
 	 * @param {string} [tag]
 	 */
-	constructor(pixels, tag = TAG.DEFAULT) {
+	constructor(pixels, tag = "default") {
 		this.pixels = pixels;
 		this.tag = tag;
 	}

src/menu.js

@@ -12,7 +12,7 @@ export const MENU_EXIT_ID = "birb-menu-exit";
 
 export class MenuItem {
 	/**
-	 * @param {string|(() => string)} text
+	 * @param {string} text
 	 * @param {() => void} action
 	 * @param {boolean} [removeMenu]
 	 */
@@ -61,7 +61,7 @@ function makeMenuItem(item, removeMenuCallback) {
 	if (item instanceof Separator) {
 		return makeElement("birb-window-separator");
 	}
-	let menuItem = makeElement("birb-menu-item", typeof item.text === "function" ? item.text() : item.text);
+	let menuItem = makeElement("birb-menu-item", item.text);
 	onClick(menuItem, () => {
 		if (item.removeMenu) {
 			removeMenuCallback();

src/platforms/extension/extension.js

@@ -1,4 +0,0 @@
-import { initializeApplication } from "../../application.js";
-import { BrowserExtensionContext } from "../../context.js";
-
-initializeApplication(new BrowserExtensionContext());

src/platforms/obsidian/obsidian.js

@@ -1,4 +0,0 @@
-import { initializeApplication } from "../../application.js";
-import { ObsidianContext } from "../../context.js";
-
-initializeApplication(new ObsidianContext());

src/platforms/userscript/userscript.js

@@ -1,4 +0,0 @@
-import { initializeApplication } from "../../application.js";
-import { UserScriptContext } from "../../context.js";
-
-initializeApplication(new UserScriptContext());

src/platforms/web/web.js

@@ -1,4 +0,0 @@
-import { initializeApplication } from "../../application.js";
-import { LocalContext } from "../../context.js";
-
-initializeApplication(new LocalContext());

src/shared.js

@@ -4,7 +4,6 @@ export const Directions = {
 };
 
 let debugMode = location.hostname === "127.0.0.1";
-let context = null;
 
 /**
  * @returns {boolean} Whether debug mode is enabled
@@ -20,17 +19,6 @@ export function setDebug(value) {
 	debugMode = value;
 }
 
-export function getContext() {
-	if (!context) {
-		throw new Error("Context requested before being set");
-	}
-	return context;
-}
-
-export function setContext(newContext) {
-	context = newContext;
-}
-
 /**
  * Create an HTML element with the specified parameters
  * @param {string} className
@@ -193,7 +181,7 @@ export function error() {
  * @param {number} width The width of each sprite
  * @returns {string[][]}
  */
-export function getLayerPixels(spriteSheet, spriteIndex, width) {
+export 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++) {

src/sound.js

@@ -1,43 +0,0 @@
-// @ts-check
-
-export class Birdsong {
-
-	/**
-	 * @type {AudioContext}
-	 */
-	audioContext;
-
-	chirp() {
-		if (!this.audioContext) {
-			this.audioContext = new AudioContext();
-		}
-
-		const TIMES = [0, 0.06, 0.10, 0.15];
-		const FREQUENCIES = [2200,
-			3500 + Math.random() * 600,
-			2100 + Math.random() * 200,
-			1600 + Math.random() * 400];
-		const VOLUMES = [0.0001, 0.2, 0.2, 0.0001];
-
-		const oscillator = this.audioContext.createOscillator();
-		oscillator.type = "sine";
-		const gain = this.audioContext.createGain();
-		oscillator.connect(gain);
-		gain.connect(this.audioContext.destination);
-
-		const now = this.audioContext.currentTime;
-		for (let i = 0; i < TIMES.length; i++) {
-			const time = TIMES[i] + now;
-			if (i === 0) {
-				oscillator.frequency.setValueAtTime(FREQUENCIES[i], time);
-				gain.gain.setValueAtTime(VOLUMES[i], time);
-			} else {
-				oscillator.frequency.exponentialRampToValueAtTime(FREQUENCIES[i], time);
-				gain.gain.exponentialRampToValueAtTime(VOLUMES[i], time);
-			}
-		}
-
-		oscillator.start(now);
-		oscillator.stop(now + TIMES[TIMES.length - 1]);
-	}
-}

src/sprites.js

@@ -0,0 +1,199 @@
+/** Indicators for parts of the base bird sprite sheet */
+export 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>} */
+export 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,
+};
+
+export 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>} */
+export 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",
+	}),
+};

src/stickyNotes.js

@@ -1,9 +1,9 @@
 import {
-	getContext,
 	makeElement,
 	makeDraggable,
 	makeClosable
 } from './shared.js';
+import { getContext } from './context.js';
 
 /**
  * @typedef {Object} SavedStickyNote

src/stylesheet.css

@@ -41,22 +41,6 @@
 	z-index: 2147483630 !important;
 }
 
-.birb-item {
-	image-rendering: pixelated;
-	position: absolute;
-	bottom: 0;
-	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
-	transform-origin: bottom;
-	transition-duration: 0.15s;
-	z-index: 2147483630 !important;
-	cursor: pointer;
-}
-
-.birb-item:hover {
-	transform: scale(calc(var(--birb-scale) * 1.9)) !important;
-	transition-duration: 0.15s;
-}
-
 .birb-window {
 	font-family: "Monocraft", monospace !important;
 	line-height: initial !important;
@@ -214,7 +198,6 @@
 
 .birb-menu-item {
 	width: calc(100% - var(--birb-double-border-size));
-	white-space: nowrap;
 	font-size: 14px;
 	padding-top: 4px;
 	padding-bottom: 4px;
@@ -254,21 +237,13 @@
 	opacity: 0.4;
 }
 
-#birb-field-guide, #birb-wardrobe {
+#birb-field-guide {
 	width: 322px !important;
 }
 
-#birb-field-guide .birb-grid-content {
-	grid-template-rows: repeat(3, auto);
-}
-
-#birb-wardrobe .birb-grid-content {
-	grid-template-columns: repeat(4, auto);
-	grid-auto-flow: row;
-}
-
 .birb-grid-content {
 	display: grid;
+	grid-template-rows: repeat(3, auto);
 	grid-auto-flow: column;
 	gap: 10px;
 	padding-top: 8px;
@@ -382,13 +357,6 @@
 	border: none !important;
 }
 
-.birb-sticky-note-input::placeholder {
-	font-family: "Monocraft", monospace !important;
-	font-size: 14px !important;
-	background-color: transparent !important;
-	color: rgba(0, 0, 0, 0.35) !important;
-}
-
 .birb-sticky-note-input:focus {
 	outline: none !important;
 	box-shadow: none !important;