73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import * as React from 'react'
|
|
import type { Words, Word } from '@lastres/word'
|
|
import { StateGame } from '@lastres/components/game'
|
|
import OutputPacketTalk from '@lastres/output-packet/talk'
|
|
import type { TalkNPC } from '@lastres/talk-npc'
|
|
|
|
export interface WordSelectorProps {
|
|
words: Words | null
|
|
setStateGame: (set: StateGame) => void
|
|
websocket: WebSocket | null
|
|
NPCToSayWord: TalkNPC | null
|
|
}
|
|
|
|
export default function WordSelector (props: WordSelectorProps): JSX.Element {
|
|
const words = props.words
|
|
|
|
if (props.NPCToSayWord === null) {
|
|
console.log('Error, should be a NPC to talk with, exiting this screen.')
|
|
props.setStateGame(StateGame.MainScreen)
|
|
return <></>
|
|
}
|
|
function onClickWord (word: Word): void {
|
|
if (props.NPCToSayWord === null || props.websocket === null) {
|
|
return
|
|
}
|
|
new OutputPacketTalk(props.NPCToSayWord.identifier, word.identifier).send(props.websocket)
|
|
props.setStateGame(StateGame.MainScreen)
|
|
}
|
|
function printWord (word: Word): JSX.Element {
|
|
return (
|
|
<a key={word.identifier}
|
|
onClick={() => {
|
|
onClickWord(word)
|
|
}}
|
|
href="#"
|
|
className="word">
|
|
{
|
|
word.name
|
|
}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
function wordList (): JSX.Element {
|
|
if (words === null) {
|
|
return <p>No hay palabras para poder decir aun.</p>
|
|
}
|
|
return (
|
|
<div className="word-list">
|
|
{
|
|
Object.keys(words).map((key) => {
|
|
const word = words[key]
|
|
return printWord(word)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="word-selector">
|
|
<a href="#" className="close-button"
|
|
onClick={() => {
|
|
props.setStateGame(StateGame.MainScreen)
|
|
}}>x</a>
|
|
<h2>Selecciona una palabra.</h2>
|
|
{
|
|
wordList()
|
|
}
|
|
</div>
|
|
)
|
|
}
|