sergiotarxz/LasTres
1
0
Fork 0
Code Issues 18 Pull Requests Releases Wiki Activity

Makes sense that a single npc is a component by itself.

Browse Source
This commit is contained in:
Sergiotarxz 2023-07-12 16:27:49 +02:00
parent 3530c253a1
commit c60f81f7b9
2 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js-src/components/talk-npc.tsx Normal file
View File

@ -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 <div className="avatar">
<img src={npc.icon}/><div className="shadow"/>
</div>
}
return <div key={npc.identifier} className="talk-npc">
<div className="detail">
<div className="name-container">
{
printAvatar(npc)
}
<div className="name">
<p>{npc.name}</p>
</div>
</div>
<div className="buttons">
<button onClick={() => {
onWordlesslyTalk(npc)
}}>Hablar</button>
<button>Decir palabra</button>
</div>
</div>
</div>
}

41
js-src/components/talk-npcs.tsx
View File

@ -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 <div className="avatar">
<img src={npc.icon}/><div className="shadow"/>
</div>
}
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 <div key={npc.identifier} className="talk-npc">
<div className="detail">
<div className="name-container">
{
printAvatar(npc)
}
<div className="name">
<p>{npc.name}</p>
</div>
</div>
<div className="buttons">
<button onClick={() => {
onWordlesslyTalk(npc)
}}>Hablar</button>
<button>Decir palabra</button>
</div>
</div>
</div>
return (
<TalkNPCComponent key={identifier}
npc={npc}
websocket={props.websocket}/>
)
})
}
</>