From f4741645a2cc3ae08b51919dcbd23f4ddeef752e Mon Sep 17 00:00:00 2001
From: tiger2005 <41613797+tiger2005@users.noreply.github.com>
Date: Thu, 5 May 2022 22:20:55 +0800
Subject: [PATCH] Add tick modules

---
 README-zh_cn.md                      |  44 +++-
 README.md                            |  42 +++-
 asserts/{ => main}/bindings.json     |   0
 asserts/{ => main}/bindings_web.json |   0
 asserts/{ => main}/icons.json        |   0
 asserts/{ => main}/map.txt           |   0
 asserts/{ => main}/options.json      |   0
 asserts/switch.json                  |   3 +
 css/main.css                         | 112 ++++++++-
 package-lock.json                    |   2 +-
 package.json                         |   2 +-
 scripts/main.js                      | 340 ++++++++++++++++++++++++++-
 12 files changed, 527 insertions(+), 18 deletions(-)
 rename asserts/{ => main}/bindings.json (100%)
 rename asserts/{ => main}/bindings_web.json (100%)
 rename asserts/{ => main}/icons.json (100%)
 rename asserts/{ => main}/map.txt (100%)
 rename asserts/{ => main}/options.json (100%)
 create mode 100644 asserts/switch.json

diff --git a/README-zh_cn.md b/README-zh_cn.md
index 9c0f7f1..633cb78 100644
--- a/README-zh_cn.md
+++ b/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` 文件夹下的模板：
diff --git a/README.md b/README.md
index 862c7d5..9806582 100644
--- a/README.md
+++ b/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:
diff --git a/asserts/bindings.json b/asserts/main/bindings.json
similarity index 100%
rename from asserts/bindings.json
rename to asserts/main/bindings.json
diff --git a/asserts/bindings_web.json b/asserts/main/bindings_web.json
similarity index 100%
rename from asserts/bindings_web.json
rename to asserts/main/bindings_web.json
diff --git a/asserts/icons.json b/asserts/main/icons.json
similarity index 100%
rename from asserts/icons.json
rename to asserts/main/icons.json
diff --git a/asserts/map.txt b/asserts/main/map.txt
similarity index 100%
rename from asserts/map.txt
rename to asserts/main/map.txt
diff --git a/asserts/options.json b/asserts/main/options.json
similarity index 100%
rename from asserts/options.json
rename to asserts/main/options.json
diff --git a/asserts/switch.json b/asserts/switch.json
new file mode 100644
index 0000000..d95a2bd
--- /dev/null
+++ b/asserts/switch.json
@@ -0,0 +1,3 @@
+{
+  "location": ["main"]
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 008b53c..e6abe4a 100644
--- a/css/main.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 61055f8..52ccd72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "Keyboard_Overlay",
-    "version": "0.1.3",
+    "version": "0.2.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
diff --git a/package.json b/package.json
index 6168f8e..512d0e8 100644
--- a/package.json
+++ b/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",
diff --git a/scripts/main.js b/scripts/main.js
index 96e24ed..50a1852 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -21,6 +21,10 @@
   let displayShortcut = false;
   let clickedSwicher = {};
   let useKps = false;
+  let majorFontSize = 14;
+  let tickSpeed = 10;
+
+  let directoryLocation = undefined;
 
   let useLockShortcut = false;
   let lockShortcutInfo = {};
@@ -101,6 +105,9 @@
     $(".innerContent").addClass("addBlur");
     hitMatrix = {};
     $(".buttonDiv").removeClass("clicked");
+    $(`.tickDisplayer`).each(function(){
+      tickRemoveEvent(Number($(this).attr("index")));
+    });
     if(!silent && runInElectron) {
       let option = {
         title: "The keyboard had been locked!",
@@ -144,6 +151,183 @@
       $(`.buttonDiv > .counter`).each(function(){
           $(this).html(0);
       });
+    $(".buttonCountDiv[type=total] > span").html("0");
+  }
+
+  let tickIndexToEvent = {};
+  let animationEnd = {};
+  let tickEventIndex = 0;
+  const tickAddEvent = (idx) => {
+    if(tickIndexToEvent[idx] === undefined)
+      tickIndexToEvent[idx] = 0;
+    if(tickIndexToEvent[idx] !== 0)
+      return;
+    const tkIdx = ++ tickEventIndex;
+    tickIndexToEvent[idx] = tkIdx;
+    let dom = $(`.tickDisplayer[index=${idx}]`);
+    if(dom.hasClass("right")){
+      let len = dom.width();
+      let moveTime = len / (tickSpeed * majorFontSize);
+      let ele = undefined;
+      dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="width: ${2 * len}px; transition: transform ${2 * moveTime}s linear; right: ${len}px"></div>`));
+      setTimeout(() => {
+        ele.css("transform", `translateX(${2 * len}px)`);
+        setTimeout(() => {
+          animationEnd[tkIdx] = true;
+        }, moveTime * 1000);
+      }, 20);
+    }
+    else if(dom.hasClass("left")){
+      let len = dom.width();
+      let moveTime = len / (tickSpeed * majorFontSize);
+      let ele = undefined;
+      dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="width: ${2 * len}px; transition: transform ${2 * moveTime}s linear; left: ${len}px"></div>`));
+      setTimeout(() => {
+        ele.css("transform", `translateX(${-2 * len}px)`);
+        setTimeout(() => {
+          animationEnd[tkIdx] = true;
+        }, moveTime * 1000);
+      }, 20);
+    }
+    else if(dom.hasClass("down")){
+      let len = dom.height();
+      let moveTime = len / (tickSpeed * majorFontSize);
+      let ele = undefined;
+      dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="height: ${2 * len}px; transition: transform ${2 * moveTime}s linear; bottom: ${len}px"></div>`));
+      setTimeout(() => {
+        ele.css("transform", `translateY(${2 * len}px)`);
+        setTimeout(() => {
+          animationEnd[tkIdx] = true;
+        }, moveTime * 1000);
+      }, 20);
+    }
+    else{
+      let len = dom.height();
+      let moveTime = len / (tickSpeed * majorFontSize);
+      let ele = undefined;
+      dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="height: ${2 * len}px; transition: transform ${2 * moveTime}s linear; top: ${len}px"></div>`));
+      setTimeout(() => {
+        ele.css("transform", `translateY(${-2 * len}px)`);
+        setTimeout(() => {
+          animationEnd[tkIdx] = true;
+        }, moveTime * 1000);
+      }, 20);
+    }
+  };
+  const tickRemoveEvent = (idx) => {
+    if(tickIndexToEvent[idx] === 0 || tickIndexToEvent[idx] === undefined)
+      return;
+    let dom = $(`.tickDisplayer[index=${idx}]`);
+    let tkIdx = tickIndexToEvent[idx];
+    tickIndexToEvent[idx] = 0;
+    if(dom.hasClass("right")){
+      let len = dom.width();
+      let ele = $(`.oneTick[id=${tkIdx}]`);
+      let moveTime = len / (tickSpeed * majorFontSize);
+      if(animationEnd[tkIdx]){
+        ele.remove();
+        delete animationEnd[tkIdx];
+        tkIdx = ++ tickEventIndex;
+        dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="width: ${len}px; transition: transform ${moveTime}s linear; right: 0px"></div>`));
+        setTimeout(() => {
+          ele.css("transform", `translateX(${len}px)`);
+          setTimeout(() => {
+            ele.remove();
+          }, moveTime * 1000);
+        }, 20);
+      }
+      else{
+        let p = ele.position().left;
+        p = 2 * len + p;
+        p = Math.max(p, 0.05 * (moveTime * majorFontSize));
+        ele.css("width", Math.ceil(p));
+        setTimeout(() => {
+          ele.remove();
+          delete animationEnd[tkIdx];
+        }, moveTime * 1000);
+      }
+    }
+    else if(dom.hasClass("left")){
+      let len = dom.width();
+      let ele = $(`.oneTick[id=${tkIdx}]`);
+      let moveTime = len / (tickSpeed * majorFontSize);
+      if(animationEnd[tkIdx]){
+        ele.remove();
+        delete animationEnd[tkIdx];
+        tkIdx = ++ tickEventIndex;
+        dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="width: ${len}px; transition: transform ${moveTime}s linear; left: 0px"></div>`));
+        setTimeout(() => {
+          ele.css("transform", `translateX(${-1 * len}px)`);
+          setTimeout(() => {
+            ele.remove();
+          }, moveTime * 1000);
+        }, 20);
+      }
+      else{
+        let p = ele.position().left;
+        p = len - p;
+        p = Math.max(p, 0.05 * (moveTime * majorFontSize));
+        ele.css("width", Math.ceil(p));
+        setTimeout(() => {
+          ele.remove();
+          delete animationEnd[tkIdx];
+        }, moveTime * 1000);
+      }
+    }
+    else if(dom.hasClass("down")){
+      let len = dom.height();
+      let ele = $(`.oneTick[id=${tkIdx}]`);
+      let moveTime = len / (tickSpeed * majorFontSize);
+      if(animationEnd[tkIdx]){
+        ele.remove();
+        delete animationEnd[tkIdx];
+        tkIdx = ++ tickEventIndex;
+        dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="height: ${len}px; transition: transform ${moveTime}s linear; bottom: 0px"></div>`));
+        setTimeout(() => {
+          ele.css("transform", `translateY(${len}px)`);
+          setTimeout(() => {
+            ele.remove();
+          }, moveTime * 1000);
+        }, 20);
+      }
+      else{
+        let p = ele.position().top;
+        p = 2 * len + p;
+        p = Math.max(p, 0.05 * (moveTime * majorFontSize));
+        ele.css("height", Math.ceil(p));
+        setTimeout(() => {
+          ele.remove();
+          delete animationEnd[tkIdx];
+        }, moveTime * 1000);
+      }
+    }
+    else{
+      let len = dom.height();
+      let ele = $(`.oneTick[id=${tkIdx}]`);
+      let moveTime = len / (tickSpeed * majorFontSize);
+      if(animationEnd[tkIdx]){
+        ele.remove();
+        delete animationEnd[tkIdx];
+        tkIdx = ++ tickEventIndex;
+        dom.append(ele = $(`<div class='oneTick' id=${tkIdx} style="height: ${len}px; transition: transform ${moveTime}s linear; top: 0px"></div>`));
+        setTimeout(() => {
+          ele.css("transform", `translateY(${-1 * len}px)`);
+          setTimeout(() => {
+            ele.remove();
+          }, moveTime * 1000);
+        }, 20);
+      }
+      else{
+        let p = ele.position().top;
+        p = len - p;
+        p = Math.max(p, 0.05 * (moveTime * majorFontSize));
+        ele.css("height", Math.ceil(p));
+        setTimeout(() => {
+          ele.remove();
+          delete animationEnd[tkIdx];
+        }, moveTime * 1000);
+      }
+    }
   }
 
   let hitMatrix = {};
