[RZA-250143]: replace keyCode with key

Author: recursivezero

src/assets/styles/index.css

@@ -146,4 +146,4 @@
     padding-left: 6rem;
     padding-right: 6rem;
   }
-}
+}

src/assets/styles/menu.css

@@ -6,25 +6,27 @@
     --header-height: 80px;
     --sidebar-width: 16ch;
     --timing: 0.42s;
-    --ease: linear(0 0%,
-        0.0036 9.62%,
-        0.0185 16.66%,
-        0.0489 23.03%,
-        0.0962 28.86%,
-        0.1705 34.93%,
-        0.269 40.66%,
-        0.3867 45.89%,
-        0.5833 52.95%,
-        0.683 57.05%,
-        0.7829 62.14%,
-        0.8621 67.46%,
-        0.8991 70.68%,
-        0.9299 74.03%,
-        0.9545 77.52%,
-        0.9735 81.21%,
-        0.9865 85%,
-        0.9949 89.15%,
-        1 100%);
+    --ease: linear(
+      0 0%,
+      0.0036 9.62%,
+      0.0185 16.66%,
+      0.0489 23.03%,
+      0.0962 28.86%,
+      0.1705 34.93%,
+      0.269 40.66%,
+      0.3867 45.89%,
+      0.5833 52.95%,
+      0.683 57.05%,
+      0.7829 62.14%,
+      0.8621 67.46%,
+      0.8991 70.68%,
+      0.9299 74.03%,
+      0.9545 77.52%,
+      0.9735 81.21%,
+      0.9865 85%,
+      0.9949 89.15%,
+      1 100%
+    );
     --sidebar-collapsed: 4rem;
     --sidebar-expanded: 16ch;
     --icon-size: 1.5rem;
@@ -529,4 +531,4 @@
   [data-theme="system"] [popover] .nav--list__item:hover a {
     color: var(--primary);
   }
-}
+}

src/layouts/Base.astro

@@ -9,8 +9,7 @@ import Shortcut from "@/components/Shortcut.astro";
 
 const {
   meta: { title, description = siteConfig.description, ogImage },
-  sidebar = true,
-  meta
+  sidebar = true
 } = Astro.props;
 ---
 
