Polish round: hover, horizontal names, faster movement, full view, BeOS icon tiles #14

New issue

Closed

opened 2026-05-20 02:01:24 +00:00 by agent-cos · 0 comments

agent-cos commented

2026-05-20 02:01:24 +00:00

Goal

Five targeted improvements to the Canvas 2D frontend based on Scott's feedback.

Changes Required

1. HOVER > CLICK for tooltips

Restore hover tooltips on agents (mouseover shows name + status + task in a small popup)
Keep click for the detail card slide-in (click still opens AgentCard)
Hover tooltip should follow cursor near the agent, disappear on mouseout

2. Horizontal agent names

Agent names should show to the right of the sprite, not stacked vertically below
This prevents name clobbering when agents are near each other
Small pixel font, white text with dark outline, positioned at px + 20, py (right of sprite)

3. Faster movement

Increase LERP_SPEED from 0.08 to 0.15 in FarmCanvas.jsx
Agents should move noticeably faster between zones

4. Full-view farm (no scrolling)

Scale the canvas to always fit fully in the viewport — no scrollbars
Use CSS to scale the canvas element: width: 100%; height: 100%; object-fit: contain
Or calculate a scale factor and apply transform: scale() on a wrapper
The farm should always be fully visible regardless of window size

5. BeOS icon tile background

Use the BeOS R5 icons as background tiles scattered across the grass
Icons are at assets/beos-tiles/ (766 PNG files, 32x32)
Copy to src/frontend/public/beos-tiles/ for Vite serving
On each grass tile, randomly pick a BeOS icon and draw it at 25-35% opacity
This creates a subtle tech-meets-farm aesthetic — the BeOS desktop feel
Cache loaded icons so they're not re-loaded every frame
Only draw a sparse subset (every 3rd-4th tile) so it doesn't overwhelm

Files to modify

src/frontend/FarmCanvas.jsx — speed, names, hover, BeOS background, full-view scaling
src/frontend/App.jsx — hover state management, full-view container
src/frontend/src/farm.css — full-view styles

Build

cd src/frontend && npx vite build must succeed.

Commit

"feat(frontend): polish — hover tooltips, horizontal names, faster movement, full view, BeOS tiles"

## Goal Five targeted improvements to the Canvas 2D frontend based on Scott's feedback. ## Changes Required ### 1. HOVER > CLICK for tooltips - **Restore hover tooltips** on agents (mouseover shows name + status + task in a small popup) - **Keep click** for the detail card slide-in (click still opens AgentCard) - Hover tooltip should follow cursor near the agent, disappear on mouseout ### 2. Horizontal agent names - Agent names should show **to the right** of the sprite, not stacked vertically below - This prevents name clobbering when agents are near each other - Small pixel font, white text with dark outline, positioned at `px + 20, py` (right of sprite) ### 3. Faster movement - Increase LERP_SPEED from `0.08` to `0.15` in FarmCanvas.jsx - Agents should move noticeably faster between zones ### 4. Full-view farm (no scrolling) - Scale the canvas to **always fit fully in the viewport** — no scrollbars - Use CSS to scale the canvas element: `width: 100%; height: 100%; object-fit: contain` - Or calculate a scale factor and apply `transform: scale()` on a wrapper - The farm should always be fully visible regardless of window size ### 5. BeOS icon tile background - Use the BeOS R5 icons as background tiles scattered across the grass - Icons are at `assets/beos-tiles/` (766 PNG files, 32x32) - Copy to `src/frontend/public/beos-tiles/` for Vite serving - On each grass tile, randomly pick a BeOS icon and draw it at 25-35% opacity - This creates a subtle tech-meets-farm aesthetic — the BeOS desktop feel - Cache loaded icons so they're not re-loaded every frame - Only draw a sparse subset (every 3rd-4th tile) so it doesn't overwhelm ## Files to modify - `src/frontend/FarmCanvas.jsx` — speed, names, hover, BeOS background, full-view scaling - `src/frontend/App.jsx` — hover state management, full-view container - `src/frontend/src/farm.css` — full-view styles ## Build `cd src/frontend && npx vite build` must succeed. ## Commit "feat(frontend): polish — hover tooltips, horizontal names, faster movement, full view, BeOS tiles"