js_lis 1.0.25 → 2.0.1

package/VirtualKeyboard.js

@@ -12,10 +12,7 @@ export class VirtualKeyboard {
     this.offsetY = 0;
     this.shiftActive = false;
     this.capsLockActive = false;
-
-    // กำหนดคีย์และ IV สำหรับการเข้ารหัส
-    this.secretKey = "1234567890abcdef1234567890abcdef"; // คีย์ความยาว 32 bytes
-    this.iv = CryptoJS.lib.WordArray.random(16); // สร้าง IV ความยาว 16 bytes
+    this.isScrambled = false;
 
     this.initialize();
   }
@@ -30,64 +27,18 @@ export class VirtualKeyboard {
     }
   }
 
-  encodeText(text) {
-    const encrypted = CryptoJS.AES.encrypt(
-      text,
-      CryptoJS.enc.Hex.parse(this.secretKey),
-      {
-        iv: this.iv,
-        mode: CryptoJS.mode.CBC,
-        padding: CryptoJS.pad.Pkcs7,
-      }
-    );
-    return {
-      encrypted: encrypted.ciphertext.toString(CryptoJS.enc.Base64),
-      iv: this.iv.toString(CryptoJS.enc.Base64),
-    };
-  }
-
-  decodeText(encryptedData) {
-    if (!encryptedData || !encryptedData.encrypted || !encryptedData.iv) {
-      if (encryptedData === "\t") {
-        return "\t";
-      } else {
-        return " ";
-      }
-    }
-
-    try {
-      const decrypted = CryptoJS.AES.decrypt(
-        { ciphertext: CryptoJS.enc.Base64.parse(encryptedData.encrypted) },
-        CryptoJS.enc.Hex.parse(this.secretKey),
-        {
-          iv: CryptoJS.enc.Base64.parse(encryptedData.iv),
-          mode: CryptoJS.mode.CBC,
-          padding: CryptoJS.pad.Pkcs7,
-        }
-      );
-      return decrypted.toString(CryptoJS.enc.Utf8);
-    } catch (error) {
-      console.error("Error decoding text:", error);
-      return " ";
-    }
-  }
-
   getLayoutName(layout) {
     switch (layout) {
       case "full":
         return "Full Keyboard";
       case "en":
         return "English Keyboard";
-      case "enSc":
-        return "English scrambled";
       case "th":
         return "Thai keyboard";
-      case "thSc":
-        return "Thai scrambled";
       case "numpad":
         return "Numpad Keyboard";
-      case "scNum":
-        return "Scrambled Keyboard";
+      case "symbols":
+        return "Symbols Keyboard";
       default:
         return "Unknown Layout";
     }
@@ -127,6 +78,7 @@ export class VirtualKeyboard {
     this.currentInput.classList.add("keyboard-active");
   }
 
+  // [1]
   render() {
     const keyboard = document.createElement("div");
     keyboard.className = `virtual-keyboard ${this.currentLayout}`;
@@ -144,7 +96,7 @@ export class VirtualKeyboard {
     layoutSelector.id = "layout-selector";
     layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
 
-    const layouts = ["full", "en", "enSc", "th", "thSc", "numpad", "scNum"];
+    const layouts = ["full", "en", "th", "numpad", "symbols"];
     layouts.forEach((layout) => {
       const option = document.createElement("option");
       option.value = layout;
@@ -202,24 +154,12 @@ export class VirtualKeyboard {
     this.container.innerHTML = "";
     this.container.appendChild(keyboard);
 
-    if (this.currentLayout === "scNum") {
-      this.scrambleKeyboard();
-    }
-
-    if (this.currentLayout === "enSc") {
-      this.scrambleEnglishKeys();
-    }
-
-    if (this.currentLayout === "thSc") {
-      this.scrambleThaiKeys();
-    }
-
     keyboard.addEventListener("mousedown", (event) => this.startDrag(event));
   }
 
+  // [2]
   async handleKeyPress(keyPressed) {
     if (!this.currentInput) return;
-
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
     const value = this.currentInput.value;
@@ -234,21 +174,72 @@ export class VirtualKeyboard {
       return char.toLowerCase();
     };
 
-    if (!keyPressed) {
-      console.error("Invalid key pressed.");
+    if (!keyPressed) return console.error("Invalid key pressed.");
+
+    if (keyPressed === "scr" || keyPressed === "scrambled") {
+      if (this.currentLayout === "en") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleEnglishKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
+
+      if (this.currentLayout === "th") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleThaiKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
+
+      if (this.currentLayout === "numpad") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleKeyboard();
+        }
+        this.isScrambled = !this.isScrambled;
+        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
+          key.classList.toggle("active", this.isScrambled);
+        });
+      }
+
+      if (this.currentLayout === "symbols") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleSymbols();
+        }
+        this.isScrambled = !this.isScrambled;
+        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
+          key.classList.toggle("active", this.isScrambled);
+        });
+      }
       return;
     }
 
     switch (keyPressed) {
       case "Esc":
-        // ปิดหน้าต่างป๊อปอัพหรือยกเลิกการทำงานปัจจุบัน
         const modals = document.querySelectorAll(".modal");
         if (modals.length === 0) {
           document.exitFullscreen();
           console.warn("No modals found to close.");
         }
         modals.forEach((modal) => {
-          modal.classList.add("hidden"); // ซ่อน modal
+          modal.classList.add("hidden"); 
         });
         break;
 
@@ -332,27 +323,21 @@ export class VirtualKeyboard {
       case "Backspace":
       case "backspace":
         if (start === end && start > 0) {
-          this.currentInput.value =
-            value.slice(0, start - 1) + value.slice(end);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start - 1;
+          this.currentInput.value = value.slice(0, start - 1) + value.slice(end);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start - 1;
         } else {
           this.currentInput.value = value.slice(0, start) + value.slice(end);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start;
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
         }
         break;
 
       case "DEL⌦":
         if (start === end && start < value.length) {
-          this.currentInput.value =
-            value.slice(0, start) + value.slice(end + 1);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start;
+          this.currentInput.value = value.slice(0, start) + value.slice(end + 1);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
         } else {
           this.currentInput.value = value.slice(0, start) + value.slice(end);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start;
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
         }
         break;
 
@@ -366,23 +351,14 @@ export class VirtualKeyboard {
 
       case "Enter":
         if (this.currentInput.tagName === "TEXTAREA") {
-          this.currentInput.value =
-            value.slice(0, start) + "\n" + value.slice(end);
+          this.currentInput.value = value.slice(0, start) + "\n" + value.slice(end);
           this.currentInput.setSelectionRange(start + 1, start + 1);
-        } else if (
-          this.currentInput.tagName === "INPUT" ||
-          this.currentInput.type === "password" ||
-          this.currentInput.type === "text"
-        ) {
+        } else if (this.currentInput.tagName === "INPUT" || this.currentInput.type === "password" || this.currentInput.type === "text" ) {
           if (this.currentInput.form) {
             const submitButton = this.currentInput.form.querySelector(
               'input[type="submit"], button[type="submit"], button[type="button"], button[onclick]'
             );
-            if (submitButton) {
-              submitButton.click();
-            } else {
-              this.currentInput.form.submit();
-            }
+            if (submitButton) submitButton.click(); else this.currentInput.form.submit();
           } else {
             this.currentInput.value += "\n";
           }
@@ -418,267 +394,154 @@ export class VirtualKeyboard {
 
         if (keyPressed === "↑" && currentLineIndex > 0) {
           const prevLineLength = lines[currentLineIndex - 1].length;
-          const newPos =
-            start -
-            currentLine.length -
-            1 -
-            Math.min(columnIndex, prevLineLength);
+          const newPos = start - currentLine.length - 1 - Math.min(columnIndex, prevLineLength);
           this.currentInput.setSelectionRange(newPos, newPos);
         } else if (keyPressed === "↓" && currentLineIndex < lines.length - 1) {
           const nextLine = lines[currentLineIndex + 1];
-          const newPos =
-            start +
-            currentLine.length +
-            1 +
-            Math.min(columnIndex, nextLine.length);
+          const newPos = start + currentLine.length + 1 + Math.min(columnIndex, nextLine.length);
           this.currentInput.setSelectionRange(newPos, newPos);
         }
         break;
 
       default:
-        const encryptedText = await this.encodeText(
-          convertToCorrectCase(keyPressed)
-        );
-        await this.insertText(encryptedText);
+        const textvalue = await convertToCorrectCase(keyPressed);
+        await this.insertText(textvalue);
     }
 
-    if (isShiftActive && !isCapsActive) {
-      this.toggleShift();
-    }
+    if (isShiftActive && !isCapsActive) this.toggleShift();
 
     this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
   }
 
+  // [3]
   async insertText(text) {
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
-    const decodedText = await this.decodeText(text); // ใช้ถอดรหัสก่อนแทรก
-
-    this.currentInput.value =
-      this.currentInput.value.slice(0, start) +
-      decodedText +
-      this.currentInput.value.slice(end);
-    this.currentInput.selectionStart = this.currentInput.selectionEnd =
-      start + decodedText.length;
+    const textvalue = text; 
+
+    this.currentInput.value = this.currentInput.value.slice(0, start) + textvalue + this.currentInput.value.slice(end);
+    this.currentInput.selectionStart = this.currentInput.selectionEnd = start + textvalue.length;
   }
 
+  // [4]
+  unscrambleKeys() {
+    this.keys = this.originalKeys;
+    this.render();
+  }
+
+  // [5]
   toggleCapsLock() {
     this.capsLockActive = !this.capsLockActive;
+
     document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
       key.classList.toggle("active", this.capsLockActive);
       key.classList.toggle("bg-gray-400", this.capsLockActive);
     });
 
     document.querySelectorAll(".key").forEach((key) => {
-      if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
+      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
+
+      if (isLetter) {
         key.textContent = this.capsLockActive
           ? key.dataset.key.toUpperCase()
           : key.dataset.key.toLowerCase();
       }
+      this.updateKeyContent(key, this.capsLockActive);
     });
-
-    const keyboardKeys = document.querySelectorAll(
-      ".key:not([data-key='Caps 🄰'])"
-    );
-    keyboardKeys.forEach((key) => {
-      const currentChar = key.textContent.trim();
-      if (
-        this.capsLockActive &&
-        this.currentLayout === "th" &&
-        this.ThaiAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.ThaiAlphabetShift[currentChar];
-        key.dataset.key = this.ThaiAlphabetShift[currentChar];
-      } else if (
-        !this.capsLockActive &&
-        this.currentLayout === "th" &&
-        Object.values(this.ThaiAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.ThaiAlphabetShift).find(
-          (key) => this.ThaiAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
-      }
-
-      if (
-        this.capsLockActive &&
-        (this.currentLayout === "en" || this.currentLayout === "enSc") &&
-        this.EngAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.EngAlphabetShift[currentChar];
-        key.dataset.key = this.EngAlphabetShift[currentChar];
-      } else if (
-        !this.capsLockActive &&
-        (this.currentLayout === "en" || this.currentLayout === "enSc") &&
-        Object.values(this.EngAlphabetShift).includes(currentChar)
-      ) {
-        const originalKey = Object.keys(this.EngAlphabetShift).find(
-          (key) => this.EngAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
+  }
+  updateKeyContent(key, capsLockActive) {
+    const currentChar = key.textContent.trim();
+
+    const layouts = {
+      th: this.ThaiAlphabetShift,
+      en: this.EngAlphabetShift,
+      enSc: this.EngAlphabetShift,
+      full: this.FullAlphabetShift,
+    };
+    const layout = layouts[this.currentLayout];
+
+    if (!layout) return;
+
+    if (capsLockActive && layout[currentChar]) {
+      key.textContent = layout[currentChar];
+      key.dataset.key = layout[currentChar];
+    } else if (!capsLockActive && Object.values(layout).includes(currentChar)) {
+      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
+      if (originalKey) {
+        key.textContent = originalKey;
+        key.dataset.key = originalKey;
       }
-    });
+    }
   }
 
+  // [6]
   toggleShift() {
+    if (this.capsLockActive) {
+      return this.toggleCapsLock();
+    }
+
     this.shiftActive = !this.shiftActive;
     document.querySelectorAll('.key[data-key="Shift ⇧"]').forEach((key) => {
       key.classList.toggle("active", this.shiftActive);
+      key.classList.toggle("bg-gray-400", this.shiftActive);
     });
-
+  
     document.querySelectorAll(".key").forEach((key) => {
-      if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
+      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
+  
+      if (isLetter) {
         key.textContent = this.shiftActive
           ? key.dataset.key.toUpperCase()
           : key.dataset.key.toLowerCase();
       }
+      this.updateKeyContent(key, this.shiftActive);
     });
-
-    const keyboardKeys = document.querySelectorAll(
-      ".key:not([data-key='Shift ⇧'])"
-    );
-    keyboardKeys.forEach((key) => {
-      const currentChar = key.textContent.trim();
-      keyboardKeys.className += " space";
-      if (
-        this.shiftActive &&
-        this.currentLayout === "th" &&
-        this.ThaiAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.ThaiAlphabetShift[currentChar];
-        key.dataset.key = this.ThaiAlphabetShift[currentChar];
-      } else if (
-        !this.shiftActive &&
-        this.currentLayout === "th" &&
-        Object.values(this.ThaiAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.ThaiAlphabetShift).find(
-          (key) => this.ThaiAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
-      }
-
-      if (
-        this.shiftActive &&
-        (this.currentLayout === "en" || this.currentLayout === "enSc") &&
-        this.EngAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.EngAlphabetShift[currentChar];
-        key.dataset.key = this.EngAlphabetShift[currentChar];
-      } else if (
-        !this.shiftActive &&
-        (this.currentLayout === "en" || this.currentLayout === "enSc") &&
-        Object.values(this.EngAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.EngAlphabetShift).find(
-          (key) => this.EngAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
+  }
+  updateKeyContent(key, shiftActive) {
+    const currentChar = key.textContent.trim();
+  
+    const layouts = {
+      th: this.ThaiAlphabetShift,
+      en: this.EngAlphabetShift,
+      enSc: this.EngAlphabetShift,
+      full: this.FullAlphabetShift,
+    };
+    const layout = layouts[this.currentLayout];
+  
+    if (!layout) return;
+  
+    if (shiftActive && layout[currentChar]) {
+      key.textContent = layout[currentChar];
+      key.dataset.key = layout[currentChar];
+    } else if (!shiftActive && Object.values(layout).includes(currentChar)) {
+      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
+      if (originalKey) {
+        key.textContent = originalKey;
+        key.dataset.key = originalKey;
       }
-    });
+    }
   }
 
-  EngAlphabetShift = {
-    "`": "~",
-    1: "!",
-    2: "@",
-    3: "#",
-    4: "$",
-    5: "%",
-    6: "^",
-    7: "&",
-    8: "*",
-    9: "(",
-    0: ")",
-    "-": "_",
-    "=": "+",
-    "[": "{",
-    "]": "}",
-    "\\": "|",
-    ";": ":",
-    "'": '"',
-    ",": "<",
-    ".": ">",
-    "/": "?",
-  };
-
-  ThaiAlphabetShift = {
-    _: "%",
-    ๅ: "+",
-    "/": "๑",
-    "-": "๒",
-    ภ: "๓",
-    ถ: "๔",
-    "ุ": "ู",
-    "ึ": "฿",
-    ค: "๕",
-    ต: "๖",
-    จ: "๗",
-    ข: "๘",
-    ช: "๙",
-    ๆ: "๐",
-    ไ: '"',
-    ำ: "ฎ",
-    พ: "ฑ",
-    ะ: "ธ",
-    "ั": "ํ",
-    "ี": "๋",
-    ร: "ณ",
-    น: "ฯ",
-    ย: "ญ",
-    บ: "ฐ",
-    ล: ",",
-    ฃ: "ฅ",
-    ฟ: "ฤ",
-    ห: "ฆ",
-    ก: "ฏ",
-    ด: "โ",
-    เ: "ฌ",
-    "้": "็",
-    "่": "๋",
-    า: "ษ",
-    ส: "ศ",
-    ว: "ซ",
-    ง: ".",
-    ผ: "(",
-    ป: ")",
-    แ: "ฉ",
-    อ: "ฮ",
-    "ิ": "ฺ",
-    "ื": "์",
-    ท: "?",
-    ม: "ฒ",
-    ใ: "ฬ",
-    ฝ: "ฦ",
-  };
+  // [7]
+  EngAlphabetShift = { "`": "~", 1: "!", 2: "@", 3: "#", 4: "$", 5: "%", 6: "^", 7: "&", 8: "*", 9: "(", 0: ")", "-": "_", "=": "+", "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
+  ThaiAlphabetShift = { _: "%", ๅ: "+", "/": "๑", "-": "๒", ภ: "๓", ถ: "๔", "ุ": "ู", "ึ": "฿", ค: "๕", ต: "๖", จ: "๗", ข: "๘", ช: "๙", ๆ: "๐", ไ: '"', ำ: "ฎ", พ: "ฑ", ะ: "ธ", "ั": "ํ", "ี": "๋", ร: "ณ", น: "ฯ", ย: "ญ", บ: "ฐ", ล: ",", ฃ: "ฅ", ฟ: "ฤ", ห: "ฆ", ก: "ฏ", ด: "โ", เ: "ฌ", "้": "็", "่": "๋", า: "ษ", ส: "ศ", ว: "ซ", ง: ".", ผ: "(", ป: ")", แ: "ฉ", อ: "ฮ", "ิ": "ฺ", "ื": "์", ท: "?", ม: "ฒ", ใ: "ฬ", ฝ: "ฦ"};
+  FullAlphabetShift = { "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
 
+  // [8]
   toggle() {
     this.isVisible = !this.isVisible;
     this.render();
   }
 
+  // [9]
   changeLayout(layout) {
     this.currentLayout = layout;
     this.render();
   }
 
+  // [10]
   shuffleArray(array) {
     for (let i = array.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -686,11 +549,12 @@ export class VirtualKeyboard {
     }
   }
 
+  // [11]
   scrambleKeyboard() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key=backspace]):not([data-key='+']):not([data-key='-']):not([data-key='*']):not([data-key='/']):not([data-key='%']):not([data-key='=']):not([data-key='.']):not([data-key='(']):not([data-key=')']):not([data-key='_'])"
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
     );
-    const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+    const numbers = "1234567890-=+%/*.()".split("");
     this.shuffleArray(numbers);
     keys.forEach((key, index) => {
       key.textContent = numbers[index];
@@ -698,11 +562,12 @@ export class VirtualKeyboard {
     });
   }
 
+  // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹']):not([data-key='`']):not([data-key='1']):not([data-key='2']):not([data-key='3']):not([data-key='4']):not([data-key='5']):not([data-key='6']):not([data-key='7']):not([data-key='8']):not([data-key='9']):not([data-key='0']):not([data-key='-']):not([data-key='+']):not([data-key='=']):not([data-key='~']):not([data-key='!']):not([data-key='@']):not([data-key='#']):not([data-key='$']):not([data-key='%']):not([data-key='^']):not([data-key='&']):not([data-key='*']):not([data-key='(']):not([data-key=')']):not([data-key='_'])"
+      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
     );
-    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
     keys.forEach((key, index) => {
       key.textContent = englishAlphabet[index];
@@ -710,37 +575,46 @@ export class VirtualKeyboard {
     });
   }
 
+  // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Space'])"
-    );
-    const ThaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
-      ""
+      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Space']):not([data-key='Tab ↹'])"
     );
-    this.shuffleArray(ThaiAlphabet); // สับเปลี่ยนลำดับของตัวอักษร
-
+    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
+    this.shuffleArray(ThaiAlphabet);
     keys.forEach((key, index) => {
-      // อัพเดต textContent และ dataset.key ให้ตรงกับค่าใหม่ที่สับเปลี่ยน
       key.textContent = ThaiAlphabet[index];
-      key.dataset.key = ThaiAlphabet[index]; // อัพเดต dataset.key ด้วยค่าใหม่
+      key.dataset.key = ThaiAlphabet[index]; 
+    });
+  }
+
+  // []
+  scrambleSymbols() {
+    const keys = document.querySelectorAll(
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
+    );
+    const numbers = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
+    this.shuffleArray(numbers);
+    keys.forEach((key, index) => {
+      key.textContent = numbers[index];
+      key.dataset.key = numbers[index];
     });
   }
 
-  // จัดการการลากคีย์บอร์ด
+  // [14] จัดการการลากคีย์บอร์ด
   startDrag(event) {
     this.isDragging = true;
-    this.offsetX =
-      event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY =
-      event.clientY - document.getElementById("keyboard").offsetTop;
+    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
+    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
 
-    document.addEventListener("mousemove", this.drag.bind(this)); // Use bind to preserve `this` context
+    document.addEventListener("mousemove", this.drag.bind(this)); 
     document.addEventListener("mouseup", () => {
       this.isDragging = false;
       document.removeEventListener("mousemove", this.drag.bind(this));
     });
   }
 
+  // [15]
   drag(event) {
     if (this.isDragging) {
       const keyboard = document.getElementById("keyboard");
@@ -748,4 +622,4 @@ export class VirtualKeyboard {
       keyboard.style.top = `${event.clientY - this.offsetY}px`;
     }
   }
-}
+}

package/layouts.js

@@ -12,43 +12,28 @@ export const layouts = {
     ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"],
     ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"],
     ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift ⇧"],
-    ["Space"],
+    ["scrambled", "Space"],
   ],
   th: [
     ["_", "ๅ", "/", "-", "ภ", "ถ", "ุ", "ึ", "ค", "ต", "จ", "ข", "ช", "Backspace"],
     ["Tab ↹", "ๆ", "ไ", "ำ", "พ", "ะ", "ั", "ี", "ร", "น", "ย", "บ", "ล", "ฃ"],
     ["Caps 🄰", "ฟ", "ห", "ก", "ด", "เ", "้", "่", "า", "ส", "ว", "ง", "Enter"],
     ["Shift ⇧", "ผ", "ป", "แ", "อ", "ิ", "ื", "ท", "ม", "ใ", "ฝ", "Shift ⇧"],
-    ["Space"],
+    ["scrambled" ,"Space"],
   ],
   numpad: [
-    ["+", "-", "*", "/"],
-    ["1", "2", "3", "%"],
-    ["4", "5", "6", "_"],
+    ["scr", "+", "-", "*"],
+    ["1", "2", "3", "/"],
+    ["4", "5", "6", "%"],
     ["7", "8", "9", "."],
     ["(", "0", ")", "="],
     ["backspace"]
   ],
-  scNum: [
-    ["+", "-", "*", "/"],
-    ["1", "2", "3", "%"],
-    ["4", "5", "6", "_"],
-    ["7", "8", "9", "."],
-    ["(", "0", ")", "="],
+  symbols: [
+    ['scr', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
+    ['_', '+', '~', '`', '{', '}', '|', '\\', ':', '!'],
+    ["'", '<', '>', '?', '/', '[', ']', '±', '§', '¶'],
+    ['€', '£', '¥', '¢', '©', '®', '™', '℅', '‰', '†'],
     ["backspace"]
-  ],
-  thSc: [
-    ["ก", "ข", "ฃ", "ค", "ฅ", "ฆ", "ง", "จ", "ฉ", "ช", "ซ", "ฌ", "Backspace"],
-    ["ญ", "ฎ", "ฏ", "ฐ", "ฑ", "ฒ", "ณ", "ด", "ต", "ถ", "ท", "ธ", "น"],
-    ["บ", "ป", "ผ", "ฝ", "พ", "ฟ", "ภ", "ม", "ย", "ร", "ฤ", "Enter"],
-    ["ล", "ฦ", "ว", "ศ", "ษ", "ส", "ห", "ฬ", "อ", "ฮ"],
-    ["Space"],
-  ],
-  enSc: [
-    ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "="],
-    ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "Backspace"],
-    ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", "Enter"],
-    ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", "Shift ⇧"],
-    ["Space"],
-  ],
-};
+  ]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js_lis",
-  "version": "1.0.25",
+  "version": "2.0.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"