模板:看板娘/文档

 简易可互动看板娘。简易是因为

1. 实现方法很笨。
2. 有几个bug因为我太菜了不想修复：（1）双击/拖拽动作的监听器和单击的监听器黏在一起。（2）手机上看看板娘会迷之自己不停刷新。
3. 真的很闲的话可以做眼球追踪。

相关代码

1. 模板:看板娘
2. MediaWiki:Kanban.js
3. MediaWiki:Common.js中看板娘相关样式代码

功能介绍

• 无互动时
  • 站立
  • 双手张开
  • 眨眼睛
• 互动
  • 单击：从语句库里随机选择一句话显示在对话框里，脸变成微笑脸
  • 双击：脸变成震惊脸
  • 拖拽：脸变成抱头脸
• 隐藏
  • 点击左侧的“隐藏”会变成小图标，点击小图标会变回大看板

使用方法

{{看板娘}}

MediaWiki:Kanban

隐藏

效果见页面左下角。可以把看板娘放在模板:面包屑里，有面包屑的地方就有看板娘。

简单代码说明

准备看板娘不同状态的图片资源，把图片的地址复制到js里imgs对应的地方：

无互动-站立		base
无互动-张手		open
无互动-眨眼		blink
互动-单击-微笑		smile
互动-双击-震惊		surprise
互动-拖拽-抱头		ouch

const imgs = {
	"base": "https://patchwiki.biligame.com/images/deemo2/f/f3/tea4o2o07iyzvu9nitmd49b0u6p18bx.png", 
	"open": "https://patchwiki.biligame.com/images/deemo2/0/03/qbga9unahv0u4dpcui0hur9ocfisq3g.png",
	"smile": "https://patchwiki.biligame.com/images/deemo2/2/2f/sb4i1me6iys0gwq00tgutlxj3c9xfmh.png",
	"surprise": "https://patchwiki.biligame.com/images/deemo2/b/b3/o1rooul32lo0wed5w902fj1wu9x95rt.png",
	"ouch": "https://patchwiki.biligame.com/images/deemo2/d/dc/tqk9mst35kys74sibt8o8o6m1636iyq.png",
	"blink": "https://patchwiki.biligame.com/images/deemo2/2/2e/7o6u1yyw2d4zur371ykz1oqi6aotxom.png",
}

CSS相关代码

kanban-icon是隐藏后显示的那个图标，kanban-container是包裹所有组件的大容器，kanban-dialogue是对话框。

/* Kanban */
.kanban-icon {
    display: none;
    width: 30%;
    min-width: 50px;
}

.kanban-container {
	position: fixed; 
	bottom: -20px; 
	left: 3%; 
	width: 30%; 
	max-width: 200px;
	z-index: 3000;
}

.kanban-dialogue {
	background-color: white; 
	color: #333; 
	padding: 10px;
}