From 2d1430ca8758cd51b5cdf47f7b7bc8f3c4de9c7a Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Mon, 13 Nov 2023 21:13:21 +0100 Subject: [PATCH] Multiple bug fixes and adding initial UI support for register and login. --- js-src/conquer/index.ts | 62 +++++++++++++++++++++++++++------ public/css/styles.css | 2 +- public/css/styles.scss | 2 +- public/js/bundle.js | 2 +- templates/conquer/index.html.ep | 10 ++++++ 5 files changed, 65 insertions(+), 13 deletions(-) diff --git a/js-src/conquer/index.ts b/js-src/conquer/index.ts index 0ad59d3..85791e0 100644 --- a/js-src/conquer/index.ts +++ b/js-src/conquer/index.ts @@ -10,7 +10,11 @@ export default class Conquer { private currentLongitude: number; private currentLatitude: number; private rotationOffset = 0; + private heading = 0 private disableSetRotationOffset = false + private conquerLogin: HTMLDivElement + private conquerLoginGoToRegister: HTMLAnchorElement + private conquerRegister: HTMLDivElement private alpha = 0; private beta = 0; private gamma = 0; @@ -37,14 +41,51 @@ export default class Conquer { } this.map.getView().centerOn(olCoordinates, size, [size[0]/2, size[1]-60]) } + static fail(error: string): never { + alert('Error de interfaz') + throw new Error(error) + } + fillConquerLogin() { + const conquerLogin = document.querySelector('.conquer-login') + if (conquerLogin === null || !(conquerLogin instanceof HTMLDivElement)) { + Conquer.fail('conquerLogin is invalid') + } + this.conquerLogin = conquerLogin + const conquerLoginGoToRegister = document.querySelector('.conquer-login-go-to-register') + if (conquerLoginGoToRegister === null || !(conquerLoginGoToRegister instanceof HTMLAnchorElement)) { + Conquer.fail('Link to go to register from login is invalid.') + } + this.conquerLoginGoToRegister = conquerLoginGoToRegister + this.conquerLoginGoToRegister.addEventListener('click', () => { + this.goToRegister() + }) + } + async goToRegister(): Promise { + const isLogged = await this.isLogged(); + await this.removeLoginRegisterCombo() + if (!isLogged) { + this.conquerRegister.classList.remove('conquer-display-none') + } + } + + async removeLoginRegisterCombo(): Promise { + this.conquerLogin.classList.add('conquer-display-none') + this.conquerRegister.classList.add('conquer-display-none') + } + + fillConquerRegister() { + const conquerRegister = document.querySelector('.conquer-register') + if (conquerRegister === null || !(conquerRegister instanceof HTMLDivElement)) { + Conquer.fail('conquerRegister is invalid') + } + this.conquerRegister = conquerRegister + } async run() { + this.fillConquerLogin() + this.fillConquerRegister() const isLogged = await this.isLogged(); if (!isLogged) { - const conquerLogin = document.querySelector('.conquer-login') - if (conquerLogin === null) { - return - } - conquerLogin.classList.remove('conquer-display-none') + this.conquerLogin.classList.remove('conquer-display-none') } const conquerContainer = this.conquerContainer; //layer.on('prerender', (evt) => { @@ -79,13 +120,12 @@ export default class Conquer { navigator.geolocation.watchPosition((location) => { this.setCenterDisplaced(location.coords.latitude, location.coords.longitude); }, (err) => { - alert(err.message) }, { enableHighAccuracy: true }); window.setInterval(() => { this.disableSetRotationOffset = false - }, 10000); + },10000); window.setTimeout(() => { window.setInterval(() => { navigator.geolocation.getCurrentPosition((location) => { @@ -93,7 +133,8 @@ export default class Conquer { this.currentLongitude = location. coords.longitude if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) { this.disableSetRotationOffset = true - this.rotationOffset = location.coords.heading*2*Math.PI/360 - this.compassHeading(this.alpha, this.beta, this.gamma) + this.heading = location.coords.heading + this.rotationOffset = this.compassHeading(this.alpha, this.beta, this.gamma) + (location.coords.heading*Math.PI*2)/360 } this.setCenterDisplaced(this.currentLatitude, this.currentLongitude) }, () => { @@ -118,7 +159,8 @@ export default class Conquer { ); } compassHeading(alpha:number, beta:number, gamma:number): number { - const alphaRad = -alpha * (Math.PI / 180); + const alphaRad = alpha * (Math.PI / 180); + return alphaRad let betaRad = beta * (Math.PI / 180); const gammaRad = gamma * (Math.PI / 180); betaRad = 1.5707963268; @@ -150,7 +192,7 @@ export default class Conquer { this.beta = beta this.gamma = gamma this.enabledOnRotate = false - this.map.getView().setRotation(this.compassHeading(alpha, beta, gamma) + this.rotationOffset) + this.map.getView().setRotation((this.compassHeading(alpha, beta, gamma) - this.rotationOffset)) window.setTimeout(() => { diff --git a/public/css/styles.css b/public/css/styles.css index 599c582..375c1ca 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -8,7 +8,7 @@ body { min-height: 100%; width: 100%; height: 100%; } - body div.conquer-login { + body div.conquer-login, body div.conquer-register { position: fixed; color: black; font-size: 25px; diff --git a/public/css/styles.scss b/public/css/styles.scss index 0228d37..1f5b308 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -16,7 +16,7 @@ html { } body { - div.conquer-login { + div.conquer-login,div.conquer-register { position: fixed; color: black; font-size: 25px; diff --git a/public/js/bundle.js b/public/js/bundle.js index 6a2b10d..1cb2f88 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -47,7 +47,7 @@ eval(";(function() {\n function Tablesort(el, options) {\n if (!(this instan /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Conquer)\n/* harmony export */ });\n/* harmony import */ var ol_Map__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ol/Map */ \"./node_modules/ol/Map.js\");\n/* harmony import */ var ol_View__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ol/View */ \"./node_modules/ol/View.js\");\n/* harmony import */ var ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ol/proj/Projection.js */ \"./node_modules/ol/proj/Projection.js\");\n/* harmony import */ var ol_layer_Tile__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ol/layer/Tile */ \"./node_modules/ol/layer/Tile.js\");\n/* harmony import */ var ol_source_OSM__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ol/source/OSM */ \"./node_modules/ol/source/OSM.js\");\n/* harmony import */ var ol_proj__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ol/proj */ \"./node_modules/ol/proj.js\");\n\n\n\n\n\n\nclass Conquer {\n static start() {\n const conquerContainer = document.querySelector(\".conquer-container\");\n window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {\n alert(\"Error occured: \" + errorMsg); //or any message\n return false;\n };\n if (conquerContainer !== null) {\n if (!(conquerContainer instanceof HTMLDivElement)) {\n console.error(\".conquer-container is not a div.\");\n return;\n }\n const conquer = new Conquer(conquerContainer);\n conquer.run();\n }\n }\n setCenterDisplaced(lat, lon) {\n const olCoordinates = this.realCoordinatesToOl(lat, lon);\n const size = this.map.getSize();\n if (size === undefined) {\n return;\n }\n this.map.getView().centerOn(olCoordinates, size, [size[0] / 2, size[1] - 60]);\n }\n async run() {\n const isLogged = await this.isLogged();\n if (!isLogged) {\n const conquerLogin = document.querySelector('.conquer-login');\n if (conquerLogin === null) {\n return;\n }\n conquerLogin.classList.remove('conquer-display-none');\n }\n const conquerContainer = this.conquerContainer;\n //layer.on('prerender', (evt) => {\n // // return\n // if (evt.context) {\n // const context = evt.context as CanvasRenderingContext2D;\n // context.filter = 'grayscale(80%) invert(100%) ';\n // context.globalCompositeOperation = 'source-over';\n // }\n //});\n //layer.on('postrender', (evt) => {\n // if (evt.context) {\n // const context = evt.context as CanvasRenderingContext2D;\n // context.filter = 'none';\n // }\n //});\n ol_proj__WEBPACK_IMPORTED_MODULE_0__.useGeographic();\n this.map = new ol_Map__WEBPACK_IMPORTED_MODULE_1__[\"default\"]({\n target: conquerContainer,\n layers: [\n new ol_layer_Tile__WEBPACK_IMPORTED_MODULE_2__[\"default\"]({\n source: new ol_source_OSM__WEBPACK_IMPORTED_MODULE_3__[\"default\"]()\n })\n ],\n view: new ol_View__WEBPACK_IMPORTED_MODULE_4__[\"default\"]({\n zoom: 21,\n maxZoom: 22,\n }),\n });\n this.setCenterDisplaced(37.58237, -5.96766);\n navigator.geolocation.watchPosition((location) => {\n this.setCenterDisplaced(location.coords.latitude, location.coords.longitude);\n }, (err) => {\n alert(err.message);\n }, {\n enableHighAccuracy: true\n });\n window.setInterval(() => {\n this.disableSetRotationOffset = false;\n }, 10000);\n window.setTimeout(() => {\n window.setInterval(() => {\n navigator.geolocation.getCurrentPosition((location) => {\n this.currentLatitude = location.coords.latitude;\n this.currentLongitude = location.coords.longitude;\n if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) {\n this.disableSetRotationOffset = true;\n this.rotationOffset = location.coords.heading * 2 * Math.PI / 360 - this.compassHeading(this.alpha, this.beta, this.gamma);\n }\n this.setCenterDisplaced(this.currentLatitude, this.currentLongitude);\n }, () => {\n }, {\n enableHighAccuracy: true\n });\n }, 1000);\n }, 1000);\n if (window.DeviceOrientationEvent) {\n window.addEventListener(\"deviceorientation\", (event) => {\n if (event.alpha !== null && event.beta !== null && event.gamma !== null) {\n this.onRotate(event.alpha, event.beta, event.gamma);\n }\n }, true);\n }\n }\n realCoordinatesToOl(lat, lon) {\n return ol_proj__WEBPACK_IMPORTED_MODULE_0__.transform([lon, lat], new ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]({ code: \"WGS84\" }), new ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]({ code: \"EPSG:900913\" }));\n }\n compassHeading(alpha, beta, gamma) {\n const alphaRad = -alpha * (Math.PI / 180);\n let betaRad = beta * (Math.PI / 180);\n const gammaRad = gamma * (Math.PI / 180);\n betaRad = 1.5707963268;\n const cA = Math.cos(alphaRad);\n const sA = Math.sin(alphaRad);\n const sB = Math.sin(betaRad);\n const cG = Math.cos(gammaRad);\n const sG = Math.sin(gammaRad);\n const rA = -cA * sG - sA * sB * cG;\n const rB = -sA * sG + cA * sB * cG;\n return Math.atan2(rA, rB);\n }\n logToServer(logValue) {\n const urlLog = new URL('/conquer/log', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port);\n urlLog.searchParams.append('log', logValue);\n fetch(urlLog).then(() => {\n return;\n }).catch((error) => {\n console.error(error);\n });\n }\n onRotate(alpha, beta, gamma) {\n if (this.enabledOnRotate) {\n this.alpha = alpha;\n this.beta = beta;\n this.gamma = gamma;\n this.enabledOnRotate = false;\n this.map.getView().setRotation(this.compassHeading(alpha, beta, gamma) + this.rotationOffset);\n window.setTimeout(() => {\n this.enabledOnRotate = true;\n }, 10);\n }\n this.setCenterDisplaced(this.currentLatitude, this.currentLongitude);\n }\n constructor(conquerContainer) {\n this.rotationOffset = 0;\n this.disableSetRotationOffset = false;\n this.alpha = 0;\n this.beta = 0;\n this.gamma = 0;\n this.enabledOnRotate = true;\n this.conquerContainer = conquerContainer;\n }\n async isLogged() {\n return false;\n // return fetch(\"/conquer/user\")\n // .then(async (res): Promise => {\n // const data = await res.json();\n // if (data === null) {\n // return false;\n // }\n // return true;\n // })\n // .catch((error) => {\n // console.error(error);\n // return false;\n // });\n }\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/conquer/index.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Conquer)\n/* harmony export */ });\n/* harmony import */ var ol_Map__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ol/Map */ \"./node_modules/ol/Map.js\");\n/* harmony import */ var ol_View__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ol/View */ \"./node_modules/ol/View.js\");\n/* harmony import */ var ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ol/proj/Projection.js */ \"./node_modules/ol/proj/Projection.js\");\n/* harmony import */ var ol_layer_Tile__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ol/layer/Tile */ \"./node_modules/ol/layer/Tile.js\");\n/* harmony import */ var ol_source_OSM__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ol/source/OSM */ \"./node_modules/ol/source/OSM.js\");\n/* harmony import */ var ol_proj__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ol/proj */ \"./node_modules/ol/proj.js\");\n\n\n\n\n\n\nclass Conquer {\n static start() {\n const conquerContainer = document.querySelector(\".conquer-container\");\n window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {\n alert(\"Error occured: \" + errorMsg); //or any message\n return false;\n };\n if (conquerContainer !== null) {\n if (!(conquerContainer instanceof HTMLDivElement)) {\n console.error(\".conquer-container is not a div.\");\n return;\n }\n const conquer = new Conquer(conquerContainer);\n conquer.run();\n }\n }\n setCenterDisplaced(lat, lon) {\n const olCoordinates = this.realCoordinatesToOl(lat, lon);\n const size = this.map.getSize();\n if (size === undefined) {\n return;\n }\n this.map.getView().centerOn(olCoordinates, size, [size[0] / 2, size[1] - 60]);\n }\n static fail(error) {\n alert('Error de interfaz');\n throw new Error(error);\n }\n fillConquerLogin() {\n const conquerLogin = document.querySelector('.conquer-login');\n if (conquerLogin === null || !(conquerLogin instanceof HTMLDivElement)) {\n Conquer.fail('conquerLogin is invalid');\n }\n this.conquerLogin = conquerLogin;\n const conquerLoginGoToRegister = document.querySelector('.conquer-login-go-to-register');\n if (conquerLoginGoToRegister === null || !(conquerLoginGoToRegister instanceof HTMLAnchorElement)) {\n Conquer.fail('Link to go to register from login is invalid.');\n }\n this.conquerLoginGoToRegister = conquerLoginGoToRegister;\n this.conquerLoginGoToRegister.addEventListener('click', () => {\n this.goToRegister();\n });\n }\n async goToRegister() {\n const isLogged = await this.isLogged();\n await this.removeLoginRegisterCombo();\n if (!isLogged) {\n this.conquerRegister.classList.remove('conquer-display-none');\n }\n }\n async removeLoginRegisterCombo() {\n this.conquerLogin.classList.add('conquer-display-none');\n this.conquerRegister.classList.add('conquer-display-none');\n }\n fillConquerRegister() {\n const conquerRegister = document.querySelector('.conquer-register');\n if (conquerRegister === null || !(conquerRegister instanceof HTMLDivElement)) {\n Conquer.fail('conquerRegister is invalid');\n }\n this.conquerRegister = conquerRegister;\n }\n async run() {\n this.fillConquerLogin();\n this.fillConquerRegister();\n const isLogged = await this.isLogged();\n if (!isLogged) {\n this.conquerLogin.classList.remove('conquer-display-none');\n }\n const conquerContainer = this.conquerContainer;\n //layer.on('prerender', (evt) => {\n // // return\n // if (evt.context) {\n // const context = evt.context as CanvasRenderingContext2D;\n // context.filter = 'grayscale(80%) invert(100%) ';\n // context.globalCompositeOperation = 'source-over';\n // }\n //});\n //layer.on('postrender', (evt) => {\n // if (evt.context) {\n // const context = evt.context as CanvasRenderingContext2D;\n // context.filter = 'none';\n // }\n //});\n ol_proj__WEBPACK_IMPORTED_MODULE_0__.useGeographic();\n this.map = new ol_Map__WEBPACK_IMPORTED_MODULE_1__[\"default\"]({\n target: conquerContainer,\n layers: [\n new ol_layer_Tile__WEBPACK_IMPORTED_MODULE_2__[\"default\"]({\n source: new ol_source_OSM__WEBPACK_IMPORTED_MODULE_3__[\"default\"]()\n })\n ],\n view: new ol_View__WEBPACK_IMPORTED_MODULE_4__[\"default\"]({\n zoom: 21,\n maxZoom: 22,\n }),\n });\n this.setCenterDisplaced(37.58237, -5.96766);\n navigator.geolocation.watchPosition((location) => {\n this.setCenterDisplaced(location.coords.latitude, location.coords.longitude);\n }, (err) => {\n }, {\n enableHighAccuracy: true\n });\n window.setInterval(() => {\n this.disableSetRotationOffset = false;\n }, 10000);\n window.setTimeout(() => {\n window.setInterval(() => {\n navigator.geolocation.getCurrentPosition((location) => {\n this.currentLatitude = location.coords.latitude;\n this.currentLongitude = location.coords.longitude;\n if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) {\n this.disableSetRotationOffset = true;\n this.heading = location.coords.heading;\n this.rotationOffset = this.compassHeading(this.alpha, this.beta, this.gamma) + (location.coords.heading * Math.PI * 2) / 360;\n }\n this.setCenterDisplaced(this.currentLatitude, this.currentLongitude);\n }, () => {\n }, {\n enableHighAccuracy: true\n });\n }, 1000);\n }, 1000);\n if (window.DeviceOrientationEvent) {\n window.addEventListener(\"deviceorientation\", (event) => {\n if (event.alpha !== null && event.beta !== null && event.gamma !== null) {\n this.onRotate(event.alpha, event.beta, event.gamma);\n }\n }, true);\n }\n }\n realCoordinatesToOl(lat, lon) {\n return ol_proj__WEBPACK_IMPORTED_MODULE_0__.transform([lon, lat], new ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]({ code: \"WGS84\" }), new ol_proj_Projection_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]({ code: \"EPSG:900913\" }));\n }\n compassHeading(alpha, beta, gamma) {\n const alphaRad = alpha * (Math.PI / 180);\n return alphaRad;\n let betaRad = beta * (Math.PI / 180);\n const gammaRad = gamma * (Math.PI / 180);\n betaRad = 1.5707963268;\n const cA = Math.cos(alphaRad);\n const sA = Math.sin(alphaRad);\n const sB = Math.sin(betaRad);\n const cG = Math.cos(gammaRad);\n const sG = Math.sin(gammaRad);\n const rA = -cA * sG - sA * sB * cG;\n const rB = -sA * sG + cA * sB * cG;\n return Math.atan2(rA, rB);\n }\n logToServer(logValue) {\n const urlLog = new URL('/conquer/log', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port);\n urlLog.searchParams.append('log', logValue);\n fetch(urlLog).then(() => {\n return;\n }).catch((error) => {\n console.error(error);\n });\n }\n onRotate(alpha, beta, gamma) {\n if (this.enabledOnRotate) {\n this.alpha = alpha;\n this.beta = beta;\n this.gamma = gamma;\n this.enabledOnRotate = false;\n this.map.getView().setRotation((this.compassHeading(alpha, beta, gamma) - this.rotationOffset));\n window.setTimeout(() => {\n this.enabledOnRotate = true;\n }, 10);\n }\n this.setCenterDisplaced(this.currentLatitude, this.currentLongitude);\n }\n constructor(conquerContainer) {\n this.rotationOffset = 0;\n this.heading = 0;\n this.disableSetRotationOffset = false;\n this.alpha = 0;\n this.beta = 0;\n this.gamma = 0;\n this.enabledOnRotate = true;\n this.conquerContainer = conquerContainer;\n }\n async isLogged() {\n return false;\n // return fetch(\"/conquer/user\")\n // .then(async (res): Promise => {\n // const data = await res.json();\n // if (data === null) {\n // return false;\n // }\n // return true;\n // })\n // .catch((error) => {\n // console.error(error);\n // return false;\n // });\n }\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/conquer/index.ts?"); /***/ }), diff --git a/templates/conquer/index.html.ep b/templates/conquer/index.html.ep index 8190dbd..afdca51 100644 --- a/templates/conquer/index.html.ep +++ b/templates/conquer/index.html.ep @@ -16,6 +16,16 @@

¿No tienes cuenta aun? +

+ + + + + + + +

¿Ya estás registrado? +