From 09fc8f6e5ade54690f3b301d66f08fac51b823d7 Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Thu, 13 Jul 2023 10:28:24 +0200 Subject: [PATCH] Adding initial word-selector support. --- js-src/components/game.tsx | 9 +++++++-- js-src/components/word-selector.tsx | 22 ++++++++++++++++++++++ js-src/input-packets.ts | 11 ++++++++++- js-src/word.ts | 6 ++++++ public/css/styles.css | 23 +++++++++++++++++++++++ public/css/styles.scss | 27 +++++++++++++++++++++++++++ public/js/bundle.js | 14 ++++++++++++-- 7 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 js-src/components/word-selector.tsx create mode 100644 js-src/word.ts diff --git a/js-src/components/game.tsx b/js-src/components/game.tsx index 3c64dd1..55847bf 100644 --- a/js-src/components/game.tsx +++ b/js-src/components/game.tsx @@ -5,10 +5,12 @@ import type { Location } from '@lastres/location' import type { LogLine } from '@lastres/log-line' import type { ActionHash } from '@lastres/action' import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc' +import type { Words } from '@lastres/word' import UpperPanel from '@lastres/components/upper-panel' import BottomPanel from '@lastres/components/bottom-panel' import PJSelectionMenu from '@lastres/components/pj-selection-menu' +import WordSelector from '@lastres/components/word-selector' import OutputPacketInit from '@lastres/output-packet/init' import OutputPacketPing from '@lastres/output-packet/ping' import InputPackets from '@lastres/input-packets' @@ -60,6 +62,7 @@ export default function Game (props: GameProps): JSX.Element { const [talkNPCs, setTalkNPCs] = React.useState(null) const [onWordSelect, setOnWordSelect] = React.useState(null) const [stateGame, setStateGame] = React.useState(StateGame.MainScreen) + const [words, setWords] = React.useState(null) const logPresentationRef = React.useRef(null) const websocket = props.websocket const setWebsocket = props.setWebsocket @@ -93,7 +96,7 @@ export default function Game (props: GameProps): JSX.Element { logLines, setLogLines, setError, setScrollLog, logPresentationRef, setMovingTo, setRemainingFrames, - setActionHash, setTalkNPCs) + setActionHash, setTalkNPCs, setWords) webSocket.onmessage = (event) => { const packet = JSON.parse(event.data) inputPackets.handle(packet) @@ -111,7 +114,9 @@ export default function Game (props: GameProps): JSX.Element { }) }, 300) if (stateGame === StateGame.SelectingWord) { - return <> + return ( + + ) } if (stateGame === StateGame.MainScreen) { return ( diff --git a/js-src/components/word-selector.tsx b/js-src/components/word-selector.tsx new file mode 100644 index 0000000..77e234e --- /dev/null +++ b/js-src/components/word-selector.tsx @@ -0,0 +1,22 @@ +import * as React from 'react' +import type { Words } from '@lastres/word' +import { StateGame } from '@lastres/components/game' + +export interface WordSelectorProps { + words: Words | null + setStateGame: (set: StateGame) => void +} + +export default function WordSelector (props: WordSelectorProps): JSX.Element { + const words = props.words + + return ( + + ) +} diff --git a/js-src/input-packets.ts b/js-src/input-packets.ts index a23622a..2ce1873 100644 --- a/js-src/input-packets.ts +++ b/js-src/input-packets.ts @@ -4,6 +4,8 @@ import type InputPacket from '@lastres/input-packet' import type { LogLine } from '@lastres/log-line' import type { ActionHash } from '@lastres/action' import type { TalkNPCs } from '@lastres/talk-npc' +import type { Words } from '@lastres/word' + import InputPacketInfo from '@lastres/input-packet/info' import InputPacketPong from '@lastres/input-packet/pong' @@ -23,6 +25,7 @@ type SetMovingTo = (set: Location | null) => void type SetRemainingFrames = (set: number | null) => void type SetActionHash = (set: ActionHash | null) => void type SetTalkNPCs = (set: TalkNPCs | null) => void +type SetWords = (set: Words | null) => void interface Packet { command: string @@ -47,6 +50,7 @@ export default class InputPackets { setRemainingFrames: SetRemainingFrames setActionHash: SetActionHash setTalkNPCs: SetTalkNPCs + setWords: SetWords constructor (setTeamPJs: SetTeamPJs, setEnemyTeamPJs: SetEnemyTeamPJs, setIsBattling: SetIsBattling, @@ -60,7 +64,8 @@ export default class InputPackets { setMovingTo: SetMovingTo, setRemainingFrames: SetRemainingFrames, setActionHash: SetActionHash, - setTalkNPCs: SetTalkNPCs) { + setTalkNPCs: SetTalkNPCs, + setWords: SetWords) { this.setTeamPJs = setTeamPJs this.setEnemyTeamPJs = setEnemyTeamPJs this.setCurrentLocation = setCurrentLocation @@ -75,6 +80,7 @@ export default class InputPackets { this.setIsBattling = setIsBattling this.setActionHash = setActionHash this.setTalkNPCs = setTalkNPCs + this.setWords = setWords } handle (packet: Packet): void { @@ -161,6 +167,9 @@ export default class InputPackets { applyScroll() }, 10) } + if (data.known_words !== undefined) { + this.setWords(data.known_words) + } if (data.append_log !== undefined) { const logHash: LogHash = {} saveScroll() diff --git a/js-src/word.ts b/js-src/word.ts new file mode 100644 index 0000000..b15acbe --- /dev/null +++ b/js-src/word.ts @@ -0,0 +1,6 @@ +export interface Word { + name: string + identifier: string +} + +export type Words = Record diff --git a/public/css/styles.css b/public/css/styles.css index b6da0ba..456cfc8 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -231,3 +231,26 @@ body { body div.login-container div.login-contained a.close-button:hover { background: lightgray; color: black; } + body div.word-selector { + display: flex; + align-items: center; + flex-direction: column; + padding: 10px; + width: calc(100% - calc(2 * 10px)); + height: calc(100% - calc(2 * 10px)); } + body div.word-selector a.close-button { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background: gray; + color: white; + align-self: end; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + font-size: 1.5rem; + text-decoration: none; } + body div.word-selector a.close-button:hover { + background: lightgray; + color: black; } diff --git a/public/css/styles.scss b/public/css/styles.scss index b0222a9..d752009 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -1,3 +1,4 @@ +$padding_select_word: 10px; @keyframes move-avatar { 0% { padding-bottom: 0rem; @@ -284,4 +285,30 @@ body { } } + div.word-selector { + display: flex; + align-items: center; + flex-direction: column; + padding: $padding_select_word; + width: calc(100% - calc(2 * #{$padding_select_word})); + height: calc(100% - calc(2 * #{$padding_select_word})); + a.close-button { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background: gray; + color: white; + align-self: end; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + font-size: 1.5rem; + text-decoration: none; + &:hover { + background: lightgray; + color: black; + } + } + } } diff --git a/public/js/bundle.js b/public/js/bundle.js index 8a0f6e2..c777120 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -96,7 +96,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ StateGame: () => (/* binding */ StateGame),\n/* harmony export */ \"default\": () => (/* binding */ Game)\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_upper_panel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/upper-panel */ \"./js-src/components/upper-panel.tsx\");\n/* harmony import */ var _lastres_components_bottom_panel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @lastres/components/bottom-panel */ \"./js-src/components/bottom-panel.tsx\");\n/* harmony import */ var _lastres_components_pj_selection_menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lastres/components/pj-selection-menu */ \"./js-src/components/pj-selection-menu.tsx\");\n/* harmony import */ var _lastres_output_packet_init__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/output-packet/init */ \"./js-src/output-packet/init.ts\");\n/* harmony import */ var _lastres_output_packet_ping__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @lastres/output-packet/ping */ \"./js-src/output-packet/ping.ts\");\n/* harmony import */ var _lastres_input_packets__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @lastres/input-packets */ \"./js-src/input-packets.ts\");\n\n\n\n\n\n\n\nvar StateGame;\n(function (StateGame) {\n StateGame[StateGame[\"MainScreen\"] = 0] = \"MainScreen\";\n StateGame[StateGame[\"SelectingWord\"] = 1] = \"SelectingWord\";\n})(StateGame || (StateGame = {}));\nfunction Game(props) {\n const selectedPJ = props.selectedPJ;\n if (selectedPJ === null) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_selection_menu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { setSelectedPJ: props.setSelectedPJ, userWantsToCreatePJ: props.userWantsToCreatePJ, setUserWantsToCreatePJ: props.setUserWantsToCreatePJ, error: props.error, setError: props.setError })));\n }\n const [teamPJs, setTeamPJs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [enemyTeamPJs, setEnemyTeamPJs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [isBattling, setIsBattling] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [currentLocation, setCurrentLocation] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [connectedLocations, setConnectedLocations] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [logLines, setLogLines] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [error, setError] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [scrollLog, setScrollLog] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [movingTo, setMovingTo] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [remainingFrames, setRemainingFrames] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [actionHash, setActionHash] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [talkNPCs, setTalkNPCs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [onWordSelect, setOnWordSelect] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [stateGame, setStateGame] = react__WEBPACK_IMPORTED_MODULE_0__.useState(StateGame.MainScreen);\n const logPresentationRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const websocket = props.websocket;\n const setWebsocket = props.setWebsocket;\n window.setTimeout(() => {\n setWebsocket((websocket) => {\n if (websocket === null) {\n console.log('Opening websocket');\n const locationProtocol = window.location.protocol;\n if (locationProtocol == null) {\n return null;\n }\n const protocol = locationProtocol.match(/https:/) != null ? 'wss' : 'ws';\n const webSocket = new WebSocket(`${protocol}://${window.location.host}/ws`);\n webSocket.onopen = () => {\n new _lastres_output_packet_init__WEBPACK_IMPORTED_MODULE_4__[\"default\"](selectedPJ.uuid).send(webSocket);\n let interval = 0;\n interval = window.setInterval(() => {\n if (webSocket.readyState === WebSocket.CONNECTING) {\n return;\n }\n if (webSocket.readyState === WebSocket.OPEN) {\n new _lastres_output_packet_ping__WEBPACK_IMPORTED_MODULE_5__[\"default\"]().send(webSocket);\n return;\n }\n window.clearInterval(interval);\n }, 50000);\n };\n const inputPackets = new _lastres_input_packets__WEBPACK_IMPORTED_MODULE_6__[\"default\"](setTeamPJs, setEnemyTeamPJs, setIsBattling, setCurrentLocation, setConnectedLocations, logLines, setLogLines, setError, setScrollLog, logPresentationRef, setMovingTo, setRemainingFrames, setActionHash, setTalkNPCs);\n webSocket.onmessage = (event) => {\n const packet = JSON.parse(event.data);\n inputPackets.handle(packet);\n };\n webSocket.onerror = (event) => {\n console.log(event);\n };\n webSocket.onclose = (event) => {\n console.log('Websocket closed');\n setWebsocket(null);\n };\n return webSocket;\n }\n return websocket;\n });\n }, 300);\n if (stateGame === StateGame.SelectingWord) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (stateGame === StateGame.MainScreen) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_upper_panel__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { teamPJs: teamPJs, enemyTeamPJs: enemyTeamPJs, isBattling: isBattling, currentLocation: currentLocation, connectedLocations: connectedLocations, logLines: logLines, websocket: websocket, logPresentationRef: logPresentationRef, movingTo: movingTo, remainingFrames: remainingFrames }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_bottom_panel__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { actionHash: actionHash, websocket: websocket, talkNPCs: talkNPCs, setOnWordSelect: setOnWordSelect, setStateGame: setStateGame })));\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/game.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ StateGame: () => (/* binding */ StateGame),\n/* harmony export */ \"default\": () => (/* binding */ Game)\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_upper_panel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/upper-panel */ \"./js-src/components/upper-panel.tsx\");\n/* harmony import */ var _lastres_components_bottom_panel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @lastres/components/bottom-panel */ \"./js-src/components/bottom-panel.tsx\");\n/* harmony import */ var _lastres_components_pj_selection_menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lastres/components/pj-selection-menu */ \"./js-src/components/pj-selection-menu.tsx\");\n/* harmony import */ var _lastres_components_word_selector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/components/word-selector */ \"./js-src/components/word-selector.tsx\");\n/* harmony import */ var _lastres_output_packet_init__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @lastres/output-packet/init */ \"./js-src/output-packet/init.ts\");\n/* harmony import */ var _lastres_output_packet_ping__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @lastres/output-packet/ping */ \"./js-src/output-packet/ping.ts\");\n/* harmony import */ var _lastres_input_packets__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @lastres/input-packets */ \"./js-src/input-packets.ts\");\n\n\n\n\n\n\n\n\nvar StateGame;\n(function (StateGame) {\n StateGame[StateGame[\"MainScreen\"] = 0] = \"MainScreen\";\n StateGame[StateGame[\"SelectingWord\"] = 1] = \"SelectingWord\";\n})(StateGame || (StateGame = {}));\nfunction Game(props) {\n const selectedPJ = props.selectedPJ;\n if (selectedPJ === null) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_selection_menu__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { setSelectedPJ: props.setSelectedPJ, userWantsToCreatePJ: props.userWantsToCreatePJ, setUserWantsToCreatePJ: props.setUserWantsToCreatePJ, error: props.error, setError: props.setError })));\n }\n const [teamPJs, setTeamPJs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [enemyTeamPJs, setEnemyTeamPJs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [isBattling, setIsBattling] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [currentLocation, setCurrentLocation] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [connectedLocations, setConnectedLocations] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [logLines, setLogLines] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [error, setError] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [scrollLog, setScrollLog] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [movingTo, setMovingTo] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [remainingFrames, setRemainingFrames] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [actionHash, setActionHash] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [talkNPCs, setTalkNPCs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [onWordSelect, setOnWordSelect] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [stateGame, setStateGame] = react__WEBPACK_IMPORTED_MODULE_0__.useState(StateGame.MainScreen);\n const [words, setWords] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const logPresentationRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const websocket = props.websocket;\n const setWebsocket = props.setWebsocket;\n window.setTimeout(() => {\n setWebsocket((websocket) => {\n if (websocket === null) {\n console.log('Opening websocket');\n const locationProtocol = window.location.protocol;\n if (locationProtocol == null) {\n return null;\n }\n const protocol = locationProtocol.match(/https:/) != null ? 'wss' : 'ws';\n const webSocket = new WebSocket(`${protocol}://${window.location.host}/ws`);\n webSocket.onopen = () => {\n new _lastres_output_packet_init__WEBPACK_IMPORTED_MODULE_5__[\"default\"](selectedPJ.uuid).send(webSocket);\n let interval = 0;\n interval = window.setInterval(() => {\n if (webSocket.readyState === WebSocket.CONNECTING) {\n return;\n }\n if (webSocket.readyState === WebSocket.OPEN) {\n new _lastres_output_packet_ping__WEBPACK_IMPORTED_MODULE_6__[\"default\"]().send(webSocket);\n return;\n }\n window.clearInterval(interval);\n }, 50000);\n };\n const inputPackets = new _lastres_input_packets__WEBPACK_IMPORTED_MODULE_7__[\"default\"](setTeamPJs, setEnemyTeamPJs, setIsBattling, setCurrentLocation, setConnectedLocations, logLines, setLogLines, setError, setScrollLog, logPresentationRef, setMovingTo, setRemainingFrames, setActionHash, setTalkNPCs, setWords);\n webSocket.onmessage = (event) => {\n const packet = JSON.parse(event.data);\n inputPackets.handle(packet);\n };\n webSocket.onerror = (event) => {\n console.log(event);\n };\n webSocket.onclose = (event) => {\n console.log('Websocket closed');\n setWebsocket(null);\n };\n return webSocket;\n }\n return websocket;\n });\n }, 300);\n if (stateGame === StateGame.SelectingWord) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_word_selector__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { words: words, setStateGame: setStateGame }));\n }\n if (stateGame === StateGame.MainScreen) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_upper_panel__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { teamPJs: teamPJs, enemyTeamPJs: enemyTeamPJs, isBattling: isBattling, currentLocation: currentLocation, connectedLocations: connectedLocations, logLines: logLines, websocket: websocket, logPresentationRef: logPresentationRef, movingTo: movingTo, remainingFrames: remainingFrames }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_bottom_panel__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { actionHash: actionHash, websocket: websocket, talkNPCs: talkNPCs, setOnWordSelect: setOnWordSelect, setStateGame: setStateGame })));\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/game.tsx?"); /***/ }), @@ -240,6 +240,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./js-src/components/word-selector.tsx": +/*!*********************************************!*\ + !*** ./js-src/components/word-selector.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 */ WordSelector)\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\n\nfunction WordSelector(props) {\n const words = props.words;\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"word-selector\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"close-button\", onClick: () => {\n props.setStateGame(_lastres_components_game__WEBPACK_IMPORTED_MODULE_1__.StateGame.MainScreen);\n } }, \"x\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h2\", null, \"Selecciona una palabra.\")));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/word-selector.tsx?"); + +/***/ }), + /***/ "./js-src/index.tsx": /*!**************************!*\ !*** ./js-src/index.tsx ***! @@ -286,7 +296,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*********************************/ /***/ ((__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 */ InputPackets)\n/* harmony export */ });\n/* harmony import */ var _lastres_input_packet_info__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @lastres/input-packet/info */ \"./js-src/input-packet/info.ts\");\n/* harmony import */ var _lastres_input_packet_pong__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/input-packet/pong */ \"./js-src/input-packet/pong.ts\");\n\n\nclass InputPackets {\n constructor(setTeamPJs, setEnemyTeamPJs, setIsBattling, setCurrentLocation, setConnectedLocations, logLines, setLogLines, setError, setScrollLog, logPresentationRef, setMovingTo, setRemainingFrames, setActionHash, setTalkNPCs) {\n this.cachedHash = null;\n this.cachedArray = null;\n this.setTeamPJs = setTeamPJs;\n this.setEnemyTeamPJs = setEnemyTeamPJs;\n this.setCurrentLocation = setCurrentLocation;\n this.setConnectedLocations = setConnectedLocations;\n this.logLines = logLines;\n this.setLogLines = setLogLines;\n this.setError = setError;\n this.setScrollLog = setScrollLog;\n this.logPresentationRef = logPresentationRef;\n this.setMovingTo = setMovingTo;\n this.setRemainingFrames = setRemainingFrames;\n this.setIsBattling = setIsBattling;\n this.setActionHash = setActionHash;\n this.setTalkNPCs = setTalkNPCs;\n }\n handle(packet) {\n const hash = this.hashAvailablePackets();\n const identifier = packet.command;\n const inputPacket = hash[identifier];\n inputPacket.recv(packet);\n }\n listAvailablePackets() {\n let firstTime = true;\n if (this.cachedArray === null) {\n const infoPacket = new _lastres_input_packet_info__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n const pongPacket = new _lastres_input_packet_pong__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n infoPacket.onReceive((data) => {\n const logPresentationRef = this.logPresentationRef;\n let scrollData = [];\n function saveScroll() {\n if (logPresentationRef.current === null) {\n return;\n }\n scrollData = [\n logPresentationRef.current.scrollHeight,\n logPresentationRef.current.scrollTop,\n logPresentationRef.current.offsetHeight\n ];\n }\n function applyScroll() {\n if (scrollData.length < 3) {\n return;\n }\n if (logPresentationRef.current === null) {\n console.log('Not defined');\n return;\n }\n const logPresentation = logPresentationRef.current;\n const [scrollHeight, scrollTop, offsetHeight] = scrollData;\n if (firstTime) {\n firstTime = false;\n logPresentation.scrollTo(0, logPresentation.scrollHeight);\n return;\n }\n if (scrollHeight <= scrollTop + offsetHeight * (3 / 2)) {\n logPresentation.scrollTo(0, logPresentation.scrollHeight);\n }\n }\n if (data.error !== undefined) {\n this.setError(data.error);\n return;\n }\n if (data.team_pjs !== undefined) {\n this.setTeamPJs(data.team_pjs);\n }\n if (data.enemy_team_pjs !== undefined) {\n this.setEnemyTeamPJs(data.enemy_team_pjs);\n }\n if (data.is_battling !== undefined) {\n this.setIsBattling(data.is_battling);\n }\n if (data.location_data !== undefined) {\n console.log(data.location_data);\n if (data.location_data.connected_places !== undefined) {\n this.setConnectedLocations(data.location_data.connected_places);\n }\n if (data.location_data.current !== undefined) {\n this.setCurrentLocation(data.location_data.current);\n }\n if (data.location_data.moving_to !== undefined) {\n this.setMovingTo(data.location_data.moving_to);\n }\n else {\n this.setMovingTo(null);\n }\n }\n if (data.npcs !== undefined) {\n this.setTalkNPCs(data.npcs);\n }\n if (data.remaining_frames !== undefined) {\n this.setRemainingFrames(data.remaining_frames);\n }\n if (data.set_log !== undefined) {\n saveScroll();\n this.setLogLines(data.set_log);\n window.setTimeout(() => {\n applyScroll();\n }, 10);\n }\n if (data.append_log !== undefined) {\n const logHash = {};\n saveScroll();\n this.setLogLines((logLines) => {\n if (logLines !== null) {\n for (const item of logLines) {\n logHash[item.uuid] = item;\n }\n logHash[data.append_log.uuid] = data.append_log;\n const outputLog = Object.keys(logHash).map((item, i) => {\n return logHash[item];\n });\n return outputLog;\n }\n return [];\n });\n window.setTimeout(() => {\n applyScroll();\n }, 10);\n }\n if (data.available_actions !== undefined) {\n this.setActionHash(data.available_actions);\n }\n });\n this.cachedArray = [infoPacket, pongPacket];\n }\n return this.cachedArray;\n }\n hashAvailablePackets() {\n if (this.cachedHash === null) {\n this.cachedHash = {};\n for (const inputPacket of this.listAvailablePackets()) {\n this.cachedHash[inputPacket.identifier()] = inputPacket;\n }\n }\n return this.cachedHash;\n }\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/input-packets.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ InputPackets)\n/* harmony export */ });\n/* harmony import */ var _lastres_input_packet_info__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @lastres/input-packet/info */ \"./js-src/input-packet/info.ts\");\n/* harmony import */ var _lastres_input_packet_pong__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/input-packet/pong */ \"./js-src/input-packet/pong.ts\");\n\n\nclass InputPackets {\n constructor(setTeamPJs, setEnemyTeamPJs, setIsBattling, setCurrentLocation, setConnectedLocations, logLines, setLogLines, setError, setScrollLog, logPresentationRef, setMovingTo, setRemainingFrames, setActionHash, setTalkNPCs, setWords) {\n this.cachedHash = null;\n this.cachedArray = null;\n this.setTeamPJs = setTeamPJs;\n this.setEnemyTeamPJs = setEnemyTeamPJs;\n this.setCurrentLocation = setCurrentLocation;\n this.setConnectedLocations = setConnectedLocations;\n this.logLines = logLines;\n this.setLogLines = setLogLines;\n this.setError = setError;\n this.setScrollLog = setScrollLog;\n this.logPresentationRef = logPresentationRef;\n this.setMovingTo = setMovingTo;\n this.setRemainingFrames = setRemainingFrames;\n this.setIsBattling = setIsBattling;\n this.setActionHash = setActionHash;\n this.setTalkNPCs = setTalkNPCs;\n this.setWords = setWords;\n }\n handle(packet) {\n const hash = this.hashAvailablePackets();\n const identifier = packet.command;\n const inputPacket = hash[identifier];\n inputPacket.recv(packet);\n }\n listAvailablePackets() {\n let firstTime = true;\n if (this.cachedArray === null) {\n const infoPacket = new _lastres_input_packet_info__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n const pongPacket = new _lastres_input_packet_pong__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n infoPacket.onReceive((data) => {\n const logPresentationRef = this.logPresentationRef;\n let scrollData = [];\n function saveScroll() {\n if (logPresentationRef.current === null) {\n return;\n }\n scrollData = [\n logPresentationRef.current.scrollHeight,\n logPresentationRef.current.scrollTop,\n logPresentationRef.current.offsetHeight\n ];\n }\n function applyScroll() {\n if (scrollData.length < 3) {\n return;\n }\n if (logPresentationRef.current === null) {\n console.log('Not defined');\n return;\n }\n const logPresentation = logPresentationRef.current;\n const [scrollHeight, scrollTop, offsetHeight] = scrollData;\n if (firstTime) {\n firstTime = false;\n logPresentation.scrollTo(0, logPresentation.scrollHeight);\n return;\n }\n if (scrollHeight <= scrollTop + offsetHeight * (3 / 2)) {\n logPresentation.scrollTo(0, logPresentation.scrollHeight);\n }\n }\n if (data.error !== undefined) {\n this.setError(data.error);\n return;\n }\n if (data.team_pjs !== undefined) {\n this.setTeamPJs(data.team_pjs);\n }\n if (data.enemy_team_pjs !== undefined) {\n this.setEnemyTeamPJs(data.enemy_team_pjs);\n }\n if (data.is_battling !== undefined) {\n this.setIsBattling(data.is_battling);\n }\n if (data.location_data !== undefined) {\n console.log(data.location_data);\n if (data.location_data.connected_places !== undefined) {\n this.setConnectedLocations(data.location_data.connected_places);\n }\n if (data.location_data.current !== undefined) {\n this.setCurrentLocation(data.location_data.current);\n }\n if (data.location_data.moving_to !== undefined) {\n this.setMovingTo(data.location_data.moving_to);\n }\n else {\n this.setMovingTo(null);\n }\n }\n if (data.npcs !== undefined) {\n this.setTalkNPCs(data.npcs);\n }\n if (data.remaining_frames !== undefined) {\n this.setRemainingFrames(data.remaining_frames);\n }\n if (data.set_log !== undefined) {\n saveScroll();\n this.setLogLines(data.set_log);\n window.setTimeout(() => {\n applyScroll();\n }, 10);\n }\n if (data.known_words !== undefined) {\n this.setWords(data.known_words);\n }\n if (data.append_log !== undefined) {\n const logHash = {};\n saveScroll();\n this.setLogLines((logLines) => {\n if (logLines !== null) {\n for (const item of logLines) {\n logHash[item.uuid] = item;\n }\n logHash[data.append_log.uuid] = data.append_log;\n const outputLog = Object.keys(logHash).map((item, i) => {\n return logHash[item];\n });\n return outputLog;\n }\n return [];\n });\n window.setTimeout(() => {\n applyScroll();\n }, 10);\n }\n if (data.available_actions !== undefined) {\n this.setActionHash(data.available_actions);\n }\n });\n this.cachedArray = [infoPacket, pongPacket];\n }\n return this.cachedArray;\n }\n hashAvailablePackets() {\n if (this.cachedHash === null) {\n this.cachedHash = {};\n for (const inputPacket of this.listAvailablePackets()) {\n this.cachedHash[inputPacket.identifier()] = inputPacket;\n }\n }\n return this.cachedHash;\n }\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/input-packets.ts?"); /***/ }),