网页端新增 Canvas 二维农场地图

为什么：地块和牲畜原本是响应式卡片列表，信息全但没有"农场"的形状感。
改成一张俯视像素风地图作主视觉：农田按 4 列排成方阵（地块多自动改 6 列），
土壤颜色随水分深浅变化、作物随生长进度放大、成熟发金光、缺水画干裂；
牧场围栏里牲畜随机漫步，待收产出挂金色气泡、没喂食标 💢；
已拥有的建筑在底部建筑带列队；五种天气各有天色，雨/暴雨有雨滴动画。
悬停出提示框，点地块即播种/浇水/收获、点牲畜即喂食/收取——全部复用
既有 openCropPick/act() 流程，卡片面板原样保留作精确操作入口。

实现要点：画布用逻辑坐标绘制、按容器宽 × devicePixelRatio 缩放，
高分屏不糊、窄屏等比缩；命中检测在逻辑坐标上自己算。
服务端零改动——state 里的 plots/animals/buildings 现成够用。

修复一个真机才抓得到的初始化 bug：动画循环首帧同步执行，原顺序
"先绑定后布局"让首帧在未初始化的字段上 TypeError，rAF 注册被一起吞掉，
表现为画布全白但点击命中正常（命中不经过画布）。改为先布局再绑定，
并给 mapStep/mapDraw 加空值护栏。

真浏览器端到端验证：登录、canvas 坐标点击浇水（AP/水分/toast 全对）、
悬停提示、动画循环存活（云位移 5.24px/600ms）、截图目检渲染效果，
errors/console 干净。534 项测试全绿，ruff/pyright 无告警。

.workbuddy/skills/simplefarm-verify-and-ship/SKILL.md

@@ -90,6 +90,13 @@ PATH="/c/Program Files/nodejs:$PATH" agent-browser --cdp 9333 eval "..."   # 页
 必须自己起进程再 `--cdp` 连；`find text "登录"` 会点到标题而非按钮，
 用 `eval` 精确 `document.getElementById('dologin').click()`。
 
+Canvas / rAF 动画类改动的额外坑（2026-09-25 踩过）：动画循环的**第一帧是同步
+执行**的——必须先跑完布局再绑定循环，否则首帧 TypeError 会把
+requestAnimationFrame 的注册一起吞掉，表现为「画布全白但点击命中正常」
+（命中是纯数学，不经过画布）。且 headless 截图空白 ≠ 没画：先
+`ctx.getImageData` 读像素确认「画了没」，再放 rAF 计数探针 / 记录动画对象
+位移确认「循环活着没」，两连才能定位。
+
 ## 第 3 步：写记忆
 
 - 当天日志追加到 `.workbuddy/memory/YYYY-MM-DD.md`（append-only）。