Added Keyboard Type functionality

BryantWelch · BryantWelch · commit e42b38ee8854 · 2025-03-04T19:36:13.000-05:00
Added Qwerty, Dvorak, and Colemak type functionality.
diff --git a/src/components/Keyboards/Key.tsx b/src/components/Keyboards/Key.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { Microsoft } from '@mui/icons-material';
+import { KeyboardLayoutType, getKeyMapping } from './keyboardTypes';
 
 export type KeySize = 
   | '1u' | '1.05u' | '1.1u' | '1.15u' | '1.2u' | '1.25u' | '1.3u' | '1.35u' | '1.4u' | '1.45u' 
@@ -25,6 +26,7 @@ export interface KeyLabel {
 
 export interface KeyProps {
   label: KeyLabel;
+  keyboardType?: KeyboardLayoutType;
   size?: KeySize;
   isPressed?: boolean;
   isTested?: boolean;
@@ -143,6 +145,7 @@ const WindowsIcon = styled(Microsoft)`
 
 const Key: React.FC<KeyProps> = ({
   label,
+  keyboardType = 'qwerty',
   size = '1u',
   isPressed = false,
   isTested = false,
@@ -152,6 +155,9 @@ const Key: React.FC<KeyProps> = ({
 }) => {
   const width = KEY_UNIT * sizeMap[size];
   const isWindowsKey = label.primary === 'Win';
+  
+  // Get the mapped label based on keyboard type
+  const mappedLabel = isSpecialKey ? label : getKeyMapping(keyboardType, label.primary, label);
 
   return (
     <KeyContainer
@@ -181,8 +187,8 @@ const Key: React.FC<KeyProps> = ({
             <WindowsIcon />
           ) : (
             <>
-              {label.secondary && <SecondaryText>{label.secondary}</SecondaryText>}
-              <PrimaryText>{label.primary}</PrimaryText>
+              {mappedLabel.secondary && <SecondaryText>{mappedLabel.secondary}</SecondaryText>}
+              <PrimaryText>{mappedLabel.primary}</PrimaryText>
             </>
           )}
         </KeyText>
diff --git a/src/components/Keyboards/Keyboard60.tsx b/src/components/Keyboards/Keyboard60.tsx
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Key from './Key';
 import { useKeyboardEvents } from './useKeyboardEvents';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 interface Keyboard60Props {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
+  keyboardType?: KeyboardLayoutType;
 }
 
 // Styled components for the keyboard
@@ -83,13 +85,14 @@ const layoutVariants = {
   },
 };
 
-const Keyboard60: React.FC<Keyboard60Props> = ({ onKeyPress, onReset }) => {
+const Keyboard60: React.FC<Keyboard60Props> = ({ onKeyPress, onReset, keyboardType = 'qwerty' }) => {
   // Use the keyboard events hook to handle key presses
   const [{ testedKeys, pressedKeys }, { handleKeyPress }] = useKeyboardEvents(onKeyPress, onReset);
 
   // Helper function to create key props
   const createKeyProps = (displayName: string, keyName: string, secondary?: string, isSpecial: boolean = false) => ({
     label: { primary: displayName, secondary },
+    keyboardType,
     onKeyPress: () => handleKeyPress(keyName),
     isTested: testedKeys.has(keyName),
     isPressed: pressedKeys.has(keyName),
diff --git a/src/components/Keyboards/Keyboard65.tsx b/src/components/Keyboards/Keyboard65.tsx
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Key, { KeySize } from './Key';
 import { useKeyboardEvents } from './useKeyboardEvents';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 interface Keyboard65Props {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
+  keyboardType?: KeyboardLayoutType;
 }
 
 // Styled components for the keyboard
@@ -79,7 +81,7 @@ const layoutVariants = {
   },
 };
 
-const Keyboard65: React.FC<Keyboard65Props> = ({ onKeyPress, onReset }) => {
+const Keyboard65: React.FC<Keyboard65Props> = ({ onKeyPress, onReset, keyboardType }) => {
   const [{ testedKeys, pressedKeys }, { handleKeyPress }] = useKeyboardEvents(onKeyPress, onReset);
 
   // Helper function to create key props
@@ -89,6 +91,7 @@ const Keyboard65: React.FC<Keyboard65Props> = ({ onKeyPress, onReset }) => {
     isTested: testedKeys.has(keyName),
     isPressed: pressedKeys.has(keyName),
     isSpecialKey: isSpecial,
+    keyboardType,
   });
 
   return (
diff --git a/src/components/Keyboards/Keyboard75.tsx b/src/components/Keyboards/Keyboard75.tsx
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Key, { KeySize } from './Key';
 import { useKeyboardEvents } from './useKeyboardEvents';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 interface Keyboard75Props {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
+  keyboardType?: KeyboardLayoutType;
 }
 
 // Styled components for the keyboard
@@ -76,7 +78,7 @@ const layoutVariants = {
   },
 };
 
-const Keyboard75: React.FC<Keyboard75Props> = ({ onKeyPress, onReset }) => {
+const Keyboard75: React.FC<Keyboard75Props> = ({ onKeyPress, onReset, keyboardType }) => {
   // Use the keyboard events hook to handle key presses
   const [{ testedKeys, pressedKeys }, { handleKeyPress }] = useKeyboardEvents(onKeyPress, onReset);
 
@@ -88,6 +90,7 @@ const Keyboard75: React.FC<Keyboard75Props> = ({ onKeyPress, onReset }) => {
     isPressed: pressedKeys.has(keyName),
     isSpecialKey: isSpecial,
     size,
+    keyboardType,
   });
 
   return (
diff --git a/src/components/Keyboards/KeyboardFull.tsx b/src/components/Keyboards/KeyboardFull.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import Key, { KeySize } from './Key';
 import { useKeyboardEvents } from './useKeyboardEvents';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 interface KeyboardFullProps {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
+  keyboardType?: KeyboardLayoutType;
 }
 
 const KeyboardContainer = styled.div`
@@ -74,7 +76,7 @@ const MainAndNumpadRow = styled.div`
   gap: 2px;
 `;
 
-const KeyboardFull: React.FC<KeyboardFullProps> = ({ onKeyPress, onReset }) => {
+const KeyboardFull: React.FC<KeyboardFullProps> = ({ onKeyPress, onReset, keyboardType }) => {
   const [{ testedKeys, pressedKeys }, { handleKeyPress }] = useKeyboardEvents(onKeyPress, onReset);
 
   // Helper function to create key props
@@ -85,6 +87,7 @@ const KeyboardFull: React.FC<KeyboardFullProps> = ({ onKeyPress, onReset }) => {
       isTested: testedKeys.has(keyName),
       isPressed: pressedKeys.has(keyName),
       isSpecialKey: isSpecial,
+      keyboardType,
     };
 
     // Only add size if a width is provided, and map it to a valid KeySize
diff --git a/src/components/Keyboards/KeyboardSelector.tsx b/src/components/Keyboards/KeyboardSelector.tsx
@@ -6,6 +6,7 @@ import Keyboard65 from './Keyboard65';
 import Keyboard75 from './Keyboard75';
 import KeyboardTKL from './KeyboardTKL';
 import KeyboardFull from './KeyboardFull';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 // We'll add more keyboard layouts as they're implemented
 export type KeyboardType = '60%' | '65%' | '75%' | 'TKL' | 'Full';
@@ -14,6 +15,7 @@ interface KeyboardSelectorProps {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
   initialLayout?: KeyboardType;
+  keyboardType?: KeyboardLayoutType;
 }
 
 const Container = styled.div`
@@ -53,7 +55,8 @@ const containerVariants = {
 const KeyboardSelector: React.FC<KeyboardSelectorProps> = ({ 
   onKeyPress, 
   onReset,
-  initialLayout = '75%' 
+  initialLayout = '75%',
+  keyboardType = 'qwerty'
 }) => {
   const [currentLayout, setCurrentLayout] = useState<KeyboardType>(initialLayout);
   const [direction, setDirection] = useState<number>(0);
@@ -75,17 +78,17 @@ const KeyboardSelector: React.FC<KeyboardSelectorProps> = ({
   const renderKeyboard = () => {
     switch (currentLayout) {
       case '60%':
-        return <Keyboard60 onKeyPress={onKeyPress} onReset={onReset} />;
+        return <Keyboard60 onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
       case '65%':
-        return <Keyboard65 onKeyPress={onKeyPress} onReset={onReset} />;
+        return <Keyboard65 onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
       case '75%':
-        return <Keyboard75 onKeyPress={onKeyPress} onReset={onReset} />;
+        return <Keyboard75 onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
       case 'TKL':
-        return <KeyboardTKL onKeyPress={onKeyPress} onReset={onReset} />;
+        return <KeyboardTKL onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
       case 'Full':
-        return <KeyboardFull onKeyPress={onKeyPress} onReset={onReset} />;
+        return <KeyboardFull onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
       default:
-        return <Keyboard75 onKeyPress={onKeyPress} onReset={onReset} />;
+        return <Keyboard75 onKeyPress={onKeyPress} onReset={onReset} keyboardType={keyboardType} />;
     }
   };
 
diff --git a/src/components/Keyboards/KeyboardTKL.tsx b/src/components/Keyboards/KeyboardTKL.tsx
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Key, { KeySize } from './Key';
 import { useKeyboardEvents } from './useKeyboardEvents';
+import { KeyboardLayoutType } from './keyboardTypes';
 
 interface KeyboardTKLProps {
   onKeyPress?: (key: string) => void;
   onReset?: () => void;
+  keyboardType?: KeyboardLayoutType;
 }
 
 const KeyboardContainer = styled(motion.div)`
@@ -85,7 +87,7 @@ const layoutVariants = {
   },
 };
 
-const KeyboardTKL: React.FC<KeyboardTKLProps> = ({ onKeyPress, onReset }) => {
+const KeyboardTKL: React.FC<KeyboardTKLProps> = ({ onKeyPress, onReset, keyboardType }) => {
   const [{ testedKeys, pressedKeys }, { handleKeyPress }] = useKeyboardEvents(onKeyPress, onReset);
 
   // Helper function to create key props
@@ -96,6 +98,7 @@ const KeyboardTKL: React.FC<KeyboardTKLProps> = ({ onKeyPress, onReset }) => {
       isTested: testedKeys.has(keyName),
       isPressed: pressedKeys.has(keyName),
       isSpecialKey: isSpecial,
+      keyboardType,
     };
 
     // Only add size if a width is provided, and map it to a valid KeySize
diff --git a/src/components/Keyboards/index.ts b/src/components/Keyboards/index.ts
@@ -7,3 +7,4 @@ export { default as KeyboardFull } from './KeyboardFull';
 export { default as KeyboardSelector } from './KeyboardSelector';
 export { useKeyboardEvents } from './useKeyboardEvents';
 export type { KeyboardType } from './KeyboardSelector';
+export type { KeyboardLayoutType } from './keyboardTypes';
diff --git a/src/components/Keyboards/keyboardTypes.ts b/src/components/Keyboards/keyboardTypes.ts
@@ -0,0 +1,112 @@
+// Keyboard type mappings for different keyboard layouts
+// This file contains the character mappings for QWERTY, Dvorak, and Colemak layouts
+
+export type KeyboardLayoutType = 'qwerty' | 'dvorak' | 'colemak';
+
+// Define interfaces for our key mappings
+interface KeyMapping {
+  primary: string;
+  secondary?: string;
+}
+
+// Type for our mapping objects
+export type KeyboardTypeMapping = Record<string, KeyMapping>;
+
+// QWERTY layout (default) - this is just for reference as we'll keep the original labels for QWERTY
+export const qwertyMapping: KeyboardTypeMapping = {
+  // We don't need to define anything here as QWERTY is the default
+  // This is just for reference
+};
+
+// Dvorak layout
+export const dvorakMapping: KeyboardTypeMapping = {
+  // Number row remains the same
+  // Top row
+  'Q': { primary: "'", secondary: '"' },
+  'W': { primary: ',', secondary: '<' },
+  'E': { primary: '.', secondary: '>' },
+  'R': { primary: 'P', secondary: undefined },
+  'T': { primary: 'Y', secondary: undefined },
+  'Y': { primary: 'F', secondary: undefined },
+  'U': { primary: 'G', secondary: undefined },
+  'I': { primary: 'C', secondary: undefined },
+  'O': { primary: 'R', secondary: undefined },
+  'P': { primary: 'L', secondary: undefined },
+  '[': { primary: '/', secondary: '?' },
+  ']': { primary: '=', secondary: '+' },
+  
+  // Middle row
+  'A': { primary: 'A', secondary: undefined },
+  'S': { primary: 'O', secondary: undefined },
+  'D': { primary: 'E', secondary: undefined },
+  'F': { primary: 'U', secondary: undefined },
+  'G': { primary: 'I', secondary: undefined },
+  'H': { primary: 'D', secondary: undefined },
+  'J': { primary: 'H', secondary: undefined },
+  'K': { primary: 'T', secondary: undefined },
+  'L': { primary: 'N', secondary: undefined },
+  ';': { primary: 'S', secondary: undefined },
+  "'": { primary: '-', secondary: '_' },
+  
+  // Bottom row
+  'Z': { primary: ';', secondary: ':' },
+  'X': { primary: 'Q', secondary: undefined },
+  'C': { primary: 'J', secondary: undefined },
+  'V': { primary: 'K', secondary: undefined },
+  'B': { primary: 'X', secondary: undefined },
+  'N': { primary: 'B', secondary: undefined },
+  'M': { primary: 'M', secondary: undefined },
+  ',': { primary: 'W', secondary: undefined },
+  '.': { primary: 'V', secondary: undefined },
+  '/': { primary: 'Z', secondary: undefined }
+};
+
+// Colemak layout
+export const colemakMapping: KeyboardTypeMapping = {
+  // Number row remains the same
+  // Top row
+  'Q': { primary: 'Q', secondary: undefined },
+  'W': { primary: 'W', secondary: undefined },
+  'E': { primary: 'F', secondary: undefined },
+  'R': { primary: 'P', secondary: undefined },
+  'T': { primary: 'G', secondary: undefined },
+  'Y': { primary: 'J', secondary: undefined },
+  'U': { primary: 'L', secondary: undefined },
+  'I': { primary: 'U', secondary: undefined },
+  'O': { primary: 'Y', secondary: undefined },
+  'P': { primary: ';', secondary: ':' },
+  
+  // Middle row
+  'A': { primary: 'A', secondary: undefined },
+  'S': { primary: 'R', secondary: undefined },
+  'D': { primary: 'S', secondary: undefined },
+  'F': { primary: 'T', secondary: undefined },
+  'G': { primary: 'D', secondary: undefined },
+  'H': { primary: 'H', secondary: undefined },
+  'J': { primary: 'N', secondary: undefined },
+  'K': { primary: 'E', secondary: undefined },
+  'L': { primary: 'I', secondary: undefined },
+  ';': { primary: 'O', secondary: undefined },
+  
+  // Bottom row
+  'Z': { primary: 'Z', secondary: undefined },
+  'X': { primary: 'X', secondary: undefined },
+  'C': { primary: 'C', secondary: undefined },
+  'V': { primary: 'V', secondary: undefined },
+  'B': { primary: 'B', secondary: undefined },
+  'N': { primary: 'K', secondary: undefined },
+  'M': { primary: 'M', secondary: undefined }
+};
+
+// Function to get the appropriate mapping based on the keyboard type
+export const getKeyMapping = (type: KeyboardLayoutType, key: string, defaultMapping: KeyMapping): KeyMapping => {
+  switch (type) {
+    case 'dvorak':
+      return dvorakMapping[key] || defaultMapping;
+    case 'colemak':
+      return colemakMapping[key] || defaultMapping;
+    case 'qwerty':
+    default:
+      return defaultMapping;
+  }
+};
diff --git a/src/components/TestContainer/TestContainer.tsx b/src/components/TestContainer/TestContainer.tsx
