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

Adding initial conquer support.

Browse Source
This commit is contained in:
Sergiotarxz 2023-11-13 17:32:12 +01:00
parent 3bda9ed008
commit dd2ca2f786
12 changed files with 1769 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -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 }],
},

1
Build.PL
View File

@ -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;

180
js-src/conquer/index.ts Normal file
View File

@ -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;
// });
}
}

14
js-src/index.js
View File

@ -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');

1
lib/BurguillosInfo.pm
View File

@ -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');

15
lib/BurguillosInfo/Controller/Conquer.pm Normal file
View File

@ -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;

15
package.json
View File

@ -10,17 +10,22 @@
"author": "",
"license": "AGPL-v3",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"eslint": "^8.40.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.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"
}
}

22
public/css/styles.css
View File

@ -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;

27
public/css/styles.scss
View File

@ -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;

1465
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

22
templates/conquer/index.html.ep Normal file
View File

@ -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>

12
webpack.config.js
View File

@ -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'
}
]
}