feat: custom event type

src/components/Keyboard/Key/index.tsx

@@ -1,10 +1,11 @@
 import { ThreeEvent, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import KeyCap from './KeyCap'
 import KeyLegend from './KeyLegend'
 import { IkeyConfig } from '../../../types/KeyboardType'
 import { KEY_DOWN_DURATION, KEY_DOWN_POSITION } from './consts'
 import { Howl } from 'howler'
+import { ThreeEventType } from '../../../types/ThreeEvent'
 
 type KeyProps = { keyConfig: IkeyConfig }
 
@@ -13,19 +14,31 @@ export default (props: KeyProps) => {
   const [keyDownPosition, setKeyDownPosition] = useState<number>(0)
   const howl = useRef<Howl>(new Howl({ src: 'sample_audio.ogg' }))
 
+  useEffect(() => {
+    document.addEventListener('threekeyboardevent', keyboardEventHander)
+
+    return () => {
+      document.removeEventListener('threekeyboardevent', keyboardEventHander)
+    }
+  }, [])
+
   useFrame(() => {
     keyDownPosition < 0 &&
       setKeyDownPosition((prev) => prev + KEY_DOWN_DURATION)
   })
 
-  const onKeyClick = (evt: ThreeEvent<MouseEvent>) => {
-    evt.stopPropagation()
+  const onKeyClick = (evt?: ThreeEvent<MouseEvent>) => {
+    evt?.stopPropagation()
     setKeyDownPosition(KEY_DOWN_POSITION)
     howl.current?.play()
   }
 
+  const keyboardEventHander = (evt: CustomEvent<ThreeEventType>) => {
+    if (evt.detail?.keyId === keyConfig.legend?.text.toLowerCase()) onKeyClick()
+  }
+
   return (
-    <group onClick={onKeyClick} position={[0, keyDownPosition, 0]}>
+    <group position={[0, keyDownPosition, 0]}>
       <KeyCap
         config={keyConfig}
         position={[keyConfig.column, 0, keyConfig.row]}

src/types/ThreeEvent.d.ts

@@ -0,0 +1,24 @@
+export type ThreeEventType = {
+  keyId?: string
+}
+
+interface ThreeCustomEvent {
+  threekeyboardevent: CustomEvent<ThreeEventType>
+}
+declare global {
+  interface Document {
+    //adds definition to Document, but you can do the same with HTMLElement
+    addEventListener<K extends keyof ThreeCustomEvent>(
+      type: K,
+      listener: (this: Document, ev: ThreeCustomEvent[K]) => void,
+    ): void
+    removeEventListener<K extends keyof ThreeCustomEvent>(
+      type: K,
+      listener: (this: Document, ev: ThreeCustomEvent[K]) => void,
+    ): void
+    dispatchEvent<K extends keyof ThreeCustomEvent>(
+      ev: ThreeCustomEvent[K],
+    ): void
+  }
+}
+export {}

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots": ["src/types/ThreeEvent"]
   },
   "include": [
     "src"