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

Adding the logic to be able to open the word selection

Browse Source 
menu.
This commit is contained in:
Sergiotarxz 2023-07-12 16:56:01 +02:00
parent c60f81f7b9
commit e272f0f299
5 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js-src/components/bottom-panel.tsx
View File

@ -86,7 +86,9 @@ export default function BottomPanel (props: BottomPanelProps): JSX.Element {
</PresentationItem>
<PresentationItem>
<TalkNPCsComponent websocket={props.websocket}
talkNPCs={props.talkNPCs}/>
talkNPCs={props.talkNPCs}
setStateGame={props.setStateGame}
setOnWordSelect={props.setOnWordSelect}/>
</PresentationItem>
<PresentationItem>
</PresentationItem>

4
js-src/components/game.tsx
View File

@ -4,7 +4,7 @@ import type { PJ } from '@lastres/pj'
import type { Location } from '@lastres/location'
import type { LogLine } from '@lastres/log-line'
import type { ActionHash } from '@lastres/action'
import type { TalkNPCs } from '@lastres/talk-npc'
import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc'
import UpperPanel from '@lastres/components/upper-panel'
import BottomPanel from '@lastres/components/bottom-panel'
@ -30,7 +30,7 @@ export enum StateGame {
SelectingWord,
}
export type OnWordSelectCallback = (word: string) => void
export type OnWordSelectCallback = (npc: TalkNPC, word: string) => void
export default function Game (props: GameProps): JSX.Element {
const selectedPJ = props.selectedPJ

15
js-src/components/talk-npc.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react'
import type { TalkNPC } from '@lastres/talk-npc'
import type { OnWordSelectCallback } from '@lastres/components/game'
import { StateGame } from '@lastres/components/game'
import OutputPacketTalk from '@lastres/output-packet/talk'
@ -8,6 +10,8 @@ export interface TalkNPCComponentData {
npc: TalkNPC
websocket: WebSocket | null
key: string
setStateGame: (set: StateGame) => void
setOnWordSelect: (set: OnWordSelectCallback) => void
}
export default function TalkNPCComponent (props: TalkNPCComponentData): JSX.Element {
@ -19,6 +23,13 @@ export default function TalkNPCComponent (props: TalkNPCComponentData): JSX.Elem
new OutputPacketTalk(npc.identifier).send(props.websocket)
}
function onWantToSayWord (): void {
props.setStateGame(StateGame.SelectingWord)
props.setOnWordSelect((npc: TalkNPC, word: string) => {
console.log(`Trying to say ${word} to `, props.npc)
})
}
function printAvatar (npc: TalkNPC): JSX.Element {
if (npc.icon === undefined) {
return <></>
@ -42,7 +53,9 @@ export default function TalkNPCComponent (props: TalkNPCComponentData): JSX.Elem
<button onClick={() => {
onWordlesslyTalk(npc)
}}>Hablar</button>
<button>Decir palabra</button>
<button onClick={() => {
onWantToSayWord()
}}>Decir palabra</button>
</div>
</div>
</div>

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

@ -1,11 +1,15 @@
import * as React from 'react'
import type { TalkNPCs } from '@lastres/talk-npc'
import type { StateGame, OnWordSelectCallback } from '@lastres/components/game'
import TalkNPCComponent from '@lastres/components/talk-npc'
export interface TalkNPCsComponentProps {
talkNPCs: TalkNPCs | null
websocket: WebSocket | null
setStateGame: (set: StateGame) => void
setOnWordSelect: (set: OnWordSelectCallback) => void
}
export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.Element {
const npcs = props.talkNPCs
@ -26,7 +30,9 @@ export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.E
return (
<TalkNPCComponent key={identifier}
npc={npc}
websocket={props.websocket}/>
websocket={props.websocket}
setStateGame={props.setStateGame}
setOnWordSelect={props.setOnWordSelect}/>
)
})
}

14
public/js/bundle.js
View File

@ -86,7 +86,7 @@ eval("\n\nif (false) {} else {\n module.exports = __webpack_require__(/*! ./cjs
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BottomPanel)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lastres_output_packet_execute_action__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/output-packet/execute_action */ \"./js-src/output-packet/execute_action.ts\");\n/* harmony import */ var _lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @lastres/components/presentation-item */ \"./js-src/components/presentation-item.tsx\");\n/* harmony import */ var _lastres_components_presentation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lastres/components/presentation */ \"./js-src/components/presentation.tsx\");\n/* harmony import */ var _lastres_components_talk_npcs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/components/talk-npcs */ \"./js-src/components/talk-npcs.tsx\");\n\n\n\n\n\nfunction BottomPanel(props) {\n const actionHash = props.actionHash;\n function printListActions() {\n if (actionHash === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n const listOfActionKeys = Object.keys(actionHash).sort((a, b) => {\n const isDisabledComparisionValue = +actionHash[a].is_disabled - +actionHash[b].is_disabled;\n if (isDisabledComparisionValue !== 0) {\n return isDisabledComparisionValue;\n }\n if (actionHash[a].name < actionHash[b].name) {\n return -1;\n }\n if (actionHash[a].name > actionHash[b].name) {\n return 1;\n }\n return 0;\n });\n function printDisabledReason(action) {\n if (!action.is_disabled || action.disabled_reason === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { className: \"disabled-reason\", style: { color: 'red' } }, action.disabled_reason));\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Acciones disponibles.\"),\n listOfActionKeys.map((key) => {\n const style = {};\n const action = actionHash[key];\n if (action.is_disabled) {\n style.background = 'lightgray';\n }\n function onClick() {\n if (action.is_disabled) {\n return;\n }\n if (props.websocket !== null) {\n new _lastres_output_packet_execute_action__WEBPACK_IMPORTED_MODULE_1__[\"default\"](action.identifier)\n .send(props.websocket);\n }\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { onClick: onClick, className: \"action\", style: style, key: action.identifier },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, action.name),\n printDisabledReason(action));\n }));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, printListActions()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_talk_npcs__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { websocket: props.websocket, talkNPCs: props.talkNPCs })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null)));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/bottom-panel.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BottomPanel)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lastres_output_packet_execute_action__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/output-packet/execute_action */ \"./js-src/output-packet/execute_action.ts\");\n/* harmony import */ var _lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @lastres/components/presentation-item */ \"./js-src/components/presentation-item.tsx\");\n/* harmony import */ var _lastres_components_presentation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lastres/components/presentation */ \"./js-src/components/presentation.tsx\");\n/* harmony import */ var _lastres_components_talk_npcs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/components/talk-npcs */ \"./js-src/components/talk-npcs.tsx\");\n\n\n\n\n\nfunction BottomPanel(props) {\n const actionHash = props.actionHash;\n function printListActions() {\n if (actionHash === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n const listOfActionKeys = Object.keys(actionHash).sort((a, b) => {\n const isDisabledComparisionValue = +actionHash[a].is_disabled - +actionHash[b].is_disabled;\n if (isDisabledComparisionValue !== 0) {\n return isDisabledComparisionValue;\n }\n if (actionHash[a].name < actionHash[b].name) {\n return -1;\n }\n if (actionHash[a].name > actionHash[b].name) {\n return 1;\n }\n return 0;\n });\n function printDisabledReason(action) {\n if (!action.is_disabled || action.disabled_reason === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { className: \"disabled-reason\", style: { color: 'red' } }, action.disabled_reason));\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Acciones disponibles.\"),\n listOfActionKeys.map((key) => {\n const style = {};\n const action = actionHash[key];\n if (action.is_disabled) {\n style.background = 'lightgray';\n }\n function onClick() {\n if (action.is_disabled) {\n return;\n }\n if (props.websocket !== null) {\n new _lastres_output_packet_execute_action__WEBPACK_IMPORTED_MODULE_1__[\"default\"](action.identifier)\n .send(props.websocket);\n }\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { onClick: onClick, className: \"action\", style: style, key: action.identifier },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, action.name),\n printDisabledReason(action));\n }));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, printListActions()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_talk_npcs__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { websocket: props.websocket, talkNPCs: props.talkNPCs, setStateGame: props.setStateGame, setOnWordSelect: props.setOnWordSelect })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null)));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/bottom-panel.tsx?");
/***/ }),
@ -210,13 +210,23 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }),
/***/ "./js-src/components/talk-npc.tsx":
/*!****************************************!*\
!*** ./js-src/components/talk-npc.tsx ***!
\****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ TalkNPCComponent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lastres_components_game__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/game */ \"./js-src/components/game.tsx\");\n/* harmony import */ var _lastres_output_packet_talk__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @lastres/output-packet/talk */ \"./js-src/output-packet/talk.ts\");\n\n\n\nfunction TalkNPCComponent(props) {\n const npc = props.npc;\n function onWordlesslyTalk(npc) {\n if (props.websocket === null) {\n return;\n }\n new _lastres_output_packet_talk__WEBPACK_IMPORTED_MODULE_2__[\"default\"](npc.identifier).send(props.websocket);\n }\n function onWantToSayWord() {\n props.setStateGame(_lastres_components_game__WEBPACK_IMPORTED_MODULE_1__.StateGame.SelectingWord);\n props.setOnWordSelect((npc, word) => {\n console.log(`Trying to say ${word} to `, props.npc);\n });\n }\n function printAvatar(npc) {\n if (npc.icon === undefined) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"avatar\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: npc.icon }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"shadow\" }));\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: npc.identifier, className: \"talk-npc\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"detail\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"name-container\" },\n printAvatar(npc),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"name\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, npc.name))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: () => {\n onWordlesslyTalk(npc);\n } }, \"Hablar\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: () => {\n onWantToSayWord();\n } }, \"Decir palabra\"))));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/talk-npc.tsx?");
/***/ }),
/***/ "./js-src/components/talk-npcs.tsx":
/*!*****************************************!*\
!*** ./js-src/components/talk-npcs.tsx ***!
\*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ TalkNPCsComponent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lastres_output_packet_talk__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/output-packet/talk */ \"./js-src/output-packet/talk.ts\");\n\n\nfunction TalkNPCsComponent(props) {\n const npcs = props.talkNPCs;\n function onWordlesslyTalk(npc) {\n if (props.websocket === null) {\n return;\n }\n new _lastres_output_packet_talk__WEBPACK_IMPORTED_MODULE_1__[\"default\"](npc.identifier).send(props.websocket);\n }\n function printAvatar(npc) {\n if (npc.icon === undefined) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"avatar\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: npc.icon }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"shadow\" }));\n }\n if (npcs === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (Object.keys(npcs).length < 1) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"No hay nadie para hablar ahora.\"));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Disponible para hablar:\"),\n Object.keys(npcs).map((identifier) => {\n const npc = npcs[identifier];\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: npc.identifier, className: \"talk-npc\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"detail\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"name-container\" },\n printAvatar(npc),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"name\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, npc.name))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: () => {\n onWordlesslyTalk(npc);\n } }, \"Hablar\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", null, \"Decir palabra\"))));\n })));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/talk-npcs.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ TalkNPCsComponent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lastres_components_talk_npc__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/talk-npc */ \"./js-src/components/talk-npc.tsx\");\n\n\nfunction TalkNPCsComponent(props) {\n const npcs = props.talkNPCs;\n if (npcs === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (Object.keys(npcs).length < 1) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"No hay nadie para hablar ahora.\"));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Disponible para hablar:\"),\n Object.keys(npcs).map((identifier) => {\n const npc = npcs[identifier];\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_talk_npc__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { key: identifier, npc: npc, websocket: props.websocket, setStateGame: props.setStateGame, setOnWordSelect: props.setOnWordSelect }));\n })));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/talk-npcs.tsx?");
/***/ }),