noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 19:59:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename color constants enum

Browse Source
This commit is contained in:
Idrees Hassan
2026-01-18 18:10:43 -05:00
parent ca1495a9f1
commit 579967a302
9 changed files with 788 additions and 752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/extension.zip vendored
View File

Binary file not shown.

256
dist/extension/birb.js vendored
View File

@@ -226,8 +226,11 @@
return document.documentElement.clientHeight; return document.documentElement.clientHeight;
} }
/** Indicators for parts of the base bird sprite sheet */ /**
const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -248,25 +251,28 @@
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
const SPRITE_SHEET_COLOR_MAP = { const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
class BirdType { class BirdType {
@@ -280,20 +286,20 @@
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -302,127 +308,127 @@
const SPECIES = { const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };
@@ -460,7 +466,7 @@
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -469,7 +475,7 @@
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }
@@ -2400,7 +2406,7 @@
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -2668,7 +2674,7 @@
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -2678,7 +2684,7 @@
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }

256
dist/obsidian/main.js vendored
View File

@@ -231,8 +231,11 @@ module.exports = class PocketBird extends Plugin {
return document.documentElement.clientHeight; return document.documentElement.clientHeight;
} }
/** Indicators for parts of the base bird sprite sheet */ /**
const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -253,25 +256,28 @@ module.exports = class PocketBird extends Plugin {
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
const SPRITE_SHEET_COLOR_MAP = { const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
class BirdType { class BirdType {
@@ -285,20 +291,20 @@ module.exports = class PocketBird extends Plugin {
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -307,127 +313,127 @@ module.exports = class PocketBird extends Plugin {
const SPECIES = { const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };
@@ -465,7 +471,7 @@ module.exports = class PocketBird extends Plugin {
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -474,7 +480,7 @@ module.exports = class PocketBird extends Plugin {
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }
@@ -2443,7 +2449,7 @@ module.exports = class PocketBird extends Plugin {
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -2711,7 +2717,7 @@ module.exports = class PocketBird extends Plugin {
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -2721,7 +2727,7 @@ module.exports = class PocketBird extends Plugin {
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }

256
dist/userscript/birb.user.js vendored
View File

@@ -240,8 +240,11 @@
return document.documentElement.clientHeight; return document.documentElement.clientHeight;
} }
/** Indicators for parts of the base bird sprite sheet */ /**
const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -262,25 +265,28 @@
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
const SPRITE_SHEET_COLOR_MAP = { const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
class BirdType { class BirdType {
@@ -294,20 +300,20 @@
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -316,127 +322,127 @@
const SPECIES = { const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };
@@ -474,7 +480,7 @@
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -483,7 +489,7 @@
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }
@@ -2405,7 +2411,7 @@
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -2673,7 +2679,7 @@
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -2683,7 +2689,7 @@
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }

256
dist/web/birb.embed.js vendored
View File

@@ -226,8 +226,11 @@
return document.documentElement.clientHeight; return document.documentElement.clientHeight;
} }
/** Indicators for parts of the base bird sprite sheet */ /**
const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -248,25 +251,28 @@
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
const SPRITE_SHEET_COLOR_MAP = { const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
class BirdType { class BirdType {
@@ -280,20 +286,20 @@
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -302,127 +308,127 @@
const SPECIES = { const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };
@@ -460,7 +466,7 @@
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -469,7 +475,7 @@
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }
@@ -2385,7 +2391,7 @@
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -2653,7 +2659,7 @@
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -2663,7 +2669,7 @@
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }

256
dist/web/birb.js vendored
View File

@@ -226,8 +226,11 @@
return document.documentElement.clientHeight; return document.documentElement.clientHeight;
} }
/** Indicators for parts of the base bird sprite sheet */ /**
const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -248,25 +251,28 @@
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
const SPRITE_SHEET_COLOR_MAP = { const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
class BirdType { class BirdType {
@@ -280,20 +286,20 @@
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -302,127 +308,127 @@
const SPECIES = { const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };
@@ -460,7 +466,7 @@
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -469,7 +475,7 @@
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }
@@ -2385,7 +2391,7 @@
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -2653,7 +2659,7 @@
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -2663,7 +2669,7 @@
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }

6
src/animation/frame.js
View File

@@ -1,5 +1,5 @@
import { Directions } from '../shared.js'; import { Directions } from '../shared.js';
import { Sprite, BirdType } from './sprites.js'; import { PALETTE, BirdType } from './sprites.js';
import Layer from './layer.js'; import Layer from './layer.js';
class Frame { class Frame {
@@ -25,7 +25,7 @@ class Frame {
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
// Pad from top with transparent pixels // Pad from top with transparent pixels
while (this.pixels.length < maxHeight) { while (this.pixels.length < maxHeight) {
this.pixels.unshift(new Array(this.pixels[0].length).fill(Sprite.TRANSPARENT)); this.pixels.unshift(new Array(this.pixels[0].length).fill(PALETTE.TRANSPARENT));
} }
// Combine layers // Combine layers
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
@@ -34,7 +34,7 @@ class Frame {
let topMargin = maxHeight - layerPixels.length; let topMargin = maxHeight - layerPixels.length;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
this.pixels[y + topMargin][x] = layerPixels[y][x] !== Sprite.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x]; this.pixels[y + topMargin][x] = layerPixels[y][x] !== PALETTE.TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
} }
} }
} }

246
src/animation/sprites.js
View File

@@ -1,5 +1,8 @@
/** Indicators for parts of the base bird sprite sheet */ /**
export const Sprite = { * Palette color names
* @type {Record<string, string>}
*/
export const PALETTE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
TRANSPARENT: "transparent", TRANSPARENT: "transparent",
OUTLINE: "outline", OUTLINE: "outline",
@@ -20,25 +23,28 @@ export const Sprite = {
FEATHER_SPINE: "feather-spine", FEATHER_SPINE: "feather-spine",
}; };
/** @type {Record<string, string>} */ /**
* Mapping of sprite sheet colors to palette colors
* @type {Record<string, string>}
*/
export const SPRITE_SHEET_COLOR_MAP = { export const SPRITE_SHEET_COLOR_MAP = {
"transparent": Sprite.TRANSPARENT, "transparent": PALETTE.TRANSPARENT,
"#ffffff": Sprite.BORDER, "#ffffff": PALETTE.BORDER,
"#000000": Sprite.OUTLINE, "#000000": PALETTE.OUTLINE,
"#010a19": Sprite.BEAK, "#010a19": PALETTE.BEAK,
"#190301": Sprite.EYE, "#190301": PALETTE.EYE,
"#af8e75": Sprite.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": Sprite.FACE, "#639bff": PALETTE.FACE,
"#99e550": Sprite.HOOD, "#99e550": PALETTE.HOOD,
"#d95763": Sprite.NOSE, "#d95763": PALETTE.NOSE,
"#f8b143": Sprite.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": Sprite.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": Sprite.WING, "#578ae6": PALETTE.WING,
"#326ed9": Sprite.WING_EDGE, "#326ed9": PALETTE.WING_EDGE,
"#c82e2e": Sprite.HEART, "#c82e2e": PALETTE.HEART,
"#501a1a": Sprite.HEART_BORDER, "#501a1a": PALETTE.HEART_BORDER,
"#ff6b6b": Sprite.HEART_SHINE, "#ff6b6b": PALETTE.HEART_SHINE,
"#373737": Sprite.FEATHER_SPINE, "#373737": PALETTE.FEATHER_SPINE,
}; };
export class BirdType { export class BirdType {
@@ -52,20 +58,20 @@ export class BirdType {
this.name = name; this.name = name;
this.description = description; this.description = description;
const defaultColors = { const defaultColors = {
[Sprite.TRANSPARENT]: "transparent", [PALETTE.TRANSPARENT]: "transparent",
[Sprite.OUTLINE]: "#000000", [PALETTE.OUTLINE]: "#000000",
[Sprite.BORDER]: "#ffffff", [PALETTE.BORDER]: "#ffffff",
[Sprite.BEAK]: "#000000", [PALETTE.BEAK]: "#000000",
[Sprite.EYE]: "#000000", [PALETTE.EYE]: "#000000",
[Sprite.HEART]: "#c82e2e", [PALETTE.HEART]: "#c82e2e",
[Sprite.HEART_BORDER]: "#501a1a", [PALETTE.HEART_BORDER]: "#501a1a",
[Sprite.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[Sprite.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[Sprite.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[Sprite.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [Sprite.THEME_HIGHLIGHT]: colors[Sprite.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
this.tags = tags; this.tags = tags;
} }
} }
@@ -74,126 +80,126 @@ export class BirdType {
export const SPECIES = { export const SPECIES = {
bluebird: new BirdType("Eastern Bluebird", bluebird: new BirdType("Eastern Bluebird",
"Native to North American and very social, though can be timid around people.", { "Native to North American and very social, though can be timid around people.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#639bff", [PALETTE.FACE]: "#639bff",
[Sprite.BELLY]: "#f8b143", [PALETTE.BELLY]: "#f8b143",
[Sprite.UNDERBELLY]: "#ec8637", [PALETTE.UNDERBELLY]: "#ec8637",
[Sprite.WING]: "#578ae6", [PALETTE.WING]: "#578ae6",
[Sprite.WING_EDGE]: "#326ed9", [PALETTE.WING_EDGE]: "#326ed9",
}), }),
shimaEnaga: new BirdType("Shima Enaga", shimaEnaga: new BirdType("Shima Enaga",
"Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", { "Small, fluffy birds found in the snowy regions of Japan, these birds are highly sought after by ornithologists and nature photographers.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffffff", [PALETTE.FACE]: "#ffffff",
[Sprite.BELLY]: "#ebe9e8", [PALETTE.BELLY]: "#ebe9e8",
[Sprite.UNDERBELLY]: "#ebd9d0", [PALETTE.UNDERBELLY]: "#ebd9d0",
[Sprite.WING]: "#f3d3c1", [PALETTE.WING]: "#f3d3c1",
[Sprite.WING_EDGE]: "#2d2d2d", [PALETTE.WING_EDGE]: "#2d2d2d",
[Sprite.THEME_HIGHLIGHT]: "#d7ac93", [PALETTE.THEME_HIGHLIGHT]: "#d7ac93",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and notably my wife's favorite bird.", { "Native to the eastern United States, full of personality, and notably my wife's favorite bird.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#c7cad7", [PALETTE.FACE]: "#c7cad7",
[Sprite.BELLY]: "#e4e5eb", [PALETTE.BELLY]: "#e4e5eb",
[Sprite.UNDERBELLY]: "#d7cfcb", [PALETTE.UNDERBELLY]: "#d7cfcb",
[Sprite.WING]: "#b1b5c5", [PALETTE.WING]: "#b1b5c5",
[Sprite.WING_EDGE]: "#9d9fa9", [PALETTE.WING_EDGE]: "#9d9fa9",
}, ["tuft"]), }, ["tuft"]),
europeanRobin: new BirdType("European Robin", europeanRobin: new BirdType("European Robin",
"Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", { "Native to western Europe, this is the quintessential robin. Quite friendly, you'll often find them searching for worms.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#ffaf34", [PALETTE.FACE]: "#ffaf34",
[Sprite.HOOD]: "#aaa094", [PALETTE.HOOD]: "#aaa094",
[Sprite.BELLY]: "#ffaf34", [PALETTE.BELLY]: "#ffaf34",
[Sprite.UNDERBELLY]: "#babec2", [PALETTE.UNDERBELLY]: "#babec2",
[Sprite.WING]: "#aaa094", [PALETTE.WING]: "#aaa094",
[Sprite.WING_EDGE]: "#888580", [PALETTE.WING_EDGE]: "#888580",
[Sprite.THEME_HIGHLIGHT]: "#ffaf34", [PALETTE.THEME_HIGHLIGHT]: "#ffaf34",
}), }),
redCardinal: new BirdType("Red Cardinal", redCardinal: new BirdType("Red Cardinal",
"Native to the eastern United States, this strikingly red bird is hard to miss.", { "Native to the eastern United States, this strikingly red bird is hard to miss.", {
[Sprite.BEAK]: "#d93619", [PALETTE.BEAK]: "#d93619",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#31353d", [PALETTE.FACE]: "#31353d",
[Sprite.HOOD]: "#e83a1b", [PALETTE.HOOD]: "#e83a1b",
[Sprite.BELLY]: "#e83a1b", [PALETTE.BELLY]: "#e83a1b",
[Sprite.UNDERBELLY]: "#dc3719", [PALETTE.UNDERBELLY]: "#dc3719",
[Sprite.WING]: "#d23215", [PALETTE.WING]: "#d23215",
[Sprite.WING_EDGE]: "#b1321c", [PALETTE.WING_EDGE]: "#b1321c",
}, ["tuft"]), }, ["tuft"]),
americanGoldfinch: new BirdType("American Goldfinch", americanGoldfinch: new BirdType("American Goldfinch",
"Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", { "Coloured a brilliant yellow, this bird feeds almost entirely on the seeds of plants such as thistle, sunflowers, and coneflowers.", {
[Sprite.BEAK]: "#ffaf34", [PALETTE.BEAK]: "#ffaf34",
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#fff255", [PALETTE.FACE]: "#fff255",
[Sprite.NOSE]: "#383838", [PALETTE.NOSE]: "#383838",
[Sprite.HOOD]: "#383838", [PALETTE.HOOD]: "#383838",
[Sprite.BELLY]: "#fff255", [PALETTE.BELLY]: "#fff255",
[Sprite.UNDERBELLY]: "#f5ea63", [PALETTE.UNDERBELLY]: "#f5ea63",
[Sprite.WING]: "#e8e079", [PALETTE.WING]: "#e8e079",
[Sprite.WING_EDGE]: "#191919", [PALETTE.WING_EDGE]: "#191919",
[Sprite.THEME_HIGHLIGHT]: "#ffcc00" [PALETTE.THEME_HIGHLIGHT]: "#ffcc00"
}), }),
barnSwallow: new BirdType("Barn Swallow", barnSwallow: new BirdType("Barn Swallow",
"Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", { "Agile birds that often roost in man-made structures, these birds are known to build nests near Ospreys for protection.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#db7c4d", [PALETTE.FACE]: "#db7c4d",
[Sprite.BELLY]: "#f7e1c9", [PALETTE.BELLY]: "#f7e1c9",
[Sprite.UNDERBELLY]: "#ebc9a3", [PALETTE.UNDERBELLY]: "#ebc9a3",
[Sprite.WING]: "#2252a9", [PALETTE.WING]: "#2252a9",
[Sprite.WING_EDGE]: "#1c448b", [PALETTE.WING_EDGE]: "#1c448b",
[Sprite.HOOD]: "#2252a9", [PALETTE.HOOD]: "#2252a9",
}), }),
mistletoebird: new BirdType("Mistletoebird", mistletoebird: new BirdType("Mistletoebird",
"Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", { "Native to Australia, these birds eat mainly mistletoe and in turn spread the seeds far and wide.", {
[Sprite.FOOT]: "#6c6a7c", [PALETTE.FOOT]: "#6c6a7c",
[Sprite.FACE]: "#352e6d", [PALETTE.FACE]: "#352e6d",
[Sprite.BELLY]: "#fd6833", [PALETTE.BELLY]: "#fd6833",
[Sprite.UNDERBELLY]: "#e6e1d8", [PALETTE.UNDERBELLY]: "#e6e1d8",
[Sprite.WING]: "#342b7c", [PALETTE.WING]: "#342b7c",
[Sprite.WING_EDGE]: "#282065", [PALETTE.WING_EDGE]: "#282065",
}), }),
redAvadavat: new BirdType("Red Avadavat", redAvadavat: new BirdType("Red Avadavat",
"Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", { "Native to India and southeast Asia, these birds are also known as Strawberry Finches due to their speckled plumage.", {
[Sprite.BEAK]: "#f71919", [PALETTE.BEAK]: "#f71919",
[Sprite.FOOT]: "#af7575", [PALETTE.FOOT]: "#af7575",
[Sprite.FACE]: "#cb092b", [PALETTE.FACE]: "#cb092b",
[Sprite.BELLY]: "#ae1724", [PALETTE.BELLY]: "#ae1724",
[Sprite.UNDERBELLY]: "#831b24", [PALETTE.UNDERBELLY]: "#831b24",
[Sprite.WING]: "#7e3030", [PALETTE.WING]: "#7e3030",
[Sprite.WING_EDGE]: "#490f0f", [PALETTE.WING_EDGE]: "#490f0f",
}), }),
scarletRobin: new BirdType("Scarlet Robin", scarletRobin: new BirdType("Scarlet Robin",
"Native to Australia, this striking robin can be found in Eucalyptus forests.", { "Native to Australia, this striking robin can be found in Eucalyptus forests.", {
[Sprite.FOOT]: "#494949", [PALETTE.FOOT]: "#494949",
[Sprite.FACE]: "#3d3d3d", [PALETTE.FACE]: "#3d3d3d",
[Sprite.BELLY]: "#fc5633", [PALETTE.BELLY]: "#fc5633",
[Sprite.UNDERBELLY]: "#dcdcdc", [PALETTE.UNDERBELLY]: "#dcdcdc",
[Sprite.WING]: "#2b2b2b", [PALETTE.WING]: "#2b2b2b",
[Sprite.WING_EDGE]: "#ebebeb", [PALETTE.WING_EDGE]: "#ebebeb",
[Sprite.THEME_HIGHLIGHT]: "#fc5633", [PALETTE.THEME_HIGHLIGHT]: "#fc5633",
}), }),
americanRobin: new BirdType("American Robin", americanRobin: new BirdType("American Robin",
"While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", { "While not a true robin, this social North American bird is so named due to its orange coloring. It seems unbothered by nearby humans.", {
[Sprite.BEAK]: "#e89f30", [PALETTE.BEAK]: "#e89f30",
[Sprite.FOOT]: "#9f8075", [PALETTE.FOOT]: "#9f8075",
[Sprite.FACE]: "#2d2d2d", [PALETTE.FACE]: "#2d2d2d",
[Sprite.BELLY]: "#eb7a3a", [PALETTE.BELLY]: "#eb7a3a",
[Sprite.UNDERBELLY]: "#eb7a3a", [PALETTE.UNDERBELLY]: "#eb7a3a",
[Sprite.WING]: "#444444", [PALETTE.WING]: "#444444",
[Sprite.WING_EDGE]: "#232323", [PALETTE.WING_EDGE]: "#232323",
[Sprite.THEME_HIGHLIGHT]: "#eb7a3a", [PALETTE.THEME_HIGHLIGHT]: "#eb7a3a",
}), }),
carolinaWren: new BirdType("Carolina Wren", carolinaWren: new BirdType("Carolina Wren",
"Native to the eastern United States, these little birds are known for their curious and energetic nature.", { "Native to the eastern United States, these little birds are known for their curious and energetic nature.", {
[Sprite.FOOT]: "#af8e75", [PALETTE.FOOT]: "#af8e75",
[Sprite.FACE]: "#edc7a9", [PALETTE.FACE]: "#edc7a9",
[Sprite.NOSE]: "#f7eee5", [PALETTE.NOSE]: "#f7eee5",
[Sprite.HOOD]: "#c58a5b", [PALETTE.HOOD]: "#c58a5b",
[Sprite.BELLY]: "#e1b796", [PALETTE.BELLY]: "#e1b796",
[Sprite.UNDERBELLY]: "#c79e7c", [PALETTE.UNDERBELLY]: "#c79e7c",
[Sprite.WING]: "#c58a5b", [PALETTE.WING]: "#c58a5b",
[Sprite.WING_EDGE]: "#866348", [PALETTE.WING_EDGE]: "#866348",
}), }),
}; };

8
src/application.js
View File

@@ -23,7 +23,7 @@ import {
getWindowHeight getWindowHeight
} from './shared.js'; } from './shared.js';
import { import {
Sprite, PALETTE,
SPRITE_SHEET_COLOR_MAP, SPRITE_SHEET_COLOR_MAP,
SPECIES SPECIES
} from './animation/sprites.js'; } from './animation/sprites.js';
@@ -730,7 +730,7 @@ function startApplication(birbPixels, featherPixels) {
function switchSpecies(type) { function switchSpecies(type) {
currentSpecies = type; currentSpecies = type;
// Update CSS variable --birb-highlight to be wing color // Update CSS variable --birb-highlight to be wing color
document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[Sprite.THEME_HIGHLIGHT]); document.documentElement.style.setProperty("--birb-highlight", SPECIES[type].colors[PALETTE.THEME_HIGHLIGHT]);
save(); save();
} }
@@ -1012,7 +1012,7 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
const b = pixels[index + 2]; const b = pixels[index + 2];
const a = pixels[index + 3]; const a = pixels[index + 3];
if (a === 0) { if (a === 0) {
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
continue; continue;
} }
const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
@@ -1022,7 +1022,7 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
} }
if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) { if (SPRITE_SHEET_COLOR_MAP[hex] === undefined) {
error(`Unknown color: ${hex}`); error(`Unknown color: ${hex}`);
row.push(Sprite.TRANSPARENT); row.push(PALETTE.TRANSPARENT);
} }
row.push(SPRITE_SHEET_COLOR_MAP[hex]); row.push(SPRITE_SHEET_COLOR_MAP[hex]);
} }