sergiotarxz
/
burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding inital select battle support.

This commit is contained in:
Sergiotarxz 2024-01-24 01:09:33 +01:00
parent 34723db31c
commit 003f4972cb
10 changed files with 336 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
js-src/conquer/fight-selector-slide.ts Normal file
View File

@ -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');
}
}

37
js-src/conquer/index.ts
View File

@ -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();
}

72
js-src/conquer/interface/select-fight.ts Normal file
View File

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

25
js-src/conquer/specie.ts Normal file
View File

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

66
js-src/conquer/user-current-enemy.ts Normal file
View File

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

8
public/css/styles.css
View File

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

13
public/css/styles.scss
View File

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

46
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

4
templates/conquer/_fight-battle-selector-slide.html.ep
View File

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

15
templates/conquer/index.html.ep
View File

@ -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';