"use client"; import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { IconBrightnessDown, IconBrightnessUp, IconCaretRightFilled, IconCaretUpFilled, IconChevronUp, IconMicrophone, IconMoon, IconPlayerSkipForward, IconPlayerTrackNext, IconPlayerTrackPrev, IconTable, IconVolume, IconVolume2, IconVolume3, IconSearch, IconWorld, IconCommand, IconCaretLeftFilled, IconCaretDownFilled, } from "@tabler/icons-react"; // Sound sprite definitions from config.json [startMs, durationMs] // Key down sounds - half duration for a snappy press sound const SOUND_DEFINES_DOWN: Record = { Escape: [2894, 113], F1: [3610, 98], F2: [4210, 90], F3: [4758, 90], F4: [5250, 100], F5: [5831, 105], F6: [6396, 105], F7: [6900, 105], F8: [7443, 111], F9: [7955, 91], F10: [8504, 105], F11: [9046, 94], F12: [9582, 96], Backquote: [12476, 100], Digit1: [12946, 96], Digit2: [13470, 95], Digit3: [13963, 100], Digit4: [14481, 102], Digit5: [14994, 94], Digit6: [15505, 109], Digit7: [15990, 97], Digit8: [16529, 92], Digit9: [17012, 103], Digit0: [17550, 87], Minus: [18052, 93], Equal: [18553, 89], Backspace: [19065, 110], Tab: [21734, 119], KeyQ: [22245, 95], KeyW: [22790, 89], KeyE: [23317, 83], KeyR: [23817, 92], KeyT: [24297, 92], KeyY: [24811, 93], KeyU: [25313, 95], KeyI: [25795, 91], KeyO: [26309, 84], KeyP: [26804, 83], BracketLeft: [27330, 85], BracketRight: [27883, 99], Backslash: [28393, 100], CapsLock: [31011, 126], KeyA: [31542, 85], KeyS: [32031, 88], KeyD: [32492, 85], KeyF: [32973, 87], KeyG: [33453, 94], KeyH: [33986, 93], KeyJ: [34425, 88], KeyK: [34932, 90], KeyL: [35410, 95], Semicolon: [35914, 95], Quote: [36428, 87], Enter: [36902, 117], ShiftLeft: [38136, 133], KeyZ: [38694, 80], KeyX: [39148, 76], KeyC: [39632, 95], KeyV: [40136, 94], KeyB: [40621, 107], KeyN: [41103, 90], KeyM: [41610, 93], Comma: [42110, 92], Period: [42594, 90], Slash: [43105, 95], ShiftRight: [43565, 137], Fn: [44251, 110], ControlLeft: [45327, 83], AltLeft: [45750, 82], MetaLeft: [46199, 100], Space: [51541, 144], MetaRight: [47929, 75], AltRight: [49329, 82], ArrowUp: [44251, 110], ArrowLeft: [49837, 88], ArrowDown: [50333, 90], ArrowRight: [50783, 111], }; // Key up sounds - shorter duration, offset for the release "thock" // Uses the tail end of each sound sample for a lighter release effect const SOUND_DEFINES_UP: Record = { Escape: [2894 + 120, 100], F1: [3610 + 100, 90], F2: [4210 + 95, 80], F3: [4758 + 95, 80], F4: [5250 + 105, 90], F5: [5831 + 110, 95], F6: [6396 + 110, 95], F7: [6900 + 110, 95], F8: [7443 + 115, 100], F9: [7955 + 95, 80], F10: [8504 + 110, 95], F11: [9046 + 100, 85], F12: [9582 + 100, 85], Backquote: [12476 + 105, 90], Digit1: [12946 + 100, 85], Digit2: [13470 + 100, 85], Digit3: [13963 + 105, 90], Digit4: [14481 + 110, 90], Digit5: [14994 + 100, 85], Digit6: [15505 + 115, 100], Digit7: [15990 + 100, 90], Digit8: [16529 + 95, 85], Digit9: [17012 + 110, 90], Digit0: [17550 + 90, 80], Minus: [18052 + 100, 85], Equal: [18553 + 90, 85], Backspace: [19065 + 115, 100], Tab: [21734 + 125, 110], KeyQ: [22245 + 100, 85], KeyW: [22790 + 90, 85], KeyE: [23317 + 85, 80], KeyR: [23817 + 95, 85], KeyT: [24297 + 95, 85], KeyY: [24811 + 100, 85], KeyU: [25313 + 100, 85], KeyI: [25795 + 95, 85], KeyO: [26309 + 85, 80], KeyP: [26804 + 85, 80], BracketLeft: [27330 + 85, 80], BracketRight: [27883 + 105, 90], Backslash: [28393 + 105, 90], CapsLock: [31011 + 135, 110], KeyA: [31542 + 90, 80], KeyS: [32031 + 90, 80], KeyD: [32492 + 85, 80], KeyF: [32973 + 90, 80], KeyG: [33453 + 100, 85], KeyH: [33986 + 95, 85], KeyJ: [34425 + 90, 85], KeyK: [34932 + 95, 85], KeyL: [35410 + 100, 85], Semicolon: [35914 + 100, 85], Quote: [36428 + 90, 80], Enter: [36902 + 125, 105], ShiftLeft: [38136 + 140, 120], KeyZ: [38694 + 85, 75], KeyX: [39148 + 80, 70], KeyC: [39632 + 100, 85], KeyV: [40136 + 100, 85], KeyB: [40621 + 115, 95], KeyN: [41103 + 95, 85], KeyM: [41610 + 100, 85], Comma: [42110 + 95, 85], Period: [42594 + 95, 85], Slash: [43105 + 100, 85], ShiftRight: [43565 + 145, 125], Fn: [44251 + 115, 100], ControlLeft: [45327 + 85, 80], AltLeft: [45750 + 85, 80], MetaLeft: [46199 + 105, 90], Space: [51541 + 150, 130], MetaRight: [47929 + 75, 70], AltRight: [49329 + 85, 80], ArrowUp: [44251 + 115, 100], ArrowLeft: [49837 + 90, 85], ArrowDown: [50333 + 95, 80], ArrowRight: [50783 + 115, 100], }; // Map key codes to display labels const KEY_DISPLAY_LABELS: Record = { Escape: "esc", Backspace: "delete", Tab: "tab", Enter: "return", ShiftLeft: "shift", ShiftRight: "shift", ControlLeft: "control", ControlRight: "control", AltLeft: "option", AltRight: "option", MetaLeft: "command", MetaRight: "command", Space: "space", CapsLock: "caps", ArrowUp: "↑", ArrowDown: "↓", ArrowLeft: "←", ArrowRight: "→", Backquote: "`", Minus: "-", Equal: "=", BracketLeft: "[", BracketRight: "]", Backslash: "\\", Semicolon: ";", Quote: "'", Comma: ",", Period: ".", Slash: "/", }; const getKeyDisplayLabel = (keyCode: string): string => { if (KEY_DISPLAY_LABELS[keyCode]) return KEY_DISPLAY_LABELS[keyCode]; if (keyCode.startsWith("Key")) return keyCode.slice(3); if (keyCode.startsWith("Digit")) return keyCode.slice(5); if (keyCode.startsWith("F") && keyCode.length <= 3) return keyCode; return keyCode; }; interface KeyboardContextType { playSoundDown: (keyCode: string) => void; playSoundUp: (keyCode: string) => void; pressedKeys: Set; setPressed: (keyCode: string) => void; setReleased: (keyCode: string) => void; lastPressedKey: string | null; } const KeyboardContext = createContext(null); const useKeyboardSound = () => { const context = useContext(KeyboardContext); if (!context) { throw new Error("useKeyboardSound must be used within KeyboardProvider"); } return context; }; const KeyboardProvider = ({ children, enableSound = false, containerRef, }: { children: React.ReactNode; enableSound?: boolean; containerRef: React.RefObject; }) => { const audioContextRef = useRef(null); const audioBufferRef = useRef(null); const [pressedKeys, setPressedKeys] = useState>(new Set()); const [lastPressedKey, setLastPressedKey] = useState(null); const [soundLoaded, setSoundLoaded] = useState(false); const [isVisible, setIsVisible] = useState(false); useEffect(() => { if (!enableSound) return; // Initialize AudioContext and load sound file const initAudio = async () => { try { audioContextRef.current = new AudioContext(); const response = await fetch("/sounds/sound.ogg"); if (!response.ok) { console.warn("Sound file not available"); return; } const arrayBuffer = await response.arrayBuffer(); audioBufferRef.current = await audioContextRef.current.decodeAudioData(arrayBuffer); setSoundLoaded(true); } catch (error) { console.warn("Failed to load sound:", error); } }; initAudio(); return () => { audioContextRef.current?.close(); }; }, [enableSound]); const playSoundDown = useCallback( (keyCode: string) => { if (!enableSound || !soundLoaded) return; if (!audioContextRef.current || !audioBufferRef.current) return; const soundDef = SOUND_DEFINES_DOWN[keyCode]; if (!soundDef) return; const [startMs, durationMs] = soundDef; const startTime = startMs / 1000; const duration = durationMs / 1000; // Resume audio context if suspended (browser autoplay policy) if (audioContextRef.current.state === "suspended") { audioContextRef.current.resume(); } const source = audioContextRef.current.createBufferSource(); source.buffer = audioBufferRef.current; source.connect(audioContextRef.current.destination); source.start(0, startTime, duration); }, [enableSound, soundLoaded], ); const playSoundUp = useCallback( (keyCode: string) => { if (!enableSound || !soundLoaded) return; if (!audioContextRef.current || !audioBufferRef.current) return; const soundDef = SOUND_DEFINES_UP[keyCode]; if (!soundDef) return; const [startMs, durationMs] = soundDef; const startTime = startMs / 1000; const duration = durationMs / 1000; // Resume audio context if suspended (browser autoplay policy) if (audioContextRef.current.state === "suspended") { audioContextRef.current.resume(); } const source = audioContextRef.current.createBufferSource(); source.buffer = audioBufferRef.current; source.connect(audioContextRef.current.destination); source.start(0, startTime, duration); }, [enableSound, soundLoaded], ); const setPressed = useCallback((keyCode: string) => { setPressedKeys((prev) => new Set(prev).add(keyCode)); setLastPressedKey(keyCode); }, []); const setReleased = useCallback((keyCode: string) => { setPressedKeys((prev) => { const next = new Set(prev); next.delete(keyCode); return next; }); }, []); // Track visibility with IntersectionObserver useEffect(() => { const element = containerRef.current; if (!element) return; const observer = new IntersectionObserver( ([entry]) => { setIsVisible(entry.isIntersecting); }, { threshold: 0.1 }, ); observer.observe(element); return () => { observer.disconnect(); }; }, [containerRef]); // Handle physical keyboard events (only when visible) useEffect(() => { if (!isVisible) return; const handleKeyDown = (e: KeyboardEvent) => { // Prevent repeat events if (e.repeat) return; const keyCode = e.code; playSoundDown(keyCode); setPressed(keyCode); }; const handleKeyUp = (e: KeyboardEvent) => { const keyCode = e.code; playSoundUp(keyCode); setReleased(keyCode); }; document.addEventListener("keydown", handleKeyDown); document.addEventListener("keyup", handleKeyUp); return () => { document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keyup", handleKeyUp); }; }, [isVisible, playSoundDown, playSoundUp, setPressed, setReleased]); return ( {children} ); }; const KeystrokePreview = () => { const { lastPressedKey, pressedKeys } = useKeyboardSound(); const [displayKey, setDisplayKey] = useState(null); const [animationKey, setAnimationKey] = useState(0); useEffect(() => { if (lastPressedKey) { // Clear display if space or shift is pressed if ( lastPressedKey === "Space" || lastPressedKey === "ShiftLeft" || lastPressedKey === "ShiftRight" ) { setDisplayKey(null); return; } setDisplayKey(getKeyDisplayLabel(lastPressedKey)); setAnimationKey((prev) => prev + 1); } }, [lastPressedKey]); const isPressed = pressedKeys.size > 0; return (

