Adding inital select battle support.

js-src/conquer/fight-selector-slide.ts

@@ -0,0 +1,53 @@
+import Conquer from '@burguillosinfo/conquer'
+export default class FightSelectorSlide {
+    private callbacks: Record<string, Array<() => void>> = {}
+
+    public on(eventName: string, callback: () => void): void {
+        if (this.callbacks[eventName] === undefined) {
+            this.callbacks[eventName] = []
+        }
+        this.callbacks[eventName].push(callback)
+    }
+
+    private runCallbacks(eventName: string) {
+        const callbacks = this.callbacks[eventName];
+        if (callbacks === undefined) {
+            return
+        }
+        for (const callback of callbacks) {
+            callback()
+        }
+    }
+
+    private getSelectorSlide(): HTMLElement {
+        const selectorSlide = document.querySelector('#fight-battle-selector-slide');
+        if (!(selectorSlide instanceof HTMLElement)) {
+            Conquer.fail('selectorSlide is not HTMLElement');
+        }
+        return selectorSlide;
+    }
+    public startHook(): void {
+        this.createEventListeners();
+    }
+
+    public getGlobalBattleButton(): HTMLElement {
+        const globalBattleButton = this.getSelectorSlide().querySelector('button.fight-global-button');
+        if (!(globalBattleButton instanceof HTMLElement)) {
+            Conquer.fail('globalBattleButton is not HTMLElement');
+        }
+        return globalBattleButton;
+    }
+
+    private createEventListeners(): void {
+        const globalBattleButton = this.getGlobalBattleButton();
+        globalBattleButton.addEventListener('click', () => {
+            this.runCallbacks('global-battle');
+        });
+    }
+    public show(): void {
+        this.getSelectorSlide().classList.remove('conquer-display-none');
+    }
+    public hide(): void {
+        this.getSelectorSlide().classList.add('conquer-display-none');
+    }
+}

js-src/conquer/index.ts

@@ -26,6 +26,9 @@ import NewTeamUI from '@burguillosinfo/conquer/interface/new-team'
 import WebSocket from '@burguillosinfo/conquer/websocket'
 import JsonSerializer from '@burguillosinfo/conquer/serializer';
 import ConquerUser from '@burguillosinfo/conquer/user'
+import FightSelectorSlide from '@burguillosinfo/conquer/fight-selector-slide';
+import SelectFightUI from '@burguillosinfo/conquer/interface/select-fight';
+import ConquerUserCurrentEnemy from '@burguillosinfo/conquer/user-current-enemy'
 
 type StylesInterface = Record<string, Style>
 