@@ -39,7 +38,7 @@ const {
           .getRegistrations()
           .then((registrations) => {
             // Unregister all existing service workers
-            const unregisterPromises = registrations.map((registration) => {
+            const unregisterPromises = registrations.map(async (registration) => {
               return registration.unregister().then((success) => {
                 if (success) {
                   console.log("Successfully unregistered service worker:", registration.scope);

src/pages/alphabets/[alphabet]/playground.astro

@@ -180,17 +180,20 @@ const meta = {
         }
       } else {
         // Default behavior for other alphabets (A-Z, 0-9)
-        const { key, keyCode } = e;
-        const isAlphabet = keyCode >= 65 && keyCode <= 90;
-        const isNumber = keyCode >= 48 && keyCode <= 57;
+        const { key } = e;
+        const isAlphabet = /^[A-Za-z]$/.test(key);
+        console.log({ isAlphabet });
+        const isNumber = /^[0-9]$/.test(key);
+        console.log({ isNumber });
         if (isAlphabet) {
           const keyCapital = key.toUpperCase();
           const info = alphabetData.find((item) => item.letter.toUpperCase() === keyCapital || item.letter === key);
           if (info) drawInfo(info, random(colorBox));
-        } else if (isNumber) {
-          const info = alphabetData.find((item) => item.letter === key);
-          if (info) drawInfo(info, random(colorBox));
         }
+        //else if (isNumber) {
+        //  const info = alphabetData.find((item) => item.letter === key);
+        //  if (info) drawInfo(info, random(colorBox));
+        //}
       }
     },
     false

src/pages/panel.astro

@@ -123,10 +123,10 @@ const meta = {
 </BaseLayout>
 <script>
   enum ArrowKeys {
-    LEFT = 37,
-    UP = 38,
-    RIGHT = 39,
-    DOWN = 40
+    LEFT = "ArrowLeft",
+    UP = "ArrowUp",
+    RIGHT = "ArrowRight",
+    DOWN = "ArrowDown"
   }
 
   enum ContentType {
@@ -171,8 +171,8 @@ const meta = {
 
     #emitEvent() {
       document.addEventListener("keyup", (e: KeyboardEvent) => {
-        const { charCode, code, keyCode, key } = e;
-        this.onKeyChange(keyCode);
+        const { key } = e;
+        this.onKeyChange(key);
       });
 
       this.#orientationPanel.forEach((radio) => {
@@ -328,12 +328,12 @@ const meta = {
       this.#panel.style.transform = transformString;
     }
 
-    onKeyChange(code: number) {
+    onKeyChange(key: string) {
       const VerticalButton = this.#orientationPanel[0] as HTMLInputElement;
       const horizontalButton = this.#orientationPanel[1] as HTMLInputElement;
       const currentPanelSize = Number(this.#cellRange.value);
 
-      switch (code) {
+      switch (key) {
         case ArrowKeys.RIGHT: {
           if (this.#orientation === "Y") {
             this.#selectedIndex--;
@@ -368,22 +368,23 @@ const meta = {
         }
         default: {
           // Handle character input (alphabets and numbers)
+          const char = key.toUpperCase();
           if (this.#contentType === ContentType.ALPHABET) {
-            if (code >= 65 && code <= 90) {
+            if (/^[A-Z]$/.test(key)) {
               // A-Z (uppercase)
-              this.#selectedIndex = (65 - code + currentPanelSize) % currentPanelSize; // Calculate index relative to A
-            } else if (code >= 97 && code <= 122) {
+              this.#selectedIndex = (65 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to A
+            } else if (/^[a-z]$/.test(key)) {
               // a-z (lowercase)
-              this.#selectedIndex = (97 - code + currentPanelSize) % currentPanelSize; // Calculate index relative to a
+              this.#selectedIndex = (97 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to a
             } else {
               // If not an alphabet, just move forward
               this.#selectedIndex++;
             }
           } else {
             // ContentType.NUMBERS
-            if (code >= 48 && code <= 57) {
+            if (/^[0-9]$/.test(key)) {
               // 0-9
-              this.#selectedIndex = (48 - code + currentPanelSize) % currentPanelSize; // Calculate index relative to 0
+              this.#selectedIndex = (48 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to 0
             } else {
               // If not a number, just move forward
               this.#selectedIndex++;

src/pages/varnmala/listen.astro

@@ -49,7 +49,7 @@ const meta = {
 
 <script>
   import { emojiList } from "@/mappers/alphabet";
-  import { getRandomValue, isAlphabet, isNumber } from "@/utils/index";
+  import { getRandomValue } from "@/utils/index";
 
   const mainBlock = document.querySelector("#letter") as HTMLElement;
   const muteButton = document.querySelector("#mute") as HTMLButtonElement;
@@ -176,15 +176,15 @@ const meta = {
   };
 
   document.addEventListener("keydown", (e: KeyboardEvent) => {
-    const { key, keyCode, which, code } = e;
+    const { key, code } = e;
     if (!mainBlock) return;
 
     if (!isNonPrintingKey(e)) {
-      if (isAlphabet(which)) {
+      if (/^[A-Z]$/i.test(key)) {
         const emoji = getEmoji(key);
         mainBlock.innerHTML = key + emoji;
         if (muteButton) attachAudio(code);
-      } else if (isNumber(keyCode)) {
+      } else if (/^[0-9]$/.test(key)) {
         mainBlock.innerHTML = key;
         if (muteButton) attachAudio(code, true);
       } else {

src/pages/varnmala/play.astro

@@ -75,10 +75,6 @@ const meta = {
   let lastKey: string | null = null; // Store the last key pressed
   let isMuted = false; // Flag to track mute state
 
-  function isAlphabet(keyCode: number): boolean {
-    return keyCode >= 65 && keyCode <= 90;
-  }
-
   function speak(text: string) {
     if (isMuted) return; // Do not speak if muted
 
@@ -129,9 +125,9 @@ const meta = {
     "keydown",
     (e) => {
       e.preventDefault();
-      const { key, keyCode } = e;
+      const { key } = e;
 
-      if (isAlphabet(keyCode)) {
+      if (/^[0-9]$/.test(key)) {
         const upperKey = key.toUpperCase();
         let isDouble = false;
         let doublePress;