{displayKey && ( {displayKey} )}

); }; export const Keyboard = ({ className, enableSound = false, showPreview = false, }: { className?: string; enableSound?: boolean; showPreview?: boolean; }) => { const containerRef = useRef(null); return (

{showPreview && }

); }; export const Keypad = () => { return (

{/* Function Row */} esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12

{/* Number Row */} ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 — _ + = delete {/* QWERTY Row */} tab {["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"].map((letter) => ( {letter} ))} {`{`} {`[`} {`}`} {`]`} {`|`} {`\\`} {/* Home Row */} caps lock {["A", "S", "D", "F", "G", "H", "J", "K", "L"].map((letter) => ( {letter} ))} : ; {`"`} {`'`} return {/* Bottom Letter Row */} shift {["Z", "X", "C", "V", "B", "N", "M"].map((letter) => ( {letter} ))} {`<`} , {`>`} . ? / shift {/* Modifier Row */} fn control option command command option {/* Arrow Keys */}

); }; const Row = ({ children }: { children: React.ReactNode }) => (

{children}

); const Key = ({ className, childrenClassName, containerClassName, children, keyCode, }: { className?: string; childrenClassName?: string; containerClassName?: string; children?: React.ReactNode; keyCode?: string; }) => { const { playSoundDown, playSoundUp, pressedKeys, setPressed, setReleased } = useKeyboardSound(); const isPressed = keyCode ? pressedKeys.has(keyCode) : false; const handleMouseDown = () => { if (keyCode) { playSoundDown(keyCode); setPressed(keyCode); } }; const handleMouseUp = () => { if (keyCode && isPressed) { playSoundUp(keyCode); setReleased(keyCode); } }; const handleMouseLeave = () => { if (keyCode && isPressed) { setReleased(keyCode); } }; return (

); }; const ModifierKey = ({ className, containerClassName, children, keyCode, }: { className?: string; containerClassName?: string; children?: React.ReactNode; keyCode?: string; }) => { const { playSoundDown, playSoundUp, pressedKeys, setPressed, setReleased } = useKeyboardSound(); const isPressed = keyCode ? pressedKeys.has(keyCode) : false; const handleMouseDown = () => { if (keyCode) { playSoundDown(keyCode); setPressed(keyCode); } }; const handleMouseUp = () => { if (keyCode && isPressed) { playSoundUp(keyCode); setReleased(keyCode); } }; const handleMouseLeave = () => { if (keyCode && isPressed) { setReleased(keyCode); } }; return (

); }; const OptionKey = ({ className }: { className?: string }) => { return ( ); };

Keyboard

Instalação

Dependências