burguillos.info/js-src/conquer/index.ts

import Map from "ol/Map";
import View from "ol/View";
import Projection from "ol/proj/Projection.js";
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import * as olProj from "ol/proj";
export default class Conquer {
    private conquerContainer: HTMLDivElement;
    private map: Map;
    private currentLongitude: number;
    private currentLatitude: number;
    private rotationOffset = 0;
    private disableSetRotationOffset = false
    private alpha = 0;
    private beta = 0;
    private gamma = 0;
    static start() {
        const conquerContainer = document.querySelector(".conquer-container");
        window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
            alert("Error occured: " + errorMsg);//or any message
            return false;
        }
        if (conquerContainer !== null) {
            if (!(conquerContainer instanceof HTMLDivElement)) {
                console.error(".conquer-container is not a div.");
                return;
            }
            const conquer = new Conquer(conquerContainer);
            conquer.run();
        }
    }
    setCenterDisplaced(lat: number, lon: number) {
        const olCoordinates = this.realCoordinatesToOl(lat, lon)
        const size = this.map.getSize()
        if (size === undefined) {
            return
        }
        this.map.getView().centerOn(olCoordinates, size, [size[0]/2, size[1]-60])
    }
    async run() {
        const isLogged = await this.isLogged();
        if (!isLogged) {
            const conquerLogin = document.querySelector('.conquer-login')
            if (conquerLogin === null) {
                return
            }
            conquerLogin.classList.remove('conquer-display-none')
        }
        const conquerContainer = this.conquerContainer;
        //layer.on('prerender', (evt) => {
        //  // return
        //    if (evt.context) {
        //        const context = evt.context as CanvasRenderingContext2D;
        //    context.filter = 'grayscale(80%) invert(100%) ';
        //    context.globalCompositeOperation = 'source-over';
        //    }
        //});

        //layer.on('postrender', (evt) => {
        //  if (evt.context) {
        //    const context = evt.context as CanvasRenderingContext2D;
        //    context.filter = 'none';
        //  }
        //});
        olProj.useGeographic();
        this.map = new Map({
            target: conquerContainer,
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                zoom: 21,
                maxZoom: 22,
            }),
        });
        this.setCenterDisplaced(37.58237, -5.96766)
        navigator.geolocation.watchPosition((location) => {
            this.setCenterDisplaced(location.coords.latitude, location.coords.longitude);
        }, (err) => {
            alert(err.message)
        }, {
            enableHighAccuracy: true
        });
        window.setInterval(() => {
            this.disableSetRotationOffset = false
        }, 10000);
        window.setTimeout(() => {
            window.setInterval(() => {
                navigator.geolocation.getCurrentPosition((location) => {
                    this.currentLatitude =  location.coords.latitude
                    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.setCenterDisplaced(this.currentLatitude, this.currentLongitude)
                }, () => {
                }, {
                    enableHighAccuracy: true
                })
            }, 1000)
        }, 1000)
        if (window.DeviceOrientationEvent) {
            window.addEventListener("deviceorientation", (event) => {
                if (event.alpha !== null && event.beta !== null && event.gamma !== null) {
                    this.onRotate(event.alpha, event.beta, event.gamma);
                }
            }, true);
        }
    }
    realCoordinatesToOl(lat: number, lon: number): number[] {
        return olProj.transform(
            [lon, lat],
            new Projection({ code: "WGS84" }),
            new Projection({ code: "EPSG:900913" }),
        );
    }
    compassHeading(alpha:number, beta:number, gamma:number): number {
        const alphaRad = -alpha * (Math.PI / 180);
        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) {
        const urlLog = new URL('/conquer/log', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
        urlLog.searchParams.append('log', logValue) 
        fetch(urlLog).then(() => {
            return
        }).catch((error) => {
            console.error(error)
        })
    }
    enabledOnRotate = true;
    onRotate(alpha: number, beta: number, gamma: number) {
        if (this.enabledOnRotate) {
            this.alpha = alpha
            this.beta = beta 
            this.gamma = gamma 
            this.enabledOnRotate = false
	    this.map.getView().setRotation(this.compassHeading(alpha, beta, gamma) + this.rotationOffset)

	    
            window.setTimeout(() => {
                this.enabledOnRotate = true
            }, 10)
        }
        this.setCenterDisplaced(this.currentLatitude, this.currentLongitude)
    }
    constructor(conquerContainer: HTMLDivElement) {
        this.conquerContainer = conquerContainer;
    }
    private async isLogged(): Promise<boolean> {
        return false 
        // return fetch("/conquer/user")
        //    .then(async (res): Promise<boolean> => {
        //        const data = await res.json();
        //        if (data === null) {
        //            return false;
        //        }
        //        return true;
        //    })
        //    .catch((error) => {
        //        console.error(error);
        //        return false;
        //    });
    }
}