Add wardrobe menu

src/application.js

@@ -43,7 +43,7 @@ import {
 	switchMenuItems,
 	MENU_EXIT_ID
 } from './menu.js';
-import { HAT } from './hats.js';
+import { HAT, HAT_METADATA } from './hats.js';
 
 
 /**
@@ -84,6 +84,7 @@ 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 DEFAULT_BIRD = "bluebird";
 
@@ -159,6 +160,7 @@ 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", () => {
@@ -650,6 +652,8 @@ 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");
@@ -730,6 +734,100 @@ 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 = true;
+
+			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 = true;
+			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;
+			}
+			console.log(hat);
+			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
 	 */
@@ -740,6 +838,14 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		save();
 	}
 
+	/**
+	 * @param {string} hat
+	 */
+	function switchHat(hat) {
+		currentHat = hat;
+		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

src/hats.js

@@ -13,6 +13,33 @@ export const HAT = {
 	FEZ: "fez",
 };
 
+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: "For that classy, sophisticated look."
+	},
+	[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.BOWLER_HAT]: {
+		name: "Bowler Hat",
+		description: "For that authentic, Victorian look!"
+	},
+	[HAT.FEZ]: {
+		name: "Fez",
+		description: "It's a fez. Fezzes are cool."
+	},
+};
+
 /**
  * @param {string[][]} spriteSheet 
  * @returns {{ base: Layer[], down: Layer[] }}

src/stylesheet.css

@@ -242,9 +242,20 @@
 	width: 322px !important;
 }
 
+#birb-wardrobe {
+	width: calc(322px - 64px - 14px) !important;
+}
+
+#birb-field-guide .birb-grid-content {
+	grid-template-rows: repeat(3, auto);
+}
+
+#birb-wardrobe .birb-grid-content {
+	grid-template-rows: repeat(2, auto);
+}
+
 .birb-grid-content {
 	display: grid;
-	grid-template-rows: repeat(3, auto);
 	grid-auto-flow: column;
 	gap: 10px;
 	padding-top: 8px;