From 62f9afc0111069dd712de4da50628c919e3ce2b3 Mon Sep 17 00:00:00 2001 From: "Engineering (agent-engineering)" Date: Wed, 20 May 2026 09:37:21 -0700 Subject: [PATCH] feat(frontend): detailed furniture layouts for all 6 rooms --- src/frontend/FarmCanvas.jsx | 13 ++-- src/frontend/src/tileLoader.js | 138 ++++++++++++++++++++++++++------- 2 files changed, 120 insertions(+), 31 deletions(-) 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 }, ], }, };