Add tick modules

README-zh_cn.md

@@ -50,7 +50,19 @@ npm rebuild --runtime=electron --target=12.0.0 --disturl=https://atom.io/downloa
 
 ## 设置
 
-你可以改变 `/asserts` 里面的文件以更改键盘属性。 **注意**: 如果你是用的是发行版本，这个文件夹在 `/resources/app/` 中。
+你可以在 `/asserts` 里面创建文件夹，并通过里面的文件更改键盘属性。 **注意**: 如果你是用的是发行版本，这个文件夹在 `/resources/app/` 中。你可以对于每一个用途单独建立一个文件夹存储设置信息，方便进行设置切换。
+
+切换通过 `/asserts/switch.json` 实现。其构成如下：
+
+```json
+{
+  "location": ["game", "abc"]
+}
+```
+
+其表示导入 `/asserts/game/abc/` 内的设置文件进行键盘设置。如果这个文件不存在或者数组为空，将会使用 `/asserts/` 内的设置文件直接进行设置。
+
+以下为所有需要的设置文件：
 
 ### options.json
 
@@ -77,7 +89,9 @@ npm rebuild --runtime=electron --target=12.0.0 --disturl=https://atom.io/downloa
 |        bounceTime        |               number                |        一个按键弹起的毫秒数        |
 |       lockShortcut       |               object                |          锁定的快捷键信息        |
 |      cleanShortcut       |               object                |          清空的快捷键信息        |
-
+|        tickSpeed         |               number                |            点击波动速度          |
+|    tickBackgroundColor   |               string                |          点击波动背景颜色        |
+
 一些细节如下：
 
 **工具栏模式**：可以是“调试模式”（显示当前按键的键值）、“KPS 模式”（显示目前按下的按键次数和 KPS）和“仅统计模式”（只统计按键次数）。
