79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
|
import ConquerInterface from '@burguillosinfo/conquer/interface'
|
||
|
|
import Conquer from '@burguillosinfo/conquer'
|
||
|
|
import ConquerUser from '@burguillosinfo/conquer/user'
|
||
|
|
|
||
|
|
export default class SelfPlayerUI extends ConquerInterface {
|
||
|
|
private selfPlayer: ConquerUser | null = null
|
||
|
|
private userWelcome: HTMLElement | null = null
|
||
|
|
|
||
|
|
protected generateNodes(): HTMLElement[] {
|
||
|
|
const player = this.getNodeFromTemplateId('conquer-self-player-template')
|
||
|
|
return [player]
|
||
|
|
}
|
||
|
|
public getSelfPlayerNode(): HTMLElement {
|
||
|
|
return this.getNodes()[0]
|
||
|
|
}
|
||
|
|
public getExitButton(): HTMLElement {
|
||
|
|
const maybeExitButton = this.getSelfPlayerNode().querySelector('.conquer-exit-button')
|
||
|
|
if (maybeExitButton === null || !(maybeExitButton instanceof HTMLElement)) {
|
||
|
|
Conquer.fail('No exit button.')
|
||
|
|
}
|
||
|
|
return maybeExitButton
|
||
|
|
}
|
||
|
|
public generateInterfaceElementCentered(): HTMLElement {
|
||
|
|
return this.getNodeFromTemplateId('conquer-interface-element-padded-template')
|
||
|
|
}
|
||
|
|
public async run(): Promise<void> {
|
||
|
|
const selfPlayerNode = this.getSelfPlayerNode()
|
||
|
|
selfPlayerNode.classList.remove('conquer-display-none')
|
||
|
|
const exitButton = this.getExitButton()
|
||
|
|
exitButton.addEventListener('click', () => {
|
||
|
|
this.runCallbacks('close')
|
||
|
|
})
|
||
|
|
const user = await ConquerUser.getSelfUser()
|
||
|
|
if (user === null) {
|
||
|
|
this.runCallbacks('close')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.selfPlayer = user
|
||
|
|
this.populateWelcome()
|
||
|
|
this.populateCreateNodeOption()
|
||
|
|
}
|
||
|
|
|
||
|
|
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.getSelfPlayerNode().appendChild(createNodeButtonInterface)
|
||
|
|
}
|
||
|
|
|
||
|
|
private populateWelcome(): void {
|
||
|
|
const userWelcome = this.getUserWelcome()
|
||
|
|
const userWelcomeInterface = this.generateInterfaceElementCentered();
|
||
|
|
userWelcomeInterface.appendChild(userWelcome)
|
||
|
|
this.getSelfPlayerNode().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
|
||
|
|
}
|
||
|
|
}
|