Skip to content

Commit c90b614

Browse files
BryantWelchBryantWelch
committed
Various Tweaks and Improvements
See Release v0.7.2
1 parent 33cef8a commit c90b614

File tree

8 files changed

+346
-492
lines changed

8 files changed

+346
-492
lines changed

‎src/components/Keyboards/Key.tsx‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface KeyProps {
3232
isTested?: boolean;
3333
isSpecialKey?: boolean;
3434
className?: string;
35+
style?: React.CSSProperties;
3536
onKeyPress?: () => void;
3637
}
3738

@@ -151,46 +152,38 @@ const Key: React.FC<KeyProps> = ({
151152
isTested = false,
152153
isSpecialKey = false,
153154
className,
155+
style,
154156
onKeyPress,
155157
}) => {
156-
const width = KEY_UNIT * sizeMap[size];
157-
const isWindowsKey = label.primary === 'Win';
158+
// Get the mapped key based on keyboard type
159+
const mappedLabel = keyboardType !== 'qwerty' && !isSpecialKey ?
160+
getKeyMapping(label.primary, keyboardType) :
161+
label.primary;
162+
163+
// Calculate width based on size
164+
const width = sizeMap[size] * KEY_UNIT;
165+
166+
// Handle special cases for key display
167+
const displayLabel = mappedLabel === 'Meta' ? <WindowsIcon /> : mappedLabel;
158168

159-
// Get the mapped label based on keyboard type
160-
const mappedLabel = isSpecialKey ? label : getKeyMapping(keyboardType, label.primary, label);
161-
162169
return (
163-
<KeyContainer
170+
<KeyContainer
164171
$width={width}
165172
className={className}
173+
style={style}
166174
onClick={onKeyPress}
167-
whileHover={{ y: -1 }}
168-
whileTap={{ y: 1 }}
175+
whileTap={{ scale: 0.95 }}
176+
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
169177
>
170178
<KeyCap
171-
$isTested={isTested}
172-
$isSpecialKey={isSpecialKey}
173-
$isPressed={isPressed}
174-
animate={{
175-
scale: isPressed ? 0.95 : 1,
176-
y: isPressed ? 2 : 0,
177-
}}
178-
transition={{
179-
type: "spring",
180-
stiffness: 500,
181-
damping: 30,
182-
mass: 0.5
183-
}}
179+
$isTested={!!isTested}
180+
$isSpecialKey={!!isSpecialKey}
181+
$isPressed={!!isPressed}
182+
style={{ height: '100%' }}
184183
>
185-
<KeyText $isPressed={isPressed}>
186-
{isWindowsKey ? (
187-
<WindowsIcon />
188-
) : (
189-
<>
190-
{mappedLabel.secondary && <SecondaryText>{mappedLabel.secondary}</SecondaryText>}
191-
<PrimaryText>{mappedLabel.primary}</PrimaryText>
192-
</>
193-
)}
184+
<KeyText $isPressed={!!isPressed}>
185+
<PrimaryText>{displayLabel}</PrimaryText>
186+
{label.secondary && <SecondaryText>{label.secondary}</SecondaryText>}
194187
</KeyText>
195188
</KeyCap>
196189
</KeyContainer>

‎src/components/Keyboards/Keyboard60.tsx‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -110,83 +110,83 @@ const Keyboard60: React.FC<Keyboard60Props> = ({ onKeyPress, onReset, keyboardTy
110110
<KeyboardInner>
111111
{/* Number Row */}
112112
<KeyRow>
113-
<Key {...createKeyProps('ESC', 'ESC', '~', true)} />
114-
<Key {...createKeyProps('1', '1', '!')} />
115-
<Key {...createKeyProps('2', '2', '@')} />
116-
<Key {...createKeyProps('3', '3', '#')} />
117-
<Key {...createKeyProps('4', '4', '$')} />
118-
<Key {...createKeyProps('5', '5', '%')} />
119-
<Key {...createKeyProps('6', '6', '^')} />
120-
<Key {...createKeyProps('7', '7', '&')} />
121-
<Key {...createKeyProps('8', '8', '*')} />
122-
<Key {...createKeyProps('9', '9', '(')} />
123-
<Key {...createKeyProps('0', '0', ')')} />
124-
<Key {...createKeyProps('-', '-', '_')} />
125-
<Key {...createKeyProps('=', '=', '+')} />
113+
<Key {...createKeyProps('ESC', 'Escape', '~', true)} />
114+
<Key {...createKeyProps('1', 'Digit1', '!')} />
115+
<Key {...createKeyProps('2', 'Digit2', '@')} />
116+
<Key {...createKeyProps('3', 'Digit3', '#')} />
117+
<Key {...createKeyProps('4', 'Digit4', '$')} />
118+
<Key {...createKeyProps('5', 'Digit5', '%')} />
119+
<Key {...createKeyProps('6', 'Digit6', '^')} />
120+
<Key {...createKeyProps('7', 'Digit7', '&')} />
121+
<Key {...createKeyProps('8', 'Digit8', '*')} />
122+
<Key {...createKeyProps('9', 'Digit9', '(')} />
123+
<Key {...createKeyProps('0', 'Digit0', ')')} />
124+
<Key {...createKeyProps('-', 'Minus', '_')} />
125+
<Key {...createKeyProps('=', 'Equal', '+')} />
126126
<Key {...createKeyProps('Backspace', 'Backspace', undefined, true)} size="2u" />
127127
</KeyRow>
128128

129129
{/* Top Alpha Row */}
130130
<KeyRow>
131131
<Key {...createKeyProps('Tab', 'Tab', undefined, true)} size="1.5u" />
132-
<Key {...createKeyProps('Q', 'Q')} />
133-
<Key {...createKeyProps('W', 'W')} />
134-
<Key {...createKeyProps('E', 'E')} />
135-
<Key {...createKeyProps('R', 'R')} />
136-
<Key {...createKeyProps('T', 'T')} />
137-
<Key {...createKeyProps('Y', 'Y')} />
138-
<Key {...createKeyProps('U', 'U')} />
139-
<Key {...createKeyProps('I', 'I')} />
140-
<Key {...createKeyProps('O', 'O')} />
141-
<Key {...createKeyProps('P', 'P')} />
142-
<Key {...createKeyProps('[', '[', '{')} />
143-
<Key {...createKeyProps(']', ']', '}')} />
144-
<Key {...createKeyProps('\\', '\\', '|', true)} size="1.5u" />
132+
<Key {...createKeyProps('Q', 'KeyQ')} />
133+
<Key {...createKeyProps('W', 'KeyW')} />
134+
<Key {...createKeyProps('E', 'KeyE')} />
135+
<Key {...createKeyProps('R', 'KeyR')} />
136+
<Key {...createKeyProps('T', 'KeyT')} />
137+
<Key {...createKeyProps('Y', 'KeyY')} />
138+
<Key {...createKeyProps('U', 'KeyU')} />
139+
<Key {...createKeyProps('I', 'KeyI')} />
140+
<Key {...createKeyProps('O', 'KeyO')} />
141+
<Key {...createKeyProps('P', 'KeyP')} />
142+
<Key {...createKeyProps('[', 'BracketLeft', '{')} />
143+
<Key {...createKeyProps(']', 'BracketRight', '}')} />
144+
<Key {...createKeyProps('\\', 'Backslash', '|', true)} size="1.5u" />
145145
</KeyRow>
146146

147147
{/* Middle Alpha Row */}
148148
<KeyRow>
149-
<Key {...createKeyProps('Caps Lock', 'Caps Lock', undefined, true)} size="1.75u" />
150-
<Key {...createKeyProps('A', 'A')} />
151-
<Key {...createKeyProps('S', 'S')} />
152-
<Key {...createKeyProps('D', 'D')} />
153-
<Key {...createKeyProps('F', 'F')} />
154-
<Key {...createKeyProps('G', 'G')} />
155-
<Key {...createKeyProps('H', 'H')} />
156-
<Key {...createKeyProps('J', 'J')} />
157-
<Key {...createKeyProps('K', 'K')} />
158-
<Key {...createKeyProps('L', 'L')} />
159-
<Key {...createKeyProps(';', ';', ':')} />
160-
<Key {...createKeyProps("'", "'", '"')} />
149+
<Key {...createKeyProps('Caps Lock', 'CapsLock', undefined, true)} size="1.75u" />
150+
<Key {...createKeyProps('A', 'KeyA')} />
151+
<Key {...createKeyProps('S', 'KeyS')} />
152+
<Key {...createKeyProps('D', 'KeyD')} />
153+
<Key {...createKeyProps('F', 'KeyF')} />
154+
<Key {...createKeyProps('G', 'KeyG')} />
155+
<Key {...createKeyProps('H', 'KeyH')} />
156+
<Key {...createKeyProps('J', 'KeyJ')} />
157+
<Key {...createKeyProps('K', 'KeyK')} />
158+
<Key {...createKeyProps('L', 'KeyL')} />
159+
<Key {...createKeyProps(';', 'Semicolon', ':')} />
160+
<Key {...createKeyProps("'", 'Quote', '"')} />
161161
<Key {...createKeyProps('Enter', 'Enter', undefined, true)} size="2.25u" />
162162
</KeyRow>
163163

164164
{/* Bottom Alpha Row */}
165165
<KeyRow>
166-
<Key {...createKeyProps('Shift', 'L-Shift', undefined, true)} size="2.35u" />
167-
<Key {...createKeyProps('Z', 'Z')} />
168-
<Key {...createKeyProps('X', 'X')} />
169-
<Key {...createKeyProps('C', 'C')} />
170-
<Key {...createKeyProps('V', 'V')} />
171-
<Key {...createKeyProps('B', 'B')} />
172-
<Key {...createKeyProps('N', 'N')} />
173-
<Key {...createKeyProps('M', 'M')} />
174-
<Key {...createKeyProps(',', ',', '<')} />
175-
<Key {...createKeyProps('.', '.', '>')} />
176-
<Key {...createKeyProps('/', '/', '?')} />
177-
<Key {...createKeyProps('Shift', 'R-Shift', undefined, true)} size="2.75u" />
166+
<Key {...createKeyProps('Shift', 'ShiftLeft', undefined, true)} size="2.35u" />
167+
<Key {...createKeyProps('Z', 'KeyZ')} />
168+
<Key {...createKeyProps('X', 'KeyX')} />
169+
<Key {...createKeyProps('C', 'KeyC')} />
170+
<Key {...createKeyProps('V', 'KeyV')} />
171+
<Key {...createKeyProps('B', 'KeyB')} />
172+
<Key {...createKeyProps('N', 'KeyN')} />
173+
<Key {...createKeyProps('M', 'KeyM')} />
174+
<Key {...createKeyProps(',', 'Comma', '<')} />
175+
<Key {...createKeyProps('.', 'Period', '>')} />
176+
<Key {...createKeyProps('/', 'Slash', '?')} />
177+
<Key {...createKeyProps('Shift', 'ShiftRight', undefined, true)} size="2.75u" />
178178
</KeyRow>
179179

180180
{/* Bottom Row */}
181181
<BottomKeyRow>
182-
<Key {...createKeyProps('Ctrl', 'L-Ctrl', undefined, true)} size="1.35u" />
183-
<Key {...createKeyProps('Win', 'Win', undefined, true)} size="1.35u" />
184-
<Key {...createKeyProps('Alt', 'L-Alt', undefined, true)} size="1.35u" />
182+
<Key {...createKeyProps('Ctrl', 'ControlLeft', undefined, true)} size="1.35u" />
183+
<Key {...createKeyProps('Win', 'MetaLeft', undefined, true)} size="1.35u" />
184+
<Key {...createKeyProps('Alt', 'AltLeft', undefined, true)} size="1.35u" />
185185
<Key {...createKeyProps('Space', 'Space', undefined, false)} size="6.55u" />
186-
<Key {...createKeyProps('Alt', 'R-Alt', undefined, true)} size="1.25u" />
187-
<Key {...createKeyProps('Win', 'R-Win', undefined, true)} size="1.25u" />
186+
<Key {...createKeyProps('Alt', 'AltRight', undefined, true)} size="1.25u" />
187+
<Key {...createKeyProps('Win', 'MetaRight', undefined, true)} size="1.25u" />
188188
<Key {...createKeyProps('Fn', 'Fn', undefined, true)} size="1.25u" />
189-
<Key {...createKeyProps('Ctrl', 'R-Ctrl', undefined, true)} size="1.25u" />
189+
<Key {...createKeyProps('Ctrl', 'ControlRight', undefined, true)} size="1.25u" />
190190
</BottomKeyRow>
191191
</KeyboardInner>
192192
</KeyboardFrame>

‎src/components/Keyboards/Keyboard75.tsx‎

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const KeyboardFrame = styled.div`
3535
const KeyboardInner = styled.div`
3636
display: flex;
3737
flex-direction: column;
38-
gap: 4px;
38+
gap: 2px;
3939
padding: 12px;
4040
border-radius: 8px;
4141
background: ${props => `${props.theme.colors.primary}15`};
@@ -104,7 +104,7 @@ const Keyboard75: React.FC<Keyboard75Props> = ({ onKeyPress, onReset, keyboardTy
104104
<KeyboardInner>
105105
{/* Function Row */}
106106
<KeyRow>
107-
<Key {...createKeyProps('ESC', 'ESC', undefined, true)} />
107+
<Key {...createKeyProps('ESC', 'Escape', undefined, true)} />
108108
<Key {...createKeyProps('F1', 'F1', undefined, true)} />
109109
<Key {...createKeyProps('F2', 'F2', undefined, true)} />
110110
<Key {...createKeyProps('F3', 'F3', undefined, true)} />
@@ -124,87 +124,87 @@ const Keyboard75: React.FC<Keyboard75Props> = ({ onKeyPress, onReset, keyboardTy
124124

125125
{/* Number Row */}
126126
<KeyRow>
127-
<Key {...createKeyProps('~', '`', '`', true)} />
128-
<Key {...createKeyProps('1', '1', '!')} />
129-
<Key {...createKeyProps('2', '2', '@')} />
130-
<Key {...createKeyProps('3', '3', '#')} />
131-
<Key {...createKeyProps('4', '4', '$')} />
132-
<Key {...createKeyProps('5', '5', '%')} />
133-
<Key {...createKeyProps('6', '6', '^')} />
134-
<Key {...createKeyProps('7', '7', '&')} />
135-
<Key {...createKeyProps('8', '8', '*')} />
136-
<Key {...createKeyProps('9', '9', '(')} />
137-
<Key {...createKeyProps('0', '0', ')')} />
138-
<Key {...createKeyProps('-', '-', '_')} />
139-
<Key {...createKeyProps('=', '=', '+')} />
127+
<Key {...createKeyProps('~', 'Backquote', '`', true)} />
128+
<Key {...createKeyProps('1', 'Digit1', '!')} />
129+
<Key {...createKeyProps('2', 'Digit2', '@')} />
130+
<Key {...createKeyProps('3', 'Digit3', '#')} />
131+
<Key {...createKeyProps('4', 'Digit4', '$')} />
132+
<Key {...createKeyProps('5', 'Digit5', '%')} />
133+
<Key {...createKeyProps('6', 'Digit6', '^')} />
134+
<Key {...createKeyProps('7', 'Digit7', '&')} />
135+
<Key {...createKeyProps('8', 'Digit8', '*')} />
136+
<Key {...createKeyProps('9', 'Digit9', '(')} />
137+
<Key {...createKeyProps('0', 'Digit0', ')')} />
138+
<Key {...createKeyProps('-', 'Minus', '_')} />
139+
<Key {...createKeyProps('=', 'Equal', '+')} />
140140
<Key {...createKeyProps('Backspace', 'Backspace', undefined, true, '2.1u')} />
141141
<Key {...createKeyProps('Home', 'Home', undefined, true)} />
142142
</KeyRow>
143143

144144
{/* Top Alpha Row */}
145145
<KeyRow>
146146
<Key {...createKeyProps('Tab', 'Tab', undefined, true, '1.55u')} />
147-
<Key {...createKeyProps('Q', 'Q')} />
148-
<Key {...createKeyProps('W', 'W')} />
149-
<Key {...createKeyProps('E', 'E')} />
150-
<Key {...createKeyProps('R', 'R')} />
151-
<Key {...createKeyProps('T', 'T')} />
152-
<Key {...createKeyProps('Y', 'Y')} />
153-
<Key {...createKeyProps('U', 'U')} />
154-
<Key {...createKeyProps('I', 'I')} />
155-
<Key {...createKeyProps('O', 'O')} />
156-
<Key {...createKeyProps('P', 'P')} />
157-
<Key {...createKeyProps('[', '[', '{')} />
158-
<Key {...createKeyProps(']', ']', '}')} />
159-
<Key {...createKeyProps('\\', '\\', '|', true, '1.55u')} />
147+
<Key {...createKeyProps('Q', 'KeyQ')} />
148+
<Key {...createKeyProps('W', 'KeyW')} />
149+
<Key {...createKeyProps('E', 'KeyE')} />
150+
<Key {...createKeyProps('R', 'KeyR')} />
151+
<Key {...createKeyProps('T', 'KeyT')} />
152+
<Key {...createKeyProps('Y', 'KeyY')} />
153+
<Key {...createKeyProps('U', 'KeyU')} />
154+
<Key {...createKeyProps('I', 'KeyI')} />
155+
<Key {...createKeyProps('O', 'KeyO')} />
156+
<Key {...createKeyProps('P', 'KeyP')} />
157+
<Key {...createKeyProps('[', 'BracketLeft', '{')} />
158+
<Key {...createKeyProps(']', 'BracketRight', '}')} />
159+
<Key {...createKeyProps('\\', 'Backslash', '|', true, '1.55u')} />
160160
<Key {...createKeyProps('End', 'End', undefined, true)} />
161161
</KeyRow>
162162

163163
{/* Middle Alpha Row */}
164164
<KeyRow>
165-
<Key {...createKeyProps('Caps', 'Caps Lock', undefined, true, '1.85u')} />
166-
<Key {...createKeyProps('A', 'A')} />
167-
<Key {...createKeyProps('S', 'S')} />
168-
<Key {...createKeyProps('D', 'D')} />
169-
<Key {...createKeyProps('F', 'F')} />
170-
<Key {...createKeyProps('G', 'G')} />
171-
<Key {...createKeyProps('H', 'H')} />
172-
<Key {...createKeyProps('J', 'J')} />
173-
<Key {...createKeyProps('K', 'K')} />
174-
<Key {...createKeyProps('L', 'L')} />
175-
<Key {...createKeyProps(';', ';', ':')} />
176-
<Key {...createKeyProps("'", "'", '"')} />
165+
<Key {...createKeyProps('Caps', 'CapsLock', undefined, true, '1.85u')} />
166+
<Key {...createKeyProps('A', 'KeyA')} />
167+
<Key {...createKeyProps('S', 'KeyS')} />
168+
<Key {...createKeyProps('D', 'KeyD')} />
169+
<Key {...createKeyProps('F', 'KeyF')} />
170+
<Key {...createKeyProps('G', 'KeyG')} />
171+
<Key {...createKeyProps('H', 'KeyH')} />
172+
<Key {...createKeyProps('J', 'KeyJ')} />
173+
<Key {...createKeyProps('K', 'KeyK')} />
174+
<Key {...createKeyProps('L', 'KeyL')} />
175+
<Key {...createKeyProps(';', 'Semicolon', ':')} />
176+
<Key {...createKeyProps("'", 'Quote', '"')} />
177177
<Key {...createKeyProps('Enter', 'Enter', undefined, true, '2.4u')} />
178178
<Key {...createKeyProps('Pg Up', 'PageUp', undefined, true)} />
179179
</KeyRow>
180180

181181
{/* Bottom Alpha Row */}
182182
<KeyRow>
183-
<Key {...createKeyProps('Shift', 'L-Shift', undefined, true, '2.35u')} />
184-
<Key {...createKeyProps('Z', 'Z')} />
185-
<Key {...createKeyProps('X', 'X')} />
186-
<Key {...createKeyProps('C', 'C')} />
187-
<Key {...createKeyProps('V', 'V')} />
188-
<Key {...createKeyProps('B', 'B')} />
189-
<Key {...createKeyProps('N', 'N')} />
190-
<Key {...createKeyProps('M', 'M')} />
191-
<Key {...createKeyProps(',', ',', '<')} />
192-
<Key {...createKeyProps('.', '.', '>')} />
193-
<Key {...createKeyProps('/', '/', '?')} />
194-
<Key {...createKeyProps('Shift', 'R-Shift', undefined, true, '1.85u')} />
183+
<Key {...createKeyProps('Shift', 'ShiftLeft', undefined, true, '2.35u')} />
184+
<Key {...createKeyProps('Z', 'KeyZ')} />
185+
<Key {...createKeyProps('X', 'KeyX')} />
186+
<Key {...createKeyProps('C', 'KeyC')} />
187+
<Key {...createKeyProps('V', 'KeyV')} />
188+
<Key {...createKeyProps('B', 'KeyB')} />
189+
<Key {...createKeyProps('N', 'KeyN')} />
190+
<Key {...createKeyProps('M', 'KeyM')} />
191+
<Key {...createKeyProps(',', 'Comma', '<')} />
192+
<Key {...createKeyProps('.', 'Period', '>')} />
193+
<Key {...createKeyProps('/', 'Slash', '?')} />
194+
<Key {...createKeyProps('Shift', 'ShiftRight', undefined, true, '1.85u')} />
195195
<Key {...createKeyProps('↑', 'ArrowUp')} />
196196
<Key {...createKeyProps('Pg Dn', 'PageDown', undefined, true)} />
197197
</KeyRow>
198198

199199
{/* Bottom Row */}
200200
<KeyRow>
201-
<Key {...createKeyProps('Ctrl', 'L-Ctrl', undefined, true, '1.25u')} />
202-
<Key {...createKeyProps('Win', 'Win', undefined, true, '1.25u')} />
203-
<Key {...createKeyProps('Alt', 'L-Alt', undefined, true, '1.25u')} />
201+
<Key {...createKeyProps('Ctrl', 'ControlLeft', undefined, true, '1.25u')} />
202+
<Key {...createKeyProps('Win', 'MetaLeft', undefined, true, '1.25u')} />
203+
<Key {...createKeyProps('Alt', 'AltLeft', undefined, true, '1.25u')} />
204204
<Key {...createKeyProps('', 'Space', undefined, false, '6.45u')} />
205-
<Key {...createKeyProps('Alt', 'R-Alt', undefined, true, '1.2u')} />
206-
<Key {...createKeyProps('Win', 'R-Win', undefined, true, '1.2u')} />
207-
<Key {...createKeyProps('Ctrl', 'R-Ctrl', undefined, true, '1.2u')} />
205+
<Key {...createKeyProps('Alt', 'AltRight', undefined, true, '1.2u')} />
206+
<Key {...createKeyProps('Win', 'MetaRight', undefined, true, '1.2u')} />
207+
<Key {...createKeyProps('Ctrl', 'ControlRight', undefined, true, '1.2u')} />
208208
<Key {...createKeyProps('←', 'ArrowLeft')} />
209209
<Key {...createKeyProps('↓', 'ArrowDown')} />
210210
<Key {...createKeyProps('→', 'ArrowRight')} />

0 commit comments

Comments
 (0)