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

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;
    private userTeamData: HTMLElement | null = null;

    constructor(isExplorerModeEnabled: boolean) {
        super();
        this.isExplorerModeEnabled = isExplorerModeEnabled;
    }

    public async run(): Promise<void> {
        const selfPlayerNode = this.getMainNode()
        const user =  await ConquerUser.getSelfUser()
        if (user === null) {
            this.runCallbacks('close')
            return
        }
        this.selfPlayer = user
        this.populateWelcome()
        this.populateCreateNodeOption()
        this.populateToggleExplorerModeOption();
        this.populateCreateTeamButton();
        await this.populateUserTeamData();
        selfPlayerNode.classList.remove('conquer-display-none')
    }

    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 populateCreateTeamButton(): void {
        // Only admins can create teams.
        if (!this.selfPlayer?.isAdmin()) {
            return;
        }
        const createTeamButton = document.createElement('button');
        createTeamButton.innerText = 'Crea un nuevo equipo';
        createTeamButton.addEventListener('click', () => {
            this.runCallbacks('open-create-team');
            this.runCallbacks('close');
        });
        const createTeamButtonInterface = this.generateInterfaceElementCentered()
        createTeamButtonInterface.append(createTeamButton);
        this.getMainNode().appendChild(createTeamButtonInterface);
    }

    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() {
        // Only admins can create nodes.
        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 async getUserTeamData(): Promise<HTMLElement> {
        if (this.userTeamData !== null) {
            return this.userTeamData;
        }
        const element = document.createElement('p');
        this.userTeamData = element;
        if (this.selfPlayer === null) {
            throw new Error('User still not set')
        }
        const team = await this.selfPlayer.getTeam();
        if (team === null) {
            element.innerText = 'No tienes equipo aun,'
                + ' ve al nodo más cercano para unirte a un equipo.';
            return this.userTeamData;
        }
        const spanText = document.createElement('span');
        spanText.innerText = 'Equipo: ';
        element.append(spanText);
        const spanCircle = document.createElement('span');
        spanCircle.classList.add('conquer-team-circle');
        spanCircle.style.backgroundColor = team.getColor();
        element.append(spanCircle);
        const spanTeamName = document.createElement('span');
        spanTeamName.style.color = team.getColor();
        spanTeamName.innerText = ' ' + team.getName();
        element.append(spanTeamName);
        return this.userTeamData;
    }

    private async populateUserTeamData(): Promise<void> {
        const userTeamData = await this.getUserTeamData();
        const userTeamDataInterface = this.generateInterfaceElementCentered();
        userTeamDataInterface.append(userTeamData);
        this.getMainNode().append(userTeamDataInterface);
    }

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