diff --git a/dist/extension.zip b/dist/extension.zip index 1a42835..f2be9ad 100644 Binary files a/dist/extension.zip and b/dist/extension.zip differ diff --git a/dist/extension/birb.js b/dist/extension/birb.js index a14bea5..c9a916b 100644 --- a/dist/extension/birb.js +++ b/dist/extension/birb.js @@ -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} */ 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} */ function loadSpriteSheetPixels(src, templateColors = true) { diff --git a/dist/obsidian/main.js b/dist/obsidian/main.js index 42fd14c..90c4f97 100644 --- a/dist/obsidian/main.js +++ b/dist/obsidian/main.js @@ -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} */ 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} */ function loadSpriteSheetPixels(src, templateColors = true) { diff --git a/dist/userscript/birb.user.js b/dist/userscript/birb.user.js index c3db689..7f66563 100644 --- a/dist/userscript/birb.user.js +++ b/dist/userscript/birb.user.js @@ -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} */ 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} */ function loadSpriteSheetPixels(src, templateColors = true) { diff --git a/dist/web/birb.embed.js b/dist/web/birb.embed.js index ed74e5e..fc0ff33 100644 --- a/dist/web/birb.embed.js +++ b/dist/web/birb.embed.js @@ -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} */ 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} */ function loadSpriteSheetPixels(src, templateColors = true) { diff --git a/dist/web/birb.js b/dist/web/birb.js index ed74e5e..fc0ff33 100644 --- a/dist/web/birb.js +++ b/dist/web/birb.js @@ -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} */ 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} */ function loadSpriteSheetPixels(src, templateColors = true) { diff --git a/editor/editor.js b/editor/editor.js index 4a2c870..db9e28b 100644 --- a/editor/editor.js +++ b/editor/editor.js @@ -16,7 +16,9 @@ const AVAILABLE_TAGS = [ /** @type {Record} */ 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"); diff --git a/editor/stylesheet.css b/editor/stylesheet.css index 9a015ac..60e1c20 100644 --- a/editor/stylesheet.css +++ b/editor/stylesheet.css @@ -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; } \ No newline at end of file diff --git a/sprites/birb.png b/sprites/birb.png index 9c87790..53dd4ef 100644 Binary files a/sprites/birb.png and b/sprites/birb.png differ diff --git a/src/animation/sprites.js b/src/animation/sprites.js index 560b002..e13e5f8 100644 --- a/src/animation/sprites.js +++ b/src/animation/sprites.js @@ -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} */ 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} */ export function loadSpriteSheetPixels(src, templateColors = true) {