Adding initial conquer support.

.eslintrc.js

@@ -10,7 +10,10 @@ module.exports = {
         sourceType: 'module',
         project: 'tsconfig.json'
     },
-    plugins: [ ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+    root: true,
     rules: {
         indent: ['error', 4, { SwitchCase: 1 }],
     },

Build.PL

@@ -27,6 +27,7 @@ my $build = Module::Build->new(
         'Module::Pluggable'            => 0,
         'List::AllUtils'               => 0,
         'Lingua::Stem::Snowball'       => 0,
+        'Mojo::Redis'                  => 0,
     },
 );
 $build->create_build_script;

js-src/conquer/index.ts

@@ -0,0 +1,180 @@
+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;
+        //    });
+    }
+}

js-src/index.js

@@ -1,11 +1,22 @@
 "use strict";
 import Tablesort from 'tablesort';
+import Conquer from '@burguillosinfo/conquer/index';
 window.Tablesort = require('tablesort');
 require('tablesort/src/sorts/tablesort.number');
 
 let fakeSearchInput
 let searchMobile
+
 document.addEventListener("DOMContentLoaded", function () {
+    onDomContentLoaded();
+}, false);
+
+function onDomContentLoaded() {
+    const path = window.location.pathname
+    if (path.match(/^(?:\/)?conquer(?:$|\/)/)) {
+        Conquer.start();
+        return
+    }
     const menu_expand = document.querySelector('a.menu-expand');
     const mobile_foldable = document.querySelector('nav.mobile-foldable');
     const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide');
@@ -63,8 +74,7 @@ document.addEventListener("DOMContentLoaded", function () {
         fakeSearchInput = searchMobile.querySelector('input')
         addListenersSearch()
     }
-}, false);
+}
-
 function fillFarmaciaGuardia() {
     const farmaciaName = document.querySelector('#farmacia-name');
     const farmaciaAddress = document.querySelector('#farmacia-address');

lib/BurguillosInfo.pm

@@ -50,6 +50,7 @@ sub startup ($self) {
 
     #  $r->get('/:post')->to('Page#post');
     $r->get('/stats')->to('Metrics#stats');
+    $r->get('/conquer')->to('Conquer#index');
     $r->get('/search.json')->to('Search#search');
     $r->get('/farmacia-guardia.json')->to('FarmaciaGuardia#current');
     $r->get('/<:category>.rss')->to('Page#category_rss');

lib/BurguillosInfo/Controller/Conquer.pm

@@ -0,0 +1,15 @@
+package BurguillosInfo::Controller::Conquer;
+
+use v5.34.1;
+
+use strict;
+use warnings;
+
+use utf8;
+
+use Mojo::Base 'Mojolicious::Controller', '-signatures';
+
+sub index($self) {
+    $self->render;
+}
+1;

package.json

@@ -10,17 +10,22 @@
    "author": "",
    "license": "AGPL-v3",
    "devDependencies": {
-      "@typescript-eslint/eslint-plugin": "^5.59.2",
+      "@typescript-eslint/eslint-plugin": "^5.62.0",
-      "@typescript-eslint/parser": "^5.59.2",
+      "@typescript-eslint/parser": "^5.62.0",
-      "eslint": "^8.40.0",
+      "eslint": "^8.53.0",
+      "eslint-config-prettier": "^9.0.0",
       "eslint-plugin-no-relative-import-paths": "^1.5.2",
       "husky": "^8.0.3",
       "lint-staged": "^14.0.1",
       "prettier": "^3.0.3",
-      "typescript": "^5.0.4",
+      "prettier-eslint": "^16.1.2",
+      "typescript": "^5.2.2",
       "webpack-cli": "^5.1.4"
    },
    "dependencies": {
-      "tablesort": "^5.3.0"
+      "babel-loader": "^9.1.3",
+      "ol": "^8.1.0",
+      "tablesort": "^5.3.0",
+      "ts-loader": "^9.5.0"
    }
 }

public/css/styles.css

@@ -8,6 +8,28 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
+  body div.conquer-login {
+    position: fixed;
+    color: black;
+    font-size: 25px;
+    border-radius: 30px;
+    background: darkseagreen;
+    top: calc( 50% - 200px - 10px);
+    left: calc( 50% - 150px - 10px);
+    padding: 10px;
+    justify-content: center;
+    height: 400px;
+    width: 300px;
+    display: flex;
+    z-index: 1;
+    flex-direction: column; }
+  body div.conquer-display-none {
+    display: none; }
+  body div.conquer-container {
+    height: 100dvh;
+    width: 100%; }
+  body div.ol-control {
+    display: none; }
   body span.round-center {
     background: blueviolet;
     color: #FEFEFA;

public/css/styles.scss

@@ -16,6 +16,33 @@ html {
 }
 
 body {
+  div.conquer-login {
+    position: fixed;
+    color: black;
+    font-size: 25px;
+    border-radius: 30px;
+    background: darkseagreen;
+    top: calc( 50% - 200px - 10px );
+    left: calc( 50% - 150px - 10px );
+    padding: 10px;
+    justify-content: center;
+    height: 400px;
+    width: 300px;
+    display: flex;
+    z-index: 1;
+    flex-direction: column;
+
+  }
+  div.conquer-display-none {
+    display: none;
+  }
+  div.conquer-container {
+    height: 100dvh;
+    width: 100%;
+  }
+  div.ol-control {
+        display: none;
+  }
   span.round-center {
     background: $background_div;
     color: $background_sidebar;

templates/conquer/index.html.ep

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+% my $css_version = config 'css_version';
+<html>
+    <head>
+        <title>Conquista Burguillos</title>
+        <script src="/js/bundle.js?v=<%=$css_version%>"></script>
+        <link rel="stylesheet" href="/css/styles.css?v=<%=$css_version%>"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+    <body>
+        <div class="conquer-login conquer-display-none">
+            <label>Nombre de usuario</label>
+            <input class="conquer-login-username"/>
+            <label>Contraseña</label>
+            <input class="conquer-login-password" type="password"/>
+            <button class="conquer-login-sumbit">Iniciar sesión</button>
+            <p>¿No tienes cuenta aun? <a href="#" class="conquer-login-go-to-register">Registrate.</a>
+        </div>
+        <div class="conquer-container">
+        </div>
+    </body>
+</html>

webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
         path: path.resolve(__dirname, 'public/js/')
     },
     resolve: {
-        extensions: ['.js', '.ts'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
         roots: [
             path.resolve(__dirname, 'js-src/')
         ],
@@ -18,10 +18,20 @@ module.exports = {
     },
     module: {
         rules: [
+            {
+                test: /\.(?:tsx|ts)?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            },
             {
                 test: /\.jpe?g|png$/,
                 exclude: /node_modules/,
                 use: ['url-loader', 'file-loader']
+            },
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader'
             }
         ]
     }