网页 API 设计

[wongsingfo]

这个 pr 是关于 issue #68 的解决方案

目前的demo： 显示危险牌

计划添加的内容

• [x] 将终端的信息都迁移到网页端
• [ ] 通过 websocket 或 server-sent events 让服务器发现状态更新时主动 push 给客户端
• [ ] bootstrap 排版
• [ ] 前端优化（减少不必要的渲染过程）

[wongsingfo]

目前完成度：

已知的 bug：

• [x] 在鸣牌的时候显示有可能会出错
• [ ] 数据结构的读写因为没有加锁，可能会少显示一些内容
• [ ] 雀魂使用的是 https，还没有做雀魂的适配

[EndlessCheng]

看起来不错噢！我看你是用透明度表示危险度的，但感觉颜色过于接近，区分度不太明显，可以试试多种颜色的方案。

[wongsingfo]

关于颜色，现在的方案是设置几个关键点的颜色（见下面的代码），关键点之间的颜色用 linear-gradient 计算（这里用的是 RGB color space。我也尝试过 HSL，但是效果并不是很好）

let gradient = [
	{ risk: 0.0 , color: [255, 255,  255] }, // 绝安，白色
	{ risk: 1e-5 , color: [131, 179,  17] },  // 只要有一点风险，鸭绿色
	{ risk: 8 , color:   [250, 195,  0] },  // 还可以冲一冲， 黄色
	{ risk: 16 , color: [253, 99, 0] },  // 相当危险，橙色
	{ risk: 25.0, color: [253, 0,  135] }, // 非常危险， 粉色/紫色
];

[wcp1231]

我在这个 pr 的基础上改造了一下，主要定义了页面的 JSON model，然后用 vue 简单写了个页面。 后端逻辑比较复杂，我就没怎么改。

可以看图