feat(frontend): replace agent blob sprites with LimeZu character tiles

This commit is contained in:
engineering Agent 2026-05-20 09:32:48 -07:00
parent 464fb9e6ac
commit e460c758fd
2 changed files with 32 additions and 1 deletions

View file

@ -3,6 +3,7 @@ import { useRef, useCallback } from 'react';
import { useStore } from './store';
import { rooms, agentDesks } from './officeMap';
import { TILESET_URL, TILE_INDEX, ROOM_TILE_STYLES } from './src/tileLoader';
import { getAgentSpriteUrl } from './src/agentSprites';
const TILE = 32;
const SCALE = 2; // 2x = 64px per tile
@ -312,7 +313,7 @@ export default function FarmCanvas() {
}} />
{/* Sprite at 48x48, centered in 56x56 container */}
<img
src={`/office/sprites/agent-${agent.id}.png`}
src={getAgentSpriteUrl(agent.id)}
alt={agent.name}
style={{
width: 48,

View file

@ -0,0 +1,30 @@
// agentSprites.js — Per-agent character sprite assignments
// Uses LimeZu character sprites from public/agents/ directory
// 4 base characters (Amelia, Adam, Alex, Bob) with idle/run/sit variations
// Each agent gets a unique character for distinct silhouettes.
// Character base URL
export const SPRITES_BASE = '/agents/';
// Per-agent character assignments
// character: which NPC base to use
// pose: idle, run, or sit (defaults to idle)
// Each agent gets a DIFFERENT character so they're distinguishable by silhouette
export const AGENT_SPRITES = {
cos: { character: 'Alex', pose: 'idle' },
engineering: { character: 'Adam', pose: 'idle' },
'senior-eng': { character: 'Bob', pose: 'idle' },
trust: { character: 'Amelia', pose: 'idle' },
market: { character: 'Adam', pose: 'run' },
health: { character: 'Amelia', pose: 'sit' },
content: { character: 'Alex', pose: 'sit' },
presentations: { character: 'Bob', pose: 'run' },
vault: { character: 'Bob', pose: 'sit' },
};
// Get the sprite URL for an agent
export function getAgentSpriteUrl(agentId) {
const sprite = AGENT_SPRITES[agentId];
if (!sprite) return `${SPRITES_BASE}Amelia_idle.png`;
return `${SPRITES_BASE}${sprite.character}_${sprite.pose}.png`;
}