feat: improve basic layout for 96 and 65

mishamyrt · Mar 2, 2024 · 47bfb9f · 47bfb9f
1 parent a194ba2
commit 47bfb9f
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 62 deletions.
diff --git a/frontend/src/entities/keys/lib/constants.ts b/frontend/src/entities/keys/lib/constants.ts
@@ -73,7 +73,14 @@ export const shortKeyNames: Record<string, string> = {
   quote: "'",
   period: '.',
   comma: ',',
-  screenshot: 'Scrn'
+  screenshot: 'Scrn',
+  numlock: 'Lk',
+  numpad_div: '/',
+  numpad_mul: '*',
+  numpad_sub: '-',
+  numpad_add: '+',
+  numpad_enter: '↵',
+  numpad_dot: '.'
 }
 
 export const codelessKeyNames: Record<string, string> = {

diff --git a/frontend/src/entities/keys/lib/key-name.ts b/frontend/src/entities/keys/lib/key-name.ts
@@ -3,14 +3,14 @@ import { shortKeyNames } from './constants'
 const prefixes = ['numpad', 'num_', 'num']
 
 export function getShortName (key: string): string {
+  if (shortKeyNames[key]) {
+    return shortKeyNames[key]
+  }
   for (const prefix of prefixes) {
     if (key.startsWith(prefix)) {
       return key.slice(prefix.length)
     }
   }
-  if (shortKeyNames[key]) {
-    return shortKeyNames[key]
-  }
   if (key.length <= 3) {
     return key.toUpperCase()
   }

diff --git a/frontend/src/entities/keys/lib/layouts/halo65.ts b/frontend/src/entities/keys/lib/layouts/halo65.ts
@@ -3,18 +3,18 @@ import type { KeyboardLayout } from '../../model/types'
 export const Halo65: KeyboardLayout = [
   [
     { code: 'esc', color: 'mint' },
-    { code: '1' },
-    { code: '2' },
-    { code: '3' },
-    { code: '4' },
-    { code: '5' },
-    { code: '6' },
-    { code: '7' },
-    { code: '8' },
-    { code: '9' },
-    { code: '0' },
-    { code: '-' },
-    { code: '+' },
+    { code: 'num1' },
+    { code: 'num2' },
+    { code: 'num3' },
+    { code: 'num4' },
+    { code: 'num5' },
+    { code: 'num6' },
+    { code: 'num7' },
+    { code: 'num8' },
+    { code: 'num9' },
+    { code: 'num0' },
+    { code: 'minus' },
+    { code: 'equal' },
     { code: 'backspace', color: 'dark', width: 2 },
     { code: 'del', color: 'dark' }
   ],
@@ -30,13 +30,13 @@ export const Halo65: KeyboardLayout = [
     { code: 'i' },
     { code: 'o' },
     { code: 'p' },
-    { code: '[' },
-    { code: ']' },
-    { code: '\\', width: 1.5 },
+    { code: 'lbracket' },
+    { code: 'rbracket' },
+    { code: 'backslash', width: 1.5 },
     { code: 'pgup', color: 'dark' }
   ],
   [
-    { code: 'caps', color: 'dark', width: 1.75 },
+    { code: 'capslock', color: 'dark', width: 1.75 },
     { code: 'a' },
     { code: 's' },
     { code: 'd' },
@@ -69,10 +69,10 @@ export const Halo65: KeyboardLayout = [
   ],
   [
     { code: 'lctrl', color: 'dark', width: 1.25 },
-    { code: 'option', color: 'dark', width: 1.25 },
-    { code: 'lcmd', color: 'dark', width: 1.25 },
+    { code: 'lalt', color: 'dark', width: 1.25 },
+    { code: 'lmeta', color: 'dark', width: 1.25 },
     { code: 'space', color: 'yellow', width: 6.25 },
-    { code: 'rcmd', color: 'dark', width: 1.25 },
+    { code: 'rmeta', color: 'dark', width: 1.25 },
     { code: 'fn', color: 'dark', width: 1.25 },
     { width: 0.5 },
     { code: 'left', color: 'dark' },

diff --git a/frontend/src/entities/keys/lib/layouts/halo96.ts b/frontend/src/entities/keys/lib/layouts/halo96.ts
@@ -16,32 +16,32 @@ export const Halo96: KeyboardLayout = [
     { code: 'f10' },
     { code: 'f11' },
     { code: 'f12' },
-    { code: 'prntscr', color: 'dark' },
+    { code: 'screenshot', color: 'dark' },
     { code: 'del', color: 'dark' },
     { code: 'home', color: 'dark' },
     { code: 'end', color: 'dark' },
     { code: 'pgup', color: 'dark' },
     { code: 'pgdn', color: 'dark' }
   ],
   [
-    { code: '~' },
-    { code: '1' },
-    { code: '2' },
-    { code: '3' },
-    { code: '4' },
-    { code: '5' },
-    { code: '6' },
-    { code: '7' },
-    { code: '8' },
-    { code: '9' },
-    { code: '0' },
-    { code: '-' },
-    { code: '+' },
+    { code: 'grave' },
+    { code: 'num1' },
+    { code: 'num2' },
+    { code: 'num3' },
+    { code: 'num4' },
+    { code: 'num5' },
+    { code: 'num6' },
+    { code: 'num7' },
+    { code: 'num8' },
+    { code: 'num9' },
+    { code: 'num0' },
+    { code: 'minus' },
+    { code: 'equal' },
     { code: 'backspace', color: 'dark', width: 2 },
-    { code: 'numlk', color: 'dark' },
-    { code: '/', color: 'dark' },
-    { code: '×', color: 'dark' },
-    { code: '-', color: 'dark' }
+    { code: 'numlock', color: 'dark' },
+    { code: 'numpad_div', color: 'dark' },
+    { code: 'numpad_mul', color: 'dark' },
+    { code: 'numpad_sub', color: 'dark' }
   ],
   [
     { code: 'tab', color: 'dark', width: 1.5 },
@@ -55,13 +55,13 @@ export const Halo96: KeyboardLayout = [
     { code: 'i' },
     { code: 'o' },
     { code: 'p' },
-    { code: '[' },
-    { code: ']' },
-    { code: '\\', width: 1.5 },
+    { code: 'lbracket' },
+    { code: 'rbracket' },
+    { code: 'backslash', width: 1.5 },
     { code: 'num7' },
     { code: 'num8' },
     { code: 'num9' },
-    { code: 'numplus', height: 2, color: 'dark' }
+    { code: 'numpad_add', height: 2, color: 'dark' }
   ],
   [
     { code: 'caps', color: 'dark', width: 1.75 },
@@ -74,8 +74,8 @@ export const Halo96: KeyboardLayout = [
     { code: 'j' },
     { code: 'k' },
     { code: 'l' },
-    { code: ';' },
-    { code: '\'' },
+    { code: 'semicolon' },
+    { code: 'quote' },
     { code: 'enter', width: 2.25, color: 'orange' },
     { code: 'num4' },
     { code: 'num5' },
@@ -90,28 +90,28 @@ export const Halo96: KeyboardLayout = [
     { code: 'b' },
     { code: 'n' },
     { code: 'm' },
-    { code: '<' },
-    { code: '>' },
-    { code: '/' },
+    { code: 'comma' },
+    { code: 'period' },
+    { code: 'fwdslash' },
     { code: 'rshift', color: 'dark', width: 1.75 },
     { code: 'up', color: 'dark' },
-    { code: 'num1' },
-    { code: 'num2' },
-    { code: 'num3' },
-    { code: 'numenter', height: 2, color: 'mint' }
+    { code: 'numpad1' },
+    { code: 'numpad2' },
+    { code: 'numpad3' },
+    { code: 'numpad_enter', height: 2, color: 'mint' }
   ],
   [
     { code: 'lctrl', color: 'dark', width: 1.25 },
-    { code: 'option', color: 'dark', width: 1.25 },
-    { code: 'lcmd', color: 'dark', width: 1.25 },
+    { code: 'lalt', color: 'dark', width: 1.25 },
+    { code: 'lmeta', color: 'dark', width: 1.25 },
     { code: 'space', color: 'yellow', width: 6.25 },
-    { code: 'rcmd', color: 'dark', width: 1.25 },
+    { code: 'rmeta', color: 'dark', width: 1.25 },
     { code: 'fn', color: 'dark', width: 1.25 },
     { width: 0.5 },
     { code: 'left', color: 'dark' },
     { code: 'down', color: 'dark' },
     { code: 'right', color: 'dark' },
-    { code: 'num0' },
-    { code: 'numdot' }
+    { code: 'numpad0' },
+    { code: 'numpad_dot' }
   ]
 ]
diff --git a/frontend/src/entities/keys/ui/AbstractKeyboard.svelte b/frontend/src/entities/keys/ui/AbstractKeyboard.svelte
@@ -13,6 +13,7 @@
   $: rowHeight = columnWidth * 3.4
   $: borderRadius = columnWidth / 2.2
   $: rows = template.keys.length
+  $: fontSize = columnWidth * 1.1
 </script>
 
 <div class="abstract-keyboard" use:fsd={'entities/AbstractKeyboard'}>
@@ -35,7 +36,8 @@
           <div
             class="key"
             style:--key-width="{key.width}"
-            style:--key-height="{key.height}">
+            style:--key-height="{key.height}"
+            style:--key-font-size="{fontSize}px">
             <div
               class="base"
               style:--key-color="var(--key-color-{key.color})" />
@@ -75,7 +77,7 @@
 
   .key {
     grid-column: span var(--key-width);
-    grid-row: span var(--key-row-height);
+    grid-row: span var(--key-height);
     position: relative;
   }
 

diff --git a/frontend/src/features/keys/select-key/ui/SelectableKey.svelte b/frontend/src/features/keys/select-key/ui/SelectableKey.svelte
@@ -36,7 +36,7 @@
     border-radius: var(--key-border-radius);
     font-family: var(--typography-font-family);
     font-weight: 500;
-    font-size: 10px;
+    font-size: var(--key-font-size);
     text-align: center;
     padding-top: var(--space-xxs);
     background-color: transparent;