From 298ac74d3266debfae0da48651c815a5ba6ab0eb Mon Sep 17 00:00:00 2001
From: behoney <be.honey@si-analytics.ai>
Date: Tue, 21 Feb 2023 23:00:28 +0900
Subject: [PATCH] feat: custom event type

---
 src/components/Keyboard/Key/index.tsx | 21 +++++++++++++++++----
 src/types/ThreeEvent.d.ts             | 24 ++++++++++++++++++++++++
 tsconfig.json                         |  3 ++-
 3 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/types/ThreeEvent.d.ts

diff --git a/src/components/Keyboard/Key/index.tsx b/src/components/Keyboard/Key/index.tsx
index 7f262e4..788f727 100644
--- a/src/components/Keyboard/Key/index.tsx
+++ b/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]}
diff --git a/src/types/ThreeEvent.d.ts b/src/types/ThreeEvent.d.ts
new file mode 100644
index 0000000..61eb9e5
--- /dev/null
+++ b/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 {}
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..6491b32 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots": ["src/types/ThreeEvent"]
   },
   "include": [
     "src"