Add hat collection message

dist/extension/birb.js

@@ -735,7 +735,7 @@
 		if (hatId === HAT.NONE) {
 			return new Layer([], TAG.DEFAULT);
 		}
-		const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+		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);
@@ -1674,10 +1674,16 @@
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {
@@ -2338,7 +2344,7 @@
 			focusOnElement(true);
 
 			// TODO: This is for testing
-			generateHat();
+			insertHat();
 		}
 
 		function update() {
@@ -2522,13 +2528,13 @@
 		/**
 		 * Insert the hat as an item element in the document if possible
 		 */
-		function generateHat() {
+		function insertHat() {
 			if (document.querySelector("#" + HAT_ID)) {
 				return;
 			}
 			// Select a random hat
-			const hatKeys = Object.keys(HAT);
+			const hats = Object.values(HAT);
-			const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+			const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 			// Find a random valid element to place the hat on
 			const element = getRandomValidElement();
@@ -2546,6 +2552,17 @@
 			if (!hatCtx) {
 				return;
 			}
+			onClick(hatCanvas, () => {
+				switchHat(hatId);
+				hatCanvas.remove();
+				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);
+			});
 
 			// Create hat animation
 			const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -2826,6 +2843,7 @@
 		 * @param {string} hat
 		 */
 		function switchHat(hat) {
+			log("Switching hat to: " + hat);
 			currentHat = hat;
 			save();
 		}

dist/obsidian/main.js

@@ -740,7 +740,7 @@ module.exports = class PocketBird extends Plugin {
 		if (hatId === HAT.NONE) {
 			return new Layer([], TAG.DEFAULT);
 		}
-		const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+		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);
@@ -1717,10 +1717,16 @@ module.exports = class PocketBird extends Plugin {
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {
@@ -2381,7 +2387,7 @@ module.exports = class PocketBird extends Plugin {
 			focusOnElement(true);
 
 			// TODO: This is for testing
-			generateHat();
+			insertHat();
 		}
 
 		function update() {
@@ -2565,13 +2571,13 @@ module.exports = class PocketBird extends Plugin {
 		/**
 		 * Insert the hat as an item element in the document if possible
 		 */
-		function generateHat() {
+		function insertHat() {
 			if (document.querySelector("#" + HAT_ID)) {
 				return;
 			}
 			// Select a random hat
-			const hatKeys = Object.keys(HAT);
+			const hats = Object.values(HAT);
-			const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+			const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 			// Find a random valid element to place the hat on
 			const element = getRandomValidElement();
@@ -2589,6 +2595,17 @@ module.exports = class PocketBird extends Plugin {
 			if (!hatCtx) {
 				return;
 			}
+			onClick(hatCanvas, () => {
+				switchHat(hatId);
+				hatCanvas.remove();
+				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);
+			});
 
 			// Create hat animation
 			const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -2869,6 +2886,7 @@ module.exports = class PocketBird extends Plugin {
 		 * @param {string} hat
 		 */
 		function switchHat(hat) {
+			log("Switching hat to: " + hat);
 			currentHat = hat;
 			save();
 		}

dist/userscript/birb.user.js

@@ -749,7 +749,7 @@
 		if (hatId === HAT.NONE) {
 			return new Layer([], TAG.DEFAULT);
 		}
-		const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+		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);
@@ -1679,10 +1679,16 @@
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {
@@ -2343,7 +2349,7 @@
 			focusOnElement(true);
 
 			// TODO: This is for testing
-			generateHat();
+			insertHat();
 		}
 
 		function update() {
@@ -2527,13 +2533,13 @@
 		/**
 		 * Insert the hat as an item element in the document if possible
 		 */
-		function generateHat() {
+		function insertHat() {
 			if (document.querySelector("#" + HAT_ID)) {
 				return;
 			}
 			// Select a random hat
-			const hatKeys = Object.keys(HAT);
+			const hats = Object.values(HAT);
-			const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+			const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 			// Find a random valid element to place the hat on
 			const element = getRandomValidElement();
@@ -2551,6 +2557,17 @@
 			if (!hatCtx) {
 				return;
 			}
+			onClick(hatCanvas, () => {
+				switchHat(hatId);
+				hatCanvas.remove();
+				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);
+			});
 
 			// Create hat animation
 			const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -2831,6 +2848,7 @@
 		 * @param {string} hat
 		 */
 		function switchHat(hat) {
+			log("Switching hat to: " + hat);
 			currentHat = hat;
 			save();
 		}

dist/web/birb.embed.js

@@ -735,7 +735,7 @@
 		if (hatId === HAT.NONE) {
 			return new Layer([], TAG.DEFAULT);
 		}
-		const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+		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);
@@ -1659,10 +1659,16 @@
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {
@@ -2323,7 +2329,7 @@
 			focusOnElement(true);
 
 			// TODO: This is for testing
-			generateHat();
+			insertHat();
 		}
 
 		function update() {
@@ -2507,13 +2513,13 @@
 		/**
 		 * Insert the hat as an item element in the document if possible
 		 */
-		function generateHat() {
+		function insertHat() {
 			if (document.querySelector("#" + HAT_ID)) {
 				return;
 			}
 			// Select a random hat
-			const hatKeys = Object.keys(HAT);
+			const hats = Object.values(HAT);
-			const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+			const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 			// Find a random valid element to place the hat on
 			const element = getRandomValidElement();
@@ -2531,6 +2537,17 @@
 			if (!hatCtx) {
 				return;
 			}
+			onClick(hatCanvas, () => {
+				switchHat(hatId);
+				hatCanvas.remove();
+				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);
+			});
 
 			// Create hat animation
 			const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -2811,6 +2828,7 @@
 		 * @param {string} hat
 		 */
 		function switchHat(hat) {
+			log("Switching hat to: " + hat);
 			currentHat = hat;
 			save();
 		}

dist/web/birb.js

@@ -735,7 +735,7 @@
 		if (hatId === HAT.NONE) {
 			return new Layer([], TAG.DEFAULT);
 		}
-		const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+		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);
@@ -1659,10 +1659,16 @@
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {
@@ -2323,7 +2329,7 @@
 			focusOnElement(true);
 
 			// TODO: This is for testing
-			generateHat();
+			insertHat();
 		}
 
 		function update() {
@@ -2507,13 +2513,13 @@
 		/**
 		 * Insert the hat as an item element in the document if possible
 		 */
-		function generateHat() {
+		function insertHat() {
 			if (document.querySelector("#" + HAT_ID)) {
 				return;
 			}
 			// Select a random hat
-			const hatKeys = Object.keys(HAT);
+			const hats = Object.values(HAT);
-			const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+			const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 			// Find a random valid element to place the hat on
 			const element = getRandomValidElement();
@@ -2531,6 +2537,17 @@
 			if (!hatCtx) {
 				return;
 			}
+			onClick(hatCanvas, () => {
+				switchHat(hatId);
+				hatCanvas.remove();
+				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);
+			});
 
 			// Create hat animation
 			const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -2811,6 +2828,7 @@
 		 * @param {string} hat
 		 */
 		function switchHat(hat) {
+			log("Switching hat to: " + hat);
 			currentHat = hat;
 			save();
 		}

src/application.js

@@ -396,7 +396,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		focusOnElement(true);
 
 		// TODO: This is for testing
-		generateHat();
+		insertHat();
 	}
 
 	function update() {
@@ -583,13 +583,13 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	/**
 	 * Insert the hat as an item element in the document if possible
 	 */
-	function generateHat() {
+	function insertHat() {
 		if (document.querySelector("#" + HAT_ID)) {
 			return;
 		}
 		// Select a random hat
-		const hatKeys = Object.keys(HAT);
+		const hats = Object.values(HAT);
-		const hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1];
+		const hatId = hats[Math.floor(Math.random() * (hats.length - 1)) + 1];
 
 		// Find a random valid element to place the hat on
 		const element = getRandomValidElement();
@@ -607,6 +607,17 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		if (!hatCtx) {
 			return;
 		}
+		onClick(hatCanvas, () => {
+			switchHat(hatId);
+			hatCanvas.remove();
+			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);
+		});
 
 		// Create hat animation
 		const hatAnimation = createHatItemAnimation(hatId, HATS_SPRITE_SHEET);
@@ -892,6 +903,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	 * @param {string} hat
 	 */
 	function switchHat(hat) {
+		log("Switching hat to: " + hat);
 		currentHat = hat;
 		save();
 	}

src/hats.js

@@ -124,7 +124,7 @@ function buildHatItemLayer(spriteSheet, hatId) {
 	if (hatId === HAT.NONE) {
 		return new Layer([], TAG.DEFAULT);
 	}
-	const hatIndex = Object.keys(HAT).indexOf(hatId) - 1;
+	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);

src/stylesheet.css

@@ -45,10 +45,16 @@
 	image-rendering: pixelated;
 	position: absolute;
 	bottom: 0;
-	transform-origin: bottom;
 	transform: scale(calc(var(--birb-scale) * 1.5)) !important;
 	transform-origin: bottom;
+	transition-duration: 0.2s;
 	z-index: 2147483630 !important;
+	cursor: pointer;
+}
+
+.birb-item:hover {
+	transform: scale(calc(var(--birb-scale) * 2)) !important;
+	transition-duration: 0.2s;
 }
 
 .birb-window {