js_lis 1.0.5 → 1.0.6

package/VirtualKeyboard.js

@@ -0,0 +1,400 @@
+import { layouts } from './layouts.js';
+
+export class VirtualKeyboard {
+    constructor() {
+        this.currentLayout = 'en';
+        this.isVisible = false;
+        this.container = document.getElementById('keyboard-container');
+        this.currentInput = null; // เปลี่ยนจาก fixed input เป็น dynamic
+        this.layouts = layouts;
+        this.isDragging = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.shiftActive = false;
+        this.capsLockActive = false;
+        this.render();
+        this.initializeInputListeners();
+    }
+    
+    initializeInputListeners() {
+        // เพิ่ม event listener สำหรับทุก input และ textarea
+        document.addEventListener('click', (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                this.setCurrentInput(target);
+            }
+        });
+
+        // เพิ่ม event listener สำหรับ focus
+        document.addEventListener('focus', (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                this.setCurrentInput(target);
+            }
+        }, true);
+    }
+
+    setCurrentInput(inputElement) {
+        // ถ้ามี input เก่า ให้ลบ class active
+        if (this.currentInput) {
+            this.currentInput.classList.remove('keyboard-active');
+        }
+        
+        // เซ็ต input ใหม่และเพิ่ม class active
+        this.currentInput = inputElement;
+        this.currentInput.classList.add('keyboard-active');
+    }
+    
+    render() {
+        const keyboard = document.createElement('div');
+        keyboard.className = 'virtual-keyboard';
+        keyboard.style.display = this.isVisible ? 'block' : 'none';
+
+        // Add the ID for easy reference in dragging
+        keyboard.id = 'keyboard';
+
+        const layout = this.layouts[this.currentLayout];
+    
+        layout.forEach(row => {
+            const rowElement = document.createElement('div');
+            rowElement.className = 'keyboard-row';
+    
+            row.forEach(key => {
+                const keyElement = document.createElement('button');
+                keyElement.className = 'keyboard-key key';  // Add key class
+                keyElement.textContent = key;
+                keyElement.type = 'button';
+    
+                // Add data-key to each key for reference
+                keyElement.dataset.key = key;
+    
+                if (key === 'Space') {
+                    keyElement.className += ' space';
+                }
+
+                if (key === 'backspace') {
+                    keyElement.className += ' backspacew';
+                }
+    
+                keyElement.onclick = (e) => {
+                    e.preventDefault();
+                    const keyPressed = keyElement.dataset.key || keyElement.textContent;
+                    if (keyPressed) {
+                        this.handleKeyPress(keyPressed);
+                    } else {
+                        console.error("The key element does not have a valid key value.");
+                    }
+                };
+                
+    
+                rowElement.appendChild(keyElement);
+            });
+    
+            keyboard.appendChild(rowElement);
+        });
+    
+        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();
+        }
+
+        // Add drag functionality to the keyboard
+        keyboard.addEventListener('mousedown', (event) => this.startDrag(event));
+    }
+    
+    handleKeyPress(keyPressed) {
+        if (!this.currentInput) return;
+        
+        const start = this.currentInput.selectionStart;
+        const end = this.currentInput.selectionEnd;
+        const value = this.currentInput.value;
+    
+        const isCapsActive = this.capsLockActive;
+        const isShiftActive = this.shiftActive;
+    
+        const convertToCorrectCase = (char) => {
+            if (isCapsActive || isShiftActive) {
+                return char.toUpperCase();
+            }
+            return char.toLowerCase();
+        };
+    
+        // ตรวจสอบค่า keyPressed
+        if (!keyPressed) {
+            console.error("Invalid key pressed.");
+            return;
+        }
+    
+        switch(keyPressed) {
+            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;
+                } else {
+                    this.currentInput.value = value.slice(0, start) + value.slice(end);
+                    this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+                }
+                break;
+    
+            case 'Space':
+                this.insertText(' ');
+                break;
+    
+            case 'Tab':
+                this.insertText('\t');
+                break;
+    
+            case 'Enter':
+                if (this.currentInput.tagName === 'TEXTAREA') {
+                    this.insertText('\n');
+                }
+                break;
+    
+            case 'Caps':
+                this.toggleCapsLock();
+                break;
+    
+            case 'Shift':
+                this.toggleShift();
+                break;
+    
+            default:
+                this.insertText(convertToCorrectCase(keyPressed));
+                
+        }
+
+        if (isShiftActive && !isCapsActive) {
+            this.toggleShift();
+        }
+
+        this.currentInput.focus();
+        const event = new Event('input', { bubbles: true });
+        this.currentInput.dispatchEvent(event);
+    }
+    
+    toggleCapsLock() {
+        this.capsLockActive = !this.capsLockActive;
+        const capsKey = document.querySelector('.key[data-key="Caps"]');
+        capsKey.classList.toggle("active", this.capsLockActive);
+        capsKey.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)) {
+                key.textContent = this.capsLockActive
+                    ? key.dataset.key.toUpperCase()
+                    : key.dataset.key.toLowerCase();
+            }
+        });
+    
+        const keyboardKeys = document.querySelectorAll(".key:not([data-key='Shift'])");
+        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)
+            ) {
+                const originalKey = Object.keys(this.ThaiAlphabetShift).find(
+                    (key) => this.ThaiAlphabetShift[key] === currentChar
+                );
+                if (originalKey) {
+                    key.textContent = originalKey;
+                    key.dataset.key = originalKey;
+                }
+            }
+        });
+    }
+    
+    toggleShift() {
+        this.shiftActive = !this.shiftActive;
+        const shiftKey = document.querySelector('.key[data-key="Shift"]');
+        shiftKey.classList.toggle("active", this.shiftActive);
+        shiftKey.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)) {
+                // แสดงผลตัวพิมพ์ใหญ่หรือเล็กตามค่า Shift
+                key.textContent = this.shiftActive
+                    ? key.dataset.key.toUpperCase()
+                    : key.dataset.key.toLowerCase();
+            }
+        });
+    
+        const keyboardKeys = document.querySelectorAll(".key:not([data-key='Shift'])");
+        keyboardKeys.forEach((key) => {
+            const currentChar = key.textContent.trim();
+            if (
+                this.shiftActive &&
+                this.currentLayout === "th" && // ตรวจสอบว่ากำลังใช้เลย์เอาต์ภาษาไทย
+                this.ThaiAlphabetShift[currentChar]
+            ) {
+                key.textContent = this.ThaiAlphabetShift[currentChar]; // แสดงอักษรจาก shift
+                key.dataset.key = this.ThaiAlphabetShift[currentChar]; // อัปเดต dataset.key
+            } else if (
+                !this.shiftActive &&
+                this.currentLayout === "th" &&
+                Object.values(this.ThaiAlphabetShift).includes(currentChar)
+            ) {
+                const originalKey = Object.keys(this.ThaiAlphabetShift).find(
+                    (key) => this.ThaiAlphabetShift[key] === currentChar
+                );
+                if (originalKey) {
+                    key.textContent = originalKey;
+                    key.dataset.key = originalKey;
+                }
+            }
+        });
+    }
+
+    ThaiAlphabetShift = {
+        _: "%",
+        ๅ: "+",
+        "/": "๑",
+        "-": "๒",
+        ภ: "๓",
+        ถ: "๔",
+        "ุ": "ู",
+        "ึ": "฿",
+        ค: "๕",
+        ต: "๖",
+        จ: "๗",
+        ข: "๘",
+        ช: "๙",
+        ๆ: "๐",
+        ไ: '"',
+        ำ: "ฎ",
+        พ: "ฑ",
+        ะ: "ธ",
+        "ั": "ํ",
+        "ี": "๋",
+        ร: "ณ",
+        น: "ฯ",
+        ย: "ญ",
+        บ: "ฐ",
+        ล: ",",
+        ฃ: "ฅ",
+        ฟ: "ฤ",
+        ห: "ฆ",
+        ก: "ฏ",
+        ด: "โ",
+        เ: "ฌ",
+        "้": "็",
+        "่": "๋",
+        า: "ษ",
+        ส: "ศ",
+        ว: "ซ",
+        ง: ".",
+        ผ: "(",
+        ป: ")",
+        แ: "ฉ",
+        อ: "ฮ",
+        "ิ": "ฺ",
+        "ื": "์",
+        ท: "?",
+        ม: "ฒ",
+        ใ: "ฬ",
+        ฝ: "ฦ",
+    };
+
+    insertText(text) {
+        const start = this.currentInput.selectionStart;
+        const end = this.currentInput.selectionEnd;
+        this.currentInput.value = this.currentInput.value.slice(0, start) + text + this.currentInput.value.slice(end);
+        this.currentInput.selectionStart = this.currentInput.selectionEnd = start + text.length;
+    }
+    
+    toggle() {
+        this.isVisible = !this.isVisible;
+        this.render();
+    }
+
+    changeLayout(layout) {
+        this.currentLayout = layout;
+        this.render();
+    }
+
+    shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [array[i], array[j]] = [array[j], array[i]];
+        }
+      }
+    
+    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='00'])"
+        );
+        const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+        this.shuffleArray(numbers);
+        keys.forEach((key, index) => {
+          key.textContent = numbers[index];
+          key.dataset.key = numbers[index];
+        });
+      }
+    
+    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='='])"
+        );
+        const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+        this.shuffleArray(englishAlphabet);
+        keys.forEach((key, index) => {
+          key.textContent = englishAlphabet[index];
+          key.dataset.key = englishAlphabet[index];
+        });
+      }
+    
+      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("");
+        this.shuffleArray(ThaiAlphabet); // สับเปลี่ยนลำดับของตัวอักษร
+    
+        keys.forEach((key, index) => {
+            // อัพเดต textContent และ dataset.key ให้ตรงกับค่าใหม่ที่สับเปลี่ยน
+            key.textContent = ThaiAlphabet[index];
+            key.dataset.key = ThaiAlphabet[index];  // อัพเดต dataset.key ด้วยค่าใหม่
+        });
+    }
+    
+    
+    // จัดการการลากคีย์บอร์ด
+    startDrag(event) {
+        this.isDragging = true;
+        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("mouseup", () => {
+          this.isDragging = false;
+          document.removeEventListener("mousemove", this.drag.bind(this));
+        });
+    }
+  
+    drag(event) {
+        if (this.isDragging) {
+            const keyboard = document.getElementById("keyboard");
+            keyboard.style.left = `${event.clientX - this.offsetX}px`;
+            keyboard.style.top = `${event.clientY - this.offsetY}px`;
+        }
+    }
+}

