Adding the ability to click on things.

js-src/conquer/index.ts

@@ -1,4 +1,6 @@
 import Map from "ol/Map"
+import MapEvent from "ol/MapEvent"
+import MapBrowserEvent from "ol/MapBrowserEvent"
 import View from "ol/View"
 import Projection from "ol/proj/Projection.js"
 import TileLayer from 'ol/layer/Tile'
@@ -6,7 +8,16 @@ import OSM from 'ol/source/OSM'
 import * as olProj from "ol/proj"
 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import Stroke from 'ol/style/Stroke'
+import Fill from 'ol/style/Fill'
+import CircleStyle from 'ol/style/Circle'
+import Style from 'ol/style/Style'
+import BaseEvent from 'ol/events/Event'
+import {click} from 'ol/events/condition'
 
+type StylesInterface = Record<string, Style>
 export default class Conquer {
     private conquerContainer: HTMLDivElement
     private map: Map
@@ -30,6 +41,7 @@ export default class Conquer {
     private conquerRegisterSubmit: HTMLButtonElement
     private conquerRegisterError: HTMLParagraphElement
     private currentPositionFeature: Feature | null
+    private vectorLayer: VectorLayer<VectorSource> | null = null
     private alpha = 0
     private beta = 0
     private gamma = 0
@@ -129,7 +141,61 @@ export default class Conquer {
         this.unsetLoginAndRegisterErrors()
         const isLogged = await this.isLogged()
         if (isLogged) {
+            this.onLoginSuccess()
+        }
+    }
+    async onLoginSuccess(): Promise<void> {
         await this.removeLoginRegisterCombo()
+        const currentPositionFeature = this.currentPositionFeature
+        if (currentPositionFeature === null) {
+            return
+        }
+        this.map.on('click', (event: MapEvent) => {
+            this.onClickMap(event)
+        })
+    }
+
+    async onClickMap(event: MapEvent): Promise<void> {
+        if (this.vectorLayer === null) {
+            return
+        }
+        if (!(event instanceof MapBrowserEvent)) {
+            return
+        }
+        if (event.dragging) {
+            return
+        }
+        const pixel = event.pixel
+        const features = this.map.getFeaturesAtPixel(pixel)
+        const feature = features.length ? features[0] : undefined
+        if (feature === undefined) {
+            return
+        }
+        if (!(feature instanceof Feature)) {
+            return
+        }
+        this.onClickFeature(feature)
+    }
+
+    async onClickSelf(): Promise<void> {
+        alert('Pulsaste en ti mismo')
+    }
+    private isFeatureEnabledMap: Record<string, boolean> = {}
+
+    async onClickFeature(feature: Feature): Promise<void> {
+        if (this.isFeatureEnabledMap[feature.getProperties().type] === undefined) {
+            this.isFeatureEnabledMap[feature.getProperties().type] = true
+        }
+        if (!this.isFeatureEnabledMap[feature.getProperties().type]) {
+            return
+        }
+        this.isFeatureEnabledMap[feature.getProperties().type] = false
+        window.setTimeout(() => {
+            this.isFeatureEnabledMap[feature.getProperties().type] = true 
+        }, 100);
+        if (feature === this.currentPositionFeature) {
+            this.onClickSelf()
+            return
         }
     }
 
@@ -252,13 +318,19 @@ export default class Conquer {
         this.conquerRegisterError.innerText = error
         this.conquerRegisterError.classList.remove('conquer-display-none')
     }
-    async run() {
-        this.fillConquerLogin()
-        this.fillConquerRegister()
+
+    async checkLogin(): Promise<void> {
         const isLogged = await this.isLogged()
         if (!isLogged) {
             this.conquerLogin.classList.remove('conquer-display-none')
+            return
         }
+        this.onLoginSuccess()
+    }
+    async run() {
+        this.fillConquerLogin()
+        this.fillConquerRegister()
+        this.checkLogin()
         const conquerContainer = this.conquerContainer
         //layer.on('prerender', (evt) => {
         //  // return
@@ -302,6 +374,15 @@ export default class Conquer {
         }
     }
 
+    addCurrentLocationMarkerToMap(currentLatitude: number,
+        currentLongitude: number) {
+        const currentPositionFeature = new Feature({
+            type: 'currentPositionFeature',
+            geometry: new Point(this.realCoordinatesToOl(currentLatitude, currentLongitude))
+        })
+        this.currentPositionFeature = currentPositionFeature
+    }
+
     processLocation(location: GeolocationPosition) {
         this.currentLatitude =  location.coords.latitude
         this.currentLongitude = location. coords.longitude
@@ -309,13 +390,44 @@ export default class Conquer {
             this.disableSetRotationOffset = true
             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
         }
+        this.setCenterDisplaced(this.currentLatitude, this.currentLongitude)
+        this.addCurrentLocationMarkerToMap(this.currentLatitude, this.currentLongitude)
+        this.refreshLayers()
+    }
+
+    private refreshLayers(): void {
+        if (this.currentPositionFeature === null) {
+            return
+        }
+        const styles: StylesInterface = {
+            currentPositionFeature: new Style({
+                image: new CircleStyle({
+                    radius: 14,
+                    fill: new Fill({color: 'white'}),
+                    stroke: new Stroke({
+                        color: 'blue',
+                        width: 2,
+                    })
+                })
+            })
+        };
+        const vectorLayer = new VectorLayer<VectorSource>({
+            source: new VectorSource({
+                features: [this.currentPositionFeature]
+            }),
+        })
+        if (this.vectorLayer !== null) {
+            this.map.removeLayer(this.vectorLayer)
+        }
+        vectorLayer.setStyle((feature) => {
+            return styles[feature.getProperties().type]
+        })
+        this.map.addLayer(vectorLayer)
+        this.vectorLayer = vectorLayer
+        this.map.on('click', (event: MapEvent) => {
+            this.onClickMap(event)
+        })
     }
     setLocationChangeTriggers(): void {
         window.setInterval(() => {
@@ -330,18 +442,20 @@ export default class Conquer {
                     return
                 }, {
                     enableHighAccuracy: true,
-                    maximumAge: 0
                 })
+            }, 3000)
         }, 1000)
-        }, 1000)
-        this.setCenterDisplaced(37.58237, -5.96766)
+        const initialLatitude = 37.58237
+        const initialLongitude = -5.96766
+        this.setCenterDisplaced(initialLatitude, initialLongitude)
+        this.addCurrentLocationMarkerToMap(initialLatitude, initialLongitude)
+        this.refreshLayers()
         navigator.geolocation.watchPosition((location) => {
             this.processLocation(location)
         }, (err) => {
             return
         }, {
             enableHighAccuracy: true,
-            maximumAge: 0
         })
     }
     realCoordinatesToOl(lat: number, lon: number): number[] {