// ==UserScript==
// @name 敲起来([日语假名]按照标准键盘布局显示对应位置)
// @description 当你在敲击键盘的时候, 按照标准键盘布局的位置,出现对应键位的动画特效
// @version 0.5.0.1
// @author 胡朝旭
// @include *
// @require https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
// @grant none
// @run-at document-start
// @namespace https://gf.qytechs.cn/zh-CN/users/94864-%E8%83%A1%E6%9C%9D%E6%97%AD-rory
// @license The MIT License (MIT); http://opensource.org/licenses/MIT
// ==/UserScript==
(function ($) {
let cursor = {
x: 0,
y: 0
};
let bianju=50;
//小于30可能因为字体不能再变小而造成排版混乱
let wh={
w:0,
h:0
};
let keyboardMap = [
//键位,x坐标,y坐标,高比例,宽比例
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["CANCEL",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["HELP",0,1,1,1],
["",0,1,1,1],
["BACK SPACE",5.5,0,1,2],
["TAB↹",-7.5,1,1,1.5],
["",0,1,1,1],
["",0,1,1,1],
["CLEAR",0,1,1,1],
["↲Enter",5.5,2,1,2],
["ENTER SPECIAL",0,1,1,1],
["",0,1,1,1],
["⇑Shft",-7.5,3,1,2],
["Ctrl",-7.5,4,1,1],
["Alt",-5,4,1,1],
["PAUSE",0,1,1,1],
["大/小 写",-7.5,2,1,1.8],
["KANA",0,1,1,1],
["EISU",0,1,1,1],
["JUNJA",0,1,1,1],
["FINAL",0,1,1,1],
["HANJA",0,1,1,1],
["",0,1,1,1],
["Esc",-8.5,0,1,1],
["CONVERT",0,1,1,1],
["NONCONVERT",0,1,1,1],
["ACCEPT",0,1,1,1],
["MODECHANGE",0,1,1,1],
["空格",-3.5,4,1,5.5],
["PAGE UP",10.5,0,1,1],
["PAGE DOWN",10.5,1,1,1],
["END",9.5,1,1,1],
["HOME",9.5,0,1,1],
["左",8.5,4,1,1],
["上",9.5,3,1,1],
["右",10.5,4,1,1],
["下",9.5,4,1,1],
["SELECT",0,1,1,1],
["PRINT",0,1,1,1],
["EXECUTE",0,1,1,1],
["PRINTSCREEN",0,1,1,1],
["INSERT",8.5,0,1,1],
["DELETE",8.5,1,1,1],
["",0,1,1,1],
["わ(ワ) を(ヲ)",2.5,0,1,1],
["ぬ(ヌ)",-6.5,0,1,1],
["ふ(フ)",-5.5,0,1,1],
["あ(ア) あ",-4.5,0,1,1],
["う(ウ) う",-3.5,0,1,1],
["え(エ) え",-2.5,0,1,1],
["お(オ) お",-1.5,0,1,1],
["や(ヤ) や",-0.5,0,1,1],
["ゆ(ユ) ゆ",0.5,0,1,1],
["よ(ヨ) よ",1.5,0,1,1],
["COLON",0,1,1,1],
["SEMICOLON",0,1,1,1],
["LESS THAN",0,1,1,1],
["EQUALS",0,1,1,1],
["GREATER THAN",0,1,1,1],
["QUESTION MARK",0,1,1,1],
["AT",0,1,1,1],
["ち(チ)",-5.7,2,1,1],
["こ(コ)",-1,3,1,1],
["そ(ソ)",-3,3,1,1],
["し(シ)",-3.7,2,1,1],
["い(イ)",-4,1,1,1],
["は(ハ)",-2.7,2,1,1],
["き(キ)",-1.7,2,1,1],
["く(ク)",-0.7,2,1,1],
["に(ニ)",1,1,1,1],
["ま(マ)",0.3,2,1,1],
["の(ノ)",1.3,2,1,1],
["り(リ)",2.3,2,1,1],
["も(モ)",1,3,1,1],
["み(ミ)",0,3,1,1],
["ら(ラ)",2,1,1,1],
["せ(セ)",3,1,1,1],
["た(タ)",-6,1,1,1],
["す(ス)",-3,1,1,1],
["と(ト)",-4.7,2,1,1],
["か(カ)",-2,1,1,1],
["な(ナ)",0,1,1,1],
["ひ(ヒ)",-2,3,1,1],
["て(テ)",-5,1,1,1],
["さ(サ)",-4,3,1,1],
["ん(ン)",-1,1,1,1],
["つ(ツ)",-5,3,1,1],
["OS KEY",-6,4,1,1],
["",0,1,1,1],
["CONTEXT MENU",0,1,1,1],
["",0,1,1,1],
["SLEEP",0,1,1,1],
["NUM 0",12.5,4,1,2],
["NUM 1",12.5,3,1,1],
["NUM 2",13.5,3,1,1],
["NUM 3",14.5,3,1,1],
["NUM 4",12.5,2,1,1],
["NUM 5",13.5,2,1,1],
["NUM 6",14.5,2,1,1],
["NUM 7",12.5,1,1,1],
["NUM 8",13.5,1,1,1],
["NUM 9",14.5,1,1,1],
["×",14.5,0,1,1],
["+",15.5,1,2,1],
["SEPARATOR",0,1,1,1],
["-",15.5,0,1,1],
[".",14.5,4,1,1],
["÷",13.5,0,1,1],
["F1",-10,1,1,1],
["F2",-9,1,1,1],
["F3",-8,1,1,1],
["F4",-7,1,1,1],
["F5",-5.5,1,1,1],
["F6",-4.5,1,1,1],
["F7",-3.5,1,1,1],
["F8",-1,1,1,1],
["F9",-1,1,1,1],
["F10",0,1,1,1],
["F11",4.5,0,1,1],
["F12",5.5,0,1,1],
["F13",0,1,1,1],
["F14",0,1,1,1],
["F15",0,1,1,1],
["F16",0,1,1,1],
["F17",0,1,1,1],
["F18",0,1,1,1],
["F19",0,1,1,1],
["F20",0,1,1,1],
["F21",0,1,1,1],
["F22",0,1,1,1],
["F23",0,1,1,1],
["F24",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["NUM LOCK",12.5,0,1,1],
["SCROLL LOCK",0,1,1,1],
["WIN OEM FJ JISHO",0,1,1,1],
["WIN OEM FJ MASSHOU",0,1,1,1],
["WIN OEM FJ TOUROKU",0,1,1,1],
["WIN OEM FJ LOYA",0,1,1,1],
["WIN OEM FJ ROYA",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["CIRCUMFLEX",0,1,1,1],
["EXCLAMATION",0,1,1,1],
["DOUBLE QUOTE",0,1,1,1],
["HASH",0,1,1,1],
["DOLLAR",0,1,1,1],
["PERCENT",0,1,1,1],
["AMPERSAND",0,1,1,1],
["UNDERSCORE",0,1,1,1],
["OPEN PAREN",0,1,1,1],
["CLOSE PAREN",0,1,1,1],
["ASTERISK",0,1,1,1],
["PLUS",0,1,1,1],
["PIPE",0,1,1,1],
["HYPHEN MINUS",0,1,1,1],
["OPEN CURLY BRACKET",0,1,1,1],
["CLOSE CURLY BRACKET",0,1,1,1],
["TILDE",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["VOLUME MUTE",0,1,1,1],
["VOLUME DOWN",0,1,1,1],
["VOLUME UP",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["れ(レ)",3.3,2,1,1],
["へ(ヘ)",4.5,0,1,1],
["ね(ネ)、",2,3,1,1],
["ほ(ホ)",3.5,0,1,1],
["る(ゥ)。",3,3,1,1],
["め(メ)・",4,3,1,1],
["ろ(ロ)",-7.5,0,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["゛(濁点)",4,1,1,1],
["む(ム)",6,1,1,1.5],
["゜(半濁点)",5,1,1,1],
["け(ケ)",4.3,2,1,1],
["",0,1,1,1],
["META",0,1,1,1],
["ALTGR",0,1,1,1],
["",0,1,1,1],
["WIN ICO HELP",0,1,1,1],
["WIN ICO 00",0,1,1,1],
["",0,1,1,1],
["WIN ICO CLEAR",0,1,1,1],
["",0,1,1,1],
["",0,1,1,1],
["WIN OEM RESET",0,1,1,1],
["WIN OEM JUMP",0,1,1,1],
["WIN OEM PA1",0,1,1,1],
["WIN OEM PA2",0,1,1,1],
["WIN OEM PA3",0,1,1,1],
["WIN OEM WSCTRL",0,1,1,1],
["WIN OEM CUSEL",0,1,1,1],
["WIN OEM ATTN",0,1,1,1],
["WIN OEM FINISH",0,1,1,1],
["WIN OEM COPY",0,1,1,1],
["WIN OEM AUTO",0,1,1,1],
["WIN OEM ENLW",0,1,1,1],
["WIN OEM BACKTAB",0,1,1,1],
["ATTN",0,1,1,1],
["CRSEL",0,1,1,1],
["EXSEL",0,1,1,1],
["EREOF",0,1,1,1],
["PLAY",0,1,1,1],
["ZOOM",0,1,1,1],
["",0,1,1,1],
["PA1",0,1,1,1],
["WIN OEM CLEAR",0,1,1,1],
["",0,1,1,1]
];
let mouseMap = [
["左键",-1.5,-1,1,1],
["中键",-0.5,-1,1,1],
["右键",0.5,-1,1,1]
];
function createEle({key, color = '#555', pageX, pageY}) {
let $span = $(`<span>${key}</span>`)
.css({
textalign:"right",
position: "absolute",
zIndex: 999999999,
top: pageY + "px",
left: pageX + "px",
display: "inline-block",
fontSize: bianju/2.5,
height:wh.h,
width:wh.w,
color: color,
backgroundColor: "#fcfcfc",
border: "solid 1px #ccc",
borderBottomColor: "#bbb",
borderRadius: "5px",
boxShadow: "inset 0 -1px 0 #bbb"
}).appendTo(document.body);
setTimeout(function () {
$span.animate({
opacity: 0,
top: "-="+bianju
}, 1500, function () {
$span.remove();
$span = null;
})
}, 500);
}
function stringToColor(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let x = 0; x < 3; x++) {
let value = (hash >> (x * 8)) & 0xFF;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;
}
// record coordinate
$(window).on('mousemove', function (event) {
event = event || window.event;
cursor.x = event.pageX;
cursor.y = event.pageY;
});
$(window).on('keyup', function (event) {
wh.w=bianju*keyboardMap[event.keyCode][4];
wh.h=bianju*keyboardMap[event.keyCode][3];
createEle({
key: keyboardMap[event.keyCode][0],
color: stringToColor((event.keyCode + event.key).repeat(2)),
pageX: cursor.x+keyboardMap[event.keyCode][1]*bianju+(keyboardMap[event.keyCode][1]+0.5)*5,
pageY: cursor.y+keyboardMap[event.keyCode][2]*(bianju+5)
});
});
$(window).mousedown(function (event) {
let key = mouseMap[event.which-1][0];
wh.w=bianju*mouseMap[event.which-1][4];
wh.h=bianju*mouseMap[event.which-1][3];
createEle({
key: key,
color: stringToColor(key),
pageX: cursor.x +mouseMap[event.which-1][1]*bianju+(mouseMap[event.which-1][1]+0.5)*5,
pageY: cursor.y+mouseMap[event.which-1][2]*(bianju+5)
});
});
})(window.jQuery.noConflict(true));