diff --git a/js-src/components/talk-npc.tsx b/js-src/components/talk-npc.tsx
new file mode 100644
index 0000000..bf151ad
--- /dev/null
+++ b/js-src/components/talk-npc.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import type { TalkNPC } from '@lastres/talk-npc'
+
+import OutputPacketTalk from '@lastres/output-packet/talk'
+
+export interface TalkNPCComponentData {
+ npc: TalkNPC
+ websocket: WebSocket | null
+ key: string
+}
+
+export default function TalkNPCComponent (props: TalkNPCComponentData): JSX.Element {
+ const npc = props.npc
+ function onWordlesslyTalk (npc: TalkNPC): void {
+ if (props.websocket === null) {
+ return
+ }
+ new OutputPacketTalk(npc.identifier).send(props.websocket)
+ }
+
+ function printAvatar (npc: TalkNPC): JSX.Element {
+ if (npc.icon === undefined) {
+ return <>>
+ }
+ return
+
+
+ }
+
+ return
+
+
+ {
+ printAvatar(npc)
+ }
+
+
+
+
+
+
+
+
+}
diff --git a/js-src/components/talk-npcs.tsx b/js-src/components/talk-npcs.tsx
index 94d69c5..54c4094 100644
--- a/js-src/components/talk-npcs.tsx
+++ b/js-src/components/talk-npcs.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
-import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc'
-import OutputPacketTalk from '@lastres/output-packet/talk'
+import type { TalkNPCs } from '@lastres/talk-npc'
+import TalkNPCComponent from '@lastres/components/talk-npc'
export interface TalkNPCsComponentProps {
talkNPCs: TalkNPCs | null
@@ -9,20 +9,6 @@ export interface TalkNPCsComponentProps {
}
export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.Element {
const npcs = props.talkNPCs
- function onWordlesslyTalk (npc: TalkNPC): void {
- if (props.websocket === null) {
- return
- }
- new OutputPacketTalk(npc.identifier).send(props.websocket)
- }
- function printAvatar (npc: TalkNPC): JSX.Element {
- if (npc.icon === undefined) {
- return <>>
- }
- return
-
-
- }
if (npcs === null) {
return <>>
}
@@ -37,24 +23,11 @@ export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.E
{
Object.keys(npcs).map((identifier) => {
const npc = npcs[identifier]
- return
-
-
- {
- printAvatar(npc)
- }
-
-
-
-
-
-
-
-
+ return (
+
+ )
})
}
>