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

Add other palette items and toggles

Browse Source
This commit is contained in:
Idrees Hassan
2026-03-11 15:46:38 -07:00
parent a2dea8a17d
commit 80bcf60a07
10 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/extension.zip vendored
View File

Binary file not shown.

10
dist/extension/birb.js vendored
View File

@@ -406,7 +406,9 @@
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -431,7 +433,9 @@
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -463,7 +467,9 @@
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -473,8 +479,8 @@
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
function loadSpriteSheetPixels(src, templateColors = true) { function loadSpriteSheetPixels(src, templateColors = true) {

10
dist/obsidian/main.js vendored
View File

@@ -411,7 +411,9 @@ module.exports = class PocketBird extends Plugin {
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -436,7 +438,9 @@ module.exports = class PocketBird extends Plugin {
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -468,7 +472,9 @@ module.exports = class PocketBird extends Plugin {
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -478,8 +484,8 @@ module.exports = class PocketBird extends Plugin {
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
function loadSpriteSheetPixels(src, templateColors = true) { function loadSpriteSheetPixels(src, templateColors = true) {

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

@@ -420,7 +420,9 @@
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -445,7 +447,9 @@
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -477,7 +481,9 @@
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -487,8 +493,8 @@
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
function loadSpriteSheetPixels(src, templateColors = true) { function loadSpriteSheetPixels(src, templateColors = true) {

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

@@ -406,7 +406,9 @@
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -431,7 +433,9 @@
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -463,7 +467,9 @@
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -473,8 +479,8 @@
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
function loadSpriteSheetPixels(src, templateColors = true) { function loadSpriteSheetPixels(src, templateColors = true) {

10
dist/web/birb.js vendored
View File

@@ -406,7 +406,9 @@
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -431,7 +433,9 @@
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -463,7 +467,9 @@
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -473,8 +479,8 @@
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
function loadSpriteSheetPixels(src, templateColors = true) { function loadSpriteSheetPixels(src, templateColors = true) {

20
editor/editor.js
View File

@@ -16,7 +16,9 @@ const AVAILABLE_TAGS = [
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
const DEFAULT_OVERRIDES = { const DEFAULT_OVERRIDES = {
"hood": "face", "hood": "face",
"nose": "face" "eyebrow": "face",
"nose": "face",
"cheek": "face",
}; };
const IGNORED_PARTS = new Set( const IGNORED_PARTS = new Set(
["transparent", "border", "heart", "heart-border", "heart-shine", "feather-spine"] ["transparent", "border", "heart", "heart-border", "heart-shine", "feather-spine"]
@@ -126,12 +128,12 @@ function loadEditor() {
if (IGNORED_PARTS.has(part)) { if (IGNORED_PARTS.has(part)) {
continue; continue;
} }
const item = createColorItem(part, getColor(part) || color); const item = createColorSwatch(part, getColor(part) || color);
editor.appendChild(item); editor.appendChild(item);
} }
// for (const { tag, label } of AVAILABLE_TAGS) { for (const { tag, label } of AVAILABLE_TAGS) {
// editor.appendChild(createTagItem(tag, label)); editor.appendChild(createTagToggle(tag, label));
// } }
} }
/** /**
@@ -155,7 +157,7 @@ function getColor(part) {
function createColorPicker() { function createColorPicker() {
colorPickerInput.type = "text"; colorPickerInput.type = "text";
colorPickerInput.id = "coloris-proxy"; colorPickerInput.id = "color-picker-interceptor";
colorPickerInput.setAttribute("data-coloris", ""); colorPickerInput.setAttribute("data-coloris", "");
document.body.appendChild(colorPickerInput); document.body.appendChild(colorPickerInput);
@@ -180,7 +182,7 @@ function createColorPicker() {
* @param {string} color * @param {string} color
* @returns {HTMLDivElement} * @returns {HTMLDivElement}
*/ */
function createColorItem(label, color) { function createColorSwatch(label, color) {
const item = document.createElement("div"); const item = document.createElement("div");
item.classList.add("editor-item"); item.classList.add("editor-item");
@@ -224,9 +226,9 @@ function createColorItem(label, color) {
* @param {string} label * @param {string} label
* @returns {HTMLDivElement} * @returns {HTMLDivElement}
*/ */
function createTagItem(tag, label) { function createTagToggle(tag, label) {
const item = document.createElement("div"); const item = document.createElement("div");
item.classList.add("tag-item"); item.classList.add("editor-item");
const toggle = document.createElement("button"); const toggle = document.createElement("button");
toggle.classList.add("tag-toggle"); toggle.classList.add("tag-toggle");

26
editor/stylesheet.css
View File

@@ -46,14 +46,15 @@ body {
background: #ffffff; background: #ffffff;
border-radius: 16px; border-radius: 16px;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
padding: 20px; padding: 40px 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
gap: 30px 20px; gap: 30px 20px;
column-count: 2; column-count: 2;
overflow-y: scroll;
} }
#json { #json {
@@ -107,7 +108,7 @@ body {
cursor: default; cursor: default;
} }
#coloris-proxy { #color-picker-interceptor {
position: fixed; position: fixed;
width: 1px; width: 1px;
height: 1px; height: 1px;
@@ -117,27 +118,17 @@ body {
pointer-events: none; pointer-events: none;
} }
.tag-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
height: 38px;
margin-top: 10px;
}
.tag-toggle { .tag-toggle {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 4px; border-radius: 4px;
border: none; border: none;
background: #edf0f4; background: #f1f1f1;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
color: transparent; color: transparent;
transition: background 0.15s, color 0.15s, transform 0.1s; transition: background 0.15s, color 0.15s, transform 0.1s;
border: 3px solid #dadada;
} }
.tag-toggle:hover { .tag-toggle:hover {
@@ -146,6 +137,7 @@ body {
} }
.tag-toggle--active { .tag-toggle--active {
background: #639bff; background: #34c85a;
color: white; color: white;
border: 0;
} }

BIN
sprites/birb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

10
src/animation/sprites.js
View File

@@ -14,7 +14,9 @@ export const PALETTE = {
EYE: "eye", EYE: "eye",
FACE: "face", FACE: "face",
HOOD: "hood", HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose", NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly", BELLY: "belly",
UNDERBELLY: "underbelly", UNDERBELLY: "underbelly",
WING: "wing", WING: "wing",
@@ -39,7 +41,9 @@ export const SPRITE_SHEET_COLOR_MAP = {
"#af8e75": PALETTE.FOOT, "#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE, "#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD, "#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE, "#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY, "#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY, "#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING, "#578ae6": PALETTE.WING,
@@ -71,7 +75,9 @@ export class BirdType {
[PALETTE.HEART_SHINE]: "#ff6b6b", [PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737", [PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face, [PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face, [PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
}; };
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face }; this.colors = { ...defaultColors, ...colors, [PALETTE.THEME_HIGHLIGHT]: colors[PALETTE.THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
@@ -81,8 +87,8 @@ export class BirdType {
/** /**
* Load a sprite sheet image and convert it to a 2D array of palette color names * Load a sprite sheet image and convert it to a 2D array of palette color names
* @param {string} src - URL or data URI of the sprite sheet image * @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names * @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>} * @returns {Promise<string[][]>}
*/ */
export function loadSpriteSheetPixels(src, templateColors = true) { export function loadSpriteSheetPixels(src, templateColors = true) {