101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import Conquer from '@burguillosinfo/conquer'
|
|
import ConquerUser from '@burguillosinfo/conquer/user'
|
|
import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'
|
|
|
|
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')
|
|
return [player]
|
|
}
|
|
|
|
public generateInterfaceElementCentered(): HTMLElement {
|
|
return this.getNodeFromTemplateId('conquer-interface-element-padded-template')
|
|
}
|
|
|
|
public async run(): Promise<void> {
|
|
const selfPlayerNode = this.getMainNode()
|
|
selfPlayerNode.classList.remove('conquer-display-none')
|
|
const user = await ConquerUser.getSelfUser()
|
|
if (user === null) {
|
|
this.runCallbacks('close')
|
|
return
|
|
}
|
|
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() {
|
|
if (!this.selfPlayer?.isAdmin()) {
|
|
return
|
|
}
|
|
const createNodeButton = document.createElement('button')
|
|
createNodeButton.innerText = 'Crear Nuevo Nodo'
|
|
createNodeButton.addEventListener('click', () => {
|
|
this.runCallbacks('createNodeStart')
|
|
// We close because it is a sensible thing to do.
|
|
this.runCallbacks('close')
|
|
})
|
|
const createNodeButtonInterface = this.generateInterfaceElementCentered()
|
|
createNodeButtonInterface.appendChild(createNodeButton)
|
|
this.getMainNode().appendChild(createNodeButtonInterface)
|
|
}
|
|
|
|
private populateWelcome(): void {
|
|
const userWelcome = this.getUserWelcome()
|
|
const userWelcomeInterface = this.generateInterfaceElementCentered();
|
|
userWelcomeInterface.appendChild(userWelcome)
|
|
this.getMainNode().appendChild(userWelcomeInterface)
|
|
}
|
|
|
|
private getUserWelcome(): HTMLElement {
|
|
if (this.userWelcome !== null) {
|
|
return this.userWelcome
|
|
}
|
|
const element = document.createElement('h2')
|
|
if (this.selfPlayer === null) {
|
|
throw new Error('User still not set')
|
|
}
|
|
element.innerText = `¡Hola, ${this.selfPlayer.getUsername()}!`
|
|
this.userWelcome = element
|
|
return this.userWelcome
|
|
}
|
|
}
|