这个“家务游戏官网”听起来挺幼稚，但背后折腾我的时间可不少。我本来没想搞这么正式，就是想弄个地方记录一下我跟我家那口子定下的“家务积分制”，结果搞着搞着就真成了一个麻雀虽小五脏俱全的“官方网站”了。
从想法启动到初稿实现
我最早拍板决定要搞这个东西，是发现光靠嘴说“谁做多少家务”完全靠不住。两个人都在抱怨对方做得少，但谁也拿不出证据。所以我拿起纸笔，先定义了一套基础规则：洗碗得5分，拖地得10分，陪孩子写作业得15分，最高分可以换一次“免家务券”。
规则定下来了，接着就是实现了。我可不想每次都手动算账，所以就决定做一个网页来自动化处理积分。我先是抓了个最简单的静态模板，在网上随便找了个Bootstrap的架子，因为这玩意儿够轻，部署快。
- 打开了我的老伙计Sublime，对，我还没换VS Code，习惯了。
- 我敲了敲HTML的结构，主要弄了几个分区：一个大大的“今日积分榜”，一个“任务认领区”，和一个“兑换商店”。
- 找素材花了不少时间。图片素材都是老婆手机里随手拍的那些家务场景，比如湿漉漉的厨房台面，或者堆满玩具的客厅。我把这些照片用PS简单处理了一下，让它们看起来像游戏里的“任务截图”。
我花了一晚上时间，把CSS颜色调了调。网站主色调我选了那种明亮的绿色，看起来清爽，没那么像工作系统。数据部分一开始我偷懒，直接用了Google Sheets的API，把数据实时同步过来，这样我跟我老婆在手机上填表，网站就能自动刷新积分。省去了我建数据库的麻烦。
部署与测试：麻烦总是出在细节上
网站内容搞得差不多了，接着是部署。我找了个免费的二级域名，域名名字我俩琢磨了半天，最终定了一个特别土的名字。然后租了个最便宜的虚拟主机，反正访问量也就我们一家三口，够用了。我把文件打包上传，第一次访问，发现图片加载特别慢。我赶紧回去压缩图片，又调整了缓存设置，这才流畅起来。
测试的时候，我老婆发现了第一个大问题：手机适配太烂。在电脑上看挺一到手机上就变形。我立刻返工修改了响应式设计，确保在Pad和手机上都能正常显示任务列表和积分。那两天晚上，我几乎是把各种型号的手机模拟器都跑了一遍，才敢说初步稳定了。
我为啥对“规则化”这么执着？
可能有人会问，搞这么一套系统是不是太累了？至于吗？一个家务都要弄官网？说起来这事儿就来气，我搞这套系统，完全是被去年装修新房那件事气出来的。
去年我负责装修，找了一个特别不靠谱的装修队。他们把工期往后拖了足足半年，每次催他们，他们就说：“你急什么，不就多等几天吗？活儿肯定给你干得漂亮。” 结果我们一家三口被迫在出租屋里多住半年，房租白白多交了三万多。我当时气得不行，想去投诉，但没证据，合同里全是坑，全是模棱两可的说法。
那件事让我明白了，凡事都要定好规矩，白纸黑字，清清楚楚写下来，而且最好是放在一个谁都能看到的地方。模糊不清的结果就是扯皮和损失。
等我们搬进新家后，我就跟老婆说，家务不能再靠“心情”来了，得量化！这个官网，就是那份“新家务合同”。我现在每天早上起来第一件事就是更新积分榜，谁完成了什么任务，一目了然。以前吵架都是“你干得少”，现在都是“你看官网，你上周积分落后了，赶紧去把地拖了！” 网站虽然粗糙，但效果是真家里的扯皮少了，效率高了，值了。