UNPKG

pixel-avatar-lib

Version:

A React component library for generating customizable pixel avatars with DNA encoding system

github.com/snjyor/pixel_avator

snjyor/pixel_avator

1,404 lines (1,398 loc) • 37.7 kB

JavaScript

"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var index_exports = {}; __export(index_exports, { PixelAvatar: () => PixelAvatar, formatDNA: () => formatDNA, generateRandomDNA: () => generateRandomDNA, generateRandomDNAString: () => generateRandomDNAString, isValidDNA: () => isValidDNA, parseDNA: () => parseDNA }); module.exports = __toCommonJS(index_exports); // src/components/pixel-avatar.tsx var import_react = require("react"); // src/data/character-parts.ts var characterParts = { // Hair styles hair: { variants: [ // Style 1: Short hair [ [12, 5, "#513B2F"], [13, 5, "#513B2F"], [14, 5, "#513B2F"], [15, 5, "#513B2F"], [16, 5, "#513B2F"], [17, 5, "#513B2F"], [18, 5, "#513B2F"], [19, 5, "#513B2F"], [11, 6, "#513B2F"], [12, 6, "#513B2F"], [13, 6, "#513B2F"], [14, 6, "#513B2F"], [15, 6, "#513B2F"], [16, 6, "#513B2F"], [17, 6, "#513B2F"], [18, 6, "#513B2F"], [19, 6, "#513B2F"], [20, 6, "#513B2F"], [11, 7, "#513B2F"], [12, 7, "#513B2F"], [19, 7, "#513B2F"], [20, 7, "#513B2F"], [11, 8, "#513B2F"], [20, 8, "#513B2F"], [11, 9, "#513B2F"], [20, 9, "#513B2F"] ], // Style 2: Long hair [ [12, 5, "#FFCC00"], [13, 5, "#FFCC00"], [14, 5, "#FFCC00"], [15, 5, "#FFCC00"], [16, 5, "#FFCC00"], [17, 5, "#FFCC00"], [18, 5, "#FFCC00"], [19, 5, "#FFCC00"], [11, 6, "#FFCC00"], [12, 6, "#FFCC00"], [13, 6, "#FFCC00"], [14, 6, "#FFCC00"], [15, 6, "#FFCC00"], [16, 6, "#FFCC00"], [17, 6, "#FFCC00"], [18, 6, "#FFCC00"], [19, 6, "#FFCC00"], [20, 6, "#FFCC00"], [11, 7, "#FFCC00"], [12, 7, "#FFCC00"], [19, 7, "#FFCC00"], [20, 7, "#FFCC00"], [11, 8, "#FFCC00"], [20, 8, "#FFCC00"], [11, 9, "#FFCC00"], [20, 9, "#FFCC00"], [11, 10, "#FFCC00"], [20, 10, "#FFCC00"], [11, 11, "#FFCC00"], [20, 11, "#FFCC00"], [11, 12, "#FFCC00"], [20, 12, "#FFCC00"], [11, 13, "#FFCC00"], [12, 13, "#FFCC00"], [19, 13, "#FFCC00"], [20, 13, "#FFCC00"] ], // Style 3: Spiky hair [ [11, 4, "#6D3B00"], [13, 4, "#6D3B00"], [15, 4, "#6D3B00"], [17, 4, "#6D3B00"], [19, 4, "#6D3B00"], [12, 5, "#6D3B00"], [13, 5, "#6D3B00"], [14, 5, "#6D3B00"], [15, 5, "#6D3B00"], [16, 5, "#6D3B00"], [17, 5, "#6D3B00"], [18, 5, "#6D3B00"], [19, 5, "#6D3B00"], [11, 6, "#6D3B00"], [12, 6, "#6D3B00"], [13, 6, "#6D3B00"], [14, 6, "#6D3B00"], [15, 6, "#6D3B00"], [16, 6, "#6D3B00"], [17, 6, "#6D3B00"], [18, 6, "#6D3B00"], [19, 6, "#6D3B00"], [20, 6, "#6D3B00"], [11, 7, "#6D3B00"], [12, 7, "#6D3B00"], [19, 7, "#6D3B00"], [20, 7, "#6D3B00"], [11, 8, "#6D3B00"], [20, 8, "#6D3B00"] ], // Style 4: Bald with headband [ [12, 5, "#FF0000"], [13, 5, "#FF0000"], [14, 5, "#FF0000"], [15, 5, "#FF0000"], [16, 5, "#FF0000"], [17, 5, "#FF0000"], [18, 5, "#FF0000"], [19, 5, "#FF0000"], [11, 6, "#FF0000"], [12, 6, "#FF0000"], [13, 6, "#FF0000"], [14, 6, "#FF0000"], [15, 6, "#FF0000"], [16, 6, "#FF0000"], [17, 6, "#FF0000"], [18, 6, "#FF0000"], [19, 6, "#FF0000"], [20, 6, "#FF0000"], [11, 7, "#FFC8A0"], [12, 7, "#FFC8A0"], [19, 7, "#FFC8A0"], [20, 7, "#FFC8A0"], [11, 8, "#FFC8A0"], [20, 8, "#FFC8A0"] ], // Style 5: Mohawk [ [15, 3, "#00FF00"], [16, 3, "#00FF00"], [15, 4, "#00FF00"], [16, 4, "#00FF00"], [12, 5, "#FFC8A0"], [13, 5, "#FFC8A0"], [14, 5, "#FFC8A0"], [15, 5, "#00FF00"], [16, 5, "#00FF00"], [17, 5, "#FFC8A0"], [18, 5, "#FFC8A0"], [19, 5, "#FFC8A0"], [11, 6, "#FFC8A0"], [12, 6, "#FFC8A0"], [13, 6, "#FFC8A0"], [14, 6, "#FFC8A0"], [15, 6, "#00FF00"], [16, 6, "#00FF00"], [17, 6, "#FFC8A0"], [18, 6, "#FFC8A0"], [19, 6, "#FFC8A0"], [20, 6, "#FFC8A0"], [11, 7, "#FFC8A0"], [12, 7, "#FFC8A0"], [19, 7, "#FFC8A0"], [20, 7, "#FFC8A0"], [11, 8, "#FFC8A0"], [20, 8, "#FFC8A0"] ], // Style 6: Curly hair [ [12, 4, "#8B4513"], [13, 4, "#8B4513"], [14, 4, "#8B4513"], [15, 4, "#8B4513"], [16, 4, "#8B4513"], [17, 4, "#8B4513"], [18, 4, "#8B4513"], [19, 4, "#8B4513"], [11, 5, "#8B4513"], [12, 5, "#8B4513"], [13, 5, "#8B4513"], [14, 5, "#8B4513"], [15, 5, "#8B4513"], [16, 5, "#8B4513"], [17, 5, "#8B4513"], [18, 5, "#8B4513"], [19, 5, "#8B4513"], [20, 5, "#8B4513"], [10, 6, "#8B4513"], [11, 6, "#8B4513"], [12, 6, "#8B4513"], [13, 6, "#8B4513"], [14, 6, "#8B4513"], [15, 6, "#8B4513"], [16, 6, "#8B4513"], [17, 6, "#8B4513"], [18, 6, "#8B4513"], [19, 6, "#8B4513"], [20, 6, "#8B4513"], [21, 6, "#8B4513"], [10, 7, "#8B4513"], [11, 7, "#8B4513"], [12, 7, "#8B4513"], [20, 7, "#8B4513"], [21, 7, "#8B4513"], [10, 8, "#8B4513"], [11, 8, "#8B4513"], [20, 8, "#8B4513"], [21, 8, "#8B4513"], [10, 9, "#8B4513"], [21, 9, "#8B4513"], [10, 10, "#8B4513"], [21, 10, "#8B4513"] ], // Style 7: Ponytail [ [12, 5, "#FF69B4"], [13, 5, "#FF69B4"], [14, 5, "#FF69B4"], [15, 5, "#FF69B4"], [16, 5, "#FF69B4"], [17, 5, "#FF69B4"], [18, 5, "#FF69B4"], [19, 5, "#FF69B4"], [11, 6, "#FF69B4"], [12, 6, "#FF69B4"], [13, 6, "#FF69B4"], [14, 6, "#FF69B4"], [15, 6, "#FF69B4"], [16, 6, "#FF69B4"], [17, 6, "#FF69B4"], [18, 6, "#FF69B4"], [19, 6, "#FF69B4"], [20, 6, "#FF69B4"], [11, 7, "#FF69B4"], [12, 7, "#FF69B4"], [19, 7, "#FF69B4"], [20, 7, "#FF69B4"], [11, 8, "#FF69B4"], [20, 8, "#FF69B4"], [21, 8, "#FF69B4"], [22, 8, "#FF69B4"], [21, 9, "#FF69B4"], [22, 9, "#FF69B4"], [21, 10, "#FF69B4"], [22, 10, "#FF69B4"], [21, 11, "#FF69B4"], [22, 11, "#FF69B4"], [21, 12, "#FF69B4"], [22, 12, "#FF69B4"] ], // Style 8: Afro [ [10, 3, "#2F1B14"], [11, 3, "#2F1B14"], [12, 3, "#2F1B14"], [13, 3, "#2F1B14"], [14, 3, "#2F1B14"], [15, 3, "#2F1B14"], [16, 3, "#2F1B14"], [17, 3, "#2F1B14"], [18, 3, "#2F1B14"], [19, 3, "#2F1B14"], [20, 3, "#2F1B14"], [21, 3, "#2F1B14"], [9, 4, "#2F1B14"], [10, 4, "#2F1B14"], [11, 4, "#2F1B14"], [12, 4, "#2F1B14"], [13, 4, "#2F1B14"], [14, 4, "#2F1B14"], [15, 4, "#2F1B14"], [16, 4, "#2F1B14"], [17, 4, "#2F1B14"], [18, 4, "#2F1B14"], [19, 4, "#2F1B14"], [20, 4, "#2F1B14"], [21, 4, "#2F1B14"], [22, 4, "#2F1B14"], [9, 5, "#2F1B14"], [10, 5, "#2F1B14"], [11, 5, "#2F1B14"], [12, 5, "#2F1B14"], [13, 5, "#2F1B14"], [14, 5, "#2F1B14"], [15, 5, "#2F1B14"], [16, 5, "#2F1B14"], [17, 5, "#2F1B14"], [18, 5, "#2F1B14"], [19, 5, "#2F1B14"], [20, 5, "#2F1B14"], [21, 5, "#2F1B14"], [22, 5, "#2F1B14"], [9, 6, "#2F1B14"], [10, 6, "#2F1B14"], [11, 6, "#2F1B14"], [12, 6, "#2F1B14"], [19, 6, "#2F1B14"], [20, 6, "#2F1B14"], [21, 6, "#2F1B14"], [22, 6, "#2F1B14"], [9, 7, "#2F1B14"], [10, 7, "#2F1B14"], [11, 7, "#2F1B14"], [20, 7, "#2F1B14"], [21, 7, "#2F1B14"], [22, 7, "#2F1B14"] ], // Style 9: Dreadlocks [ [11, 5, "#654321"], [12, 5, "#654321"], [14, 5, "#654321"], [15, 5, "#654321"], [17, 5, "#654321"], [18, 5, "#654321"], [20, 5, "#654321"], [11, 6, "#654321"], [12, 6, "#654321"], [14, 6, "#654321"], [15, 6, "#654321"], [17, 6, "#654321"], [18, 6, "#654321"], [20, 6, "#654321"], [11, 7, "#654321"], [12, 7, "#654321"], [14, 7, "#654321"], [15, 7, "#654321"], [17, 7, "#654321"], [18, 7, "#654321"], [20, 7, "#654321"], [11, 8, "#654321"], [12, 8, "#654321"], [14, 8, "#654321"], [15, 8, "#654321"], [17, 8, "#654321"], [18, 8, "#654321"], [20, 8, "#654321"], [11, 9, "#654321"], [12, 9, "#654321"], [14, 9, "#654321"], [15, 9, "#654321"], [17, 9, "#654321"], [18, 9, "#654321"], [20, 9, "#654321"], [11, 10, "#654321"], [12, 10, "#654321"], [14, 10, "#654321"], [15, 10, "#654321"], [17, 10, "#654321"], [18, 10, "#654321"], [20, 10, "#654321"], [11, 11, "#654321"], [12, 11, "#654321"], [14, 11, "#654321"], [15, 11, "#654321"], [17, 11, "#654321"], [18, 11, "#654321"], [20, 11, "#654321"] ], // Style 10: Buzz cut [ [12, 5, "#8B7355"], [13, 5, "#8B7355"], [14, 5, "#8B7355"], [15, 5, "#8B7355"], [16, 5, "#8B7355"], [17, 5, "#8B7355"], [18, 5, "#8B7355"], [19, 5, "#8B7355"], [11, 6, "#8B7355"], [12, 6, "#8B7355"], [13, 6, "#8B7355"], [14, 6, "#8B7355"], [15, 6, "#8B7355"], [16, 6, "#8B7355"], [17, 6, "#8B7355"], [18, 6, "#8B7355"], [19, 6, "#8B7355"], [20, 6, "#8B7355"], [11, 7, "#8B7355"], [12, 7, "#8B7355"], [19, 7, "#8B7355"], [20, 7, "#8B7355"], [11, 8, "#8B7355"], [20, 8, "#8B7355"] ] ] }, // Face styles face: { variants: [ // Style 1: Simple face [ [13, 8, "#000000"], [18, 8, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [14, 11, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"], [17, 11, "#000000"] ], // Style 2: Smiling face [ [13, 8, "#000000"], [18, 8, "#000000"], [14, 11, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [17, 11, "#000000"] ], // Style 3: Surprised face [ [13, 8, "#000000"], [18, 8, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"] ], // Style 4: Angry face [ [13, 7, "#000000"], [14, 8, "#000000"], [17, 8, "#000000"], [18, 7, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [14, 12, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"], [17, 12, "#000000"] ], // Style 5: Cool face with sunglasses [ [12, 8, "#000000"], [13, 8, "#000000"], [14, 8, "#000000"], [17, 8, "#000000"], [18, 8, "#000000"], [19, 8, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"] ], // Style 6: Winking face [ [13, 8, "#000000"], [14, 8, "#000000"], [17, 8, "#000000"], [18, 8, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [14, 11, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"], [17, 11, "#000000"] ], // Style 7: Sleepy face [ [13, 8, "#000000"], [14, 8, "#000000"], [17, 8, "#000000"], [18, 8, "#000000"], [13, 9, "#000000"], [14, 9, "#000000"], [17, 9, "#000000"], [18, 9, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"] ], // Style 8: Crying face [ [13, 8, "#000000"], [18, 8, "#000000"], [13, 9, "#0000FF"], [18, 9, "#0000FF"], [13, 10, "#0000FF"], [18, 10, "#0000FF"], [14, 12, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"], [17, 12, "#000000"] ], // Style 9: Laughing face [ [13, 8, "#000000"], [18, 8, "#000000"], [12, 9, "#000000"], [13, 9, "#000000"], [18, 9, "#000000"], [19, 9, "#000000"], [13, 11, "#000000"], [14, 10, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [17, 10, "#000000"], [18, 11, "#000000"] ], // Style 10: Masked face [ [12, 9, "#000000"], [13, 9, "#000000"], [14, 9, "#000000"], [15, 9, "#000000"], [16, 9, "#000000"], [17, 9, "#000000"], [18, 9, "#000000"], [19, 9, "#000000"], [12, 10, "#000000"], [13, 10, "#000000"], [14, 10, "#000000"], [15, 10, "#000000"], [16, 10, "#000000"], [17, 10, "#000000"], [18, 10, "#000000"], [19, 10, "#000000"], [12, 11, "#000000"], [13, 11, "#000000"], [14, 11, "#000000"], [15, 11, "#000000"], [16, 11, "#000000"], [17, 11, "#000000"], [18, 11, "#000000"], [19, 11, "#000000"] ] ] }, // Neck styles neck: { variants: [ // Style 1: Simple neck [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"] ], // Style 2: Neck with collar [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [13, 14, "#FFFFFF"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"], [18, 14, "#FFFFFF"] ], // Style 3: Neck with bowtie [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [14, 14, "#FFC8A0"], [15, 14, "#FF0000"], [16, 14, "#FF0000"], [17, 14, "#FFC8A0"] ], // Style 4: Neck with necklace [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"], [15, 15, "#FFFF00"], [16, 15, "#FFFF00"] ], // Style 5: Neck with scarf [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [13, 14, "#0000FF"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"], [18, 14, "#0000FF"], [13, 15, "#0000FF"], [18, 15, "#0000FF"] ], // Style 6: Neck with chain [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"], [13, 15, "#C0C0C0"], [14, 15, "#C0C0C0"], [15, 15, "#C0C0C0"], [16, 15, "#C0C0C0"], [17, 15, "#C0C0C0"], [18, 15, "#C0C0C0"] ], // Style 7: Neck with tattoo [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [14, 14, "#FFC8A0"], [15, 14, "#000000"], [16, 14, "#000000"], [17, 14, "#FFC8A0"], [15, 15, "#000000"], [16, 15, "#000000"] ], // Style 8: Neck with bandana [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [13, 14, "#FF0000"], [14, 14, "#FF0000"], [15, 14, "#FF0000"], [16, 14, "#FF0000"], [17, 14, "#FF0000"], [18, 14, "#FF0000"], [12, 15, "#FF0000"], [13, 15, "#FF0000"], [18, 15, "#FF0000"], [19, 15, "#FF0000"] ], // Style 9: Neck with choker [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [13, 14, "#000000"], [14, 14, "#FFC8A0"], [15, 14, "#FFC8A0"], [16, 14, "#FFC8A0"], [17, 14, "#FFC8A0"], [18, 14, "#000000"] ], // Style 10: Neck with high collar [ [14, 13, "#FFC8A0"], [15, 13, "#FFC8A0"], [16, 13, "#FFC8A0"], [17, 13, "#FFC8A0"], [13, 14, "#FFFFFF"], [14, 14, "#FFFFFF"], [15, 14, "#FFFFFF"], [16, 14, "#FFFFFF"], [17, 14, "#FFFFFF"], [18, 14, "#FFFFFF"], [13, 15, "#FFFFFF"], [14, 15, "#FFFFFF"], [17, 15, "#FFFFFF"], [18, 15, "#FFFFFF"] ] ] }, // Clothing styles clothing: { variants: [ // Style 1: T-shirt [ [12, 15, "#3366CC"], [13, 15, "#3366CC"], [14, 15, "#3366CC"], [15, 15, "#3366CC"], [16, 15, "#3366CC"], [17, 15, "#3366CC"], [18, 15, "#3366CC"], [19, 15, "#3366CC"], [11, 16, "#3366CC"], [12, 16, "#3366CC"], [13, 16, "#3366CC"], [14, 16, "#3366CC"], [15, 16, "#3366CC"], [16, 16, "#3366CC"], [17, 16, "#3366CC"], [18, 16, "#3366CC"], [19, 16, "#3366CC"], [20, 16, "#3366CC"], [11, 17, "#3366CC"], [12, 17, "#3366CC"], [13, 17, "#3366CC"], [14, 17, "#3366CC"], [15, 17, "#3366CC"], [16, 17, "#3366CC"], [17, 17, "#3366CC"], [18, 17, "#3366CC"], [19, 17, "#3366CC"], [20, 17, "#3366CC"], [11, 18, "#3366CC"], [12, 18, "#3366CC"], [19, 18, "#3366CC"], [20, 18, "#3366CC"] ], // Style 2: Hoodie [ [12, 15, "#CC3366"], [13, 15, "#CC3366"], [14, 15, "#CC3366"], [15, 15, "#CC3366"], [16, 15, "#CC3366"], [17, 15, "#CC3366"], [18, 15, "#CC3366"], [19, 15, "#CC3366"], [11, 16, "#CC3366"], [12, 16, "#CC3366"], [13, 16, "#CC3366"], [14, 16, "#CC3366"], [15, 16, "#CC3366"], [16, 16, "#CC3366"], [17, 16, "#CC3366"], [18, 16, "#CC3366"], [19, 16, "#CC3366"], [20, 16, "#CC3366"], [11, 17, "#CC3366"], [12, 17, "#CC3366"], [13, 17, "#CC3366"], [14, 17, "#CC3366"], [15, 17, "#CC3366"], [16, 17, "#CC3366"], [17, 17, "#CC3366"], [18, 17, "#CC3366"], [19, 17, "#CC3366"], [20, 17, "#CC3366"], [11, 18, "#CC3366"], [12, 18, "#CC3366"], [19, 18, "#CC3366"], [20, 18, "#CC3366"], [10, 15, "#CC3366"], [11, 15, "#CC3366"], [20, 15, "#CC3366"], [21, 15, "#CC3366"] ], // Style 3: Suit [ [12, 15, "#000000"], [13, 15, "#000000"], [14, 15, "#FFFFFF"], [15, 15, "#FFFFFF"], [16, 15, "#FFFFFF"], [17, 15, "#FFFFFF"], [18, 15, "#000000"], [19, 15, "#000000"], [11, 16, "#000000"], [12, 16, "#000000"], [13, 16, "#000000"], [14, 16, "#FFFFFF"], [15, 16, "#FFFFFF"], [16, 16, "#FFFFFF"], [17, 16, "#FFFFFF"], [18, 16, "#000000"], [19, 16, "#000000"], [20, 16, "#000000"], [11, 17, "#000000"], [12, 17, "#000000"], [13, 17, "#000000"], [14, 17, "#000000"], [15, 17, "#000000"], [16, 17, "#000000"], [17, 17, "#000000"], [18, 17, "#000000"], [19, 17, "#000000"], [20, 17, "#000000"], [11, 18, "#000000"], [12, 18, "#000000"], [19, 18, "#000000"], [20, 18, "#000000"] ], // Style 4: Tank top [ [13, 15, "#66CC33"], [14, 15, "#66CC33"], [15, 15, "#66CC33"], [16, 15, "#66CC33"], [17, 15, "#66CC33"], [18, 15, "#66CC33"], [12, 16, "#66CC33"], [13, 16, "#66CC33"], [14, 16, "#66CC33"], [15, 16, "#66CC33"], [16, 16, "#66CC33"], [17, 16, "#66CC33"], [18, 16, "#66CC33"], [19, 16, "#66CC33"], [12, 17, "#66CC33"], [13, 17, "#66CC33"], [14, 17, "#66CC33"], [15, 17, "#66CC33"], [16, 17, "#66CC33"], [17, 17, "#66CC33"], [18, 17, "#66CC33"], [19, 17, "#66CC33"], [12, 18, "#66CC33"], [13, 18, "#66CC33"], [18, 18, "#66CC33"], [19, 18, "#66CC33"] ], // Style 5: Armor [ [12, 15, "#888888"], [13, 15, "#888888"], [14, 15, "#888888"], [15, 15, "#888888"], [16, 15, "#888888"], [17, 15, "#888888"], [18, 15, "#888888"], [19, 15, "#888888"], [11, 16, "#888888"], [12, 16, "#AAAAAA"], [13, 16, "#AAAAAA"], [14, 16, "#AAAAAA"], [15, 16, "#AAAAAA"], [16, 16, "#AAAAAA"], [17, 16, "#AAAAAA"], [18, 16, "#AAAAAA"], [19, 16, "#AAAAAA"], [20, 16, "#888888"], [11, 17, "#888888"], [12, 17, "#AAAAAA"], [13, 17, "#888888"], [14, 17, "#AAAAAA"], [15, 17, "#888888"], [16, 17, "#AAAAAA"], [17, 17, "#888888"], [18, 17, "#AAAAAA"], [19, 17, "#AAAAAA"], [20, 17, "#888888"], [11, 18, "#888888"], [12, 18, "#888888"], [19, 18, "#888888"], [20, 18, "#888888"] ], // Style 6: Vest [ [13, 15, "#8B4513"], [14, 15, "#8B4513"], [15, 15, "#8B4513"], [16, 15, "#8B4513"], [17, 15, "#8B4513"], [18, 15, "#8B4513"], [12, 16, "#8B4513"], [13, 16, "#8B4513"], [14, 16, "#8B4513"], [15, 16, "#8B4513"], [16, 16, "#8B4513"], [17, 16, "#8B4513"], [18, 16, "#8B4513"], [19, 16, "#8B4513"], [12, 17, "#8B4513"], [13, 17, "#8B4513"], [14, 17, "#8B4513"], [15, 17, "#8B4513"], [16, 17, "#8B4513"], [17, 17, "#8B4513"], [18, 17, "#8B4513"], [19, 17, "#8B4513"], [12, 18, "#8B4513"], [13, 18, "#8B4513"], [18, 18, "#8B4513"], [19, 18, "#8B4513"] ], // Style 7: Jacket [ [11, 15, "#2F4F4F"], [12, 15, "#2F4F4F"], [13, 15, "#2F4F4F"], [14, 15, "#2F4F4F"], [15, 15, "#2F4F4F"], [16, 15, "#2F4F4F"], [17, 15, "#2F4F4F"], [18, 15, "#2F4F4F"], [19, 15, "#2F4F4F"], [20, 15, "#2F4F4F"], [10, 16, "#2F4F4F"], [11, 16, "#2F4F4F"], [12, 16, "#2F4F4F"], [13, 16, "#2F4F4F"], [14, 16, "#2F4F4F"], [15, 16, "#2F4F4F"], [16, 16, "#2F4F4F"], [17, 16, "#2F4F4F"], [18, 16, "#2F4F4F"], [19, 16, "#2F4F4F"], [20, 16, "#2F4F4F"], [21, 16, "#2F4F4F"], [10, 17, "#2F4F4F"], [11, 17, "#2F4F4F"], [12, 17, "#2F4F4F"], [13, 17, "#2F4F4F"], [14, 17, "#2F4F4F"], [15, 17, "#2F4F4F"], [16, 17, "#2F4F4F"], [17, 17, "#2F4F4F"], [18, 17, "#2F4F4F"], [19, 17, "#2F4F4F"], [20, 17, "#2F4F4F"], [21, 17, "#2F4F4F"], [10, 18, "#2F4F4F"], [11, 18, "#2F4F4F"], [20, 18, "#2F4F4F"], [21, 18, "#2F4F4F"] ], // Style 8: Dress shirt [ [12, 15, "#FFFFFF"], [13, 15, "#FFFFFF"], [14, 15, "#FFFFFF"], [15, 15, "#FFFFFF"], [16, 15, "#FFFFFF"], [17, 15, "#FFFFFF"], [18, 15, "#FFFFFF"], [19, 15, "#FFFFFF"], [11, 16, "#FFFFFF"], [12, 16, "#FFFFFF"], [13, 16, "#FFFFFF"], [14, 16, "#FFFFFF"], [15, 16, "#000000"], [16, 16, "#000000"], [17, 16, "#FFFFFF"], [18, 16, "#FFFFFF"], [19, 16, "#FFFFFF"], [20, 16, "#FFFFFF"], [11, 17, "#FFFFFF"], [12, 17, "#FFFFFF"], [13, 17, "#FFFFFF"], [14, 17, "#FFFFFF"], [15, 17, "#000000"], [16, 17, "#000000"], [17, 17, "#FFFFFF"], [18, 17, "#FFFFFF"], [19, 17, "#FFFFFF"], [20, 17, "#FFFFFF"], [11, 18, "#FFFFFF"], [12, 18, "#FFFFFF"], [19, 18, "#FFFFFF"], [20, 18, "#FFFFFF"] ], // Style 9: Sweater [ [12, 15, "#800080"], [13, 15, "#800080"], [14, 15, "#800080"], [15, 15, "#800080"], [16, 15, "#800080"], [17, 15, "#800080"], [18, 15, "#800080"], [19, 15, "#800080"], [11, 16, "#800080"], [12, 16, "#800080"], [13, 16, "#800080"], [14, 16, "#800080"], [15, 16, "#800080"], [16, 16, "#800080"], [17, 16, "#800080"], [18, 16, "#800080"], [19, 16, "#800080"], [20, 16, "#800080"], [11, 17, "#800080"], [12, 17, "#800080"], [13, 17, "#800080"], [14, 17, "#800080"], [15, 17, "#800080"], [16, 17, "#800080"], [17, 17, "#800080"], [18, 17, "#800080"], [19, 17, "#800080"], [20, 17, "#800080"], [11, 18, "#800080"], [12, 18, "#800080"], [19, 18, "#800080"], [20, 18, "#800080"] ], // Style 10: Polo shirt [ [12, 15, "#008000"], [13, 15, "#008000"], [14, 15, "#008000"], [15, 15, "#008000"], [16, 15, "#008000"], [17, 15, "#008000"], [18, 15, "#008000"], [19, 15, "#008000"], [11, 16, "#008000"], [12, 16, "#008000"], [13, 16, "#008000"], [14, 16, "#008000"], [15, 16, "#008000"], [16, 16, "#008000"], [17, 16, "#008000"], [18, 16, "#008000"], [19, 16, "#008000"], [20, 16, "#008000"], [11, 17, "#008000"], [12, 17, "#008000"], [13, 17, "#008000"], [14, 17, "#008000"], [15, 17, "#008000"], [16, 17, "#008000"], [17, 17, "#008000"], [18, 17, "#008000"], [19, 17, "#008000"], [20, 17, "#008000"], [11, 18, "#008000"], [12, 18, "#008000"], [19, 18, "#008000"], [20, 18, "#008000"] ] ] }, // Hands styles hands: { variants: [ // Style 1: Simple hands [ [9, 17, "#FFC8A0"], [10, 17, "#FFC8A0"], [21, 17, "#FFC8A0"], [22, 17, "#FFC8A0"] ], // Style 2: Gloved hands [ [9, 17, "#FF0000"], [10, 17, "#FF0000"], [21, 17, "#FF0000"], [22, 17, "#FF0000"] ], // Style 3: Robot hands [ [9, 17, "#CCCCCC"], [10, 17, "#CCCCCC"], [21, 17, "#CCCCCC"], [22, 17, "#CCCCCC"] ], // Style 4: Claws [ [8, 16, "#FFFF00"], [9, 17, "#FFFF00"], [10, 17, "#FFFF00"], [21, 17, "#FFFF00"], [22, 17, "#FFFF00"], [23, 16, "#FFFF00"] ], // Style 5: Paws [ [9, 17, "#8B4513"], [10, 17, "#8B4513"], [9, 18, "#8B4513"], [21, 17, "#8B4513"], [22, 17, "#8B4513"], [22, 18, "#8B4513"] ], // Style 6: Fingerless gloves [ [9, 17, "#000000"], [10, 17, "#FFC8A0"], [21, 17, "#FFC8A0"], [22, 17, "#000000"] ], // Style 7: Mittens [ [9, 17, "#FF0000"], [10, 17, "#FF0000"], [9, 18, "#FF0000"], [10, 18, "#FF0000"], [21, 17, "#FF0000"], [22, 17, "#FF0000"], [21, 18, "#FF0000"], [22, 18, "#FF0000"] ], // Style 8: Bandaged hands [ [9, 17, "#FFFFFF"], [10, 17, "#FFFFFF"], [21, 17, "#FFFFFF"], [22, 17, "#FFFFFF"], [9, 18, "#FFFFFF"], [10, 18, "#FFFFFF"], [21, 18, "#FFFFFF"], [22, 18, "#FFFFFF"] ], // Style 9: Cybernetic hands [ [9, 17, "#4169E1"], [10, 17, "#4169E1"], [21, 17, "#4169E1"], [22, 17, "#4169E1"], [8, 17, "#00FFFF"], [23, 17, "#00FFFF"] ], // Style 10: Gauntlets [ [8, 16, "#FFD700"], [9, 16, "#FFD700"], [10, 16, "#FFD700"], [9, 17, "#FFD700"], [10, 17, "#FFD700"], [21, 17, "#FFD700"], [22, 17, "#FFD700"], [21, 16, "#FFD700"], [22, 16, "#FFD700"], [23, 16, "#FFD700"] ] ] }, // Item styles (held in hands) item: { variants: [ // Style 1: Sword [ [7, 15, "#CCCCCC"], [7, 16, "#CCCCCC"], [7, 17, "#CCCCCC"], [7, 18, "#CCCCCC"], [7, 19, "#CCCCCC"], [6, 14, "#CCCCCC"], [8, 14, "#CCCCCC"] ], // Style 2: Shield [ [23, 15, "#8B4513"], [24, 15, "#8B4513"], [25, 15, "#8B4513"], [23, 16, "#8B4513"], [24, 16, "#FFFF00"], [25, 16, "#8B4513"], [23, 17, "#8B4513"], [24, 17, "#8B4513"], [25, 17, "#8B4513"], [24, 18, "#8B4513"] ], // Style 3: Magic staff [ [7, 13, "#FF00FF"], [7, 14, "#8B4513"], [7, 15, "#8B4513"], [7, 16, "#8B4513"], [7, 17, "#8B4513"], [7, 18, "#8B4513"], [7, 19, "#8B4513"] ], // Style 4: Potion [ [23, 16, "#00FF00"], [24, 16, "#00FF00"], [23, 17, "#00FF00"], [24, 17, "#00FF00"], [23, 18, "#FFFFFF"], [24, 18, "#FFFFFF"] ], // Style 5: Bow [ [6, 15, "#8B4513"], [7, 14, "#8B4513"], [8, 13, "#8B4513"], [9, 14, "#8B4513"], [10, 15, "#8B4513"], [7, 16, "#FFFF00"], [8, 16, "#FFFF00"], [9, 16, "#FFFF00"] ], // Style 6: Axe [ [6, 13, "#8B4513"], [7, 13, "#8B4513"], [8, 13, "#8B4513"], [6, 14, "#8B4513"], [7, 14, "#8B4513"], [8, 14, "#8B4513"], [7, 15, "#8B4513"], [7, 16, "#8B4513"], [7, 17, "#8B4513"], [7, 18, "#8B4513"], [7, 19, "#8B4513"] ], // Style 7: Hammer [ [6, 14, "#696969"], [7, 14, "#696969"], [8, 14, "#696969"], [9, 14, "#696969"], [7, 15, "#8B4513"], [7, 16, "#8B4513"], [7, 17, "#8B4513"], [7, 18, "#8B4513"], [7, 19, "#8B4513"] ], // Style 8: Spear [ [7, 12, "#C0C0C0"], [6, 13, "#C0C0C0"], [7, 13, "#C0C0C0"], [8, 13, "#C0C0C0"], [7, 14, "#8B4513"], [7, 15, "#8B4513"], [7, 16, "#8B4513"], [7, 17, "#8B4513"], [7, 18, "#8B4513"], [7, 19, "#8B4513"] ], // Style 9: Crystal orb [ [23, 15, "#00FFFF"], [24, 15, "#00FFFF"], [25, 15, "#00FFFF"], [23, 16, "#00FFFF"], [24, 16, "#FFFFFF"], [25, 16, "#00FFFF"], [23, 17, "#00FFFF"], [24, 17, "#00FFFF"], [25, 17, "#00FFFF"] ], // Style 10: Book [ [23, 15, "#8B4513"], [24, 15, "#8B4513"], [25, 15, "#8B4513"], [23, 16, "#8B4513"], [24, 16, "#FFFFFF"], [25, 16, "#8B4513"], [23, 17, "#8B4513"], [24, 17, "#FFFFFF"], [25, 17, "#8B4513"], [23, 18, "#8B4513"], [24, 18, "#8B4513"], [25, 18, "#8B4513"] ] ] } }; // src/utils/dna.ts function generateRandomDNA() { return { hair: Math.floor(Math.random() * 10), face: Math.floor(Math.random() * 10), neck: Math.floor(Math.random() * 10), clothing: Math.floor(Math.random() * 10), hands: Math.floor(Math.random() * 10), item: Math.floor(Math.random() * 10) }; } function parseDNA(dnaString) { if (!dnaString || typeof dnaString !== "string") { throw new Error("DNA string is required and must be a string"); } const parts = dnaString.split("-"); if (parts.length !== 6) { throw new Error("DNA string must contain exactly 6 parts separated by hyphens"); } const [hair, face, neck, clothing, hands, item] = parts.map((part) => { const num = parseInt(part, 10); if (isNaN(num) || num < 0 || num > 9) { throw new Error(`Invalid DNA part: ${part}. Each part must be a number between 0-9`); } return num; }); return { hair, face, neck, clothing, hands, item }; } function formatDNA(dna) { return `${dna.hair}-${dna.face}-${dna.neck}-${dna.clothing}-${dna.hands}-${dna.item}`; } function isValidDNA(dnaString) { try { parseDNA(dnaString); return true; } catch { return false; } } function generateRandomDNAString() { return formatDNA(generateRandomDNA()); } // src/components/pixel-avatar.tsx var import_jsx_runtime = require("react/jsx-runtime"); var PixelAvatar = (0, import_react.forwardRef)( ({ dna, size = 256, className, pixelSize = 6, // 增加默认像素尺寸，让头像更大 style, backgroundColor = "#ffffff", offsetY = 0, offsetX = -3.5 // 向左移动头像以在24x24画布中水平居中 }, ref) => { const canvasRef = (0, import_react.useRef)(null); const selectedParts = (0, import_react.useMemo)(() => { try { return parseDNA(dna); } catch (error) { console.warn("Invalid DNA string, using default avatar:", error); return { hair: 0, face: 0, neck: 0, clothing: 0, hands: 0, item: 0 }; } }, [dna]); const canvasSize = (0, import_react.useMemo)(() => 24 * pixelSize, [pixelSize]); (0, import_react.useEffect)(() => { const canvas = ref ? ref.current : canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasSize, canvasSize); const drawOrder = ["neck", "clothing", "hands", "hair", "face", "item"]; drawOrder.forEach((partKey) => { const partIndex = selectedParts[partKey]; const partData = characterParts[partKey]; if (partIndex >= 0 && partIndex < partData.variants.length) { const pixelData = partData.variants[partIndex]; pixelData.forEach((pixel) => { const [x, y, color] = pixel; const adjustedX = x + offsetX; const adjustedY = y + offsetY; if (adjustedX >= 0 && adjustedX < 24 && adjustedY >= 0 && adjustedY < 24) { ctx.fillStyle = color; ctx.fillRect( adjustedX * pixelSize, adjustedY * pixelSize, pixelSize, pixelSize ); } }); } }); }, [selectedParts, pixelSize, canvasSize, backgroundColor, offsetY, offsetX, ref]); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "canvas", { ref: ref || canvasRef, width: canvasSize, height: canvasSize, className, style: { width: `${size}px`, height: `${size}px`, imageRendering: "pixelated", backgroundColor, // 设置CSS背景颜色作为后备 ...style } } ); } ); PixelAvatar.displayName = "PixelAvatar"; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { PixelAvatar, formatDNA, generateRandomDNA, generateRandomDNAString, isValidDNA, parseDNA });