Add support for different rarities in field guide

dist/extension/birb.js

@@ -531,14 +531,25 @@
 		"#373737": PALETTE.FEATHER_SPINE,
 	};
 
+
+	/**
+	 * Bird species rarit
+	 * @type {Record<string, string>} 
+	 */
+	const RARITY = {
+		FAMILIAR: "familiar",
+		UNCOMMON: "uncommon"
+	};
+
 	class BirdType {
 		/**
 		 * @param {string} name
 		 * @param {string} description
 		 * @param {Record<string, string>} colors
 		 * @param {string[]} [tags]
+		 * @param {string} [rarity]
 		 */
-		constructor(name, description, colors, tags = []) {
+		constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 			this.name = name;
 			this.description = description;
 			const defaultColors = {
@@ -561,6 +572,7 @@
 			/** @type {Record<string, string>} */
 			this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 			this.tags = tags;
+			this.rarity = rarity;
 		}
 	}
 
@@ -624,7 +636,7 @@
 	const SPECIES = Object.fromEntries(
 		Object.entries(species).map(([id, data]) => [
 			id,
-			new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+			new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 		]),
 	);
 
@@ -2162,7 +2174,7 @@
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -2181,6 +2193,15 @@
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -2192,7 +2213,7 @@
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -2205,7 +2226,7 @@
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {
@@ -2581,6 +2602,8 @@
 			setInterval(update, UPDATE_INTERVAL);
 
 			focusOnElement(true);
+			// TODO: Remove
+			insertFieldGuide();
 		}
 
 		function update() {
@@ -2928,9 +2951,22 @@
 			removeWardrobe();
 
 			const contentContainer = document.createElement("div");
-			const content = makeElement("birb-grid-content");
+			const familiarBirds = makeElement("birb-grid-content");
+			const uncommonBirds = makeElement("birb-grid-content");
+
+			const familiarLabel = document.createElement("div");
+			familiarLabel.className = "birb-field-guide-section-label";
+			familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+			const uncommonLabel = document.createElement("div");
+			uncommonLabel.className = "birb-field-guide-section-label";
+			uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 			const description = makeElement("birb-field-guide-description");
-			contentContainer.appendChild(content);
+			contentContainer.appendChild(familiarLabel);
+			contentContainer.appendChild(familiarBirds);
+			contentContainer.appendChild(uncommonLabel);
+			contentContainer.appendChild(uncommonBirds);
 			contentContainer.appendChild(description);
 
 			const fieldGuide = createWindow(
@@ -2975,7 +3011,11 @@
 				}
 				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
-				content.appendChild(speciesElement);
+				let section = familiarBirds;
+				if (type.rarity === RARITY.UNCOMMON) {
+					section = uncommonBirds;
+				}
+				section.appendChild(speciesElement);
 				if (unlocked) {
 					onClick(speciesElement, () => {
 						switchSpecies(id);

dist/obsidian/main.js

@@ -536,14 +536,25 @@ module.exports = class PocketBird extends Plugin {
 		"#373737": PALETTE.FEATHER_SPINE,
 	};
 
+
+	/**
+	 * Bird species rarit
+	 * @type {Record<string, string>} 
+	 */
+	const RARITY = {
+		FAMILIAR: "familiar",
+		UNCOMMON: "uncommon"
+	};
+
 	class BirdType {
 		/**
 		 * @param {string} name
 		 * @param {string} description
 		 * @param {Record<string, string>} colors
 		 * @param {string[]} [tags]
+		 * @param {string} [rarity]
 		 */
-		constructor(name, description, colors, tags = []) {
+		constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 			this.name = name;
 			this.description = description;
 			const defaultColors = {
@@ -566,6 +577,7 @@ module.exports = class PocketBird extends Plugin {
 			/** @type {Record<string, string>} */
 			this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 			this.tags = tags;
+			this.rarity = rarity;
 		}
 	}
 
@@ -629,7 +641,7 @@ module.exports = class PocketBird extends Plugin {
 	const SPECIES = Object.fromEntries(
 		Object.entries(species).map(([id, data]) => [
 			id,
-			new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+			new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 		]),
 	);
 
@@ -2195,7 +2207,7 @@ module.exports = class PocketBird extends Plugin {
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -2214,6 +2226,15 @@ module.exports = class PocketBird extends Plugin {
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -2225,7 +2246,7 @@ module.exports = class PocketBird extends Plugin {
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -2238,7 +2259,7 @@ module.exports = class PocketBird extends Plugin {
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {
@@ -2614,6 +2635,8 @@ module.exports = class PocketBird extends Plugin {
 			setInterval(update, UPDATE_INTERVAL);
 
 			focusOnElement(true);
+			// TODO: Remove
+			insertFieldGuide();
 		}
 
 		function update() {
@@ -2961,9 +2984,22 @@ module.exports = class PocketBird extends Plugin {
 			removeWardrobe();
 
 			const contentContainer = document.createElement("div");
-			const content = makeElement("birb-grid-content");
+			const familiarBirds = makeElement("birb-grid-content");
+			const uncommonBirds = makeElement("birb-grid-content");
+
+			const familiarLabel = document.createElement("div");
+			familiarLabel.className = "birb-field-guide-section-label";
+			familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+			const uncommonLabel = document.createElement("div");
+			uncommonLabel.className = "birb-field-guide-section-label";
+			uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 			const description = makeElement("birb-field-guide-description");
-			contentContainer.appendChild(content);
+			contentContainer.appendChild(familiarLabel);
+			contentContainer.appendChild(familiarBirds);
+			contentContainer.appendChild(uncommonLabel);
+			contentContainer.appendChild(uncommonBirds);
 			contentContainer.appendChild(description);
 
 			const fieldGuide = createWindow(
@@ -3008,7 +3044,11 @@ module.exports = class PocketBird extends Plugin {
 				}
 				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
-				content.appendChild(speciesElement);
+				let section = familiarBirds;
+				if (type.rarity === RARITY.UNCOMMON) {
+					section = uncommonBirds;
+				}
+				section.appendChild(speciesElement);
 				if (unlocked) {
 					onClick(speciesElement, () => {
 						switchSpecies(id);

dist/userscript/birb.user.js

@@ -545,14 +545,25 @@
 		"#373737": PALETTE.FEATHER_SPINE,
 	};
 
+
+	/**
+	 * Bird species rarit
+	 * @type {Record<string, string>} 
+	 */
+	const RARITY = {
+		FAMILIAR: "familiar",
+		UNCOMMON: "uncommon"
+	};
+
 	class BirdType {
 		/**
 		 * @param {string} name
 		 * @param {string} description
 		 * @param {Record<string, string>} colors
 		 * @param {string[]} [tags]
+		 * @param {string} [rarity]
 		 */
-		constructor(name, description, colors, tags = []) {
+		constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 			this.name = name;
 			this.description = description;
 			const defaultColors = {
@@ -575,6 +586,7 @@
 			/** @type {Record<string, string>} */
 			this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 			this.tags = tags;
+			this.rarity = rarity;
 		}
 	}
 
@@ -638,7 +650,7 @@
 	const SPECIES = Object.fromEntries(
 		Object.entries(species).map(([id, data]) => [
 			id,
-			new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+			new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 		]),
 	);
 
@@ -2157,7 +2169,7 @@
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -2176,6 +2188,15 @@
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -2187,7 +2208,7 @@
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -2200,7 +2221,7 @@
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {
@@ -2576,6 +2597,8 @@
 			setInterval(update, UPDATE_INTERVAL);
 
 			focusOnElement(true);
+			// TODO: Remove
+			insertFieldGuide();
 		}
 
 		function update() {
@@ -2923,9 +2946,22 @@
 			removeWardrobe();
 
 			const contentContainer = document.createElement("div");
-			const content = makeElement("birb-grid-content");
+			const familiarBirds = makeElement("birb-grid-content");
+			const uncommonBirds = makeElement("birb-grid-content");
+
+			const familiarLabel = document.createElement("div");
+			familiarLabel.className = "birb-field-guide-section-label";
+			familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+			const uncommonLabel = document.createElement("div");
+			uncommonLabel.className = "birb-field-guide-section-label";
+			uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 			const description = makeElement("birb-field-guide-description");
-			contentContainer.appendChild(content);
+			contentContainer.appendChild(familiarLabel);
+			contentContainer.appendChild(familiarBirds);
+			contentContainer.appendChild(uncommonLabel);
+			contentContainer.appendChild(uncommonBirds);
 			contentContainer.appendChild(description);
 
 			const fieldGuide = createWindow(
@@ -2970,7 +3006,11 @@
 				}
 				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
-				content.appendChild(speciesElement);
+				let section = familiarBirds;
+				if (type.rarity === RARITY.UNCOMMON) {
+					section = uncommonBirds;
+				}
+				section.appendChild(speciesElement);
 				if (unlocked) {
 					onClick(speciesElement, () => {
 						switchSpecies(id);

dist/web/birb.embed.js

@@ -531,14 +531,25 @@
 		"#373737": PALETTE.FEATHER_SPINE,
 	};
 
+
+	/**
+	 * Bird species rarit
+	 * @type {Record<string, string>} 
+	 */
+	const RARITY = {
+		FAMILIAR: "familiar",
+		UNCOMMON: "uncommon"
+	};
+
 	class BirdType {
 		/**
 		 * @param {string} name
 		 * @param {string} description
 		 * @param {Record<string, string>} colors
 		 * @param {string[]} [tags]
+		 * @param {string} [rarity]
 		 */
-		constructor(name, description, colors, tags = []) {
+		constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 			this.name = name;
 			this.description = description;
 			const defaultColors = {
@@ -561,6 +572,7 @@
 			/** @type {Record<string, string>} */
 			this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 			this.tags = tags;
+			this.rarity = rarity;
 		}
 	}
 
@@ -624,7 +636,7 @@
 	const SPECIES = Object.fromEntries(
 		Object.entries(species).map(([id, data]) => [
 			id,
-			new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+			new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 		]),
 	);
 
@@ -2137,7 +2149,7 @@
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -2156,6 +2168,15 @@
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -2167,7 +2188,7 @@
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -2180,7 +2201,7 @@
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {
@@ -2556,6 +2577,8 @@
 			setInterval(update, UPDATE_INTERVAL);
 
 			focusOnElement(true);
+			// TODO: Remove
+			insertFieldGuide();
 		}
 
 		function update() {
@@ -2903,9 +2926,22 @@
 			removeWardrobe();
 
 			const contentContainer = document.createElement("div");
-			const content = makeElement("birb-grid-content");
+			const familiarBirds = makeElement("birb-grid-content");
+			const uncommonBirds = makeElement("birb-grid-content");
+
+			const familiarLabel = document.createElement("div");
+			familiarLabel.className = "birb-field-guide-section-label";
+			familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+			const uncommonLabel = document.createElement("div");
+			uncommonLabel.className = "birb-field-guide-section-label";
+			uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 			const description = makeElement("birb-field-guide-description");
-			contentContainer.appendChild(content);
+			contentContainer.appendChild(familiarLabel);
+			contentContainer.appendChild(familiarBirds);
+			contentContainer.appendChild(uncommonLabel);
+			contentContainer.appendChild(uncommonBirds);
 			contentContainer.appendChild(description);
 
 			const fieldGuide = createWindow(
@@ -2950,7 +2986,11 @@
 				}
 				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
-				content.appendChild(speciesElement);
+				let section = familiarBirds;
+				if (type.rarity === RARITY.UNCOMMON) {
+					section = uncommonBirds;
+				}
+				section.appendChild(speciesElement);
 				if (unlocked) {
 					onClick(speciesElement, () => {
 						switchSpecies(id);

dist/web/birb.js

@@ -531,14 +531,25 @@
 		"#373737": PALETTE.FEATHER_SPINE,
 	};
 
+
+	/**
+	 * Bird species rarit
+	 * @type {Record<string, string>} 
+	 */
+	const RARITY = {
+		FAMILIAR: "familiar",
+		UNCOMMON: "uncommon"
+	};
+
 	class BirdType {
 		/**
 		 * @param {string} name
 		 * @param {string} description
 		 * @param {Record<string, string>} colors
 		 * @param {string[]} [tags]
+		 * @param {string} [rarity]
 		 */
-		constructor(name, description, colors, tags = []) {
+		constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 			this.name = name;
 			this.description = description;
 			const defaultColors = {
@@ -561,6 +572,7 @@
 			/** @type {Record<string, string>} */
 			this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 			this.tags = tags;
+			this.rarity = rarity;
 		}
 	}
 
@@ -624,7 +636,7 @@
 	const SPECIES = Object.fromEntries(
 		Object.entries(species).map(([id, data]) => [
 			id,
-			new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+			new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 		]),
 	);
 
@@ -2137,7 +2149,7 @@
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -2156,6 +2168,15 @@
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -2167,7 +2188,7 @@
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -2180,7 +2201,7 @@
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {
@@ -2556,6 +2577,8 @@
 			setInterval(update, UPDATE_INTERVAL);
 
 			focusOnElement(true);
+			// TODO: Remove
+			insertFieldGuide();
 		}
 
 		function update() {
@@ -2903,9 +2926,22 @@
 			removeWardrobe();
 
 			const contentContainer = document.createElement("div");
-			const content = makeElement("birb-grid-content");
+			const familiarBirds = makeElement("birb-grid-content");
+			const uncommonBirds = makeElement("birb-grid-content");
+
+			const familiarLabel = document.createElement("div");
+			familiarLabel.className = "birb-field-guide-section-label";
+			familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+			const uncommonLabel = document.createElement("div");
+			uncommonLabel.className = "birb-field-guide-section-label";
+			uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 			const description = makeElement("birb-field-guide-description");
-			contentContainer.appendChild(content);
+			contentContainer.appendChild(familiarLabel);
+			contentContainer.appendChild(familiarBirds);
+			contentContainer.appendChild(uncommonLabel);
+			contentContainer.appendChild(uncommonBirds);
 			contentContainer.appendChild(description);
 
 			const fieldGuide = createWindow(
@@ -2950,7 +2986,11 @@
 				}
 				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
-				content.appendChild(speciesElement);
+				let section = familiarBirds;
+				if (type.rarity === RARITY.UNCOMMON) {
+					section = uncommonBirds;
+				}
+				section.appendChild(speciesElement);
 				if (unlocked) {
 					onClick(speciesElement, () => {
 						switchSpecies(id);

src/animation/sprites.js

@@ -58,14 +58,25 @@ export const SPRITE_SHEET_COLOR_MAP = {
 	"#373737": PALETTE.FEATHER_SPINE,
 };
 
+
+/**
+ * Bird species rarit
+ * @type {Record<string, string>} 
+ */
+export const RARITY = {
+	FAMILIAR: "familiar",
+	UNCOMMON: "uncommon"
+}
+
 export class BirdType {
 	/**
 	 * @param {string} name
 	 * @param {string} description
 	 * @param {Record<string, string>} colors
 	 * @param {string[]} [tags]
+	 * @param {string} [rarity]
 	 */
-	constructor(name, description, colors, tags = []) {
+	constructor(name, description, colors, tags = [], rarity = RARITY.FAMILIAR) {
 		this.name = name;
 		this.description = description;
 		const defaultColors = {
@@ -88,6 +99,7 @@ export class BirdType {
 		/** @type {Record<string, string>} */
 		this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
 		this.tags = tags;
+		this.rarity = rarity;
 	}
 }
 
@@ -151,6 +163,6 @@ export function loadSpriteSheetPixels(src, templateColors = true) {
 export const SPECIES = Object.fromEntries(
 	Object.entries(species).map(([id, data]) => [
 		id,
-		new BirdType(data.name, data.description, data.colors, data.tags ?? []),
+		new BirdType(data.name, data.description, data.colors, data.tags, data.rarity)
 	]),
 );

src/application.js

@@ -24,8 +24,8 @@ import {
 } from './shared.js';
 import {
 	PALETTE,
-	SPRITE_SHEET_COLOR_MAP,
 	SPECIES,
+	RARITY,
 	loadSpriteSheetPixels,
 } from './animation/sprites.js';
 import {
@@ -407,6 +407,8 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		setInterval(update, UPDATE_INTERVAL);
 
 		focusOnElement(true);
+		// TODO: Remove
+		insertFieldGuide();
 	}
 
 	function update() {
@@ -758,9 +760,22 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		removeWardrobe();
 
 		const contentContainer = document.createElement("div");
-		const content = makeElement("birb-grid-content");
+		const familiarBirds = makeElement("birb-grid-content");
+		const uncommonBirds = makeElement("birb-grid-content");
+
+		const familiarLabel = document.createElement("div");
+		familiarLabel.className = "birb-field-guide-section-label";
+		familiarLabel.textContent = `----- Familiar ${birdBirb()}s -----`;
+
+		const uncommonLabel = document.createElement("div");
+		uncommonLabel.className = "birb-field-guide-section-label";
+		uncommonLabel.textContent = `----- Uncommon ${birdBirb()}s -----`;
+
 		const description = makeElement("birb-field-guide-description");
-		contentContainer.appendChild(content);
+		contentContainer.appendChild(familiarLabel);
+		contentContainer.appendChild(familiarBirds);
+		contentContainer.appendChild(uncommonLabel);
+		contentContainer.appendChild(uncommonBirds);
 		contentContainer.appendChild(description);
 
 		const fieldGuide = createWindow(
@@ -805,7 +820,11 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			}
 			birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			speciesElement.appendChild(speciesCanvas);
-			content.appendChild(speciesElement);
+			let section = familiarBirds;
+			if (type.rarity === RARITY.UNCOMMON) {
+				section = uncommonBirds;
+			}
+			section.appendChild(speciesElement);
 			if (unlocked) {
 				onClick(speciesElement, () => {
 					switchSpecies(id);

src/stylesheet.css

@@ -294,7 +294,7 @@
 }
 
 .birb-grid-item, .birb-field-guide-description, .birb-message-content {
-	border: var(--birb-border-size) solid rgb(255, 207, 144);
+	border: var(--birb-border-size) solid #ffcf90;
 	box-shadow: 0 0 0 var(--birb-border-size) white;
 	background: rgba(255, 221, 177, 0.5);
 }
@@ -313,6 +313,15 @@
 	background: var(--birb-mix-color);
 }
 
+.birb-field-guide-section-label {
+	padding-top: 4px;
+	/* padding-left: calc(10px + var(--birb-border-size) / 2); */
+	color: #876c4e;
+	text-align: center;
+	/* Italics */
+	font-style: italic;
+}
+
 .birb-field-guide-description {
 	max-width: calc(100% - 20px);
 	margin-left: 10px;
@@ -324,7 +333,7 @@
 	margin-bottom: 10px;
 	font-size: 14px;
 	box-sizing: border-box;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 #birb-feather {
@@ -337,7 +346,7 @@
 	width: 100%;
 	padding: 10px;
 	font-size: 14px;
-	color: rgb(124, 108, 75);
+	color: #7c6c4b;
 }
 
 .birb-sticky-note {