Added health bar

This commit is contained in:
PeekabooSteam
2023-11-05 19:11:42 +00:00
parent 840033aa6a
commit dd811def07
6 changed files with 66 additions and 2 deletions

View File

@@ -86,6 +86,7 @@ export interface UnitSpawnTable {
export interface ObjectIconOptions {
showState: boolean,
showVvi: boolean,
showHealth: boolean,
showHotgroup: boolean,
showUnitIcon: boolean,
showShortLabel: boolean,

View File

@@ -40,6 +40,7 @@ export class Unit extends CustomMarker {
#onOff: boolean = true;
#followRoads: boolean = false;
#fuel: number = 0;
#health: number = Math.round(Math.random()*100);
#desiredSpeed: number = 0;
#desiredSpeedType: string = "CAS";
#desiredAltitude: number = 0;
@@ -116,6 +117,7 @@ export class Unit extends CustomMarker {
getGroupName() { return this.#groupName };
getHasTask() { return this.#hasTask };
getHeading() { return this.#heading };
getHealth() { return this.#health };
getHuman() { return this.#human };
getIsActiveAWACS() { return this.#isActiveAWACS };
getIsActiveTanker() { return this.#isActiveTanker };
@@ -228,6 +230,7 @@ export class Unit extends CustomMarker {
case DataIndexes.onOff: this.#onOff = dataExtractor.extractBool(); break;
case DataIndexes.followRoads: this.#followRoads = dataExtractor.extractBool(); break;
case DataIndexes.fuel: this.#fuel = dataExtractor.extractUInt16(); break;
// case DataIndexes.health: this.#health = dataExtractor.extractUInt16(); break; // To be dynamic
case DataIndexes.desiredSpeed: this.#desiredSpeed = dataExtractor.extractFloat64(); break;
case DataIndexes.desiredSpeedType: this.#desiredSpeedType = dataExtractor.extractBool() ? "GS" : "CAS"; break;
case DataIndexes.desiredAltitude: this.#desiredAltitude = dataExtractor.extractFloat64(); break;
@@ -327,6 +330,7 @@ export class Unit extends CustomMarker {
return {
showState: false,
showVvi: false,
showHealth: true,
showHotgroup: false,
showUnitIcon: true,
showShortLabel: false,
@@ -519,6 +523,16 @@ export class Unit extends CustomMarker {
el.append(fuelIndicator);
}
// Health indicator
if (iconOptions.showHealth) {
var healthIndicator = document.createElement("div");
healthIndicator.classList.add("unit-health");
var healthLevel = document.createElement("div");
healthLevel.classList.add("unit-health-level");
healthIndicator.appendChild(healthLevel);
el.append(healthIndicator);
}
// Ammo indicator
if (iconOptions.showAmmo) {
var ammoIndicator = document.createElement("div");
@@ -1038,6 +1052,10 @@ export class Unit extends CustomMarker {
element.querySelector(".unit-fuel-level")?.setAttribute("style", `width: ${this.#fuel}%`);
element.querySelector(".unit")?.toggleAttribute("data-has-low-fuel", this.#fuel < 20);
/* Set health data */
element.querySelector(".unit-health-level")?.setAttribute("style", `width: ${this.#health}%`);
element.querySelector(".unit")?.toggleAttribute("data-has-low-health", this.#health < 20);
/* Set dead/alive flag */
element.querySelector(".unit")?.toggleAttribute("data-is-dead", !this.#alive);
@@ -1341,6 +1359,7 @@ export class AirUnit extends Unit {
return {
showState: belongsToCommandedCoalition,
showVvi: (belongsToCommandedCoalition || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showHealth: false,
showHotgroup: belongsToCommandedCoalition,
showUnitIcon: (belongsToCommandedCoalition || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showShortLabel: (belongsToCommandedCoalition || this.getDetectionMethods().some(value => [VISUAL, OPTIC].includes(value))),
@@ -1414,6 +1433,7 @@ export class GroundUnit extends Unit {
return {
showState: belongsToCommandedCoalition,
showVvi: false,
showHealth: true,
showHotgroup: belongsToCommandedCoalition,
showUnitIcon: (belongsToCommandedCoalition || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showShortLabel: false,
@@ -1478,6 +1498,7 @@ export class NavyUnit extends Unit {
return {
showState: belongsToCommandedCoalition,
showVvi: false,
showHealth: false,
showHotgroup: true,
showUnitIcon: (belongsToCommandedCoalition || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showShortLabel: false,

View File

@@ -100,6 +100,7 @@ export class Weapon extends CustomMarker {
return {
showState: false,
showVvi: false,
showHealth: false,
showHotgroup: false,
showUnitIcon: true,
showShortLabel: false,
@@ -276,6 +277,7 @@ export class Missile extends Weapon {
return {
showState: false,
showVvi: (!this.belongsToCommandedCoalition() && !this.getDetectionMethods().some(value => [VISUAL, OPTIC].includes(value)) && this.getDetectionMethods().some(value => [RADAR, IRST, DLINK].includes(value))),
showHealth: false,
showHotgroup: false,
showUnitIcon: (this.belongsToCommandedCoalition() || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showShortLabel: false,
@@ -308,6 +310,7 @@ export class Bomb extends Weapon {
return {
showState: false,
showVvi: (!this.belongsToCommandedCoalition() && !this.getDetectionMethods().some(value => [VISUAL, OPTIC].includes(value)) && this.getDetectionMethods().some(value => [RADAR, IRST, DLINK].includes(value))),
showHealth: false,
showHotgroup: false,
showUnitIcon: (this.belongsToCommandedCoalition() || this.getDetectionMethods().some(value => [VISUAL, OPTIC, RADAR, IRST, DLINK].includes(value))),
showShortLabel: false,