Adding the ability to free move in the map.

This commit is contained in:
Sergiotarxz 2023-12-31 21:48:11 +01:00
parent d9e6e664f2
commit ac21ac1387
3 changed files with 50 additions and 10 deletions

View File

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

View File

@ -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() {

File diff suppressed because one or more lines are too long