@@ -240,10 +424,14 @@
       if(keyHeatmap !== "none")
         flushHeatmap(p);
     }
-    if(p !== undefined)
+    if(p !== undefined){
       $(`.buttonDiv[key=${keyIdMask(p)}]`).each(function(){
           $(this).addClass("clicked");
       });
+      $(`.tickDisplayer[key=${keyIdMask(p)}]`).each(function(){
+        tickAddEvent(Number($(this).attr("index")));
+      });
+    }
     if(displayShortcut && codeToKey[ck].mouse !== true){
       let q = codeToKey[ck];
       if(q.switch !== undefined){
@@ -310,10 +498,14 @@
       shiftOnEnter = Math.max(shiftOnEnter - 1, 0);
     flushShift(e.shiftKey);
     let p = codeToKey[ck].id.toUpperCase();
-    if(p !== undefined)
+    if(p !== undefined){
       $(`.buttonDiv[key=${keyIdMask(p)}]`).each(function(){
           $(this).removeClass("clicked");
       });
+      $(`.tickDisplayer[key=${keyIdMask(p)}]`).each(function(){
+        tickRemoveEvent(Number($(this).attr("index")));
+      });
+    }
     if(displayShortcut && codeToKey[ck].mouse !== true){
       let q = codeToKey[ck];
       if(q.switch !== undefined){
@@ -357,9 +549,11 @@
   };
 
   const setErrorMessage = (x) => {
+    if(directoryLocation !== undefined)
+      x = x + "<br/>" + "Directory: /" + directoryLocation;
     errorMessage = true;
-    $(".keyboardContainer").html(`<div style="display: flex; flex-direction: column; text-align: center; padding: 3px 5px;" class="buttonDiv">
-      <i class='fas fa-circle-xmark' style="color: red; font-size: 1.5em"></i>
+    $(".keyboardContainer").html(`<div style="display: flex; flex-direction: column; text-align: center; padding: 3px 5px; max-width: 300px;" class="buttonDiv">
+      <i class='fas fa-circle-xmark' style="color: red; font-size: 1.5em;"></i>
       <span style="color: var(--key-font-color)">${x}</span>
     </div>`);
     if(runInElectron){
@@ -439,7 +633,49 @@
 
   const refreshOverallInfo = () => {
     $.ajax({
-      url: "asserts/options.json",
+      url: "asserts/switch.json",
+      async: false,
+      success: function(d) {
+        if(d.location !== undefined){
+          d = d.location;
+          if(typeof d !== "object" || !d.hasOwnProperty("length")){
+            setErrorMessage("Directory location should be an array with strings.");
+            return;
+          }
+          for(var i = 0; i < d.length; i++)
+            if(typeof d[i] !== "string"){
+              setErrorMessage("Directory location should be an array with strings.");
+              return;
+            }
+          const bannedList = ["\\", "/", ":", "*", "?", "\"", "<", ">", "|"];
+          for(var i = 0; i < d.length; i++){
+            var usage = true;
+            for(var j = 0; j < bannedList.length; j++)
+              usage &= (d[i].indexOf(bannedList[j]) === -1);
+            if(!usage){
+              setErrorMessage("Unexpected character found in location(s)");
+            }
+          }
+          directoryLocation = "";
+          for(var i = 0; i < d.length; i++)
+            directoryLocation += (d[i] + "/");
+        }
+        else {
+          setErrorMessage("Cannot get directory location option.");
+        }
+      },
+      error: function() {
+        directoryLocation = "";
+      }
+    });
+
+    console.log(directoryLocation);
+
+    if(errorMessage)
+      return;
+
+    $.ajax({
+      url: `asserts/${directoryLocation}options.json`,
       async: false,
       success: function(data){
         if(typeof data !== "object"){
@@ -458,8 +694,10 @@
           document.documentElement.style.setProperty("--key-active-background-color", data.keyActiveBackgroundColor);
         if(data.keyActiveFontColor !== undefined)
           document.documentElement.style.setProperty("--key-active-font-color", data.keyActiveFontColor);
+        if(data.tickBackgroundColor !== undefined)
+          document.documentElement.style.setProperty("--tick-background", data.tickBackgroundColor);
         if(typeof data.fontSize === "number")
-          document.documentElement.style.setProperty("--font-size", data.fontSize + "px");
+          document.documentElement.style.setProperty("--font-size", data.fontSize + "px"), majorFontSize = data.fontSize;
         if(data.fontFamily !== undefined)
           document.documentElement.style.setProperty("--font-family", data.fontFamily);
         if(typeof data.toolBarFontSize === "number")
@@ -521,6 +759,8 @@
           useCleanShortcut = true;
           cleanShortcutInfo = data.cleanShortcut;
         }
+        if(typeof(data.tickSpeed) === "number")
+          tickSpeed = data.tickSpeed <= 0 ? 10 : data.tickSpeed;
       },
       error: function(){
         setErrorMessage("Cannot load options.");
@@ -534,7 +774,7 @@
       return;
 
     $.ajax({
-      url: (runInElectron ? "asserts/bindings.json" : "asserts/bindings_web.json"),
+      url: (runInElectron ? `asserts/${directoryLocation}bindings.json` : `asserts/${directoryLocation}bindings_web.json`),
       async: false,
       success: function(data){
         if(typeof data !== "object" || ! data.hasOwnProperty("length")){
@@ -580,7 +820,7 @@
       return;
 
     $.ajax({
-      url: "asserts/icons.json",
+      url: `asserts/${directoryLocation}icons.json`,
       async: false,
       success: function(data){
         if(typeof data !== "object"){
@@ -616,7 +856,7 @@
     }
 
     $.ajax({
-      url: "asserts/map.txt",
+      url: `asserts/${directoryLocation}map.txt`,
       async: false,
       success: function(data) {
         var res = "";
@@ -631,6 +871,7 @@
         }
         var statementId = 0;
         var bracketList = [];
+        var tickIndex = 0;
         for(var i = 0; i < data.length; i ++){
           var p = data[i].split("\r");
           for(var j = 0; j < p.length; j ++){
@@ -716,6 +957,79 @@
               var ft = getNum(dt[3]);
               res += `<div class="buttonCountDiv" type="total" height=${ht} width=${wd} font=${ft}><div class='keyBg'><i class='fas fa-keyboard'></i></div><span>0</span></div>`;
             }
+            else if(dt[0] === "<Tick>"){
+              if(dt.length === 1){
+                setErrorMessage('Missing argument at statement ' + statementId + ".");
+                return;
+              }
+              var cnt = dt[1].toUpperCase();
+              if(idToKey[cnt] === undefined){
+                setErrorMessage("Cannot find key of id \"" + allHtmlSpecialChars(dt[1]) + '\" at statement ' + statementId + ".");
+                return;
+              }
+              var direction = dt[2];
+              if(direction === undefined)
+                direction = "right";
+              if(["up", "down", "left", "right"].indexOf(direction) === -1){
+                setErrorMessage('Unexpected direction at statement ' + statementId + ".");
+                return;
+              }
+              var wd = getNum(dt[3]);
+              var ht = getNum(dt[4]);
+              var ft = getNum(dt[5]);
+              res += `<div class="tickDisplayer ${direction}" index="${++ tickIndex}" key="${keyIdMask(cnt)}" height=${ht} width=${wd} font=${ft}><div class='tickMark'></div></div>`;
+              keyCounter[cnt] = 0;
+            }
+            else if(dt[0] === "<TickText>"){
+              if(dt.length === 1){
+                setErrorMessage('Missing argument at statement ' + statementId + ".");
+                return;
+              }
+              var cnt = dt[1].toUpperCase();
+              if(idToKey[cnt] === undefined){
+                setErrorMessage("Cannot find key of id \"" + allHtmlSpecialChars(dt[1]) + '\" at statement ' + statementId + ".");
+                return;
+              }
+              var direction = dt[2];
+              if(direction === undefined)
+                direction = "right";
+              if(["up", "down", "left", "right"].indexOf(direction) === -1){
+                setErrorMessage('Unexpected direction at statement ' + statementId + ".");
+                return;
+              }
+              var wd = getNum(dt[3]);
+              var ht = getNum(dt[4]);
+              var ft = getNum(dt[5]);
+              res += `<div class="tickDisplayer ${direction}" index="${++ tickIndex}" key="${keyIdMask(cnt)}" height=${ht} width=${wd} font=${ft}><div class='tickMark'><span>${idToKey[cnt].name}</span></div></div>`;
+              keyCounter[cnt] = 0;
+            }
+            else if(dt[0] === "<TickIcon>"){
+              if(dt.length === 1){
+                setErrorMessage('Missing argument at statement ' + statementId + ".");
+                return;
+              }
+              var cnt = dt[1].toUpperCase();
+              if(idToKey[cnt] === undefined){
+                setErrorMessage("Cannot find key of id \"" + allHtmlSpecialChars(dt[1]) + '\" at statement ' + statementId + ".");
+                return;
+              }
+              if(icons[cnt] === undefined){
+                setErrorMessage("Cannot find icon of id \"" + allHtmlSpecialChars(dt[1]) + '\" at statement ' + statementId + ".");
+                return;
+              }
+              var direction = dt[2];
+              if(direction === undefined)
+                direction = "right";
+              if(["up", "down", "left", "right"].indexOf(direction) === -1){
+                setErrorMessage('Unexpected direction at statement ' + statementId + ".");
+                return;
+              }
+              var wd = getNum(dt[3]);
+              var ht = getNum(dt[4]);
+              var ft = getNum(dt[5]);
+              res += `<div class="tickDisplayer ${direction}" index="${++ tickIndex}" key="${keyIdMask(cnt)}" height=${ht} width=${wd} font=${ft}><div class='tickMark'><span>${icons[cnt]}</span></div></div>`;
+              keyCounter[cnt] = 0;
+            }
             else if(dt[0] === undefined){
               setErrorMessage("Unknown token at statement " + statementId + ".");
               return;
@@ -754,6 +1068,14 @@
             false)
           );
         });
+        $(".tickDisplayer").each(function(){
+          $(this).attr("style", getScaleStyle(
+            Number($(this).attr("width")),
+            Number($(this).attr("height")),
+            Number($(this).attr("font")),
+            false)
+          );
+        });
         if(displayShortcut)
           $(".shortcutKeyContainer").css("display", "block");
         if(runInElectron)