From e20d4daa674f11d8de485762246128826478d90c Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Mon, 10 Jul 2023 18:08:42 +0200 Subject: [PATCH] Minor bugfixes and adding a close button to the registration because that bothered me. --- js-src/components/pj-creation-menu.tsx | 4 ++++ lib/LasTres.pm | 1 + lib/LasTres/Controller/Websocket.pm | 2 +- lib/LasTres/Race/Conejo.pm | 2 +- public/css/styles.css | 16 ++++++++++++++++ public/css/styles.scss | 19 +++++++++++++++++++ public/js/bundle.js | 2 +- 7 files changed, 43 insertions(+), 3 deletions(-) diff --git a/js-src/components/pj-creation-menu.tsx b/js-src/components/pj-creation-menu.tsx index b7a2dc4..05aabd7 100644 --- a/js-src/components/pj-creation-menu.tsx +++ b/js-src/components/pj-creation-menu.tsx @@ -98,6 +98,10 @@ export default function PJCreationMenu (props: PJCreationMenuProps): JSX.Element <>
+ { + props.setUserWantsToCreatePJ(false) + }}>x

Crea tu personaje.

{(props.error !== null ? (

{props.error}

) diff --git a/lib/LasTres.pm b/lib/LasTres.pm index 427ea32..7b6bd60 100644 --- a/lib/LasTres.pm +++ b/lib/LasTres.pm @@ -9,6 +9,7 @@ use Mojo::Base 'Mojolicious', -signatures; # This method will run once at server start sub startup ($self) { + require LasTres::Controller::Websocket; # Load configuration from config file my $config = $self->plugin('NotYAMLConfig'); diff --git a/lib/LasTres/Controller/Websocket.pm b/lib/LasTres/Controller/Websocket.pm index ba402d5..f8e6031 100644 --- a/lib/LasTres/Controller/Websocket.pm +++ b/lib/LasTres/Controller/Websocket.pm @@ -13,9 +13,9 @@ use Data::Dumper; use LasTres::Redis; use LasTres::Controller::Websocket::InputPackets; +use LasTres::DAO::PJs; our %SESSIONS; -use LasTres::DAO::PJs; my $result_set_pjs = LasTres::DAO::PJs->ResultSet; my $redis = LasTres::Redis->new; diff --git a/lib/LasTres/Race/Conejo.pm b/lib/LasTres/Race/Conejo.pm index e592448..cc5e10b 100644 --- a/lib/LasTres/Race/Conejo.pm +++ b/lib/LasTres/Race/Conejo.pm @@ -21,7 +21,7 @@ sub name { } sub name_selection { - return; + return ''; } sub image { diff --git a/public/css/styles.css b/public/css/styles.css index b082cfb..1e447d2 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -214,3 +214,19 @@ body { color: aquamarine; } body div.login-container div.login-contained a:hover { color: yellow; } + body div.login-container div.login-contained 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.login-container div.login-contained a.close-button:hover { + background: lightgray; + color: black; } diff --git a/public/css/styles.scss b/public/css/styles.scss index fd1c0a0..6b0e1a3 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -262,6 +262,25 @@ body { color: yellow; } } + 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 ac74b3d..dade2ca 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -136,7 +136,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 */ PJCreationMenu)\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_pj__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/pj */ \"./js-src/pj.ts\");\n\n\nfunction PJCreationMenu(props) {\n const longNameInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const shortNameInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const nickInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const raceSelectRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [playableRaces, setPlayableRaces] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n if (playableRaces === null) {\n fetch('/races/playable', {\n method: 'GET',\n mode: 'same-origin',\n cache: 'no-cache'\n }).then(async (response) => {\n const statusCode = response.status;\n const data = await response.json();\n if (statusCode !== 200) {\n props.setError(data.error);\n return;\n }\n setPlayableRaces(data);\n props.setError(null);\n }).catch((error) => {\n console.log(error);\n props.setError('Imposible conectar al servidor para recibir las razas.');\n });\n }\n function createPJ() {\n if (longNameInputRef.current === null) {\n return;\n }\n if (shortNameInputRef.current === null) {\n return;\n }\n if (nickInputRef.current === null) {\n return;\n }\n if (raceSelectRef.current === null || raceSelectRef.current.selectedOptions.length < 1) {\n return;\n }\n fetch('/pj/create', {\n method: 'POST',\n mode: 'same-origin',\n cache: 'no-cache',\n body: JSON.stringify({\n full_name: longNameInputRef.current.value,\n short_name: shortNameInputRef.current.value,\n nick: nickInputRef.current.value,\n race: raceSelectRef.current.selectedOptions[0].value\n })\n }).then(async (response) => {\n const statusCode = response.status;\n const data = await response.json();\n if (statusCode !== 200) {\n props.setError(data.error);\n return;\n }\n props.setError(null);\n props.setUserWantsToCreatePJ(false);\n const pjs = await (0,_lastres_pj__WEBPACK_IMPORTED_MODULE_1__.fetchMyPjs)(props.setError);\n props.setPJs(pjs);\n }).catch((error) => {\n console.log(error);\n props.setError('Imposible crear pj, no se pudo conectar al servidor.');\n });\n }\n function renderRaces() {\n if (playableRaces !== null) {\n return Object.keys(playableRaces)\n .map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"option\", { key: i, value: playableRaces[item].identifier }, `${playableRaces[item].name_selection} (${playableRaces[item].description})`);\n });\n }\n return ([]);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-container\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-contained\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, \"Crea tu personaje.\"),\n (props.error !== null\n ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { style: { background: 'red' } }, props.error))\n : (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-form\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Nombre largo. (Se usar\\u00E1 en la historia en situaciones formales)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: longNameInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Nombre corto. (Se usar\\u00E1 de forma coloquial)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: shortNameInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Apodo. (Se usar\\u00E1 en las conversaciones m\\u00E1s distendidas)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: nickInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Raza. (Determina tu localizaci\\u00F3n inicial y tus estad\\u00EDsticas)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"select\", { ref: raceSelectRef }, renderRaces()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"width-max-content align-self-end\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: createPJ }, \"Crear Personaje\")))))));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/pj-creation-menu.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ PJCreationMenu)\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_pj__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @lastres/pj */ \"./js-src/pj.ts\");\n\n\nfunction PJCreationMenu(props) {\n const longNameInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const shortNameInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const nickInputRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const raceSelectRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [playableRaces, setPlayableRaces] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n if (playableRaces === null) {\n fetch('/races/playable', {\n method: 'GET',\n mode: 'same-origin',\n cache: 'no-cache'\n }).then(async (response) => {\n const statusCode = response.status;\n const data = await response.json();\n if (statusCode !== 200) {\n props.setError(data.error);\n return;\n }\n setPlayableRaces(data);\n props.setError(null);\n }).catch((error) => {\n console.log(error);\n props.setError('Imposible conectar al servidor para recibir las razas.');\n });\n }\n function createPJ() {\n if (longNameInputRef.current === null) {\n return;\n }\n if (shortNameInputRef.current === null) {\n return;\n }\n if (nickInputRef.current === null) {\n return;\n }\n if (raceSelectRef.current === null || raceSelectRef.current.selectedOptions.length < 1) {\n return;\n }\n fetch('/pj/create', {\n method: 'POST',\n mode: 'same-origin',\n cache: 'no-cache',\n body: JSON.stringify({\n full_name: longNameInputRef.current.value,\n short_name: shortNameInputRef.current.value,\n nick: nickInputRef.current.value,\n race: raceSelectRef.current.selectedOptions[0].value\n })\n }).then(async (response) => {\n const statusCode = response.status;\n const data = await response.json();\n if (statusCode !== 200) {\n props.setError(data.error);\n return;\n }\n props.setError(null);\n props.setUserWantsToCreatePJ(false);\n const pjs = await (0,_lastres_pj__WEBPACK_IMPORTED_MODULE_1__.fetchMyPjs)(props.setError);\n props.setPJs(pjs);\n }).catch((error) => {\n console.log(error);\n props.setError('Imposible crear pj, no se pudo conectar al servidor.');\n });\n }\n function renderRaces() {\n if (playableRaces !== null) {\n return Object.keys(playableRaces)\n .map((item, i) => {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"option\", { key: i, value: playableRaces[item].identifier }, `${playableRaces[item].name_selection} (${playableRaces[item].description})`);\n });\n }\n return ([]);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-container\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-contained\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"close-button\", onClick: () => {\n props.setUserWantsToCreatePJ(false);\n } }, \"x\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, \"Crea tu personaje.\"),\n (props.error !== null\n ? (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { style: { background: 'red' } }, props.error))\n : (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"login-form\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Nombre largo. (Se usar\\u00E1 en la historia en situaciones formales)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: longNameInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Nombre corto. (Se usar\\u00E1 de forma coloquial)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: shortNameInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Apodo. (Se usar\\u00E1 en las conversaciones m\\u00E1s distendidas)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { ref: nickInputRef, type: \"text\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"label\", null, \"Raza. (Determina tu localizaci\\u00F3n inicial y tus estad\\u00EDsticas)\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"select\", { ref: raceSelectRef }, renderRaces()),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"width-max-content align-self-end\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: createPJ }, \"Crear Personaje\")))))));\n}\n\n\n//# sourceURL=webpack://LasTres/./js-src/components/pj-creation-menu.tsx?"); /***/ }),