diff --git a/packages/frontend/src/AgentSprite.jsx b/packages/frontend/src/AgentSprite.jsx
index 8b4a68e..4cc927e 100644
--- a/packages/frontend/src/AgentSprite.jsx
+++ b/packages/frontend/src/AgentSprite.jsx
@@ -132,22 +132,24 @@ export default function AgentSprite({ agent, hovered, onHover }) {
/>
- {/* Agent name label */}
-
- {agent.name}
-
+ {/* Agent name label — hover only (per design-critique-1 Issue 3, P1) */}
+ {hovered && (
+
+ {agent.name}
+
+ )}
{/* Hover tooltip */}
{hovered && (
diff --git a/src/frontend/FarmCanvas.jsx b/src/frontend/FarmCanvas.jsx
index fd0edc1..237a08c 100644
--- a/src/frontend/FarmCanvas.jsx
+++ b/src/frontend/FarmCanvas.jsx
@@ -54,13 +54,16 @@ function TileSprite({ tileCol, tileRow, x, y }) {
}
// Render a single furniture item: an 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 (
-
-
+
+
);
@@ -244,7 +247,7 @@ export default function FarmCanvas() {
{/* Furniture from tile set */}
{tileStyle.furniture.map((f, fi) => (
-
+
))}
{/* Doorways */}
diff --git a/src/frontend/src/tileLoader.js b/src/frontend/src/tileLoader.js
index 98e89ba..b43ca72 100644
--- a/src/frontend/src/tileLoader.js
+++ b/src/frontend/src/tileLoader.js
@@ -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 },
],
},
};