/* global React */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ============================================================ PIXEL PET SPRITES Original chunky pixel-art creatures drawn with CSS box-shadow ============================================================ */ // Encode pet sprite as a 14×14 grid string. Characters map to palette colors. // . = transparent, the rest are indexes into the palette array. function PixelSprite({ map, palette, size = 96, scale = 1 }) { const grid = map.trim().split('\n').map(r => r.trim()); const rows = grid.length; const cols = grid[0].length; const px = Math.floor((size * scale) / Math.max(rows, cols)); // Build CSS box-shadow string const shadows = []; for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const ch = grid[y][x]; if (ch === '.') continue; const idx = parseInt(ch, 16); if (Number.isNaN(idx)) continue; const color = palette[idx]; if (!color) continue; shadows.push(`${x * px}px ${y * px}px 0 0 ${color}`); } } return (