diff --git a/dist/extension.zip b/dist/extension.zip index 88c37ae..8d055b9 100644 Binary files a/dist/extension.zip and b/dist/extension.zip differ diff --git a/dist/extension/birb.js b/dist/extension/birb.js index cecc246..8bc1d11 100644 --- a/dist/extension/birb.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/dist/obsidian/main.js b/dist/obsidian/main.js index 4b1fd4c..536995d 100644 --- a/dist/obsidian/main.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/dist/userscript/birb.user.js b/dist/userscript/birb.user.js index 3a33416..21b9da3 100644 --- a/dist/userscript/birb.user.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/dist/web/birb.embed.js b/dist/web/birb.embed.js index 5992b61..43eb0bb 100644 --- a/dist/web/birb.embed.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/dist/web/birb.js b/dist/web/birb.js index 5992b61..43eb0bb 100644 --- a/dist/web/birb.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/src/application.js b/src/application.js index 6f1af83..6c3273e 100644 --- a/src/application.js +++ b/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 hatId = hatKeys[Math.floor(Math.random() * (hatKeys.length - 1)) + 1]; + const hats = Object.values(HAT); + 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(); } diff --git a/src/fieldGuide.js b/src/fieldGuide.js new file mode 100644 index 0000000..e69de29 diff --git a/src/hats.js b/src/hats.js index c875e59..e106356 100644 --- a/src/hats.js +++ b/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); diff --git a/src/stylesheet.css b/src/stylesheet.css index c02f3d3..4ea5aab 100644 --- a/src/stylesheet.css +++ b/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 {