@@ -115,6 +129,8 @@ npm rebuild --runtime=electron --target=12.0.0 --disturl=https://atom.io/downloa
 }
 ```
 
+**波动**：将会在之后的 `map.txt` 中讲到。
+
 ---
 
 ### icons.json
@@ -184,6 +200,9 @@ npm rebuild --runtime=electron --target=12.0.0 --disturl=https://atom.io/downloa
 |  `<Icon> keyId width height fontSize`  |         和 `<Button>` 一样，但是使用图标作为按键文字         |
 |    `<Kps> width height fontSize`       | 一个 KPS 显示块，大小为 `(default_size * width)px x (default_size * height)px`，字体大小为 `fontSize * default_font_size`。参数可以省略，此时默认为 1 |
 |   `<Total> width height fontSize`      | 一个点击总数显示块，大小为 `(default_size * width)px x (default_size * height)px`，字体大小为 `fontSize * default_font_size`。参数可以省略，此时默认为 1 |
+| `<Tick> keyId dir height width fontSize` | 一个点击波纹模块，绑定到键 ID 为 keyId 的键上，方向为 dir（"right"、"left"、"top"、"bottom" 中的一个），其余同上。此时将会生成一个无文字的点击波纹，在点击的时候将会出现一个矩形并且跟着方向移动，松开后矩形会固定大小并且移动直到超出边框。dir 默认为 "right"，其余同上 |
+| `<TickText> keyId dir height width fontSize` | 同上，但是会显示键名称 |
+| `<TickIcon> keyId dir height width fontSize` | 同上，但是会显示键图标 |
 
 比如说，你可以使用以下代码快速生成一个 9K 带键盘信息显示的键盘：
 
@@ -209,6 +228,27 @@ npm rebuild --runtime=electron --target=12.0.0 --disturl=https://atom.io/downloa
 
 ![B___E__@W_OQ8J1_S2XY066.png](https://s2.loli.net/2022/05/05/YPQuJhXT3UwSyrb.png)
 
+也可以使用如下代码生成一个 Z-X 按键的游戏键盘：
+
+```
+<Column>
+  <Row>
+    <TickText> Z right 5
+    <Button> Z
+  </Row>
+  <Row>
+    <TickText> X right 5
+    <Button> X
+  </Row>
+  <Row>
+    <Kps> 2
+    <Total> 4
+  </Row>
+</Column>
+```
+
+![TL__M9Z_RNR1__CMTUYE_J8.png](https://s2.loli.net/2022/05/05/YNzTBP78Z1ExdVQ.png)
+
 在 `/examples` 文件夹中，会有若干个键位布局模板。你可以根据上述规则创建你自己的键位布局。如果你觉得你的键位布局很实用，可以尝试开一个 Issue 并提供它。
 
 以下是 `/examples` 文件夹下的模板：

README.md

@@ -50,7 +50,19 @@ This command will add a folder `/node_modules/iohook/builds`, with pre-build fil
 
 ## Settings
 
-You can change files in `/asserts` in order to modify the style of the keyboard. **Notice**: if you are using releases, the directory should be in `/resources/app/`.
+You can add some folders in `/asserts` and add setting files in order to modify the style of the keyboard. **Notice**: if you are using releases, the directory should be in `/resources/app/`. You can put different settings in different folders, in order to switch quickly.
+
+You can switch the settings by `/asserts/switch.json`. For example:
+
+```json
+{
+  "location": ["game", "abc"]
+}
+```
+
+means using setting files in `/asserts/game/abc/` to set up the keyboard. If the file doesn't exist or the array is empty, we use setting files in `/asserts/` to initialize.
+
+Here are all the setting files:
 
 ### options.json
 
@@ -77,6 +89,8 @@ This is a json file including all the function switchers and style settings. Key
 | bounceTime | number | Milliseconds for a key to bounce up |
 | lockShortcut | object | Information of lock shortcut |
 | cleanShortcut | object | Information of clean shortcut |
+| tickSpeed | number | Tick movement speed |
+| tickBackgroundColor | string | Tick background color |
 
 Some details below:
 
@@ -102,6 +116,8 @@ The example above means `Ctrl + Shift + L`. If you use shortcut to lock / unlock
 
 **Clean shortcut**: the setting types are the same as key shortcut. after cleaning the keyboard, all the key count (so as the key heatmap and total count) will be set as zero.
 
+**Tick**: will be mentioned in `map.txt` section.
+
 If you use default settings, you can get a light keyboard with no functions. Here is a color scheme for a dark keyboard:
 
 ```json
@@ -185,6 +201,9 @@ Let's say that the `default_size` of keys and blanks is `2 * default_font_size`.
 | `<Icon> keyId width height fontSize` | Same as `<Button>`, but use the icon as the key text. |
 | `<Kps> width height fontSize` | A KPS display block, with the size of `(default_size * width)px x (default_size * height)px` and the font size of `fontSize * default_font_size`. The arguments can be absent, with default values of 1 |
 | `<Total> width height fontSize` | A TOTAL display block, with the size of `(default_size * width)px x (default_size * height)px` and the font size of `fontSize * default_font_size`. The arguments can be absent, with default values of 1 |
+| `<Tick> keyId dir height width fontSize` | A tick for key with keyId as key, with the direction of dir (one of "right", "left", "top" and "bottom"), and some other settings that are the same as above. You can learn what 'tick' is from the example photo. The default value of "dir" is "right" |
+| `<TickText> keyId dir height width fontSize` | Same as above, but with key name |
+| `<TickIcon> keyId dir height width fontSize` | Same as above, but with key icon |
 
 For example, you can quickly generate a 9-key keyboard with kps and total key by this code:
 
