diff --git a/birb.js b/birb.js index d25d6b5..60a2c6a 100644 --- a/birb.js +++ b/birb.js @@ -149,6 +149,8 @@ const styles = ` 0 var(--border-size) var(--border-color); display: flex; flex-direction: column; + align-items: center; + justify-content: center; padding-left: 15px; padding-right: 15px; padding-top: 8px; @@ -156,6 +158,7 @@ const styles = ` } .birb-window-list-item { + width: 100%; font-size: 14px; padding-top: 5px; padding-bottom: 5px; @@ -229,6 +232,10 @@ const styles = ` #${FEATHER_ID} { cursor: pointer; } + + .birb-message-content { + font-size: 15px; + } `; class Layer { @@ -812,7 +819,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), theme); document.body.appendChild(featherCanvas); featherCanvas.addEventListener("click", () => { - unlockTheme(birdType); + unlockBird(birdType); removeFeather(); }); } @@ -825,11 +832,12 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO } /** - * @param {string} theme + * @param {string} birdType */ - function unlockTheme(theme) { - if (!unlockedThemes.includes(theme)) { - unlockedThemes.push(theme); + function unlockBird(birdType) { + if (!unlockedThemes.includes(birdType)) { + 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(); // insertFieldGuide(); + /** + * @param {string} title + * @param {string} message + */ + function insertModal(title, message) { + if (document.querySelector("#" + FIELD_GUIDE_ID)) { + return; + } + let html = ` +