noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-24 19:59:36 +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",
FACE: "face",
HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly",
UNDERBELLY: "underbelly",
WING: "wing",
@@ -431,7 +433,9 @@
"#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING,
@@ -463,7 +467,9 @@
[PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
};
/** @type {Record<string, string>} */
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
* @param {string} src - URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names
* @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>}
*/
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",
FACE: "face",
HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly",
UNDERBELLY: "underbelly",
WING: "wing",
@@ -436,7 +438,9 @@ module.exports = class PocketBird extends Plugin {
"#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING,
@@ -468,7 +472,9 @@ module.exports = class PocketBird extends Plugin {
[PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
};
/** @type {Record<string, string>} */
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
* @param {string} src - URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names
* @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>}
*/
function loadSpriteSheetPixels(src, templateColors = true) {

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

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

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

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

10
dist/web/birb.js vendored
View File

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

20
editor/editor.js
View File

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

26
editor/stylesheet.css
View File

@@ -46,14 +46,15 @@ body {
background: #ffffff;
border-radius: 16px;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
padding: 20px;
padding: 40px 50px;
display: flex;
flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
gap: 30px 20px;
column-count: 2;
overflow-y: scroll;
}
#json {
@@ -107,7 +108,7 @@ body {
cursor: default;
}
#coloris-proxy {
#color-picker-interceptor {
position: fixed;
width: 1px;
height: 1px;
@@ -117,27 +118,17 @@ body {
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 {
width: 32px;
height: 32px;
border-radius: 4px;
border: none;
background: #edf0f4;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background: #f1f1f1;
cursor: pointer;
font-size: 16px;
color: transparent;
transition: background 0.15s, color 0.15s, transform 0.1s;
border: 3px solid #dadada;
}
.tag-toggle:hover {
@@ -146,6 +137,7 @@ body {
}
.tag-toggle--active {
background: #639bff;
background: #34c85a;
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",
FACE: "face",
HOOD: "hood",
EYEBROW: "eyebrow",
NOSE: "nose",
CHEEK: "cheek",
BELLY: "belly",
UNDERBELLY: "underbelly",
WING: "wing",
@@ -39,7 +41,9 @@ export const SPRITE_SHEET_COLOR_MAP = {
"#af8e75": PALETTE.FOOT,
"#639bff": PALETTE.FACE,
"#99e550": PALETTE.HOOD,
"#ff5573": PALETTE.EYEBROW,
"#d95763": PALETTE.NOSE,
"#ff67a9": PALETTE.CHEEK,
"#f8b143": PALETTE.BELLY,
"#ec8637": PALETTE.UNDERBELLY,
"#578ae6": PALETTE.WING,
@@ -71,7 +75,9 @@ export class BirdType {
[PALETTE.HEART_SHINE]: "#ff6b6b",
[PALETTE.FEATHER_SPINE]: "#373737",
[PALETTE.HOOD]: colors.face,
[PALETTE.EYEBROW]: colors.face,
[PALETTE.NOSE]: colors.face,
[PALETTE.CHEEK]: colors.face,
};
/** @type {Record<string, string>} */
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
* @param {string} src - URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] - Whether to map pixel colors to palette names
* @param {string} src URL or data URI of the sprite sheet image
* @param {boolean} [templateColors] Whether to map pixel colors to palette names
* @returns {Promise<string[][]>}
*/
export function loadSpriteSheetPixels(src, templateColors = true) {