sergiotarxz/burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving readbility of the javascript.

Browse Source
This commit is contained in:
Sergiotarxz 2023-11-20 21:21:50 +01:00
parent d6d827fe8d
commit f3f111060b
2 changed files with 98 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
js-src/conquer/index.ts
View File

@ -1,15 +1,18 @@
import Map from "ol/Map"; import Map from "ol/Map"
import View from "ol/View"; import View from "ol/View"
import Projection from "ol/proj/Projection.js"; import Projection from "ol/proj/Projection.js"
import TileLayer from 'ol/layer/Tile' import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM' import OSM from 'ol/source/OSM'
import * as olProj from "ol/proj"; import * as olProj from "ol/proj"
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
export default class Conquer { export default class Conquer {
private conquerContainer: HTMLDivElement; private conquerContainer: HTMLDivElement
private map: Map; private map: Map
private currentLongitude: number; private currentLongitude: number
private currentLatitude: number; private currentLatitude: number
private rotationOffset = 0; private rotationOffset = 0
private heading = 0 private heading = 0
private disableSetRotationOffset = false private disableSetRotationOffset = false
private conquerLogin: HTMLDivElement private conquerLogin: HTMLDivElement
@ -26,18 +29,19 @@ export default class Conquer {
private conquerRegisterRepeatPassword: HTMLInputElement private conquerRegisterRepeatPassword: HTMLInputElement
private conquerRegisterSubmit: HTMLButtonElement private conquerRegisterSubmit: HTMLButtonElement
private conquerRegisterError: HTMLParagraphElement private conquerRegisterError: HTMLParagraphElement
private alpha = 0; private currentPositionFeature: Feature | null
private beta = 0; private alpha = 0
private gamma = 0; private beta = 0
private gamma = 0
static start() { static start() {
const conquerContainer = document.querySelector(".conquer-container"); const conquerContainer = document.querySelector(".conquer-container")
if (conquerContainer !== null) { if (conquerContainer !== null) {
if (!(conquerContainer instanceof HTMLDivElement)) { if (!(conquerContainer instanceof HTMLDivElement)) {
console.error(".conquer-container is not a div."); console.error(".conquer-container is not a div.")
return; return
} }
const conquer = new Conquer(conquerContainer); const conquer = new Conquer(conquerContainer)
conquer.run(); conquer.run()
} }
} }
setCenterDisplaced(lat: number, lon: number) { setCenterDisplaced(lat: number, lon: number) {
@ -94,12 +98,12 @@ export default class Conquer {
this.conquerLoginSubmit.addEventListener('click', (event: Event) => { this.conquerLoginSubmit.addEventListener('click', (event: Event) => {
event.preventDefault() event.preventDefault()
this.onLoginRequested() this.onLoginRequested()
}); })
} }
async onLoginRequested(): Promise<void> { async onLoginRequested(): Promise<void> {
const username = this.conquerLoginUsername.value; const username = this.conquerLoginUsername.value
const password = this.conquerLoginPassword.value; const password = this.conquerLoginPassword.value
const urlUser = new URL('/conquer/user/login', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port) const urlUser = new URL('/conquer/user/login', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
let responseJson let responseJson
let status let status
@ -116,28 +120,28 @@ export default class Conquer {
} catch(e) { } catch(e) {
console.error(e) console.error(e)
this.addNewLoginError('El servidor ha enviado datos inesperados.') this.addNewLoginError('El servidor ha enviado datos inesperados.')
return; return
} }
if (status !== 200) { if (status !== 200) {
this.addNewLoginError(responseJson.error) this.addNewLoginError(responseJson.error)
return return
} }
this.unsetLoginAndRegisterErrors() this.unsetLoginAndRegisterErrors()
const isLogged = await this.isLogged(); const isLogged = await this.isLogged()
if (isLogged) { if (isLogged) {
await this.removeLoginRegisterCombo() await this.removeLoginRegisterCombo()
} }
} }
async goToRegister(): Promise<void> { async goToRegister(): Promise<void> {
const isLogged = await this.isLogged(); const isLogged = await this.isLogged()
await this.removeLoginRegisterCombo() await this.removeLoginRegisterCombo()
if (!isLogged) { if (!isLogged) {
this.conquerRegister.classList.remove('conquer-display-none') this.conquerRegister.classList.remove('conquer-display-none')
} }
} }
async goToLogin(): Promise<void> { async goToLogin(): Promise<void> {
const isLogged = await this.isLogged(); const isLogged = await this.isLogged()
await this.removeLoginRegisterCombo() await this.removeLoginRegisterCombo()
if (!isLogged) { if (!isLogged) {
this.conquerLogin.classList.remove('conquer-display-none') this.conquerLogin.classList.remove('conquer-display-none')
@ -221,7 +225,7 @@ export default class Conquer {
} catch(e) { } catch(e) {
console.error(e) console.error(e)
this.addNewRegisterError('El servidor ha enviado datos inesperados.') this.addNewRegisterError('El servidor ha enviado datos inesperados.')
return; return
} }
if (status !== 200) { if (status !== 200) {
this.addNewRegisterError(responseJson.error) this.addNewRegisterError(responseJson.error)
@ -251,27 +255,27 @@ export default class Conquer {
async run() { async run() {
this.fillConquerLogin() this.fillConquerLogin()
this.fillConquerRegister() this.fillConquerRegister()
const isLogged = await this.isLogged(); const isLogged = await this.isLogged()
if (!isLogged) { if (!isLogged) {
this.conquerLogin.classList.remove('conquer-display-none') this.conquerLogin.classList.remove('conquer-display-none')
} }
const conquerContainer = this.conquerContainer; const conquerContainer = this.conquerContainer
//layer.on('prerender', (evt) => { //layer.on('prerender', (evt) => {
// // return // // return
// if (evt.context) { // if (evt.context) {
// const context = evt.context as CanvasRenderingContext2D; // const context = evt.context as CanvasRenderingContext2D
// context.filter = 'grayscale(80%) invert(100%) '; // context.filter = 'grayscale(80%) invert(100%) '
// context.globalCompositeOperation = 'source-over'; // context.globalCompositeOperation = 'source-over'
// } // }
//}); //})
//layer.on('postrender', (evt) => { //layer.on('postrender', (evt) => {
// if (evt.context) { // if (evt.context) {
// const context = evt.context as CanvasRenderingContext2D; // const context = evt.context as CanvasRenderingContext2D
// context.filter = 'none'; // context.filter = 'none'
// } // }
//}); //})
olProj.useGeographic(); olProj.useGeographic()
this.map = new Map({ this.map = new Map({
target: conquerContainer, target: conquerContainer,
layers: [ layers: [
@ -283,33 +287,45 @@ export default class Conquer {
zoom: 21, zoom: 21,
maxZoom: 22, maxZoom: 22,
}), }),
}); })
const proccessLocation = (location: GeolocationPosition) => { this.setLocationChangeTriggers()
this.currentLatitude = location.coords.latitude this.setRotationChangeTriggers()
this.currentLongitude = location. coords.longitude }
if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) {
this.disableSetRotationOffset = true setRotationChangeTriggers(): void {
this.heading = location.coords.heading if (window.DeviceOrientationEvent) {
this.rotationOffset = this.compassHeading(this.alpha, this.beta, this.gamma) + (location.coords.heading*Math.PI*2)/360 window.addEventListener("deviceorientation", (event) => {
} if (event.alpha !== null && event.beta !== null && event.gamma !== null) {
this.setCenterDisplaced(this.currentLatitude, this.currentLongitude) this.onRotate(event.alpha, event.beta, event.gamma)
}
}, true)
} }
this.setCenterDisplaced(37.58237, -5.96766) }
navigator.geolocation.watchPosition((location) => {
proccessLocation(location) processLocation(location: GeolocationPosition) {
}, (err) => { this.currentLatitude = location.coords.latitude
return this.currentLongitude = location. coords.longitude
}, { if (location.coords.heading !== null && (this.alpha != 0 || this.beta != 0 || this.gamma != 0) && !this.disableSetRotationOffset) {
enableHighAccuracy: true, this.disableSetRotationOffset = true
maximumAge: 0 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)
const currentPositionFeature = new Feature({
type: 'currentPositionFeature',
geometry: new Point([this.currentLatitude, this.currentLongitude])
})
this.currentPositionFeature = currentPositionFeature
}
}
setLocationChangeTriggers(): void {
window.setInterval(() => { window.setInterval(() => {
this.disableSetRotationOffset = false this.disableSetRotationOffset = false
}, 10000); }, 10000)
this.currentPositionFeature = null
window.setTimeout(() => { window.setTimeout(() => {
window.setInterval(() => { window.setInterval(() => {
navigator.geolocation.getCurrentPosition((location) => { navigator.geolocation.getCurrentPosition((location) => {
proccessLocation(location) this.processLocation(location)
}, () => { }, () => {
return return
}, { }, {
@ -318,37 +334,26 @@ export default class Conquer {
}) })
}, 1000) }, 1000)
}, 1000) }, 1000)
if (window.DeviceOrientationEvent) { this.setCenterDisplaced(37.58237, -5.96766)
window.addEventListener("deviceorientation", (event) => { navigator.geolocation.watchPosition((location) => {
if (event.alpha !== null && event.beta !== null && event.gamma !== null) { this.processLocation(location)
this.onRotate(event.alpha, event.beta, event.gamma); }, (err) => {
} return
}, true); }, {
} enableHighAccuracy: true,
maximumAge: 0
})
} }
realCoordinatesToOl(lat: number, lon: number): number[] { realCoordinatesToOl(lat: number, lon: number): number[] {
return olProj.transform( return olProj.transform(
[lon, lat], [lon, lat],
new Projection({ code: "WGS84" }), new Projection({ code: "WGS84" }),
new Projection({ code: "EPSG:900913" }), new Projection({ code: "EPSG:900913" }),
); )
} }
compassHeading(alpha:number, beta:number, gamma:number): number { compassHeading(alpha:number, beta:number, gamma:number): number {
const alphaRad = alpha * (Math.PI / 180); const alphaRad = alpha * (Math.PI / 180)
return alphaRad return alphaRad
let betaRad = beta * (Math.PI / 180);
const gammaRad = gamma * (Math.PI / 180);
betaRad = 1.5707963268;
const cA = Math.cos(alphaRad);
const sA = Math.sin(alphaRad);
const sB = Math.sin(betaRad);
const cG = Math.cos(gammaRad);
const sG = Math.sin(gammaRad);
const rA = - cA * sG - sA * sB * cG;
const rB = - sA * sG + cA * sB * cG;
return Math.atan2(rA, rB)
} }
logToServer(logValue: string) { logToServer(logValue: string) {
@ -360,7 +365,7 @@ export default class Conquer {
console.error(error) console.error(error)
}) })
} }
enabledOnRotate = true; enabledOnRotate = true
onRotate(alpha: number, beta: number, gamma: number) { onRotate(alpha: number, beta: number, gamma: number) {
if (this.enabledOnRotate) { if (this.enabledOnRotate) {
this.alpha = alpha this.alpha = alpha
@ -377,7 +382,7 @@ export default class Conquer {
this.setCenterDisplaced(this.currentLatitude, this.currentLongitude) this.setCenterDisplaced(this.currentLatitude, this.currentLongitude)
} }
constructor(conquerContainer: HTMLDivElement) { constructor(conquerContainer: HTMLDivElement) {
this.conquerContainer = conquerContainer; this.conquerContainer = conquerContainer
} }
private async addNewLoginRegisterError(message: string): Promise<void> { private async addNewLoginRegisterError(message: string): Promise<void> {
this.addNewRegisterError(message) this.addNewRegisterError(message)
@ -385,7 +390,7 @@ export default class Conquer {
} }
private async isLogged(): Promise<boolean> { private async isLogged(): Promise<boolean> {
const urlUser = new URL('/conquer/user', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port) const urlUser = new URL('/conquer/user', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
let responseJson; let responseJson
let status let status
try { try {
const response = await fetch(urlUser) const response = await fetch(urlUser)

13
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long