diff --git a/dist/birb.js b/dist/birb.js
index 034edc6..90ac226 100644
--- a/dist/birb.js
+++ b/dist/birb.js
@@ -1352,8 +1352,8 @@
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
- justify-content: start;
- align-items: start;
+ justify-content: center;
+ align-items: center;
}
.birb-grid-item {
@@ -1398,6 +1398,7 @@
.birb-field-guide-description {
width: calc(100% - 20px);
+ margin-left: 10px;
margin-top: 5px;
padding: 8px;
padding-top: 4px;
@@ -1414,11 +1415,9 @@
.birb-message-content {
box-sizing: border-box;
+ margin: 2px;
width: 100%;
- margin-top: 10px;
- padding: 8px;
- padding-top: 4px;
- padding-bottom: 4px;
+ padding: 10px;
font-size: 14px;
color: rgb(124, 108, 75);
}
@@ -1596,10 +1595,17 @@
new MenuItem("Toggle Birb Mode", () => {
userSettings.birbMode = !userSettings.birbMode;
save();
- insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+ if (userSettings.birbMode) {
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createTextNode("Welcome back to 2012"));
+ }
+ insertModal(`${birdBirb()} Mode`, message);
}),
new Separator(),
- new MenuItem("2025.10.26.500", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.500"); }, false),
+ new MenuItem("2025.10.26.536", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.536"); }, false),
];
const styleElement = document.createElement("style");
@@ -1933,31 +1939,34 @@
* Create a window element with header and content
* @param {string} id
* @param {string} title
- * @param {string} contentHtml
+ * @param {HTMLElement} contentElement
* @param {() => void} [onClose]
* @returns {HTMLElement}
*/
- function createWindow(id, title, contentHtml, onClose) {
+ function createWindow(id, title, contentElement, onClose) {
const window = makeElement("birb-window", undefined, id);
- window.innerHTML = `
-
-
- ${contentHtml}
-
- `;
+
+ const header = makeElement("birb-window-header");
+ const titleElement = makeElement("birb-window-title");
+ titleElement.textContent = title;
+ const closeButton = makeElement("birb-window-close");
+ closeButton.textContent = "x";
+
+ header.appendChild(titleElement);
+ header.appendChild(closeButton);
+
+ const contentWrapper = makeElement("birb-window-content");
+ contentWrapper.appendChild(contentElement);
+
+ window.appendChild(header);
+ window.appendChild(contentWrapper);
document.body.appendChild(window);
- makeDraggable(window.querySelector(".birb-window-header"));
+ makeDraggable(header);
- const closeButton = window.querySelector(".birb-window-close");
- if (closeButton) {
- makeClosable(() => {
- window.remove();
- }, closeButton);
- }
+ makeClosable(() => {
+ window.remove();
+ }, closeButton);
return window;
}
@@ -2017,7 +2026,13 @@
function unlockBird(birdType) {
if (!unlockedSpecies.includes(birdType)) {
unlockedSpecies.push(birdType);
- insertModal("New Bird Unlocked!", `You've found a ${SPECIES[birdType].name} feather! Use the Field Guide to switch your bird's species.`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode("You've found a "));
+ const bold = document.createElement("b");
+ bold.textContent = SPECIES[birdType].name;
+ message.appendChild(bold);
+ message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+ insertModal("New Bird Unlocked!", message);
}
save();
}
@@ -2044,18 +2059,14 @@
/**
* @param {string} title
- * @param {string} message
+ * @param {HTMLElement} content
*/
- function insertModal(title, message) {
+ function insertModal(title, content) {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
- const modal = createWindow("birb-modal", title, `
-
- ${message}
-
- `);
+ const modal = createWindow("birb-modal", title, content);
modal.style.width = "270px";
centerElement(modal);
@@ -2090,30 +2101,39 @@
return;
}
+ 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 fieldGuide = createWindow(
FIELD_GUIDE_ID,
"Field Guide",
- `
- `
+ contentContainer
);
- const content = fieldGuide.querySelector(".birb-grid-content");
- if (!content) {
- return;
- }
- content.innerHTML = "";
-
const generateDescription = (/** @type {string} */ speciesId) => {
const type = SPECIES[speciesId];
const unlocked = unlockedSpecies.includes(speciesId);
- return "" + type.name + "" + (!unlocked ? "Not yet unlocked" : type.description);
+
+ const boldName = document.createElement("b");
+ boldName.textContent = type.name;
+
+ const spacer = document.createElement("div");
+ spacer.style.height = "0.3em";
+
+ const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+
+ const fragment = document.createDocumentFragment();
+ fragment.appendChild(boldName);
+ fragment.appendChild(spacer);
+ fragment.appendChild(descText);
+
+ return fragment;
};
- const description = fieldGuide.querySelector(".birb-field-guide-description");
- if (!description) {
- return;
- }
- description.innerHTML = generateDescription(currentSpecies);
+ description.appendChild(generateDescription(currentSpecies));
for (const [id, type] of Object.entries(SPECIES)) {
const unlocked = unlockedSpecies.includes(id);
const speciesElement = makeElement("birb-grid-item");
@@ -2142,10 +2162,12 @@
speciesElement.classList.add("birb-grid-item-locked");
}
speciesElement.addEventListener("mouseover", () => {
- description.innerHTML = generateDescription(id);
+ description.textContent = "";
+ description.appendChild(generateDescription(id));
});
speciesElement.addEventListener("mouseout", () => {
- description.innerHTML = generateDescription(currentSpecies);
+ description.textContent = "";
+ description.appendChild(generateDescription(currentSpecies));
});
}
centerElement(fieldGuide);
diff --git a/dist/birb.user.js b/dist/birb.user.js
index 756cb4f..708b779 100644
--- a/dist/birb.user.js
+++ b/dist/birb.user.js
@@ -1,7 +1,7 @@
// ==UserScript==
// @name Pocket Bird
// @namespace https://idreesinc.com
-// @version 2025.10.26.500
+// @version 2025.10.26.536
// @description birb
// @author Idrees
// @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -1366,8 +1366,8 @@
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
- justify-content: start;
- align-items: start;
+ justify-content: center;
+ align-items: center;
}
.birb-grid-item {
@@ -1412,6 +1412,7 @@
.birb-field-guide-description {
width: calc(100% - 20px);
+ margin-left: 10px;
margin-top: 5px;
padding: 8px;
padding-top: 4px;
@@ -1428,11 +1429,9 @@
.birb-message-content {
box-sizing: border-box;
+ margin: 2px;
width: 100%;
- margin-top: 10px;
- padding: 8px;
- padding-top: 4px;
- padding-bottom: 4px;
+ padding: 10px;
font-size: 14px;
color: rgb(124, 108, 75);
}
@@ -1610,10 +1609,17 @@
new MenuItem("Toggle Birb Mode", () => {
userSettings.birbMode = !userSettings.birbMode;
save();
- insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+ if (userSettings.birbMode) {
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createTextNode("Welcome back to 2012"));
+ }
+ insertModal(`${birdBirb()} Mode`, message);
}),
new Separator(),
- new MenuItem("2025.10.26.500", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.500"); }, false),
+ new MenuItem("2025.10.26.536", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.26.536"); }, false),
];
const styleElement = document.createElement("style");
@@ -1947,31 +1953,34 @@
* Create a window element with header and content
* @param {string} id
* @param {string} title
- * @param {string} contentHtml
+ * @param {HTMLElement} contentElement
* @param {() => void} [onClose]
* @returns {HTMLElement}
*/
- function createWindow(id, title, contentHtml, onClose) {
+ function createWindow(id, title, contentElement, onClose) {
const window = makeElement("birb-window", undefined, id);
- window.innerHTML = `
-
-
- ${contentHtml}
-
- `;
+
+ const header = makeElement("birb-window-header");
+ const titleElement = makeElement("birb-window-title");
+ titleElement.textContent = title;
+ const closeButton = makeElement("birb-window-close");
+ closeButton.textContent = "x";
+
+ header.appendChild(titleElement);
+ header.appendChild(closeButton);
+
+ const contentWrapper = makeElement("birb-window-content");
+ contentWrapper.appendChild(contentElement);
+
+ window.appendChild(header);
+ window.appendChild(contentWrapper);
document.body.appendChild(window);
- makeDraggable(window.querySelector(".birb-window-header"));
+ makeDraggable(header);
- const closeButton = window.querySelector(".birb-window-close");
- if (closeButton) {
- makeClosable(() => {
- window.remove();
- }, closeButton);
- }
+ makeClosable(() => {
+ window.remove();
+ }, closeButton);
return window;
}
@@ -2031,7 +2040,13 @@
function unlockBird(birdType) {
if (!unlockedSpecies.includes(birdType)) {
unlockedSpecies.push(birdType);
- insertModal("New Bird Unlocked!", `You've found a ${SPECIES[birdType].name} feather! Use the Field Guide to switch your bird's species.`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode("You've found a "));
+ const bold = document.createElement("b");
+ bold.textContent = SPECIES[birdType].name;
+ message.appendChild(bold);
+ message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+ insertModal("New Bird Unlocked!", message);
}
save();
}
@@ -2058,18 +2073,14 @@
/**
* @param {string} title
- * @param {string} message
+ * @param {HTMLElement} content
*/
- function insertModal(title, message) {
+ function insertModal(title, content) {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
- const modal = createWindow("birb-modal", title, `
-
- ${message}
-
- `);
+ const modal = createWindow("birb-modal", title, content);
modal.style.width = "270px";
centerElement(modal);
@@ -2104,30 +2115,39 @@
return;
}
+ 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 fieldGuide = createWindow(
FIELD_GUIDE_ID,
"Field Guide",
- `
- `
+ contentContainer
);
- const content = fieldGuide.querySelector(".birb-grid-content");
- if (!content) {
- return;
- }
- content.innerHTML = "";
-
const generateDescription = (/** @type {string} */ speciesId) => {
const type = SPECIES[speciesId];
const unlocked = unlockedSpecies.includes(speciesId);
- return "" + type.name + "" + (!unlocked ? "Not yet unlocked" : type.description);
+
+ const boldName = document.createElement("b");
+ boldName.textContent = type.name;
+
+ const spacer = document.createElement("div");
+ spacer.style.height = "0.3em";
+
+ const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+
+ const fragment = document.createDocumentFragment();
+ fragment.appendChild(boldName);
+ fragment.appendChild(spacer);
+ fragment.appendChild(descText);
+
+ return fragment;
};
- const description = fieldGuide.querySelector(".birb-field-guide-description");
- if (!description) {
- return;
- }
- description.innerHTML = generateDescription(currentSpecies);
+ description.appendChild(generateDescription(currentSpecies));
for (const [id, type] of Object.entries(SPECIES)) {
const unlocked = unlockedSpecies.includes(id);
const speciesElement = makeElement("birb-grid-item");
@@ -2156,10 +2176,12 @@
speciesElement.classList.add("birb-grid-item-locked");
}
speciesElement.addEventListener("mouseover", () => {
- description.innerHTML = generateDescription(id);
+ description.textContent = "";
+ description.appendChild(generateDescription(id));
});
speciesElement.addEventListener("mouseout", () => {
- description.innerHTML = generateDescription(currentSpecies);
+ description.textContent = "";
+ description.appendChild(generateDescription(currentSpecies));
});
}
centerElement(fieldGuide);
diff --git a/manifest.json b/manifest.json
index ccecd4d..43045e7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Pocket Bird",
"description": "It's a bird, in your browser. What more could you want?",
- "version": "2025.10.26.500",
+ "version": "2025.10.26.536",
"homepage_url": "https://idreesinc.com",
"content_scripts": [
{
diff --git a/src/application.js b/src/application.js
index 8977df9..76e541d 100644
--- a/src/application.js
+++ b/src/application.js
@@ -215,7 +215,14 @@ Promise.all([
new MenuItem("Toggle Birb Mode", () => {
userSettings.birbMode = !userSettings.birbMode;
save();
- insertModal(`${birdBirb()} Mode`, `Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"${userSettings.birbMode ? "\n\nWelcome back to 2012" : ""}`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode(`Your ${birdBirb().toLowerCase()} shall now be referred to as "${birdBirb()}"`));
+ if (userSettings.birbMode) {
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createElement("br"));
+ message.appendChild(document.createTextNode("Welcome back to 2012"));
+ }
+ insertModal(`${birdBirb()} Mode`, message);
}),
new Separator(),
new MenuItem("__VERSION__", () => { alert("Thank you for using Pocket Bird! You are on version: __VERSION__") }, false),
@@ -552,34 +559,37 @@ Promise.all([
* Create a window element with header and content
* @param {string} id
* @param {string} title
- * @param {string} contentHtml
+ * @param {HTMLElement} contentElement
* @param {() => void} [onClose]
* @returns {HTMLElement}
*/
- function createWindow(id, title, contentHtml, onClose) {
+ function createWindow(id, title, contentElement, onClose) {
const window = makeElement("birb-window", undefined, id);
- window.innerHTML = `
-
-
- ${contentHtml}
-
- `;
+
+ const header = makeElement("birb-window-header");
+ const titleElement = makeElement("birb-window-title");
+ titleElement.textContent = title;
+ const closeButton = makeElement("birb-window-close");
+ closeButton.textContent = "x";
+
+ header.appendChild(titleElement);
+ header.appendChild(closeButton);
+
+ const contentWrapper = makeElement("birb-window-content");
+ contentWrapper.appendChild(contentElement);
+
+ window.appendChild(header);
+ window.appendChild(contentWrapper);
document.body.appendChild(window);
- makeDraggable(window.querySelector(".birb-window-header"));
+ makeDraggable(header);
- const closeButton = window.querySelector(".birb-window-close");
- if (closeButton) {
- makeClosable(() => {
- if (onClose) {
- onClose();
- }
- window.remove();
- }, closeButton);
- }
+ makeClosable(() => {
+ if (onClose) {
+ onClose();
+ }
+ window.remove();
+ }, closeButton);
return window;
}
@@ -639,7 +649,13 @@ Promise.all([
function unlockBird(birdType) {
if (!unlockedSpecies.includes(birdType)) {
unlockedSpecies.push(birdType);
- insertModal("New Bird Unlocked!", `You've found a ${SPECIES[birdType].name} feather! Use the Field Guide to switch your bird's species.`);
+ const message = makeElement("birb-message-content");
+ message.appendChild(document.createTextNode("You've found a "));
+ const bold = document.createElement("b");
+ bold.textContent = SPECIES[birdType].name;
+ message.appendChild(bold);
+ message.appendChild(document.createTextNode(" feather! Use the Field Guide to switch your bird's species."));
+ insertModal("New Bird Unlocked!", message);
}
save();
}
@@ -666,18 +682,14 @@ Promise.all([
/**
* @param {string} title
- * @param {string} message
+ * @param {HTMLElement} content
*/
- function insertModal(title, message) {
+ function insertModal(title, content) {
if (document.querySelector("#" + FIELD_GUIDE_ID)) {
return;
}
- const modal = createWindow("birb-modal", title, `
-
- ${message}
-
- `);
+ const modal = createWindow("birb-modal", title, content);
modal.style.width = "270px";
centerElement(modal);
@@ -713,30 +725,39 @@ Promise.all([
return;
}
+ 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 fieldGuide = createWindow(
FIELD_GUIDE_ID,
"Field Guide",
- `
- `
- )
-
- const content = fieldGuide.querySelector(".birb-grid-content");
- if (!content) {
- return;
- }
- content.innerHTML = "";
+ contentContainer
+ );
const generateDescription = (/** @type {string} */ speciesId) => {
const type = SPECIES[speciesId];
const unlocked = unlockedSpecies.includes(speciesId);
- return "" + type.name + "" + (!unlocked ? "Not yet unlocked" : type.description);
+
+ const boldName = document.createElement("b");
+ boldName.textContent = type.name;
+
+ const spacer = document.createElement("div");
+ spacer.style.height = "0.3em";
+
+ const descText = document.createTextNode(!unlocked ? "Not yet unlocked" : type.description);
+
+ const fragment = document.createDocumentFragment();
+ fragment.appendChild(boldName);
+ fragment.appendChild(spacer);
+ fragment.appendChild(descText);
+
+ return fragment;
};
- const description = fieldGuide.querySelector(".birb-field-guide-description");
- if (!description) {
- return;
- }
- description.innerHTML = generateDescription(currentSpecies);
+ description.appendChild(generateDescription(currentSpecies));
for (const [id, type] of Object.entries(SPECIES)) {
const unlocked = unlockedSpecies.includes(id);
const speciesElement = makeElement("birb-grid-item");
@@ -765,10 +786,12 @@ Promise.all([
speciesElement.classList.add("birb-grid-item-locked");
}
speciesElement.addEventListener("mouseover", () => {
- description.innerHTML = generateDescription(id);
+ description.textContent = "";
+ description.appendChild(generateDescription(id));
});
speciesElement.addEventListener("mouseout", () => {
- description.innerHTML = generateDescription(currentSpecies);
+ description.textContent = "";
+ description.appendChild(generateDescription(currentSpecies));
});
}
centerElement(fieldGuide);
diff --git a/src/stylesheet.css b/src/stylesheet.css
index cb704fd..024e415 100644
--- a/src/stylesheet.css
+++ b/src/stylesheet.css
@@ -243,8 +243,8 @@
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
- justify-content: start;
- align-items: start;
+ justify-content: center;
+ align-items: center;
}
.birb-grid-item {
@@ -289,6 +289,7 @@
.birb-field-guide-description {
width: calc(100% - 20px);
+ margin-left: 10px;
margin-top: 5px;
padding: 8px;
padding-top: 4px;
@@ -305,11 +306,9 @@
.birb-message-content {
box-sizing: border-box;
+ margin: 2px;
width: 100%;
- margin-top: 10px;
- padding: 8px;
- padding-top: 4px;
- padding-bottom: 4px;
+ padding: 10px;
font-size: 14px;
color: rgb(124, 108, 75);
}