From e272f0f299234dbae12235abb14c4a89db6b7cc3 Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Wed, 12 Jul 2023 16:56:01 +0200 Subject: [PATCH] Adding the logic to be able to open the word selection menu. --- js-src/components/bottom-panel.tsx | 4 +++- js-src/components/game.tsx | 4 ++-- js-src/components/talk-npc.tsx | 15 ++++++++++++++- js-src/components/talk-npcs.tsx | 8 +++++++- public/js/bundle.js | 14 ++++++++++++-- 5 files changed, 38 insertions(+), 7 deletions(-) diff --git a/js-src/components/bottom-panel.tsx b/js-src/components/bottom-panel.tsx index a21bc47..f6ae9d6 100644 --- a/js-src/components/bottom-panel.tsx +++ b/js-src/components/bottom-panel.tsx @@ -86,7 +86,9 @@ export default function BottomPanel (props: BottomPanelProps): JSX.Element { + talkNPCs={props.talkNPCs} + setStateGame={props.setStateGame} + setOnWordSelect={props.setOnWordSelect}/> diff --git a/js-src/components/game.tsx b/js-src/components/game.tsx index c4a0bb0..3c64dd1 100644 --- a/js-src/components/game.tsx +++ b/js-src/components/game.tsx @@ -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 diff --git a/js-src/components/talk-npc.tsx b/js-src/components/talk-npc.tsx index bf151ad..cf5a310 100644 --- a/js-src/components/talk-npc.tsx +++ b/js-src/components/talk-npc.tsx @@ -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 - + diff --git a/js-src/components/talk-npcs.tsx b/js-src/components/talk-npcs.tsx index 54c4094..e3d70df 100644 --- a/js-src/components/talk-npcs.tsx +++ b/js-src/components/talk-npcs.tsx @@ -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 ( + websocket={props.websocket} + setStateGame={props.setStateGame} + setOnWordSelect={props.setOnWordSelect}/> ) }) } diff --git a/public/js/bundle.js b/public/js/bundle.js index 5854f61..8a0f6e2 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -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?"); /***/ }),