diff --git a/js-src/components/pj-list-item.tsx b/js-src/components/pj-list-item.tsx index 4b6eadb..76c78a8 100644 --- a/js-src/components/pj-list-item.tsx +++ b/js-src/components/pj-list-item.tsx @@ -18,7 +18,7 @@ export default function PJListItem (props: PJListItemProps): JSX.Element { return <> } return ( -

Experiencia: {pj.experience_to_next_level_current} +

Exp {pj.experience_to_next_level_current} /{pj.experience_to_next_level_complete}

) } @@ -30,17 +30,15 @@ export default function PJListItem (props: PJListItemProps): JSX.Element { }
-

{pj.nick} Nivel {pj.level}.

+

{pj.nick} Nvl {pj.level}.

{ printExperience() }
diff --git a/js-src/components/upper-panel.tsx b/js-src/components/upper-panel.tsx index 2e85238..b2e3bd1 100644 --- a/js-src/components/upper-panel.tsx +++ b/js-src/components/upper-panel.tsx @@ -101,7 +101,7 @@ export default function UpperPanel (props: UpperPanelProps): JSX.Element { function showThirdPanel (): JSX.Element { if (isBattling === null || !isBattling || enemyTeamPJs === null) { return ( - <> +
{ showLocationMenuHeaderText() } @@ -111,7 +111,7 @@ export default function UpperPanel (props: UpperPanelProps): JSX.Element { { availableLocationsToMove() } - +
) } return ( diff --git a/lib/LasTres/Flags.pm b/lib/LasTres/Flags.pm index 1c23104..d752e72 100644 --- a/lib/LasTres/Flags.pm +++ b/lib/LasTres/Flags.pm @@ -11,4 +11,7 @@ sub INTRO_MESSAGE_SENT_FLAG { sub TALKED_WITH_OLD_MAN_AND_LEARNED_TO_SAY_DEVOTA { return 'TALKED_WITH_OLD_MAN_AND_LEARNED_TO_SAY_DEVOTA'; } +sub TALKED_FIRST_TIME_VETERANO_CALIZOR { + return 'TALKED_FIRST_TIME_VETERANO_CALIZOR'; +} 1; diff --git a/lib/LasTres/Planet/Bahdder/BosqueDelHeroe/TribuDeLaLima/CasaDePiedra.pm b/lib/LasTres/Planet/Bahdder/BosqueDelHeroe/TribuDeLaLima/CasaDePiedra.pm new file mode 100644 index 0000000..b832516 --- /dev/null +++ b/lib/LasTres/Planet/Bahdder/BosqueDelHeroe/TribuDeLaLima/CasaDePiedra.pm @@ -0,0 +1,69 @@ +package LasTres::Planet::Bahdder::BosqueDelHeroe::TribuDeLaLima::CasaDePiedra; + +use v5.36.0; + +use strict; +use warnings; + +use feature 'signatures'; + +use utf8; + +use Moo; + +use LasTres::Planet::Bahdder::BosqueDelHeroe::TribuDeLaLima; +use LasTres::TalkingNPC::VeteranoCalizor; + +with 'LasTres::Location'; + +sub identifier { + return 'casa_de_piedra'; +} + +sub name { + return 'Casa de piedra'; +} + +sub description($self, $pj = undef) { + return $self->first_description; +} + +sub first_description($self) { + return +'Esta casa la construyo Veterano Cálizor cuando se vino a vivir a la tribu tras terminar la guerra, varias personas de la tribu viven aquí al haber ayudado durante su construcción, si estás buscando a Devota, Bruto o Veterano existe la posibilidad de que estén aquí. + +Algunos la llaman la Casa de los Líderes porque tanto Veterano como Devota fueron líderes de la tribu; no obstante el líder actual no reside aquí. + +La casa es monumental para los estándares del bosque.'; +} + +sub parent { + return LasTres::Planet::Bahdder::BosqueDelHeroe::TribuDeLaLima->instance; +} + +sub actions($self, $pj) { + return [ ]; +} + +sub npcs($self, $pj) { + return [ LasTres::TalkingNPC::VeteranoCalizor->instance ]; +} + +sub connected_places { + return []; +} + +my $singleton; + +sub instance { + my $class = shift; + if ( !defined $singleton ) { + $singleton = $class->new(@_); + } + return $singleton; +} + +sub is_spawn { + return 0; +} +1; diff --git a/lib/LasTres/TalkingNPC/VeteranoCalizor.pm b/lib/LasTres/TalkingNPC/VeteranoCalizor.pm new file mode 100644 index 0000000..b3a0ccf --- /dev/null +++ b/lib/LasTres/TalkingNPC/VeteranoCalizor.pm @@ -0,0 +1,133 @@ +package LasTres::TalkingNPC::VeteranoCalizor; + +use v5.36.0; +use strict; +use warnings; +use utf8; + +use feature 'signatures'; + +use Moo; + +use LasTres::Flags; +use LasTres::Word::Devota; +use LasTres::Word::Ayazel; + +use parent 'LasTres::TalkingNPC'; + +sub talk ( $self, $pj, $word = undef ) { + $self->SUPER::talk( $pj, $word ); + if ( !defined $word ) { + $self->wordlessly_talk($pj); + return; + } + $self->word_talk($pj, $word); +} + +sub word_talk($self, $pj, $word) { + require LasTres::Word::Devota; + if ($word->identifier eq LasTres::Word::Devota->instance->identifier) { + $self->word_devota($pj); + return; + } + if ($word->identifier eq LasTres::Word::Ayazel->instance->identifier) { + $self->word_ayazel($pj); + return; + } + $self->word_unknown($pj); + +} + +sub word_devota($self, $pj) { + $self->send_response_dialog( + $pj, + [ + { + text => '¿Buscas a mi esposa? Seguramente este rezando o junto a ese' + . ' chamán de pacotilla, suele rezar en ese pequeño santuario a' + . ' Ayazel, visitalo ahora que todavía sigue en pie...' + . ' Maldito sea el día que le enseñé a la gente a edificar' + . ' en piedra.' + } + ] + ); + $pj->teach_word( LasTres::Word::Ayazel->instance ); +} + +sub word_ayazel($self, $pj) { + $self->send_response_dialog( + $pj, + [ + { + text => 'Eso de la Diosa de la Luna me parece una tontería, no me' + . ' creo ni una palabra y ese chamán es un charlantán, pero creo' + . ' que algo tiene que haber. Los cálizor tenemos nuestro propio Dios y' + . ' es mucho más interesante que esa Diosa. ¿Qué nos importa' + . ' lo que pase en la Luna si vivimos en tierra firme?' + } + ] + ); +} + +sub word_unknown($self, $pj) { + $self->send_response_dialog( + $pj, + [ + { + text => 'Mmmm, me lo tengo que pensar.' + } + ] + ); +} + +sub identifier { + return 'veterano_calizor_tribu_de_la_lima'; +} + +# sub icon { +# return '/img/anciano.png'; +# } + +sub name { + return 'Veterano Cálizor'; +} + +sub verb ( $self, $pj ) { + return 'vocifera'; +} + +sub wordlessly_talk ( $self, $pj ) { + if ($pj->get_flag(LasTres::Flags::TALKED_FIRST_TIME_VETERANO_CALIZOR)) { + $self->send_response_dialog( + $pj, + [ + { + text => 'Echo de menos la cerveza de mi tierra, pero no volvería allí ni' + . ' loco, y eso a pesar de esos malditos conejos que no nos dejan vivir.' + } + ] + ); + return; + } + $self->send_response_dialog( + $pj, + [ + { + text => ( + '¿Ya te quieres marchar de la tribu hacia la torre?' + . ' ¡Qué rápido creceis los jovenes!' + . ' ¡Cuando te conocí me llegabas por aquí!.- Con su mano se señala la rodilla.-' + . ' Este bosque es un lugar peligroso y endiablado, deberías quedarte aquí,' + . ' tendrías más seguridad y harías feliz a este pobre viejo.' + . ' ¿Qué ya lo tienes decidido? No puedo hacer nada para' + . ' evitar que persigas tus sueños, en ese caso ven a buscarme' + . ' más tarde, estoy preparandote una sorpresa que quizás' + . ' te proteja aunque yo no esté.' + + ) + } + ] + ); + $pj->set_flag(LasTres::Flags::TALKED_FIRST_TIME_VETERANO_CALIZOR); +} +1; diff --git a/lib/LasTres/Word/Ayazel.pm b/lib/LasTres/Word/Ayazel.pm new file mode 100644 index 0000000..e90c6e4 --- /dev/null +++ b/lib/LasTres/Word/Ayazel.pm @@ -0,0 +1,21 @@ +package LasTres::Word::Ayazel; + +use v5.36.0; +use strict; +use warnings; +use utf8; + +use feature 'signatures'; + +use Moo; + +with 'LasTres::Word'; + +sub name { + return 'Ayazel'; +} + +sub identifier { + return 'ayazel'; +} +1; diff --git a/public/css/styles.css b/public/css/styles.css index 9f08787..08c63ab 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,6 @@ +html, body { + overscroll-behavior-y: contain; } + @keyframes move-avatar { 0% { padding-bottom: 0rem; } @@ -9,7 +12,7 @@ body { margin: 0px; padding: 0px; - height: 100vh; + height: 100%; background: ghostwhite; } body div.talk-npc div.detail { display: flex; @@ -22,9 +25,11 @@ body { justify-content: center; } body div.talk-npc div.name-container { display: flex; - padding: 10px; } + padding: 10px; + align-items: center; } body div.talk-npc div.name-container div.avatar { - width: 100%; + max-width: 60%; + max-height: 8rem; aspect-ratio: 1/1; border-radius: 50%; background: lightgray; @@ -49,6 +54,7 @@ body { border-radius: 50%; } body div.talk-npc div.name-container div.name { width: 100%; + font-size: 0.85rem; display: flex; align-items: center; } body div.talk-npc div.buttons { @@ -56,6 +62,7 @@ body { body label.bar-container { width: 90%; } body label.bar-container div.bar { + margin-left: 3px; width: 100%; height: 1em; border: solid 1px black; } @@ -75,9 +82,14 @@ body { text-decoration: none; } body div.pj-list-item { display: flex; + font-size: 0.85rem; align-items: center; } + body div.pj-list-item label.bar-container { + display: flex; + font-family: monospace; } body div.pj-list-item div.avatar { - width: 30%; + max-width: 60%; + max-height: 8rem; aspect-ratio: 1/1; border-radius: 50%; background: lightgray; @@ -101,20 +113,29 @@ body { background: darkgray; border-radius: 50%; } body div.pj-list-item div.data { - width: 60%; } + width: 50%; } + body div.pj-list-item div.data p { + margin: 0; } body div.presentation { display: flex; flex-direction: row; width: 95%; justify-content: center; - height: 50vh; } + height: 50%; } body div.presentation div.presentation-item { margin: 1%; width: 30%; - font-size: 30px; + font-size: 1.7rem; overflow-y: scroll; } - body div.presentation div.presentation-item code pre { + body div.presentation div.presentation-item * { + overflow-wrap: break-word; white-space: pre-wrap; } + body div.presentation div.presentation-item code { + overflow-wrap: break-word; } + body div.presentation div.presentation-item code pre { + white-space: pre-wrap; } + body div.presentation div.presentation-item div.movement-menu { + font-size: 15px; } body div.width-max-content { width: max-content; } body div#game-container { @@ -261,7 +282,7 @@ body { color: black; display: flex; border: 1px solid black; - font-size: 30px; + font-size: 1.7rem; height: 50px; text-align: center; flex-direction: column; diff --git a/public/css/styles.scss b/public/css/styles.scss index 1da04ba..c8b3a17 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -1,3 +1,7 @@ +html, body { + overscroll-behavior-y: contain; +} + $padding_select_word: 10px; @keyframes move-avatar { 0% { @@ -13,7 +17,7 @@ $padding_select_word: 10px; body { margin: 0px; padding: 0px; - height: 100vh; + height: 100%; background: ghostwhite; div.talk-npc { div.detail { @@ -29,8 +33,10 @@ body { div.name-container { display: flex; padding: 10px; + align-items: center; div.avatar { - width: 100%; + max-width: 60%; + max-height: 8rem; aspect-ratio: 1/1; border-radius: 50%; background: lightgray; @@ -58,6 +64,7 @@ body { } div.name { width: 100%; + font-size: 0.85rem; display: flex; align-items: center; } @@ -69,6 +76,7 @@ body { label.bar-container { width: 90%; div.bar { + margin-left: 3px; width: 100%; height: 1em; border: solid 1px black; @@ -93,9 +101,15 @@ body { } div.pj-list-item { display: flex; + font-size: 0.85rem; align-items: center; + label.bar-container { + display: flex; + font-family: monospace; + } div.avatar { - width: 30%; + max-width: 60%; + max-height: 8rem; aspect-ratio: 1/1; border-radius: 50%; background: lightgray; @@ -122,7 +136,10 @@ body { } } div.data { - width: 60%; + width: 50%; + p { + margin: 0; + } } } @@ -132,17 +149,25 @@ body { width: 95%; justify-content: center; div.presentation-item { + * { + overflow-wrap: break-word; + white-space: pre-wrap; + } code { + overflow-wrap: break-word; pre { white-space: pre-wrap; } } margin: 1%; width: 30%; - font-size: 30px; + font-size: 1.7rem; overflow-y: scroll; + div.movement-menu { + font-size: 15px; + } } - height: 50vh; + height: 50%; } div.width-max-content { @@ -317,7 +342,7 @@ body { color: black; display: flex; border: 1px solid black; - font-size: 30px; + font-size: 1.7rem; height: 50px; text-align: center; flex-direction: column; diff --git a/public/js/bundle.js b/public/js/bundle.js index d4c88b4..458d698 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -156,7 +156,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 */ PJListItem)\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_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/pj-health-like-bar */ \"./js-src/components/pj-health-like-bar.tsx\");\n\n\nfunction PJListItem(props) {\n const pj = props.pj;\n function avatar() {\n if (pj.image === undefined) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n const image = pj.health > 0 ? pj.image : '/img/skull.png';\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: image }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"shadow\" }));\n }\n function printExperience() {\n if (pj.experience_to_next_level_current === undefined || pj.experience_to_next_level_complete === 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(\"p\", null,\n \"Experiencia: \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, pj.experience_to_next_level_current),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, pj.experience_to_next_level_complete)));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"pj-list-item\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"avatar\" }, avatar()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"data\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n pj.nick,\n \" Nivel \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } },\n pj.level,\n \".\")),\n printExperience(),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", { className: \"bar-container\" },\n \"Salud\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { value: pj.health, max: pj.max_health })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", { className: \"bar-container\" },\n \"Mana\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { value: pj.mana, max: pj.max_mana })))));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/pj-list-item.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ PJListItem)\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_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/pj-health-like-bar */ \"./js-src/components/pj-health-like-bar.tsx\");\n\n\nfunction PJListItem(props) {\n const pj = props.pj;\n function avatar() {\n if (pj.image === undefined) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n const image = pj.health > 0 ? pj.image : '/img/skull.png';\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: image }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"shadow\" }));\n }\n function printExperience() {\n if (pj.experience_to_next_level_current === undefined || pj.experience_to_next_level_complete === 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(\"p\", null,\n \"Exp \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, pj.experience_to_next_level_current),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, pj.experience_to_next_level_complete)));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"pj-list-item\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"avatar\" }, avatar()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"data\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n pj.nick,\n \" Nvl \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } },\n pj.level,\n \".\")),\n printExperience(),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", { className: \"bar-container\" },\n \"S \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { value: pj.health, max: pj.max_health })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", { className: \"bar-container\" },\n \"M \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_health_like_bar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { value: pj.mana, max: pj.max_mana })))));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/pj-list-item.tsx?"); /***/ }), @@ -236,7 +236,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 */ UpperPanel)\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_pj_list_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/pj-list-item */ \"./js-src/components/pj-list-item.tsx\");\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_log_panel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/components/log-panel */ \"./js-src/components/log-panel.tsx\");\n/* harmony import */ var _lastres_output_packet_move_to__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @lastres/output-packet/move-to */ \"./js-src/output-packet/move-to.ts\");\n\n\n\n\n\n\nfunction UpperPanel(props) {\n const connectedLocations = props.connectedLocations;\n const teamPJs = props.teamPJs;\n const currentLocation = props.currentLocation;\n const logLines = props.logLines;\n const websocket = props.websocket;\n const logPresentationRef = props.logPresentationRef;\n const isBattling = props.isBattling;\n const enemyTeamPJs = props.enemyTeamPJs;\n if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null && isBattling != null)) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Esperando datos...\")));\n }\n function onClickLocation(item) {\n const moveToPacket = new _lastres_output_packet_move_to__WEBPACK_IMPORTED_MODULE_5__[\"default\"](item);\n if (websocket !== null) {\n moveToPacket.send(websocket);\n }\n }\n function availableLocationsToMove() {\n if (connectedLocations === null || connectedLocations.length === 0) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null));\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, \"Puedes ir a:\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"ul\", null, connectedLocations.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"li\", { key: i },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", onClick: () => {\n onClickLocation(item);\n } },\n item.area.name,\n \"/\",\n item.location.name));\n }))));\n }\n function showLocationMenuHeaderText() {\n if (currentLocation === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (props.movingTo === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"Est\\u00E1s en \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, currentLocation.area.name),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, currentLocation.location.name),\n \".\");\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"Est\\u00E1s yendo a \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, props.movingTo.area.name),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, props.movingTo.location.name),\n \".\");\n }\n function showRemainingFrames() {\n if (props.movingTo === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (props.remainingFrames === 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\", null,\n \"Te quedan \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"b\", null, props.remainingFrames),\n \" frames para terminar la acci\\u00F3n.\"));\n }\n function showThirdPanel() {\n if (isBattling === null || !isBattling || enemyTeamPJs === null) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n showLocationMenuHeaderText(),\n showRemainingFrames(),\n availableLocationsToMove()));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, enemyTeamPJs.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_list_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { key: i, pj: item });\n })));\n }\n setTimeout(() => {\n const logDiv = logPresentationRef.current;\n if (logDiv === null) {\n return;\n }\n logDiv.scrollTo(0, logDiv.scrollHeight);\n }, 100);\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, teamPJs.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_list_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { key: i, pj: item });\n })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { presentationItemRef: logPresentationRef },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_log_panel__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { logLines: logLines })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, showThirdPanel())));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/upper-panel.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ UpperPanel)\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_pj_list_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/components/pj-list-item */ \"./js-src/components/pj-list-item.tsx\");\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_log_panel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lastres/components/log-panel */ \"./js-src/components/log-panel.tsx\");\n/* harmony import */ var _lastres_output_packet_move_to__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @lastres/output-packet/move-to */ \"./js-src/output-packet/move-to.ts\");\n\n\n\n\n\n\nfunction UpperPanel(props) {\n const connectedLocations = props.connectedLocations;\n const teamPJs = props.teamPJs;\n const currentLocation = props.currentLocation;\n const logLines = props.logLines;\n const websocket = props.websocket;\n const logPresentationRef = props.logPresentationRef;\n const isBattling = props.isBattling;\n const enemyTeamPJs = props.enemyTeamPJs;\n if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null && isBattling != null)) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Esperando datos...\")));\n }\n function onClickLocation(item) {\n const moveToPacket = new _lastres_output_packet_move_to__WEBPACK_IMPORTED_MODULE_5__[\"default\"](item);\n if (websocket !== null) {\n moveToPacket.send(websocket);\n }\n }\n function availableLocationsToMove() {\n if (connectedLocations === null || connectedLocations.length === 0) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null));\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, \"Puedes ir a:\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"ul\", null, connectedLocations.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"li\", { key: i },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", onClick: () => {\n onClickLocation(item);\n } },\n item.area.name,\n \"/\",\n item.location.name));\n }))));\n }\n function showLocationMenuHeaderText() {\n if (currentLocation === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (props.movingTo === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"Est\\u00E1s en \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, currentLocation.area.name),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, currentLocation.location.name),\n \".\");\n }\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"Est\\u00E1s yendo a \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'red' } }, props.movingTo.area.name),\n \"/\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { style: { color: 'green' } }, props.movingTo.location.name),\n \".\");\n }\n function showRemainingFrames() {\n if (props.movingTo === null) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null);\n }\n if (props.remainingFrames === 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\", null,\n \"Te quedan \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"b\", null, props.remainingFrames),\n \" frames para terminar la acci\\u00F3n.\"));\n }\n function showThirdPanel() {\n if (isBattling === null || !isBattling || enemyTeamPJs === null) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"movement-menu\" },\n showLocationMenuHeaderText(),\n showRemainingFrames(),\n availableLocationsToMove()));\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, enemyTeamPJs.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_list_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { key: i, pj: item });\n })));\n }\n setTimeout(() => {\n const logDiv = logPresentationRef.current;\n if (logDiv === null) {\n return;\n }\n logDiv.scrollTo(0, logDiv.scrollHeight);\n }, 100);\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, teamPJs.map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_pj_list_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { key: i, pj: item });\n })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { presentationItemRef: logPresentationRef },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_log_panel__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { logLines: logLines })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_lastres_components_presentation_item__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, showThirdPanel())));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/upper-panel.tsx?"); /***/ }), diff --git a/templates/root/index.html.ep b/templates/root/index.html.ep index 035bd1c..f859a5d 100644 --- a/templates/root/index.html.ep +++ b/templates/root/index.html.ep @@ -1,13 +1,13 @@ - + @@ -16,6 +16,6 @@
- +