package/layouts.js

@@ -1,352 +1,44 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const keyboardContainer = document.createElement("div");
-  keyboardContainer.className = "keyboard";
-  keyboardContainer.id = "keyboard";
-  keyboardContainer.onmousedown = startDrag;
-
-  keyboardContainer.innerHTML = `
-      <div class="keyboard-container">
-         
-          <div class="dropdown">
-              <button class="dropdown-button but" id="dropdownButton" style="color: black;">เลือกแป้นพิมพ์</button>
-              <div class="dropdown-content">
-                  <button id="switch-toggle" onclick="changeDropdownName('Switch Language')">Switch Language</button>
-                  <button id="numpad-toggle" onclick="changeDropdownName('Numpad Keyboard')">Numpad Keyboard</button>
-                  <button id="scramble-toggle" onclick="changeDropdownName('Scramble Numpad')">Scramble Numpad</button>
-                  <button id="scramble-toggle-thai" onclick="changeDropdownName('Thai Scramble')">Thai Scramble</button>
-                  <button id="scramble-toggle-eng" onclick="changeDropdownName('English Scramble')">English Scramble</button>
-              </div>
-          </div>
-          
-          <div id="english-keyboard" class="keyboard-layout">
-                <!-- English Keyboard Rows -->
-                <div class="keyboard-row">
-                    <button class="key" data-normal="\`" data-shifted="%">\`</button>
-                    <button class="key" data-normal="1" data-shifted="!">1</button>
-                    <button class="key" data-normal="2" data-shifted="@">2</button>
-                    <button class="key" data-normal="3" data-shifted="#">3</button>
-                    <button class="key" data-normal="4" data-shifted="$">4</button>
-                    <button class="key" data-normal="5" data-shifted="%">5</button>
-                    <button class="key" data-normal="6" data-shifted="^">6</button>
-                    <button class="key" data-normal="7" data-shifted="&">7</button>
-                    <button class="key" data-normal="8" data-shifted="*">8</button>
-                    <button class="key" data-normal="9" data-shifted="(">9</button>
-                    <button class="key" data-normal="0" data-shifted=")">0</button>
-                    <button class="key" data-normal="-" data-shifted="_">-</button>
-                    <button class="key" data-normal="=" data-shifted="+">=</button>
-                    <button class="key backspace">Backspace</button>  
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key tab">Tab</button>
-                    <button class="key" data-normal="q" data-shifted="Q">q</button>
-                    <button class="key" data-normal="w" data-shifted="W">w</button>
-                    <button class="key" data-normal="e" data-shifted="E">e</button>
-                    <button class="key" data-normal="r" data-shifted="R">r</button>
-                    <button class="key" data-normal="t" data-shifted="T">t</button>
-                    <button class="key" data-normal="y" data-shifted="Y">y</button>
-                    <button class="key" data-normal="u" data-shifted="U">u</button>
-                    <button class="key" data-normal="i" data-shifted="I">i</button>
-                    <button class="key" data-normal="o" data-shifted="O">o</button>
-                    <button class="key" data-normal="p" data-shifted="P">p</button>
-                    <button class="key" data-normal="[" data-shifted="{">[</button>
-                    <button class="key" data-normal="]" data-shifted="}">]</button>
-                    <button class="key" data-normal="\\" data-shifted="|">\\</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key capslock">CapsLk</button>
-                    <button class="key" data-normal="a" data-shifted="A">a</button>
-                    <button class="key" data-normal="s" data-shifted="S">s</button>
-                    <button class="key" data-normal="d" data-shifted="D">d</button>
-                    <button class="key" data-normal="f" data-shifted="F">f</button>
-                    <button class="key" data-normal="g" data-shifted="G">g</button>
-                    <button class="key" data-normal="h" data-shifted="H">h</button>
-                    <button class="key" data-normal="j" data-shifted="J">j</button>
-                    <button class="key" data-normal="k" data-shifted="K">k</button>
-                    <button class="key" data-normal="l" data-shifted="L">l</button>
-                    <button class="key" data-normal=";" data-shifted=":">;</button>
-                    <button class="key" data-normal="'" data-shifted="&quot;">'</button>
-                    <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key shift" style="width: 120px;">Shift</button>
-                    <button class="key" data-normal="z" data-shifted="Z">z</button>
-                    <button class="key" data-normal="x" data-shifted="X">x</button>
-                    <button class="key" data-normal="c" data-shifted="C">c</button>
-                    <button class="key" data-normal="v" data-shifted="V">v</button>
-                    <button class="key" data-normal="b" data-shifted="B">b</button>
-                    <button class="key" data-normal="n" data-shifted="N">n</button>
-                    <button class="key" data-normal="m" data-shifted="M">m</button>
-                    <button class="key" data-normal="," data-shifted="&lt;">,</button>
-                    <button class="key" data-normal="." data-shifted="&gt;">.</button>
-                    <button class="key" data-normal="/" data-shifted="?">/</button>
-                    <button class="key shift" style="width: 115px;">Shift</button>
-                </div>
-
-                <div class="keyboard-row">
-                   <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                </div>
-            </div>
-
-            <div id="thai-keyboard" class="keyboard-layout" style="display: none;">
-                <!-- Thai Keyboard Rows -->
-                <div class="keyboard-row">
-                    <button class="key" data-normal="_" data-shifted="%">_</button>
-                    <button class="key" data-normal="ๅ" data-shifted="+">ๅ</button>
-                    <button class="key" data-normal="/" data-shifted="๑">/</button>
-                    <button class="key" data-normal="-" data-shifted="๒">-</button>
-                    <button class="key" data-normal="ภ" data-shifted="๓">ภ</button>
-                    <button class="key" data-normal="ถ" data-shifted="๔">ถ</button>
-                    <button class="key" data-normal="ุ" data-shifted="ู">ู</button>
-                    <button class="key" data-normal="ึ" data-shifted="ฺ">฿</button>
-                    <button class="key" data-normal="ค" data-shifted="๕">ค</button>
-                    <button class="key" data-normal="ต" data-shifted="๖">ต</button>
-                    <button class="key" data-normal="จ" data-shifted="๗">จ</button>
-                    <button class="key" data-normal="ข" data-shifted="๘">ข</button>
-                    <button class="key" data-normal="ช" data-shifted="๙">ช</button>
-                    <button class="key backspace">Backspace</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key tab">Tab</button>
-                    <button class="key" data-normal="ๆ" data-shifted="๐">ๆ</button>
-                    <button class="key" data-normal="ไ" data-shifted=""">ไ</button>
-                    <button class="key" data-normal="ำ" data-shifted="ฎ">ำ</button>
-                    <button class="key" data-normal="พ" data-shifted="ฑ">พ</button>
-                    <button class="key" data-normal="ะ" data-shifted="ธ">ะ</button>
-                    <button class="key" data-normal="ั" data-shifted="ํ">ั</button>
-                    <button class="key" data-normal="ี" data-shifted="๋">ี</button>
-                    <button class="key" data-normal="ร" data-shifted="ณ">ร</button>
-                    <button class="key" data-normal="น" data-shifted="ฯ">น</button>
-                    <button class="key" data-normal="ย" data-shifted="ญ">ย</button>
-                    <button class="key" data-normal="บ" data-shifted="ฐ">บ</button>
-                    <button class="key" data-normal="ล" data-shifted=",">ล</button>
-                    <button class="key" data-normal="ฃ" data-shifted="ฅ">ฃ</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key capslock">CapsLock</button>
-                    <button class="key" data-normal="ฟ" data-shifted="ฤ">ฟ</button>
-                    <button class="key" data-normal="ห" data-shifted="ฆ">ห</button>
-                    <button class="key" data-normal="ก" data-shifted="ฏ">ก</button>
-                    <button class="key" data-normal="ด" data-shifted="โ">ด</button>
-                    <button class="key" data-normal="เ" data-shifted="ฌ">เ</button>
-                    <button class="key" data-normal="้" data-shifted="็">้</button>
-                    <button class="key" data-normal="่" data-shifted="๋">่</button>
-                    <button class="key" data-normal="า" data-shifted="ษ">า</button>
-                    <button class="key" data-normal="ส" data-shifted="ศ">ส</button>
-                    <button class="key" data-normal="ว" data-shifted="ซ">ว</button>
-                    <button class="key" data-normal="ง" data-shifted=".">ง</button>
-                    <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key shift" style="width: 120px;">Shift</button>
-                    <button class="key" data-normal="ผ" data-shifted="(">ผ</button>
-                    <button class="key" data-normal="ป" data-shifted=")">ป</button>
-                    <button class="key" data-normal="แ" data-shifted="ฉ">แ</button>
-                    <button class="key" data-normal="อ" data-shifted="ฮ">อ</button>
-                    <button class="key" data-normal="ิ" data-shifted="ฺ">ิ</button>
-                    <button class="key" data-normal="ื" data-shifted="์">ื</button>
-                    <button class="key" data-normal="ท" data-shifted="?">ท</button>
-                    <button class="key" data-normal="ม" data-shifted="ฒ">ม</button>
-                    <button class="key" data-normal="ใ" data-shifted="ฬ">ใ</button>
-                    <button class="key" data-normal="ฝ" data-shifted="ฦ">ฝ</button>
-                    <button class="key shift" style="width: 115px;">Shift</button>
-                </div>
-
-                <div class="keyboard-row">
-                   <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                </div>
-            </div>
-
-            <div id="numpad-keyboard" class="keyboard-layout" style="display: none;">
-                <div class="keyboard-row">
-                    <button class="key">+</button>
-                    <button class="key">-</button>
-                    <button class="key">*</button>
-                    <button class="key">/</button>
-                </div>
-                <div class="keyboard-row">
-                    <button class="key">1</button>
-                    <button class="key">2</button>
-                    <button class="key">3</button>
-                    <button class="key">%</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key">4</button>
-                    <button class="key">5</button>
-                    <button class="key">6</button>
-                    <button class="key">.</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key">7</button>
-                    <button class="key">8</button>
-                    <button class="key">9</button>
-                    <button class="key">=</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key">00</button>
-                    <button class="key">0</button>
-                    <button class="key backspace" style="width: 90px;">Backspace</button>
-                </div>
-            </div>
-
-            <!-- คีย์บอร์ด Scramble -->
-            <div id="scrambled-keyboard" class="keyboard-layout" style="display: none;">
-                <!-- เพิ่มปุ่มสำหรับคีย์บอร์ด Scramble -->
-                <div class="keyboard-row">
-                    <button class="key plus">+</button>
-                    <button class="key minus">-</button>
-                    <button class="key multiply">*</button>
-                    <button class="key divide">/</button>
-                </div>
-                <div class="keyboard-row">
-                    <button class="key">1</button>
-                    <button class="key">2</button>
-                    <button class="key">3</button>
-                    <button class="key modulo">%</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key">4</button>
-                    <button class="key">5</button>
-                    <button class="key">6</button>
-                    <button class="key decimal">.</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key">7</button>
-                    <button class="key">8</button>
-                    <button class="key">9</button>
-                    <button class="key equals">=</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key double-zero">00</button>
-                    <button class="key">0</button>
-                    <button class="key backspace" style="width: 90px;">Backspace</button>
-                </div>
-            </div>
-
-            <div id="english-Scramble" class="keyboard-layout" style="display: none;">
-                <!-- English Keyboard Rows -->
-                <div class="keyboard-row">
-                    <button class="key" data-normal="q" data-shifted="Q">q</button>
-                    <button class="key" data-normal="w" data-shifted="W">w</button>
-                    <button class="key" data-normal="e" data-shifted="E">e</button>
-                    <button class="key" data-normal="r" data-shifted="R">r</button>
-                    <button class="key" data-normal="t" data-shifted="T">t</button>
-                    <button class="key" data-normal="y" data-shifted="Y">y</button>
-                    <button class="key" data-normal="u" data-shifted="U">u</button>
-                    <button class="key" data-normal="i" data-shifted="I">i</button>
-                    <button class="key" data-normal="o" data-shifted="O">o</button>
-                    <button class="key" data-normal="p" data-shifted="P">p</button>
-                    <button class="key backspace">Backspace</button>  
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key capslock">CapsLk</button>
-                    <button class="key" data-normal="s" data-shifted="S">s</button>
-                    <button class="key" data-normal="d" data-shifted="D">d</button>
-                    <button class="key" data-normal="f" data-shifted="F">f</button>
-                    <button class="key" data-normal="g" data-shifted="G">g</button>
-                    <button class="key" data-normal="h" data-shifted="H">h</button>
-                    <button class="key" data-normal="j" data-shifted="J">j</button>
-                    <button class="key" data-normal="k" data-shifted="K">k</button>
-                    <button class="key" data-normal="l" data-shifted="L">l</button>
-                    <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                </div>
-
-                <div class="keyboard-row">
-                    <button class="key shift" style="width: 90px;">Shift</button>
-                    <button class="key" data-normal="z" data-shifted="Z">z</button>
-                    <button class="key" data-normal="x" data-shifted="X">x</button>
-                    <button class="key" data-normal="c" data-shifted="C">c</button>
-                    <button class="key" data-normal="v" data-shifted="V">v</button>
-                    <button class="key" data-normal="b" data-shifted="B">b</button>
-                    <button class="key" data-normal="n" data-shifted="N">n</button>
-                    <button class="key" data-normal="m" data-shifted="M">m</button>
-                    <button class="key" data-normal="a" data-shifted="A">m</button>
-                    <button class="key shift" style="width: 100px;">Shift</button>
-                </div>
-
-                <div class="keyboard-row">
-                   <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                </div>
-            </div>
-
-            <div id="thai-Scramble" class="keyboard-layout" style="display: none;">
-                <!-- Thai Keyboard Rows -->
-                <div class="keyboard-row">
-                    <button class="key" data-normal="ก" data-shifted="ก">ก</button>
-                    <button class="key" data-normal="ข" data-shifted="ข">ข</button>
-                    <button class="key" data-normal="ฃ" data-shifted="ฃ">ฃ</button>
-                    <button class="key" data-normal="ค" data-shifted="ค">ค</button>
-                    <button class="key" data-normal="ฅ" data-shifted="ฅ">ฅ</button>
-                    <button class="key" data-normal="ฆ" data-shifted="ฆ">ฆ</button>
-                    <button class="key" data-normal="ง" data-shifted="ง">ง</button>
-                    <button class="key" data-normal="จ" data-shifted="จ">จ</button>
-                    <button class="key" data-normal="ฉ" data-shifted="ฉ">ฉ</button>
-                    <button class="key" data-normal="ช" data-shifted="ช">ช</button>
-                    <button class="key" data-normal="ซ" data-shifted="ซ">ซ</button>
-                    <button class="key" data-normal="ฌ" data-shifted="ฌ">ฌ</button>
-                    <button class="key" data-normal="ญ" data-shifted="ญ">ญ</button>
-                    <button class="key" data-normal="ฎ" data-shifted="ฎ">ฎ</button>
-                    <button class="key backspace" style="width: 86px;">Backspace</button>
-                </div>
-                
-                <div class="keyboard-row">
-                    <button class="key" data-normal="ฏ" data-shifted="ฏ">ฏ</button>
-                    <button class="key" data-normal="ฐ" data-shifted="ฐ">ฐ</button>
-                    <button class="key" data-normal="ฑ" data-shifted="ฑ">ฑ</button>
-                    <button class="key" data-normal="ฒ" data-shifted="ฒ">ฒ</button>
-                    <button class="key" data-normal="ณ" data-shifted="ณ">ณ</button>
-                    <button class="key" data-normal="ด" data-shifted="ด">ด</button>
-                    <button class="key" data-normal="ต" data-shifted="ต">ต</button>
-                    <button class="key" data-normal="ถ" data-shifted="ถ">ถ</button>
-                    <button class="key" data-normal="ท" data-shifted="ท">ท</button>
-                    <button class="key" data-normal="ธ" data-shifted="ธ">ธ</button>
-                    <button class="key" data-normal="น" data-shifted="น">น</button>
-                    <button class="key" data-normal="บ" data-shifted="บ">บ</button>
-                    <button class="key" data-normal="ป" data-shifted="ป">ป</button>
-                    <button class="key" data-normal="ผ" data-shifted="ผ">ผ</button>
-                    <button class="key" data-normal="ฝ" data-shifted="ฝ">ฝ</button>
-                    <button class="key" data-normal="พ" data-shifted="พ">พ</button>
-                </div>
-                
-                <div class="keyboard-row">
-                    <button class="key" data-normal="ฟ" data-shifted="ฟ">ฟ</button>
-                    <button class="key" data-normal="ภ" data-shifted="ภ">ภ</button>
-                    <button class="key" data-normal="ม" data-shifted="ม">ม</button>
-                    <button class="key" data-normal="ย" data-shifted="ย">ย</button>
-                    <button class="key" data-normal="ร" data-shifted="ร">ร</button>
-                    <button class="key" data-normal="ฤ" data-shifted="ฤ">ฤ</button>
-                    <button class="key" data-normal="ล" data-shifted="ล">ล</button>
-                    <button class="key" data-normal="ฦ" data-shifted="ฦ">ฦ</button>
-                    <button class="key" data-normal="ว" data-shifted="ว">ว</button>
-                    <button class="key" data-normal="ศ" data-shifted="ศ">ศ</button>
-                    <button class="key" data-normal="ษ" data-shifted="ษ">ษ</button>
-                    <button class="key" data-normal="ส" data-shifted="ส">ส</button>
-                    <button class="key" data-normal="ห" data-shifted="ห">ห</button>
-                    <button class="key" data-normal="ฬ" data-shifted="ฬ">ฬ</button>
-                    <button class="key" data-normal="อ" data-shifted="อ">อ</button>
-                    <button class="key" data-normal="ฮ" data-shifted="ฮ">ฮ</button>
-                </div>
-                
-                <div class="keyboard-row">
-                   <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                </div>
-          </div>
-      </div>
-
-      <script src="keyboard.js"></script>
-  `;
-
-  document.body.appendChild(keyboardContainer);
-});
+export const layouts = {
+    en: [
+        ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace'],
+        ['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']
+    ],
+    th: [
+        ['_', 'ๅ', '/', '-', 'ภ', 'ถ', 'ุ', 'ึ', 'ค', 'ต', 'จ', 'ข', 'ช', 'Backspace'],
+        ['Tab', 'ๆ', 'ไ', 'ำ', 'พ', 'ะ', 'ั', 'ี', 'ร', 'น', 'ย', 'บ', 'ล', 'ฃ'],
+        ['Caps', 'ฟ', 'ห', 'ก', 'ด', 'เ', '้', '่', 'า', 'ส', 'ว', 'ง', 'Enter'],
+        ['Shift', 'ผ', 'ป', 'แ', 'อ', 'ิ', 'ื', 'ท', 'ม', 'ใ', 'ฝ', 'Shift'],
+        ['Space']
+    ],
+    numpad: [
+      ["+", "-", "*", "/"],
+      ["1", "2", "3", "%"],
+      ["4", "5", "6", "."],
+      ["7", "8", "9", "="],
+      ["00", "0", "backspace"],
+    ],
+    scNum : [
+      ["+", "-", "*", "/"],
+      ["1", "2", "3", "%"],
+      ["4", "5", "6", "."],
+      ["7", "8", "9", "="],
+      ["00", "0", "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/main.js

@@ -0,0 +1,4 @@
+import { VirtualKeyboard } from './VirtualKeyboard.js';
+
+// Create global instance
+window.keyboard = new VirtualKeyboard();

package/package.json

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

package/keyboard.js

@@ -1,514 +0,0 @@
-let activeInput = null;
-let isDragging = false;
-let offsetX = 0,
-  offsetY = 0;
-let isCapsLock = false;
-let isShift = false;
-let currentLanguage = "english";
-const encryptionKey = "1234567890123456";
-
-// เพิ่ม event listener
-document.querySelectorAll("input, textarea, form").forEach((element) => {
-    element.addEventListener("focus", (event) => {
-      event.stopImmediatePropagation();
-      activeInput = element;
-    });
-  });
-
-// แสดง-ซ่อนคีย์บอร์ด
-function toggleKeyboard() {
-  const keyboard = document.getElementById("keyboard");
-  keyboard.style.display = keyboard.style.display === "flex" ? "none" : "flex";
-}
-
-function encryptText(text) {
-  return CryptoJS.AES.encrypt(text, encryptionKey).toString();
-}
-
-function handleKeyPress(keyElement) {
-  if (activeInput) {
-    let keyToAdd;
-    if (isShift) {
-      keyToAdd =
-        keyElement.getAttribute("data-shifted") ||
-        keyElement.innerText.toUpperCase();
-    } else if (isCapsLock) {
-      keyToAdd =
-        keyElement.getAttribute("data-shifted") ||
-        keyElement.innerText.toUpperCase();
-    } else {
-      keyToAdd = keyElement.getAttribute("data-normal") || keyElement.innerText;
-    }
-
-    // เข้ารหัสข้อความที่กด
-    const encryptedKey = encryptText(keyToAdd);
-
-    // เพิ่มข้อความที่เข้ารหัสลงใน input
-    activeInput.value += keyToAdd;
-
-    activeInput.setAttribute("data-encrypted-value", encryptedKey);
-
-    if (isShift && !isCapsLock) {
-      toggleShift();
-    }
-    // console.log("Encrypted input: ", activeInput.getAttribute("data-encrypted-value"));
-  }
-}
-
-function toggleCapsLock() {
-  isCapsLock = !isCapsLock;
-  const capsLockKeys = document.querySelectorAll(".capslock");
-  capsLockKeys.forEach((key) => key.classList.toggle("caps-active"));
-
-  document.querySelectorAll(".key").forEach((key) => {
-    const normalText = key.getAttribute("data-normal");
-    const shiftedText = key.getAttribute("data-shifted");
-
-    if (isCapsLock) {
-      if (shiftedText) {
-        key.innerText = shiftedText;
-      } else if (normalText && normalText.match(/[a-zA-Z]/)) {
-        key.innerText = normalText.toUpperCase();
-      }
-    } else {
-      if (normalText) {
-        key.innerText = normalText;
-      }
-    }
-  });
-}
-
-function toggleShift() {
-  isShift = !isShift;
-  const shiftKeys = document.querySelectorAll(".shift");
-  shiftKeys.forEach((key) => key.classList.toggle("shift-active"));
-
-  document.querySelectorAll(".key").forEach((key) => {
-    const normalText = key.getAttribute("data-normal");
-    const shiftedText = key.getAttribute("data-shifted");
-
-    if (isShift) {
-      if (shiftedText) {
-        key.innerText = shiftedText;
-      } else if (normalText && normalText.match(/[a-zA-Z]/)) {
-        key.innerText = normalText.toUpperCase();
-      }
-    } else {
-      if (normalText) {
-        key.innerText = normalText;
-      }
-    }
-  });
-}
-
-function backspace() {
-  if (activeInput && activeInput.value.length > 0) {
-    activeInput.value = activeInput.value.slice(0, -1);
-  }
-}
-
-function Tab() {
-  if (activeInput) {
-    let start = activeInput.selectionStart;
-    let end = activeInput.selectionEnd;
-
-    activeInput.value = activeInput.value.substring(0, start) + "    " + activeInput.value.substring(end);
-
-    activeInput.selectionStart = activeInput.selectionEnd = start + 4;
-  }
-}
-
-// จัดการการลากคีย์บอร์ด
-function startDrag(event) {
-  isDragging = true;
-  offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
-  offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
-
-  document.addEventListener("mousemove", drag);
-  document.addEventListener("mouseup", () => {
-    isDragging = false;
-    document.removeEventListener("mousemove", drag);
-  });
-}
-
-function drag(event) {
-  if (isDragging) {
-    const keyboard = document.getElementById("keyboard");
-    keyboard.style.left = `${event.clientX - offsetX}px`;
-    keyboard.style.top = `${event.clientY - offsetY}px`;
-  }
-}
-
-function switchLanguage() {
-  const numpadKeyboard = document.getElementById("numpad-keyboard");
-  const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-  const engScramble = document.getElementById("english-Scramble");
-  const thaiScramble = document.getElementById("thai-Scramble");
-
-  // สลับค่า currentLanguage
-  currentLanguage = currentLanguage === "english" ? "thai" : "english";
-
-  // แสดงคีย์บอร์ดตามภาษา
-  document.getElementById("english-keyboard").style.display =
-    currentLanguage === "english" ? "block" : "none";
-  document.getElementById("thai-keyboard").style.display =
-    currentLanguage === "thai" ? "block" : "none";
-
-  // ซ่อนคีย์บอร์ดอื่นๆ
-  numpadKeyboard.style.display = "none";
-  scrambledKeyboard.style.display = "none";
-  thaiScramble.style.display = "none";
-  engScramble.style.display = "none";
-}
-
-async function login(event) {
-  event.preventDefault();
-
-  // ดึงค่าที่เข้ารหัสจากฟอร์ม
-  const Username = document.getElementById("u___n___").value;
-  const Password = document.getElementById("p___w___").value;
-
-  // เข้ารหัสข้อมูลก่อนส่งไปยังเซิร์ฟเวอร์
-  // const encryptedu___n___ = encryptText(encryptedUsername);
-  const encryptedp___w___ = encryptText(Password);
-
-  const loginData = {
-    u___n___: Username,
-    p___w___: encryptedp___w___,
-  };
-
-  // ส่งข้อมูลที่เข้ารหัสไปยังเซิร์ฟเวอร์
-  const response = await fetch("https://login-gxrh.onrender.com/login", {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(loginData),
-  });
-
-  const data = await response.json();
-
-  if (data.token) {
-    alert("เข้าสู่ระบบสำเร็จ");
-    localStorage.setItem("token", data.token);
-    location.reload();
-  } else {
-    alert(data.message || "เกิดข้อผิดพลาด");
-    location.reload();
-  }
-}
-
-// ปลี่ยนสีพื้นหลัง
-function toggletap(event) {
-  const key = event.target;
-  key.style.backgroundColor = "#45a049";
-
-  setTimeout(() => {
-    key.style.backgroundColor = "#d3d3d3";
-  }, 100);
-  // console.log("Tap function");
-}
-
-function toggleEnter(event) {
-  // ตรวจสอบว่าเป็นการกดปุ่ม Enter
-  if (activeInput.value === "Enter") {
-    // ป้องกันการส่งฟอร์มที่เกิดจากการกด Enter
-    event.preventDefault();
-
-    // เช็คว่า activeInput มีค่าและเป็นประเภท INPUT
-    if (activeInput && activeInput.tagName === "INPUT") {
-      // ส่งฟอร์มเมื่อกด Enter
-      activeInput.form.submit();
-      // console.log("Form submitted using Enter.");
-    }
-  }
-}
-
-function Numpad() {
-  const englishKeyboard = document.getElementById("english-keyboard");
-  const thaiKeyboard = document.getElementById("thai-keyboard");
-  const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-  const numpadKeyboard = document.getElementById("numpad-keyboard");
-  const engScramble = document.getElementById("english-Scramble");
-  const thaiScramble = document.getElementById("thai-Scramble");
-
-  englishKeyboard.style.display = "none";
-  thaiKeyboard.style.display = "none";
-  scrambledKeyboard.style.display = "none";
-  thaiScramble.style.display = "none";
-  engScramble.style.display = "none";
-
-  if (numpadKeyboard) {
-    numpadKeyboard.style.display = "block";
-  } else {
-    alert("Numpad layout is not available");
-  }
-}
-
-function Scramble() {
-  const englishKeyboard = document.getElementById("english-keyboard");
-  const thaiKeyboard = document.getElementById("thai-keyboard");
-  const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-  const numpadKeyboard = document.getElementById("numpad-keyboard");
-  const engScramble = document.getElementById("english-Scramble");
-  const thaiScramble = document.getElementById("thai-Scramble");
-
-  // ซ่อนคีย์บอร์ดทุกตัวที่ไม่ใช่ Scrambled
-  englishKeyboard.style.display = "none";
-  thaiKeyboard.style.display = "none";
-  numpadKeyboard.style.display = "none";
-  thaiScramble.style.display = "none";
-  engScramble.style.display = "none";
-
-  if (scrambledKeyboard) {
-    scrambledKeyboard.style.display = "block";
-    scrambleKeys(); // เรียกฟังก์ชันเพื่อสุ่มตัวเลขบนคีย์บอร์ด
-  } else {
-    alert("Scramble layout is not available");
-  }
-}
-
-function scrambleKeys() {
-  // เลือกปุ่มทั้งหมดในคีย์บอร์ด "Scrambled" ยกเว้นปุ่ม backspace
-  const keys = document.querySelectorAll(
-    "#scrambled-keyboard .key:not(.backspace):not(.plus):not(.minus):not(.multiply):not(.divide):not(.modulo):not(.double-zero):not(.decimal):not(.equals)"
-  );
-  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
-  shuffleArray(numbers); // เรียงลำดับตัวเลขแบบสุ่ม
-
-  keys.forEach((key, index) => {
-    key.textContent = numbers[index];
-  });
-}
-
-// ฟังก์ชัน scramble สำหรับภาษาไทยและภาษาอังกฤษ
-function scrambleLanguage(language) {
-  const englishKeyboard = document.getElementById("english-keyboard");
-  const thaiKeyboard = document.getElementById("thai-keyboard");
-  const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-  const numpadKeyboard = document.getElementById("numpad-keyboard");
-  const engScramble = document.getElementById("english-Scramble");
-  const thaiScramble = document.getElementById("thai-Scramble");
-
-  if (language === "thai") {
-    englishKeyboard.style.display = "none";
-    thaiKeyboard.style.display = "none";
-    engScramble.style.display = "none";
-    numpadKeyboard.style.display = "none";
-    scrambledKeyboard.style.display = "none";
-    thaiScramble.style.display = "block";
-    scrambleThaiKeys(); // ฟังก์ชันสำหรับภาษาไทย
-  } else if (language === "english") {
-    englishKeyboard.style.display = "none";
-    thaiKeyboard.style.display = "none";
-    engScramble.style.display = "block";
-    numpadKeyboard.style.display = "none";
-    scrambledKeyboard.style.display = "none";
-    thaiScramble.style.display = "none";
-    scrambleEnglishKeys(); // ฟังก์ชันสำหรับภาษาอังกฤษ
-  }
-}
-
-// ฟังก์ชัน scramble สำหรับคีย์บอร์ดภาษาอังกฤษ
-function scrambleEnglishKeys() {
-  const keys = document.querySelectorAll(
-    "#english-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
-  );
-
-  const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
-  shuffleArray(englishAlphabet);
-
-  keys.forEach((key, index) => {
-    if (index < englishAlphabet.length) {
-      key.textContent = englishAlphabet[index];
-      key.setAttribute("data-normal", englishAlphabet[index]);
-      key.setAttribute("data-shifted", englishAlphabet[index].toUpperCase());
-    } else {
-      key.textContent = "";
-    }
-  });
-}
-
-// ฟังก์ชัน scramble สำหรับคีย์บอร์ดภาษาไทย
-function scrambleThaiKeys() {
-  const keys = document.querySelectorAll(
-    "#thai-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
-  );
-  const thaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
-    ""
-  );
-  shuffleArray(thaiAlphabet);
-
-  keys.forEach((key, index) => {
-    if (index < thaiAlphabet.length) {
-      key.textContent = thaiAlphabet[index];
-      key.setAttribute("data-normal", thaiAlphabet[index]);
-      key.setAttribute("data-shifted", thaiAlphabet[index]);
-    } else {
-      key.textContent = "";
-    }
-  });
-}
-
-// ฟังก์ชันเพื่อสับเปลี่ยนตัวอักษร
-function shuffleArray(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-}
-
-function changeDropdownName(name) {
-  const dropdownButton = document.getElementById("dropdownButton");
-  dropdownButton.textContent = name;
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll(".key").forEach((key) => {
-    key.addEventListener("click", (event) => {
-      if (key.classList.contains("capslock")) {
-        toggleCapsLock();
-      } else if (key.classList.contains("tab")) {
-        Tab();
-      } else if (key.classList.contains("backspace")) {
-        backspace();
-      } else if (key.classList.contains("shift")) {
-        toggleShift();
-      } else if (key.classList.contains("enter")) {
-        toggleEnter();
-      } else if (key.classList.contains("toggle-lang")) {
-        switchLanguage();
-      } else {
-        handleKeyPress(key);
-      }
-    });
-  });
-
-  const loginButton = document.getElementById("login-button");
-  const toggleKeyboards = document.getElementById("toggleKeyboard");
-
-  loginButton.addEventListener("click", login);
-  toggleKeyboards.addEventListener("click", toggleKeyboard);
-
-  document
-    .getElementById("switch-toggle")
-    .addEventListener("click", switchLanguage);
-  document.getElementById("numpad-toggle").addEventListener("click", Numpad);
-  document
-    .getElementById("scramble-toggle")
-    .addEventListener("click", Scramble);
-  document
-    .getElementById("scramble-toggle-thai")
-    .addEventListener("click", () => scrambleLanguage("thai"));
-  document
-    .getElementById("scramble-toggle-eng")
-    .addEventListener("click", () => scrambleLanguage("english"));
-});
-
-/*
-// ฟังก์ชันหลักในการป้องกันการจับภาพหน้าจอในเบราว์เซอร์
-function preventScreenCapture() {
-  const overrideFunction = (target, method, handler) => {
-      if (target && target[method]) {
-          const original = target[method];
-          target[method] = function (...args) {
-              handler();
-              return Promise.reject("Screen capture blocked.");
-          };
-      }
-  };
-
-  // ตรวจสอบความพร้อมใช้งานของ navigator.mediaDevices และ getDisplayMedia
-  if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
-      // ป้องกันการใช้งาน getDisplayMedia
-      overrideFunction(navigator.mediaDevices, 'getDisplayMedia', () => {
-          console.log('Screen capture attempt detected via getDisplayMedia!');
-          showBlackScreen(true);
-      });
-  }
-
-  // ตรวจสอบความพร้อมใช้งานของ navigator.mediaDevices และ getUserMedia
-  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      // ป้องกันการใช้งาน getUserMedia
-      overrideFunction(navigator.mediaDevices, 'getUserMedia', () => {
-          console.log('Screen capture attempt detected via getUserMedia!');
-          showBlackScreen(true);
-      });
-  }
-
-  // ป้องกันคีย์ลัด PrintScreen, Win+Shift+S และอื่นๆ
-  document.addEventListener('keyup', (event) => {
-    const encryptedText = CryptoJS.AES.encrypt(event.key, encryptionKey).toString();
-    console.log("ข้อความที่เข้ารหัส:", encryptedText);
-
-// ถอดรหัสข้อความ
-    const bytes = CryptoJS.AES.decrypt(encryptedText, encryptionKey);
-    const decryptedText = bytes.toString(CryptoJS.enc.Utf8);
-    console.log("ข้อความที่ถอดรหัส:", decryptedText);
-    // console.log('Key pressed:', event.key);
-      if (event.key === 'PrintScreen' || (event.key === 'S' && event.shiftKey && event.metaKey)) {
-          console.log('Blocked PrintScreen or Win+Shift+S key.');
-          event.preventDefault();
-      }
-  });
-
-  // ตรวจจับการใช้งาน screen capture ของ third-party logger
-  if (navigator.mediaDevices) {
-      const originalGetUserMedia = navigator.mediaDevices.getUserMedia;
-      navigator.mediaDevices.getUserMedia = (constraints) => {
-          if (constraints && constraints.video && constraints.video.mediaSource === 'screen') {
-              console.warn('Screen capture attempt detected!');
-              return Promise.reject("Screen capture blocked.");
-          }
-          return originalGetUserMedia.call(navigator.mediaDevices, constraints);
-      };
-  }
-}
-
-// ฟังก์ชันเพื่อแสดงหน้าจอสีดำ
-function showBlackScreen(autoClose = false) {
-  const blackScreen = document.createElement('div');
-  blackScreen.style.position = 'fixed';
-  blackScreen.style.top = 0;
-  blackScreen.style.left = 0;
-  blackScreen.style.width = '100%';
-  blackScreen.style.height = '100%';
-  blackScreen.style.backgroundColor = '#000';
-  blackScreen.style.zIndex = '9999';
-  blackScreen.style.display = 'flex';
-  blackScreen.style.alignItems = 'center';
-  blackScreen.style.justifyContent = 'center';
-  blackScreen.style.color = '#FFF';
-  blackScreen.style.fontSize = '24px';
-  blackScreen.textContent = 'Screen capture blocked!';
-
-  document.body.appendChild(blackScreen);
-
-  if (autoClose) {
-      setTimeout(() => {
-          blackScreen.remove();
-      }, 3000);
-  }
-}
-
-// เรียกใช้งานฟังก์ชัน
-preventScreenCapture();
-// preventKeyLogger();
-
-// สร้าง Timer เพื่อตรวจสอบการทำงานเป็นระยะ 
-function createTimer(interval, callback) { 
-  return setInterval(callback, interval); 
-} 
-
-function clearTimer(timerId) { 
-  clearInterval(timerId); 
-} // ตัวอย่างการใช้งาน Timer 
-
-const screenCaptureTimer = createTimer(1000, () => { 
-  console.log('Timer ticked - Checking screen capture status'); 
-  // เพิ่มฟังก์ชันการตรวจจับหรือจัดการเหตุการณ์ที่ต้องการ 
-  preventScreenCapture(); // เรียกใช้งานฟังก์ชันการป้องกันการจับภาพหน้าจอ 
-  }); 
-  
-  // ยกเลิก Timer หลังจาก 10 วินาที 
-  setTimeout(() => clearTimer(screenCaptureTimer), 10000);*/