@@ -55,6 +58,8 @@ export default class Conquer {
     private serverNodes: Record<string, MapNode> = {}
     private coordinate_1 = 0;
     private coordinate_2 = 0;
+    private fightSelectorSlide: FightSelectorSlide;
+    private loggedIn = false;
 
     public getServerNodes(): Record<string, MapNode> {
         return this.serverNodes
@@ -75,7 +80,18 @@ export default class Conquer {
         this.state |= state
         this.refreshState()
     }
+
+    private refreshFightSlide(): void {
+        if (this.loggedIn && (this.getState() & MapState.NORMAL) !== 0) {
+            this.fightSelectorSlide.show();
+        }
+        if (!this.loggedIn) {
+            this.fightSelectorSlide.hide();
+        }
+    }
+
     private refreshState(): void {
+        this.refreshFightSlide();
         this.createNodeObject.refreshState()
         return
     }
@@ -222,6 +238,8 @@ export default class Conquer {
     }
 
     async onLoginSuccess(): Promise<void> {
+        this.loggedIn = true;
+        this.refreshFightSlide();
         this.clearIntervalSendCoordinates();
         this.createIntervalSendCoordinates();
         this.clearIntervalPollNearbyNodes();
@@ -333,9 +351,28 @@ export default class Conquer {
         });
         conquerLogin.start()
         this.conquerLogin = conquerLogin
+        this.fightSelectorSlide = new FightSelectorSlide();
+        this.fightSelectorSlide.on('global-battle', () => {
+            this.startGlobalBattleSelector();
+        });
+        this.fightSelectorSlide.startHook();
+    }
+
+    private async startGlobalBattleSelector(): Promise<void> {
+        const enemies = await ConquerUserCurrentEnemy.getGlobalEnemies();
+        if (enemies !== null) {
+            const selectFightUI = new SelectFightUI(enemies);
+            selectFightUI.on('close', () => {
+                this.interfaceManager.remove(selectFightUI);
+            });
+            this.interfaceManager.push(selectFightUI);
+        }
+
     }
 
     private onLogout(): void {
+        this.loggedIn = false;
+        this.refreshFightSlide();
         this.clearIntervalSendCoordinates();
         this.clearIntervalPollNearbyNodes();
     }

js-src/conquer/interface/select-fight.ts

@@ -0,0 +1,72 @@
+import Conquer from '@burguillosinfo/conquer';
+import ConquerUser from '@burguillosinfo/conquer/user';
+import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface';
+import ConquerUserCurrentEnemy from '@burguillosinfo/conquer/user-current-enemy'
+
+export default class SelectFightUI extends AbstractTopBarInterface {
+    private enemies: ConquerUserCurrentEnemy[];
+    private form: HTMLElement | null = null;
+
+    constructor(enemies: ConquerUserCurrentEnemy[]) {
+        super();
+        this.enemies = enemies;
+    }
+
+    public async run(): Promise<void> {
+        const user =  await ConquerUser.getSelfUser()
+        if (user === null) {
+            this.runCallbacks('close')
+            return
+        }
+        this.getMainNode().append(this.getForm());
+        this.populateEnemies();
+        this.getMainNode().classList.remove('conquer-display-none');
+    }
+
+    private populateEnemies(): void {
+        for (const enemy of this.enemies) {
+            this.appendEnemy(enemy);
+        }
+    }
+
+    private appendEnemy(enemy: ConquerUserCurrentEnemy) {
+        const form = this.getForm();
+        const enemyNode = this.getNodeFromTemplateId('conquer-select-fight-item-template');
+        this.getNameEnemyNodeElement(enemyNode).innerText = enemy.getSpecies().getName();
+        this.getLevelEnemyNodeElement(enemyNode).innerText = '' + enemy.getLevel();
+        this.getImageEnemyNodeElement(enemyNode).src = enemy.getSpecies().getImage();
+        form.append(enemyNode);
+    }
+
+    private getImageEnemyNodeElement(enemyNode: HTMLElement): HTMLImageElement {
+        const conquerImage = enemyNode.querySelector('.conquer-image');
+        if (!(conquerImage instanceof HTMLImageElement)) {
+            Conquer.fail('conquerImage is not HTMLImageElement.')
+        }
+        return conquerImage;
+    }
+
+    private getLevelEnemyNodeElement(enemyNode: HTMLElement): HTMLElement {
+        const conquerLevel = enemyNode.querySelector('.conquer-level');
+        if (!(conquerLevel instanceof HTMLElement)) {
+            Conquer.fail('conquerLevel is not HTMLElement.')
+        }
+        return conquerLevel;
+    }
+
+    private getNameEnemyNodeElement(enemyNode: HTMLElement): HTMLElement {
+        const conquerName = enemyNode.querySelector('.conquer-name');
+        if (!(conquerName instanceof HTMLElement)) {
+            Conquer.fail('conquerName is not HTMLElement.')
+        }
+        return conquerName;
+    }
+
+    private getForm(): HTMLElement {
+        if (this.form === null) {
+            const form = this.getNodeFromTemplateId('conquer-select-fight-list-template')
+            this.form = form;
+        }
+        return this.form;
+    }
+}

js-src/conquer/specie.ts

@@ -0,0 +1,25 @@
+import { JsonObject, JsonProperty } from 'typescript-json-serializer';
+
+@JsonObject()
+export default class Specie {
+    @JsonProperty()
+    private id: string;
+
+    @JsonProperty()
+    private name: string;
+
+    @JsonProperty()
+    private image: string;
+
+    public getId(): string {
+        return this.id;
+    }
+
+    public getName(): string {
+        return this.name;
+    }
+
+    public getImage(): string {
+        return this.image;
+    }
+}

js-src/conquer/user-current-enemy.ts

@@ -0,0 +1,66 @@
+import Conquer from '@burguillosinfo/conquer';
+
+import { JsonObject, JsonProperty } from 'typescript-json-serializer';
+import Specie from '@burguillosinfo/conquer/specie';
+import JsonSerializer from '@burguillosinfo/conquer/serializer';
+
+@JsonObject()
+export default class ConquerUserCurrentEnemy {
+    @JsonProperty()
+    private uuid: string;
+
+    @JsonProperty()
+    private species: Specie;
+
+    @JsonProperty()
+    private level: number;
+
+    @JsonProperty()
+    private max_health: number;
+
+    public getUUID(): string {
+        return this.uuid;
+    }
+
+    public getSpecies(): Specie {
+        return this.species;
+    }
+
+    public getLevel(): number {
+        return this.level;
+    }
+
+    public getMaxHealth(): number {
+        return this.max_health;
+    }
+
+    public static async getGlobalEnemies(): Promise<ConquerUserCurrentEnemy[] | null> {
+        const urlEnemies = new URL('/conquer/user/enemies/global', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port);
+        const response = await fetch(urlEnemies);
+        let responseBody;
+        try {
+            responseBody = await response.json();
+            if (response.status !== 200) {
+                console.error(responseBody.error);
+                return null;
+            }
+            const enemiesRaw = JsonSerializer.deserialize(responseBody, ConquerUserCurrentEnemy);
+            const enemiesReturnArray: ConquerUserCurrentEnemy[] = [];
+            if (!(enemiesRaw instanceof Array)) {
+                console.error('Incorrect type retrieved from ' + urlEnemies);
+                return null;
+            }
+            for (const enemy of enemiesRaw) {
+                if (!(enemy instanceof ConquerUserCurrentEnemy)) {
+                    console.error('Incorrect type for enemy, maybe null or undef.', enemy);
+                    return null;
+                }
+                enemiesReturnArray.push(enemy);
+            }
+            return enemiesReturnArray;
+        } catch(error) {
+            console.error(error, 'Invalid response from server seeking for possible battles.');
+            return null;
+        }
+    }
+}

public/css/styles.css

@@ -155,6 +155,14 @@ body {
     background: black;
     height: 100dvh;
     width: 100%; }
+  body div.conquer-select-fight div.conquer-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+  body div.conquer-select-fight div.conquer-button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center; }
   body div.ol-control {
     display: none; }
   body span.round-center {

public/css/styles.scss

@@ -189,6 +189,19 @@ body {
     height: 100dvh;
     width: 100%;
   }
+
+  div.conquer-select-fight {
+    div.conquer-image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    div.conquer-button-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+  }
   div.ol-control {
         display: none;
   }

templates/conquer/_fight-battle-selector-slide.html.ep

@@ -1,6 +1,6 @@
 <div class="fight-battle-selector-slide conquer-display-none" id="fight-battle-selector-slide">
-    <button id="fight-global">
+    <button class="fight-global-button">
         <img alt="Fight global" src="/img/conquer/earth-bomb.png"/>
-        <p>Global battle</p>
+        <p>Batalla global</p>
     </button>
 </div>

templates/conquer/index.html.ep

@@ -8,6 +8,21 @@
         <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
     </head>
 <body>
+<div id="conquer-select-fight-list-template" class="conquer-display-none conquer-interface-element-padded conquer-display-block">
+    <h1>Elige un rival.</h1>
+</div>
+<div id="conquer-select-fight-item-template" class="conquer-display-none conquer-interface-element-padded conquer-select-fight">
+    <div class="conquer-image-container">
+        <img alt="" class="conquer-image"/>
+    </div>
+    <p>
+        <span class="conquer-name"></span>
+        Nivel: <span class="conquer-level"></span>
+    </p>
+    <div class="conquer-button-container">
+        <button class="conquer-submit">Luchar.</p>
+    </div>
+</div>
 %= include 'conquer/_fight-battle-selector-slide';
 %= include 'conquer/_overlay-transparent-template';
 %= include 'conquer/_new-node-form-creation-template';