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

Compare commits

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

2 commits
pr-agent-s ... main

Author SHA1 Message Date
Scott Scoble
f632f816a4 fix(spatial-office#12): show agent name labels only on hover 
Per design-critique-1 Issue 3 (P1), agent name labels were always
visible and stacked into unreadable text when agents were near
each other. Now matches Stardew Valley convention: name shows
on hover only.

Single conditional change. The hover tooltip (Html overlay with
status + current task) is unchanged.
 2026-06-01 21:49:59 -07:00
Engineering (agent-engineering)
62f9afc011 feat(frontend): detailed furniture layouts for all 6 rooms 2026-05-20 09:37:21 -07:00
3 changed files with 138 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

13
src/frontend/FarmCanvas.jsx
View file

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

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

@ -38,68 +38,154 @@ export const TILE_INDEX = {
};
// Per-room tile style assignments
// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y }
// furniture: array of { tile: TILE_INDEX key, tx: room-relative x, ty: room-relative y, w?: width in tiles, h?: height in tiles }
// 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 = {
briefing: {
floor: 'floor_light_wood',
wall: 'wall_inner',
// Conference room layout: central table, chairs around it, AV setup at front
furniture: [
{ tile: 'conf_table', tx: 2.5, ty: 2 },
{ tile: 'chair_down', tx: 1.5, ty: 2.5 },
{ tile: 'chair_up', tx: 5.7, ty: 2.5 },
// Central conference table (spans 3 tiles wide)
{ tile: 'conf_table', tx: 2, ty: 1.5, w: 3, h: 1 },
{ tile: 'conf_table', tx: 2, ty: 2.5, w: 3, h: 1 },
// 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: 6.5, ty: 0.5 },
// Whiteboard
{ tile: 'whiteboard', tx: 6.5, ty: 3.5 },
],
},
commons: {
floor: 'floor_modern',
wall: 'wall_inner',
// Lounge layout: seating area, coffee station, bulletin board
furniture: [
{ tile: 'sofa', tx: 1, ty: 1.5 },
{ tile: 'sofa', tx: 1, ty: 2.5 },
{ tile: 'desk', tx: 4, ty: 2.5 },
{ tile: 'plant', tx: 0.5, ty: 0.5 },
{ tile: 'whiteboard', tx: 5, ty: 0.5 },
// Sofa cluster (two facing sofas)
{ tile: 'sofa', tx: 1, ty: 1.5 },
{ tile: 'sofa', tx: 2.5, ty: 1.5 },
// Coffee table between sofas
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 2, h: 1 },
// 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: {
floor: 'floor_dark_wood',
wall: 'wall_inner',
// Command center: large central table, wall screens, command chairs
furniture: [
{ tile: 'conf_table', tx: 2.5, ty: 2 },
{ tile: 'chair_down', tx: 1.5, ty: 3 },
{ tile: 'chair_up', tx: 5.5, ty: 3 },
{ tile: 'monitor', tx: 0.5, ty: 1.5 },
// Central war table (large, spans 4 tiles)
{ tile: 'conf_table', tx: 1.5, ty: 1.5, w: 4, h: 1 },
{ tile: 'conf_table', tx: 1.5, ty: 2.5, w: 4, h: 1 },
// Command chairs
{ 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: {
floor: 'floor_tile',
wall: 'wall_inner',
// Dev workspace: rows of desks with monitors, gear, books
furniture: [
{ tile: 'computer_desk', tx: 2.5, ty: 2.5 },
{ tile: 'monitor', tx: 3.5, ty: 2 },
{ tile: 'chair_down', tx: 3, ty: 3.5 },
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
// Workstation row 1
{ tile: 'computer_desk', tx: 1.5, ty: 1.5 },
{ tile: 'computer_desk', tx: 3.5, ty: 1.5 },
{ tile: 'computer_desk', tx: 5.5, ty: 1.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: {
floor: 'floor_rug',
wall: 'wall_inner',
// Reading/relaxation zone: comfortable seating, books, soft lighting
furniture: [
{ tile: 'sofa', tx: 2.5, ty: 2.5 },
{ tile: 'bookshelf', tx: 0.5, ty: 0.5 },
{ tile: 'plant', tx: 5, ty: 0.5 },
// Central sofa / reading area
{ tile: 'sofa', tx: 2.5, ty: 1.5, w: 2, h: 1 },
// Side table / reading desk
{ 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: {
floor: 'floor_tile',
wall: 'wall_inner',
// Operations center: multi-console setup with central visibility
furniture: [
{ tile: 'desk', tx: 2, ty: 2 },
{ tile: 'desk', tx: 2, ty: 3 },
{ tile: 'desk', tx: 4, ty: 2 },
{ tile: 'desk', tx: 4, ty: 3 },
{ tile: 'monitor', tx: 2.5, ty: 1.5 },
{ tile: 'chair_down', tx: 3, ty: 2.5 },
// Main ops desk row
{ tile: 'desk', tx: 1, ty: 1 },
{ tile: 'desk', tx: 1, ty: 2 },
{ tile: 'desk', tx: 1, ty: 3 },
// Secondary ops row
{ tile: 'desk', tx: 3, ty: 2 },
{ 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 },
],
},
};