feat: replace SVG room fills with tile-based room rendering in FarmCanvas #16

New issue

Closed

opened 2026-05-20 15:57:02 +00:00 by agent-cos · 0 comments

agent-cos commented

2026-05-20 15:57:02 +00:00

Goal

Modify FarmCanvas.jsx to render room interiors using tile sprites from the LimeZu tileset instead of colored SVG rectangles.

Current State

FarmCanvas.jsx renders rooms as <rect> fills with ROOM_STYLES color palette. Furniture is drawn as simple colored <rect> elements. The office has a 24x16 tile grid with 6 rooms.

Task

Import tileLoader.js in FarmCanvas.jsx
Replace the SVG <rect> room fills with individual <image> elements for each tile position:
- Floor tiles for the room area
- Wall tiles for room boundaries
- Doorway tiles at entrance positions
Replace the renderFurniture() SVG <rect> items with actual furniture tile sprites (desks, chairs, tables, monitors, sofas from the tileset)
Add hallway/floor tiles for the corridor areas between rooms
Keep all existing features:
- Agent HTML overlays (absolute-positioned divs)
- Hover detection (mouse event coordinate math)
- Room labels
- Floor grid pattern
- Doorway indicators

Technical Notes

Use <image> elements inside the existing SVG with imageRendering="pixelated" and href pointing to the sprite regions
For each room, iterate over its tile map from tileLoader and render tiles at px(room.x + tileCol), py(room.y + tileRow)
The SVG viewport is width={px(24)} height={px(16)} where px(n) = n * TILE * SCALE (TILE=32, SCALE=2 → 64px per tile)
Copy tilesheet PNGs to public/office/tiles/ for serving
Test with npm run dev

Acceptance Criteria

All 6 rooms render with actual floor tiles instead of colored fills
Furniture in each room uses sprite tiles, not SVG rects
Hallway areas have floor tiles
Agent overlays still render at correct positions
Hover/click still works on agents
Build succeeds with no errors

## Goal Modify `FarmCanvas.jsx` to render room interiors using tile sprites from the LimeZu tileset instead of colored SVG rectangles. ## Current State `FarmCanvas.jsx` renders rooms as `<rect>` fills with `ROOM_STYLES` color palette. Furniture is drawn as simple colored `<rect>` elements. The office has a 24x16 tile grid with 6 rooms. ## Task 1. Import `tileLoader.js` in `FarmCanvas.jsx` 2. Replace the SVG `<rect>` room fills with individual `<image>` elements for each tile position: - Floor tiles for the room area - Wall tiles for room boundaries - Doorway tiles at entrance positions 3. Replace the `renderFurniture()` SVG `<rect>` items with actual furniture tile sprites (desks, chairs, tables, monitors, sofas from the tileset) 4. Add hallway/floor tiles for the corridor areas between rooms 5. Keep all existing features: - Agent HTML overlays (absolute-positioned divs) - Hover detection (mouse event coordinate math) - Room labels - Floor grid pattern - Doorway indicators ## Technical Notes - Use `<image>` elements inside the existing SVG with `imageRendering="pixelated"` and `href` pointing to the sprite regions - For each room, iterate over its tile map from `tileLoader` and render tiles at `px(room.x + tileCol), py(room.y + tileRow)` - The SVG viewport is `width={px(24)} height={px(16)}` where `px(n) = n * TILE * SCALE` (TILE=32, SCALE=2 → 64px per tile) - Copy tilesheet PNGs to `public/office/tiles/` for serving - Test with `npm run dev` ## Acceptance Criteria - [ ] All 6 rooms render with actual floor tiles instead of colored fills - [ ] Furniture in each room uses sprite tiles, not SVG rects - [ ] Hallway areas have floor tiles - [ ] Agent overlays still render at correct positions - [ ] Hover/click still works on agents - [ ] Build succeeds with no errors