Adding the ability to free move in the map.

js-src/conquer/index.ts

@@ -117,9 +117,6 @@ export default class Conquer {
         }
         const pixel = event.pixel
         const coordinates = this.map.getCoordinateFromPixel(pixel)
-        const feature = new Feature({
-            geometry: new Point(coordinates)
-        })
         const newNodeUI = new NewNodeUI(coordinates)
         const oldState = this.getState();
         newNodeUI.on('close', () => {
@@ -127,7 +124,7 @@ export default class Conquer {
             this.setState(oldState);
         })
         this.interfaceManager.push(newNodeUI)
-        this.setState(MapState.FILLING_FORM_CREATE_NODE);
+        this.removeState(MapState.SELECT_WHERE_TO_CREATE_NODE)
         // const style = new Style({
         //     image: new CircleStyle({
         //         radius: 14,
@@ -140,7 +137,6 @@ export default class Conquer {
         // })
         // const mapNode = new MapNode(style, feature, `server-node-${++this.createNodeCounter}`)
         // this.getServerNodes()[mapNode.getId()] = mapNode
-        // this.removeState(MapState.SELECT_WHERE_TO_CREATE_NODE)
         // this.refreshLayers()
 
     }
@@ -181,10 +177,19 @@ export default class Conquer {
         if (!(this.state & MapState.NORMAL)) {
             return
         }
-        const selfPlayerUI = new SelfPlayerUI()
+        const selfPlayerUI = new SelfPlayerUI(!!(this.getState() & (MapState.FREE_MOVE | MapState.FREE_ROTATION)))
         selfPlayerUI.on('close', () => {
             this.interfaceManager.remove(selfPlayerUI)
         })
+        selfPlayerUI.on('enable-explorer-mode', () => {
+            console.log('hola')
+            this.addState(MapState.FREE_MOVE);
+            this.addState(MapState.FREE_ROTATION);
+        });
+        selfPlayerUI.on('disable-explorer-mode', () => {
+            this.addState(MapState.FREE_MOVE);
+            this.addState(MapState.FREE_ROTATION);
+        });
         selfPlayerUI.on('createNodeStart', () => {
             this.addState(MapState.CREATE_NODE)
             this.removeState(MapState.NORMAL)
@@ -262,15 +267,16 @@ export default class Conquer {
     }
 
     private createIntervalPollNearbyNodes(): void {
+        this.getNearbyNodes();
         this.intervalPollNearbyNodes = window.setInterval(() => {
             this.getNearbyNodes();
-        }, 10000)
+        }, 40000)
     }
 
     private createIntervalSendCoordinates(): void {
         this.intervalSendCoordinates = window.setInterval(() => {
             this.sendCoordinatesToServer();
-        }, 10000);
+        }, 40000);
     }
     
     private sendCoordinatesToServer(): void {

js-src/conquer/interface/self-player.ts

@@ -5,6 +5,12 @@ import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-
 export default class SelfPlayerUI extends AbstractTopBarInterface {
     private selfPlayer: ConquerUser | null = null
     private userWelcome: HTMLElement | null = null
+    private isExplorerModeEnabled: boolean;
+
+    constructor(isExplorerModeEnabled: boolean) {
+        super();
+        this.isExplorerModeEnabled = isExplorerModeEnabled;
+    }
 
     protected generateNodes(): HTMLElement[] {
         const player =  this.getNodeFromTemplateId('conquer-interface-with-top-bar-template')
@@ -26,6 +32,34 @@ export default class SelfPlayerUI extends AbstractTopBarInterface {
         this.selfPlayer = user
         this.populateWelcome()
         this.populateCreateNodeOption()
+        this.populateToggleExplorerModeOption();
+    }
+
+    private populateToggleExplorerModeOption(): void {
+        const toggleExplorerModeButton = document.createElement('button');
+        this.setTextToggleExplorerModeButton(toggleExplorerModeButton);
+        toggleExplorerModeButton.addEventListener('click', () => {
+            (() => {
+                if (this.isExplorerModeEnabled) {
+                    this.runCallbacks('disable-explorer-mode');
+                    return;
+                }
+                this.runCallbacks('enable-explorer-mode');
+            })();
+            this.runCallbacks('close');
+        });
+        const toggleExplorerModeInterface = this.generateInterfaceElementCentered()
+        toggleExplorerModeInterface.appendChild(toggleExplorerModeButton)
+        this.getMainNode().appendChild(toggleExplorerModeInterface)
+
+    }
+
+    private setTextToggleExplorerModeButton(button: HTMLElement): void {
+        if (this.isExplorerModeEnabled) {
+            button.innerText = 'Desactivar movimiento libre en el mapa.';
+            return;
+        }
+        button.innerText = 'Activar movimiento libre en el mapa.';
     }
 
     private populateCreateNodeOption() {