sscoble/spatial-office
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: sscoble:main
Branches Tags
sscoble:main
sscoble:pr-agent-sprites-v2
sscoble:pr-agent-sprites
sscoble:master
..
compare: sscoble:pr-agent-sprites
Branches Tags
sscoble:main
sscoble:pr-agent-sprites-v2
sscoble:pr-agent-sprites
sscoble:master

1 commit
main ... pr-agent-s

Author SHA1 Message Date
Engineering (agent-engineering)
64ffeea16e feat(frontend): replace agent blob sprites with LimeZu character tiles 2026-05-20 09:32:48 -07:00
3 changed files with 47 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/frontend/src/AgentSprite.jsx
View file

@ -132,24 +132,22 @@ export default function AgentSprite({ agent, hovered, onHover }) {
/> />
</mesh> </mesh>
{/* Agent name label — hover only (per design-critique-1 Issue 3, P1) */} {/* Agent name label */}
{hovered && ( <Text
<Text position={
position={ targetPos
targetPos ? [targetPos[0], 0.7, targetPos[2]]
? [targetPos[0], 0.7, targetPos[2]] : [0, 0.7, 0]
: [0, 0.7, 0] }
} fontSize={0.15}
fontSize={0.15} color={agent.activity === 'offline' ? '#888888' : '#ffffff'}
color={agent.activity === 'offline' ? '#888888' : '#ffffff'} anchorX="center"
anchorX="center" anchorY="middle"
anchorY="middle" outlineWidth={0.01}
outlineWidth={0.01} outlineColor="#000000"
outlineColor="#000000" >
> {agent.name}
{agent.name} </Text>
</Text>
)}
{/* Hover tooltip */} {/* Hover tooltip */}
{hovered && ( {hovered && (

13
src/frontend/FarmCanvas.jsx
View file

@ -54,16 +54,13 @@ function TileSprite({ tileCol, tileRow, x, y }) {
} }
// Render a single furniture item: an <image> element clipped to one tile // Render a single furniture item: an <image> element clipped to one tile
function FurnitureItem({ tileName, tx, ty, w, h }) { function FurnitureItem({ tileName, tx, ty }) {
const t = TILE_INDEX[tileName]; const t = TILE_INDEX[tileName];
if (!t) return null; if (!t) return null;
const tw = w || 1;
const th = h || 1;
const clipId = `clip-f-${tx}-${ty}-${tw}-${th}`;
return ( return (
<g> <g>
<clipPath id={clipId}> <clipPath id={`clip-f-${tx}-${ty}`}>
<rect x={px(tx)} y={py(ty)} width={px(tw)} height={px(th)} /> <rect x={px(tx)} y={py(ty)} width={px(1)} height={py(1)} />
</clipPath> </clipPath>
<image <image
href={TILESET_URL} href={TILESET_URL}
@ -72,7 +69,7 @@ function FurnitureItem({ tileName, tx, ty, w, h }) {
width={TILESET_W * SCALE} width={TILESET_W * SCALE}
height={TILESET_H * SCALE} height={TILESET_H * SCALE}
style={{ imageRendering: 'pixelated' }} style={{ imageRendering: 'pixelated' }}
clipPath={`url(#${clipId})`} clipPath={`url(#clip-f-${tx}-${ty})`}
/> />
</g> </g>
); );
@ -247,7 +244,7 @@ export default function FarmCanvas() {
{/* Furniture from tile set */} {/* Furniture from tile set */}
{tileStyle.furniture.map((f, fi) => ( {tileStyle.furniture.map((f, fi) => (
<FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} w={f.w} h={f.h} /> <FurnitureItem key={`furn-${fi}`} tileName={f.tile} tx={room.x + f.tx} ty={room.y + f.ty} />
))} ))}
{/* Doorways */} {/* Doorways */}

138
src/frontend/src/tileLoader.js
View file

@ -38,154 +38,68 @@ export const TILE_INDEX = {
}; };
// Per-room tile style assignments // Per-room tile style assignments
// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y, w?: width in tiles, h?: height in tiles } // furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y }
// Room dimensions (from officeMap.js): briefing 7x5, commons 7x5, warroom 7x5, engineering 7x5, quiet 7x5, ops 7x5
// All rooms are 7 wide x 5 tall in tile coordinates
export const ROOM_TILE_STYLES = { export const ROOM_TILE_STYLES = {
briefing: { briefing: {
floor: 'floor_light_wood', floor: 'floor_light_wood',
wall: 'wall_inner', wall: 'wall_inner',
// Conference room layout: central table, chairs around it, AV setup at front
furniture: [ furniture: [
// Central conference table (spans 3 tiles wide) { tile: 'conf_table', tx: 2.5, ty: 2 },
{ tile: 'conf_table', tx: 2, ty: 1.5, w: 3, h: 1 }, { tile: 'chair_down', tx: 1.5, ty: 2.5 },
{ tile: 'conf_table', tx: 2, ty: 2.5, w: 3, h: 1 }, { tile: 'chair_up', tx: 5.7, ty: 2.5 },
// Chairs around the table
{ tile: 'chair_down', tx: 1.5, ty: 1.5 }, // left side
{ tile: 'chair_up', tx: 1.5, ty: 2.5 },
{ tile: 'chair_down', tx: 5.5, ty: 1.5 }, // right side
{ tile: 'chair_up', tx: 5.5, ty: 2.5 },
// Monitor/screen at front
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
// Plants for ambiance
{ tile: 'plant', tx: 0.5, ty: 0.5 }, { tile: 'plant', tx: 0.5, ty: 0.5 },
{ tile: 'plant', tx: 6.5, ty: 0.5 },
// Whiteboard
{ tile: 'whiteboard', tx: 6.5, ty: 3.5 },
], ],
}, },
commons: { commons: {
floor: 'floor_modern', floor: 'floor_modern',
wall: 'wall_inner', wall: 'wall_inner',
// Lounge layout: seating area, coffee station, bulletin board
furniture: [ furniture: [
// Sofa cluster (two facing sofas) { tile: 'sofa', tx: 1, ty: 1.5 },
{ tile: 'sofa', tx: 1, ty: 1.5 }, { tile: 'sofa', tx: 1, ty: 2.5 },
{ tile: 'sofa', tx: 2.5, ty: 1.5 }, { tile: 'desk', tx: 4, ty: 2.5 },
// Coffee table between sofas { tile: 'plant', tx: 0.5, ty: 0.5 },
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 2, h: 1 }, { tile: 'whiteboard', tx: 5, ty: 0.5 },
// Standing desk / counter area
{ tile: 'desk', tx: 5, ty: 1.5, w: 2, h: 1 },
{ tile: 'desk', tx: 5, ty: 2.5, w: 2, h: 1 },
// Decoration
{ tile: 'plant', tx: 0.5, ty: 3.5 },
{ tile: 'whiteboard', tx: 6.5, ty: 0.5 },
// Reading nook
{ tile: 'bookshelf', tx: 6.5, ty: 3.5 },
], ],
}, },
warroom: { warroom: {
floor: 'floor_dark_wood', floor: 'floor_dark_wood',
wall: 'wall_inner', wall: 'wall_inner',
// Command center: large central table, wall screens, command chairs
furniture: [ furniture: [
// Central war table (large, spans 4 tiles) { tile: 'conf_table', tx: 2.5, ty: 2 },
{ tile: 'conf_table', tx: 1.5, ty: 1.5, w: 4, h: 1 }, { tile: 'chair_down', tx: 1.5, ty: 3 },
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 4, h: 1 }, { tile: 'chair_up', tx: 5.5, ty: 3 },
// Command chairs { tile: 'monitor', tx: 0.5, ty: 1.5 },
{ tile: 'chair_down', tx: 1, ty: 1.5 },
{ tile: 'chair_down', tx: 5.5, ty: 1.5 },
{ tile: 'chair_up', tx: 1, ty: 2.5 },
{ tile: 'chair_up', tx: 5.5, ty: 2.5 },
// Wall-mounted monitors
{ tile: 'monitor', tx: 0.5, ty: 0.5 },
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
{ tile: 'monitor', tx: 6.5, ty: 0.5 },
// Equipment rack
{ tile: 'cabinet', tx: 6.5, ty: 3.5 },
], ],
}, },
engineering: { engineering: {
floor: 'floor_tile', floor: 'floor_tile',
wall: 'wall_inner', wall: 'wall_inner',
// Dev workspace: rows of desks with monitors, gear, books
furniture: [ furniture: [
// Workstation row 1 { tile: 'computer_desk', tx: 2.5, ty: 2.5 },
{ tile: 'computer_desk', tx: 1.5, ty: 1.5 }, { tile: 'monitor', tx: 3.5, ty: 2 },
{ tile: 'computer_desk', tx: 3.5, ty: 1.5 }, { tile: 'chair_down', tx: 3, ty: 3.5 },
{ tile: 'computer_desk', tx: 5.5, ty: 1.5 }, { tile: 'bookshelf', tx: 0.5, ty: 0.5 },
// Monitors above desks
{ tile: 'monitor', tx: 1.5, ty: 0.5 },
{ tile: 'monitor', tx: 3.5, ty: 0.5 },
{ tile: 'monitor', tx: 5.5, ty: 0.5 },
// Workstation row 2
{ tile: 'computer_desk', tx: 1.5, ty: 3 },
{ tile: 'computer_desk', tx: 3.5, ty: 3 },
{ tile: 'computer_desk', tx: 5.5, ty: 3 },
// Chairs
{ tile: 'chair_down', tx: 2, ty: 2.5 },
{ tile: 'chair_down', tx: 4, ty: 2.5 },
{ tile: 'chair_down', tx: 6, ty: 2.5 },
{ tile: 'chair_up', tx: 2, ty: 3.5 },
{ tile: 'chair_up', tx: 4, ty: 3.5 },
{ tile: 'chair_up', tx: 6, ty: 3.5 },
// Reference books and gear
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
{ tile: 'bookshelf', tx: 0.5, ty: 3.5 },
{ tile: 'plant', tx: 6.5, ty: 4.5 },
], ],
}, },
quiet: { quiet: {
floor: 'floor_rug', floor: 'floor_rug',
wall: 'wall_inner', wall: 'wall_inner',
// Reading/relaxation zone: comfortable seating, books, soft lighting
furniture: [ furniture: [
// Central sofa / reading area { tile: 'sofa', tx: 2.5, ty: 2.5 },
{ tile: 'sofa', tx: 2.5, ty: 1.5, w: 2, h: 1 }, { tile: 'bookshelf', tx: 0.5, ty: 0.5 },
// Side table / reading desk { tile: 'plant', tx: 5, ty: 0.5 },
{ tile: 'desk', tx: 2, ty: 2.5 },
{ tile: 'chair_up', tx: 2, ty: 3.5 },
// Bookshelves lining walls
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
{ tile: 'bookshelf', tx: 6.5, ty: 0.5 },
{ tile: 'bookshelf', tx: 0.5, ty: 2.5 },
{ tile: 'bookshelf', tx: 6.5, ty: 2.5 },
// Plants and ambiance
{ tile: 'plant', tx: 4.5, ty: 0.5 },
{ tile: 'plant', tx: 0.5, ty: 4.5 },
], ],
}, },
ops: { ops: {
floor: 'floor_tile', floor: 'floor_tile',
wall: 'wall_inner', wall: 'wall_inner',
// Operations center: multi-console setup with central visibility
furniture: [ furniture: [
// Main ops desk row { tile: 'desk', tx: 2, ty: 2 },
{ tile: 'desk', tx: 1, ty: 1 }, { tile: 'desk', tx: 2, ty: 3 },
{ tile: 'desk', tx: 1, ty: 2 }, { tile: 'desk', tx: 4, ty: 2 },
{ tile: 'desk', tx: 1, ty: 3 }, { tile: 'desk', tx: 4, ty: 3 },
// Secondary ops row { tile: 'monitor', tx: 2.5, ty: 1.5 },
{ tile: 'desk', tx: 3, ty: 2 }, { tile: 'chair_down', tx: 3, ty: 2.5 },
{ tile: 'desk', tx: 3, ty: 3 },
// Monitoring station
{ tile: 'computer_desk', tx: 5, ty: 2 },
{ tile: 'computer_desk', tx: 5, ty: 3 },
// Wall monitors
{ tile: 'monitor', tx: 0.5, ty: 0.5 },
{ tile: 'monitor', tx: 3, ty: 0.5 },
{ tile: 'monitor', tx: 5.5, ty: 0.5 },
// Chairs at consoles
{ tile: 'chair_down', tx: 2, ty: 1.5 },
{ tile: 'chair_down', tx: 2, ty: 2.5 },
{ tile: 'chair_down', tx: 2, ty: 3.5 },
{ tile: 'chair_down', tx: 4, ty: 2.5 },
{ tile: 'chair_down', tx: 4, ty: 3.5 },
{ tile: 'chair_up', tx: 6, ty: 2.5 },
{ tile: 'chair_up', tx: 6, ty: 3.5 },
// Infrastructure
{ tile: 'cabinet', tx: 6.5, ty: 0.5 },
{ tile: 'cabinet', tx: 6.5, ty: 1.5 },
], ],
}, },
}; };