From 47bfb9f33c6a117805c5785446106d5047aeb466 Mon Sep 17 00:00:00 2001 From: mishamyrt Date: Sun, 3 Mar 2024 01:09:44 +0300 Subject: [PATCH] feat: improve basic layout for 96 and 65 --- frontend/src/entities/keys/lib/constants.ts | 9 ++- frontend/src/entities/keys/lib/key-name.ts | 6 +- .../src/entities/keys/lib/layouts/halo65.ts | 38 +++++----- .../src/entities/keys/lib/layouts/halo96.ts | 72 +++++++++---------- .../entities/keys/ui/AbstractKeyboard.svelte | 6 +- .../keys/select-key/ui/SelectableKey.svelte | 2 +- 6 files changed, 71 insertions(+), 62 deletions(-) diff --git a/frontend/src/entities/keys/lib/constants.ts b/frontend/src/entities/keys/lib/constants.ts index 922d800f..19957744 100644 --- a/frontend/src/entities/keys/lib/constants.ts +++ b/frontend/src/entities/keys/lib/constants.ts @@ -73,7 +73,14 @@ export const shortKeyNames: Record = { 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 = { diff --git a/frontend/src/entities/keys/lib/key-name.ts b/frontend/src/entities/keys/lib/key-name.ts index 13bd7658..a33dfe5b 100644 --- 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 index fa9343c5..57dc4176 100644 --- 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 index 6dc88380..3f41a735 100644 --- a/frontend/src/entities/keys/lib/layouts/halo96.ts +++ b/frontend/src/entities/keys/lib/layouts/halo96.ts @@ -16,7 +16,7 @@ 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' }, @@ -24,24 +24,24 @@ export const Halo96: KeyboardLayout = [ { 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 index 0f202e97..356c0b43 100644 --- 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
@@ -35,7 +36,8 @@
+ style:--key-height="{key.height}" + style:--key-font-size="{fontSize}px">
@@ -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 index e7abd694..874cdd84 100644 --- 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;