noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-26 04:07:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add modal when new bird is unlocked

Browse Source
This commit is contained in:
Idrees Hassan
2024-12-28 17:03:54 -05:00
parent 87fe446f3f
commit 5e225aa84b
1 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
birb.js
View File

@@ -149,6 +149,8 @@ const styles = `
0 var(--border-size) var(--border-color); 0 var(--border-size) var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
padding-top: 8px; padding-top: 8px;
@@ -156,6 +158,7 @@ const styles = `
} }
.birb-window-list-item { .birb-window-list-item {
width: 100%;
font-size: 14px; font-size: 14px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@@ -229,6 +232,10 @@ const styles = `
#${FEATHER_ID} { #${FEATHER_ID} {
cursor: pointer; cursor: pointer;
} }
.birb-message-content {
font-size: 15px;
}
`; `;
class Layer { class Layer {
@@ -812,7 +819,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), theme); FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), theme);
document.body.appendChild(featherCanvas); document.body.appendChild(featherCanvas);
featherCanvas.addEventListener("click", () => { featherCanvas.addEventListener("click", () => {
unlockTheme(birdType); unlockBird(birdType);
removeFeather(); removeFeather();
}); });
} }
@@ -825,11 +832,12 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
} }
/** /**
* @param {string} theme * @param {string} birdType
*/ */
function unlockTheme(theme) { function unlockBird(birdType) {
if (!unlockedThemes.includes(theme)) { if (!unlockedThemes.includes(birdType)) {
unlockedThemes.push(theme); unlockedThemes.push(birdType);
insertModal("Bird Unlocked!", `You've found a ${species[birdType].name} feather! Use the Field Guide to switch your bird's theme.`);
} }
} }
@@ -850,6 +858,37 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
// insertDecoration(); // insertDecoration();
// insertFieldGuide(); // insertFieldGuide();
/**
* @param {string} title
* @param {string} message
*/
function insertModal(title, message) {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
let html = `
<div class="birb-window-header">
<div class="birb-window-title">${title}</div>
<div class="birb-window-close">x</div>
</div>
<div class="birb-window-content">
<div class="birb-message-content">
${message}
</div>
</div>`
const modal = makeElement("birb-window");
modal.style.width = "230px";
modal.innerHTML = html;
modal.style.left = `${window.innerWidth / 2 - 115}px`;
modal.style.top = `${window.innerHeight / 2 - 115}px`;
document.body.appendChild(modal);
makeDraggable(modal.querySelector(".birb-window-header"));
modal.querySelector(".birb-window-close")?.addEventListener("click", () => {
modal.remove();
});
}
function insertFieldGuide() { function insertFieldGuide() {
if (document.querySelector("#" + FIELD_GUIDE_ID)) { if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return; return;