@@ -210,6 +229,27 @@ For example, you can quickly generate a 9-key keyboard with kps and total key by
 
 ![B___E__@W_OQ8J1_S2XY066.png](https://s2.loli.net/2022/05/05/YPQuJhXT3UwSyrb.png)
 
+and a Z-X game keyboard:
+
+```
+<Column>
+  <Row>
+    <TickText> Z right 5
+    <Button> Z
+  </Row>
+  <Row>
+    <TickText> X right 5
+    <Button> X
+  </Row>
+  <Row>
+    <Kps> 2
+    <Total> 4
+  </Row>
+</Column>
+```
+
+![TL__M9Z_RNR1__CMTUYE_J8.png](https://s2.loli.net/2022/05/05/YNzTBP78Z1ExdVQ.png)
+
 In `/examples` folder, there are some templates of maps. You can make your own map file with the rules above. If you thought that your map file is practical, you can open an Issue and provide it.
 
 Here are the examples from `/examples` folder:

asserts/switch.json

@@ -0,0 +1,3 @@
+{
+  "location": ["main"]
+}

css/main.css

@@ -9,6 +9,7 @@
   --font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
   --key-shadow-color: #FFF8;
   --tool-bar-font-size: 1em;
+  --tick-background: orange;
 }
 .buttonDivCpoy {
   display: inline-flex;
@@ -24,7 +25,6 @@
   transform: translateY(0px);
   transition: var(--bounce-time) transform, var(--bounce-time) box-shadow, var(--bounce-time) background, var(--bounce-time) color;
   text-decoration: none;
-  user-select: none;
   overflow: hidden;
   font-size: 1em;
   line-height: 1em;
@@ -47,7 +47,6 @@
   transform: translateY(0px);
   transition: var(--bounce-time);
   text-decoration: none;
-  user-select: none;
   overflow: hidden;
 }
 .buttonDiv span:first-child {
@@ -71,6 +70,10 @@ body {
   display: inline-block;
 }
 
+* {
+  user-select: none;
+}
+
 .innerContent {
   border-radius: 3px;
 }
@@ -167,7 +170,7 @@ body.at_desktop {
 }
 
 .lockerMask i{
-  font-size: 16px;
+  font-size: 20px;
   color: var(--key-font-color);
   transition: 0.2s;
   cursor: pointer;
@@ -191,9 +194,110 @@ body.at_desktop {
   top: calc(50% + 2px);
   left: 50%;
   transform: translate(-50%, -50%);
-  color: red;
   z-index: -1;
   color: inherit;
   font-size: 1.1em;
   opacity: 0.3;
+}
+
+.tickDisplayer {
+  margin: 3px;
+  position: relative;
+  border-radius: 3px;
+  overflow: hidden;
+  transition: var(--bounce-time);
+  background: var(--key-background-color);
+  font-family: var(--font-family);
+  color: var(--key-font-color);
+}
+
+.tickDisplayer.right .tickMark {
+  background: linear-gradient(90deg, transparent 70%, var(--background-color) 100%);
+  font-size: 1em;
+  line-height: inherit;
+  text-align: right;
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  font-weight: bold;
+  font-family: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.tickDisplayer.left .tickMark {
+  background: linear-gradient(270deg, transparent 70%, var(--background-color) 100%);
+  font-size: 1em;
+  line-height: inherit;
+  text-align: left;
+  box-sizing: border-box;
+  padding-left: 0.5em;
+  font-weight: bold;
+  font-family: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.tickDisplayer.up .tickMark {
+  background: linear-gradient(0deg, transparent 70%, var(--background-color) 100%);
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  box-sizing: border-box;
+  padding-top: 0.2em;
+  font-weight: bold;
+  font-family: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.tickDisplayer.down .tickMark {
+  background: linear-gradient(180deg, transparent 70%, var(--background-color) 100%);
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  box-sizing: border-box;
+  font-weight: bold;
+  font-family: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.tickDisplayer.down .tickMark span {
+  position: absolute;
+  display: inline-block;
+  bottom: 0.2em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.oneTick {
+  position: absolute;
+  border-radius: 0px;
+  background: var(--tick-background);
+}
+
+.tickDisplayer.left .oneTick, .tickDisplayer.right .oneTick{
+  height: 100%;
+  top: 0;
+}
+
+.tickDisplayer.up .oneTick, .tickDisplayer.down .oneTick{
+  width: 100%;
+  left: 0;
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "Keyboard_Overlay",
-    "version": "0.1.3",
+    "version": "0.2.0",
     "main": "main.js",
     "dependencies": {
         "app": "^0.1.0",