weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completed hotgroups

Browse Source 
Single hotgroup per unit
This commit is contained in:
Pax1601 2023-05-17 11:43:14 +02:00
parent 493c75b6e7
commit 25d411b1be
8 changed files with 146 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/public/stylesheets/units.css
View File

@ -99,7 +99,7 @@
width: var(--unit-aircraft-marker-width);
}
[data-object|="unit-aircraft"]:hover .unit-marker {
[data-object|="unit-aircraft"][data-is-highlighted] .unit-marker {
background-image: var(--unit-aircraft-marker-neutral-hover-url);
}
@ -111,7 +111,7 @@
background-image: var(--unit-aircraft-marker-blue-url);
}
[data-object|="unit-aircraft"][data-coalition="blue"]:hover .unit-marker {
[data-object|="unit-aircraft"][data-coalition="blue"][data-is-highlighted] .unit-marker {
background-image: var(--unit-aircraft-marker-blue-hover-url);
}
@ -124,7 +124,7 @@
background-image: var(--unit-aircraft-marker-red-url);
}
[data-object|="unit-aircraft"][data-coalition="red"]:hover .unit-marker {
[data-object|="unit-aircraft"][data-coalition="red"][data-is-highlighted] .unit-marker {
background-image: var(--unit-aircraft-marker-red-hover-url);
}
@ -140,7 +140,7 @@
width: var(--unit-groundunit-marker-width);
}
[data-object|="unit-groundunit"]:hover .unit-marker {
[data-object|="unit-groundunit"][data-is-highlighted] .unit-marker {
background-image: var(--unit-groundunit-marker-neutral-hover-url);
}
@ -153,7 +153,7 @@
background-image: var(--unit-groundunit-marker-blue-url);
}
[data-object|="unit-groundunit"][data-coalition="blue"]:hover .unit-marker {
[data-object|="unit-groundunit"][data-coalition="blue"][data-is-highlighted] .unit-marker {
background-image: var(--unit-groundunit-marker-blue-hover-url);
}
@ -166,7 +166,7 @@
background-image: var(--unit-groundunit-marker-red-url);
}
[data-object|="unit-groundunit"][data-coalition="red"]:hover .unit-marker {
[data-object|="unit-groundunit"][data-coalition="red"][data-is-highlighted] .unit-marker {
background-image: var(--unit-groundunit-marker-red-hover-url);
}
@ -188,7 +188,7 @@
}
[data-object|="unit-sam"]:hover .unit-marker {
[data-object|="unit-sam"][data-is-highlighted] .unit-marker {
background-image: var(--unit-sam-marker-neutral-hover-url);
}
@ -201,7 +201,7 @@
background-image: var(--unit-sam-marker-blue-url);
}
[data-object|="unit-sam"][data-coalition="blue"]:hover .unit-marker {
[data-object|="unit-sam"][data-coalition="blue"][data-is-highlighted] .unit-marker {
background-image: var(--unit-sam-marker-blue-hover-url);
}
@ -214,7 +214,7 @@
background-image: var(--unit-sam-marker-red-url);
}
[data-object|="unit-sam"][data-coalition="red"]:hover .unit-marker {
[data-object|="unit-sam"][data-coalition="red"][data-is-highlighted] .unit-marker {
background-image: var(--unit-sam-marker-red-hover-url);
}
@ -236,7 +236,7 @@
}
[data-object|="unit-navyunit"]:hover .unit-marker {
[data-object|="unit-navyunit"][data-is-highlighted] .unit-marker {
background-image: var(--unit-navyunit-marker-neutral-hover-url);
}
@ -249,7 +249,7 @@
background-image: var(--unit-navyunit-marker-blue-url);
}
[data-object|="unit-navyunit"][data-coalition="blue"]:hover .unit-marker {
[data-object|="unit-navyunit"][data-coalition="blue"][data-is-highlighted] .unit-marker {
background-image: var(--unit-navyunit-marker-blue-hover-url);
}
@ -262,7 +262,7 @@
background-image: var(--unit-navyunit-marker-red-url);
}
[data-object|="unit-navyunit"][data-coalition="red"]:hover .unit-marker {
[data-object|="unit-navyunit"][data-coalition="red"][data-is-highlighted] .unit-marker {
background-image: var(--unit-navyunit-marker-red-hover-url);
}

3
client/src/@types/dom.d.ts vendored
View File

@ -5,7 +5,8 @@ interface CustomEventMap {
"unitsDeselection": CustomEvent<Unit[]>,
"clearSelection": CustomEvent<>,
"unitCreation": CustomEvent<Unit>,
"unitDeletion": CustomEvent<Unit>,
"unitDeletion": CustomEvent<Unit>,
"unitDeath": CustomEvent<Unit>,
"unitUpdated": CustomEvent<Unit>,
"unitMoveCommand": CustomEvent<Unit>,
"unitAttackCommand": CustomEvent<Unit>,

13
client/src/index.ts
View File

@ -9,7 +9,7 @@ import { AIC } from "./aic/aic";
import { ATC } from "./atc/atc";
import { FeatureSwitches } from "./featureswitches";
import { LogPanel } from "./panels/logpanel";
import { getConfig, getFreezed, setAddress, setCredentials, setFreezed, startUpdate, toggleDemoEnabled } from "./server/server";
import { getConfig, getPaused, setAddress, setCredentials, setPaused, startUpdate, toggleDemoEnabled } from "./server/server";
import { UnitDataTable } from "./units/unitdatatable";
import { keyEventWasInInput } from "./other/utils";
import { Popup } from "./popups/popup";
@ -138,7 +138,7 @@ function setupEvents() {
unitDataTable.toggle();
break
case "Space":
setFreezed(!getFreezed());
setPaused(!getPaused());
break;
case "KeyW":
case "KeyA":
@ -159,10 +159,13 @@ function setupEvents() {
case "Digit7":
case "Digit8":
case "Digit9":
if (ev.ctrlKey)
getUnitsManager().selectedUnitsAddToHotgroup(parseInt(ev.key));
// Using the substring because the key will be invalid when pressing the Shift key
if (ev.ctrlKey && ev.shiftKey)
getUnitsManager().selectedUnitsAddToHotgroup(parseInt(ev.code.substring(5)));
else if (ev.ctrlKey && !ev.shiftKey)
getUnitsManager().selectedUnitsSetHotgroup(parseInt(ev.code.substring(5)));
else
getUnitsManager().selectUnitsByHotgroup(parseInt(ev.key));
getUnitsManager().selectUnitsByHotgroup(parseInt(ev.code.substring(5)));
break;
}
});

25
client/src/panels/hotgrouppanel.ts
View File

@ -1,9 +1,23 @@
import { getUnitsManager } from "..";
import { Unit } from "../units/unit";
import { Panel } from "./panel";
export class HotgroupPanel extends Panel {
constructor(ID: string) {
super(ID);
document.addEventListener("unitDeath", () => this.refreshHotgroups());
}
refreshHotgroups() {
for (let hotgroup = 1; hotgroup <= 9; hotgroup++){
this.removeHotgroup(hotgroup);
if (getUnitsManager().getUnitsByHotgroup(hotgroup).length > 0)
this.addHotgroup(hotgroup);
}
}
addHotgroup(hotgroup: number) {
this.removeHotgroup(hotgroup);
const hotgroupHtml = `<div class="unit-hotgroup">
<div class="unit-hotgroup-id">${hotgroup}</div>
</div>
@ -13,9 +27,18 @@ export class HotgroupPanel extends Panel {
el.innerHTML = hotgroupHtml;
el.toggleAttribute(`data-hotgroup-${hotgroup}`, true)
this.getElement().appendChild(el);
el.addEventListener("click", () => {
getUnitsManager().selectUnitsByHotgroup(hotgroup);
});
el.addEventListener("mouseover", () => {
getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(true));
});
el.addEventListener("mouseout", () => {
getUnitsManager().getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHighlighted(false));
});
}
removeHotgroup(hotgroup: number) {

16
client/src/server/server.ts
View File

@ -3,7 +3,7 @@ import { getConnectionStatusPanel, getInfoPopup, getMissionData, getUnitDataTabl
import { SpawnOptions } from '../controls/mapcontextmenu';
var connected: boolean = false;
var freezed: boolean = false;
var paused: boolean = false;
var REST_ADDRESS = "http://localhost:30000/olympus";
var DEMO_ADDRESS = window.location.href + "demo";
@ -246,7 +246,7 @@ export function startUpdate() {
export function requestUpdate() {
/* Main update rate = 250ms is minimum time, equal to server update time. */
getUnits((data: UnitsData) => {
if (!getFreezed()) {
if (!getPaused()) {
getUnitsManager()?.update(data);
checkSessionHash(data.sessionHash);
}
@ -259,7 +259,7 @@ export function requestUpdate() {
export function requestRefresh() {
/* Main refresh rate = 5000ms. */
getUnits((data: UnitsData) => {
if (!getFreezed()) {
if (!getPaused()) {
getUnitsManager()?.update(data);
getAirbases((data: AirbasesData) => getMissionData()?.update(data));
getBullseye((data: BullseyesData) => getMissionData()?.update(data));
@ -300,11 +300,11 @@ export function getConnected() {
return connected;
}
export function setFreezed(newFreezed: boolean) {
freezed = newFreezed;
freezed ? getInfoPopup().setText("Freezed") : getInfoPopup().setText("Unfreezed");
export function setPaused(newPaused: boolean) {
paused = newPaused;
paused ? getInfoPopup().setText("View paused") : getInfoPopup().setText("View unpaused");
}
export function getFreezed() {
return freezed;
export function getPaused() {
return paused;
}

172
client/src/units/unit.ts
View File

@ -65,8 +65,8 @@ export class Unit extends Marker {
#selectable: boolean;
#selected: boolean = false;
#hovered: boolean = false;
#hidden: boolean = false;
#highlighted: boolean = false;
#preventClick: boolean = false;
@ -94,24 +94,24 @@ export class Unit extends Marker {
this.ID = ID;
this.#selectable = true;
this.on('click', (e) => this.#onClick(e));
this.on('dblclick', (e) => this.#onDoubleClick(e));
this.on('contextmenu', (e) => this.#onContextMenu(e));
this.on('mouseover', () => { this.#hovered = true;})
this.on('mouseout', () => { this.#hovered = false;})
this.on('mouseover', () => { this.setHighlighted(true); })
this.on('mouseout', () => { this.setHighlighted(false); })
this.#pathPolyline = new Polyline([], { color: '#2d3e50', weight: 3, opacity: 0.5, smoothFactor: 1 });
this.#pathPolyline.addTo(getMap());
this.#targetsPolylines = [];
/* Deselect units if they are hidden */
document.addEventListener("toggleCoalitionVisibility", (ev: CustomEventInit) => {
window.setTimeout(() => {this.setSelected(this.getSelected() && !this.getHidden())}, 300);
window.setTimeout(() => { this.setSelected(this.getSelected() && !this.getHidden()) }, 300);
});
document.addEventListener("toggleUnitVisibility", (ev: CustomEventInit) => {
window.setTimeout(() => {this.setSelected(this.getSelected() && !this.getHidden())}, 300);
window.setTimeout(() => { this.setSelected(this.getSelected() && !this.getHidden()) }, 300);
});
/* Set the unit data */
@ -128,15 +128,14 @@ export class Unit extends Marker {
}
getMarkerHTML() {
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label"></div>
</div>`
}
getMarkerCategory()
{
getMarkerCategory() {
// Overloaded by child classes
return "";
}
@ -146,58 +145,56 @@ export class Unit extends Marker {
setData(data: UpdateData) {
/* Check if data has changed comparing new values to old values */
const positionChanged = (data.flightData != undefined && data.flightData.latitude != undefined && data.flightData.longitude != undefined && (this.getFlightData().latitude != data.flightData.latitude || this.getFlightData().longitude != data.flightData.longitude));
const headingChanged = (data.flightData != undefined && data.flightData.heading != undefined && this.getFlightData().heading != data.flightData.heading);
const aliveChanged = (data.baseData != undefined && data.baseData.alive != undefined && this.getBaseData().alive != data.baseData.alive);
var updateMarker = (positionChanged || headingChanged || aliveChanged || !getMap().hasLayer(this))
if (data.baseData != undefined)
{
const headingChanged = (data.flightData != undefined && data.flightData.heading != undefined && this.getFlightData().heading != data.flightData.heading);
const aliveChanged = (data.baseData != undefined && data.baseData.alive != undefined && this.getBaseData().alive != data.baseData.alive);
var updateMarker = (positionChanged || headingChanged || aliveChanged || !getMap().hasLayer(this));
if (data.baseData != undefined) {
for (let key in this.#data.baseData)
if (key in data.baseData)
//@ts-ignore
this.#data.baseData[key] = data.baseData[key];
}
if (data.flightData != undefined)
{
if (data.flightData != undefined) {
for (let key in this.#data.flightData)
if (key in data.flightData)
//@ts-ignore
this.#data.flightData[key] = data.flightData[key];
}
if (data.missionData != undefined)
{
if (data.missionData != undefined) {
for (let key in this.#data.missionData)
if (key in data.missionData)
//@ts-ignore
this.#data.missionData[key] = data.missionData[key];
}
if (data.formationData != undefined)
{
if (data.formationData != undefined) {
for (let key in this.#data.formationData)
if (key in data.formationData)
//@ts-ignore
this.#data.formationData[key] = data.formationData[key];
}
if (data.taskData != undefined)
{
if (data.taskData != undefined) {
for (let key in this.#data.taskData)
if (key in data.taskData)
//@ts-ignore
this.#data.taskData[key] = data.taskData[key];
}
if (data.optionsData != undefined)
{
if (data.optionsData != undefined) {
for (let key in this.#data.optionsData)
if (key in data.optionsData)
//@ts-ignore
this.#data.optionsData[key] = data.optionsData[key];
}
/* Fire an event when a unit dies */
if (aliveChanged && this.getBaseData().alive == false)
document.dispatchEvent(new CustomEvent("unitDeath", { detail: this }));
/* Dead units can't be selected */
this.setSelected(this.getSelected() && this.getBaseData().alive && !this.getHidden())
@ -275,17 +272,24 @@ export class Unit extends Marker {
return this.#hotgroup;
}
/********************** Visibility *************************/
updateVisibility()
{
this.setHidden( document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null ||
document.body.getAttribute(`data-hide-${this.getMarkerCategory()}`) != null ||
!this.getBaseData().alive)
setHighlighted(highlighted: boolean) {
this.getElement()?.querySelector(`[data-object|="unit"]`)?.toggleAttribute("data-is-highlighted", highlighted);
this.#highlighted = highlighted;
}
setHidden(hidden: boolean)
{
this.#hidden = hidden;
getHighlighted() {
return this.#highlighted;
}
/********************** Visibility *************************/
updateVisibility() {
this.setHidden(document.body.getAttribute(`data-hide-${this.getMissionData().coalition}`) != null ||
document.body.getAttribute(`data-hide-${this.getMarkerCategory()}`) != null ||
!this.getBaseData().alive)
}
setHidden(hidden: boolean) {
this.#hidden = hidden;
/* Add the marker if not present */
if (!getMap().hasLayer(this) && !this.getHidden()) {
@ -295,7 +299,7 @@ export class Unit extends Marker {
/* Hide the marker if necessary*/
if (getMap().hasLayer(this) && this.getHidden()) {
getMap().removeLayer(this);
}
}
}
getHidden() {
@ -329,15 +333,15 @@ export class Unit extends Marker {
attackUnit(targetID: number) {
/* Units can't attack themselves */
if (!this.getMissionData().flags.Human)
if (this.ID != targetID)
if (this.ID != targetID)
attackUnit(this.ID, targetID);
}
followUnit(targetID: number, offset: {"x": number, "y": number, "z": number}) {
followUnit(targetID: number, offset: { "x": number, "y": number, "z": number }) {
/* Units can't follow themselves */
if (!this.getMissionData().flags.Human)
if (this.ID != targetID)
followUnit(this.ID, targetID, offset);
if (this.ID != targetID)
followUnit(this.ID, targetID, offset);
}
landAt(latlng: LatLng) {
@ -424,26 +428,22 @@ export class Unit extends Marker {
}
#onContextMenu(e: any) {
var options: {[key: string]: string} = {};
var options: { [key: string]: string } = {};
options["Center"] = `<div id="center-map">Center map</div>`;
options["Center"] = `<div id="center-map">Center map</div>`;
if (getUnitsManager().getSelectedUnits().length > 0 && !(getUnitsManager().getSelectedUnits().length == 1 && (getUnitsManager().getSelectedUnits().includes(this))))
{
if (getUnitsManager().getSelectedUnits().length > 0 && !(getUnitsManager().getSelectedUnits().length == 1 && (getUnitsManager().getSelectedUnits().includes(this)))) {
options['Attack'] = `<div id="attack">Attack</div>`;
if (getUnitsManager().getSelectedUnitsType() === "Aircraft")
options['Follow'] = `<div id="follow">Follow</div>`;
}
else if ((getUnitsManager().getSelectedUnits().length > 0 && (getUnitsManager().getSelectedUnits().includes(this))) || getUnitsManager().getSelectedUnits().length == 0)
{
if (this.getBaseData().category == "Aircraft")
{
else if ((getUnitsManager().getSelectedUnits().length > 0 && (getUnitsManager().getSelectedUnits().includes(this))) || getUnitsManager().getSelectedUnits().length == 0) {
if (this.getBaseData().category == "Aircraft") {
options["Refuel"] = `<div id="refuel">Refuel</div>`; // TODO Add some way of knowing which aircraft can AAR
}
}
if (Object.keys(options).length > 0)
{
if (Object.keys(options).length > 0) {
getMap().showUnitContextMenu(e);
getMap().getUnitContextMenu().setOptions(options, (option: string) => {
getMap().hideUnitContextMenu();
@ -464,7 +464,7 @@ export class Unit extends Marker {
}
#showFollowOptions(e: any) {
var options: {[key: string]: string} = {};
var options: { [key: string]: string } = {};
options = {
'Trail': `<div id="trail">Trail</div>`,
@ -484,12 +484,10 @@ export class Unit extends Marker {
getMap().showUnitContextMenu(e);
}
#applyFollowOptions(action: string)
{
if (action === "Custom")
{
#applyFollowOptions(action: string) {
if (action === "Custom") {
document.getElementById("custom-formation-dialog")?.classList.remove("hide");
getMap().getUnitContextMenu().setCustomFormationCallback((offset: {x: number, y: number, z: number}) => {
getMap().getUnitContextMenu().setCustomFormationCallback((offset: { x: number, y: number, z: number }) => {
getUnitsManager().selectedUnitsFollowUnit(this.ID, offset);
})
}
@ -502,17 +500,15 @@ export class Unit extends Marker {
this.updateVisibility();
/* Draw the minimap marker */
if (this.getBaseData().alive )
{
if (this.#miniMapMarker == null)
{
this.#miniMapMarker = new CircleMarker(new LatLng(this.getFlightData().latitude, this.getFlightData().longitude), {radius: 0.5});
if (this.getBaseData().alive) {
if (this.#miniMapMarker == null) {
this.#miniMapMarker = new CircleMarker(new LatLng(this.getFlightData().latitude, this.getFlightData().longitude), { radius: 0.5 });
if (this.getMissionData().coalition == "neutral")
this.#miniMapMarker.setStyle({color: "#CFD9E8"});
this.#miniMapMarker.setStyle({ color: "#CFD9E8" });
else if (this.getMissionData().coalition == "red")
this.#miniMapMarker.setStyle({color: "#ff5858"});
else
this.#miniMapMarker.setStyle({color: "#247be2"});
this.#miniMapMarker.setStyle({ color: "#ff5858" });
else
this.#miniMapMarker.setStyle({ color: "#247be2" });
this.#miniMapMarker.addTo(getMap().getMiniMapLayerGroup());
this.#miniMapMarker.bringToBack();
}
@ -554,15 +550,15 @@ export class Unit extends Marker {
/* Set altitude and speed */
if (element.querySelector(".unit-altitude"))
(<HTMLElement> element.querySelector(".unit-altitude")).innerText = "FL" + String(Math.floor(this.getFlightData().altitude / 0.3048 / 100));
(<HTMLElement>element.querySelector(".unit-altitude")).innerText = "FL" + String(Math.floor(this.getFlightData().altitude / 0.3048 / 100));
if (element.querySelector(".unit-speed"))
(<HTMLElement> element.querySelector(".unit-speed")).innerHTML = String(Math.floor(this.getFlightData().speed * 1.94384 ) );
(<HTMLElement>element.querySelector(".unit-speed")).innerHTML = String(Math.floor(this.getFlightData().speed * 1.94384));
/* Rotate elements according to heading */
element.querySelectorAll( "[data-rotate-to-heading]" ).forEach( el => {
const headingDeg = rad2deg( this.getFlightData().heading );
let currentStyle = el.getAttribute( "style" ) || "";
el.setAttribute( "style", currentStyle + `transform:rotate(${headingDeg}deg);` );
element.querySelectorAll("[data-rotate-to-heading]").forEach(el => {
const headingDeg = rad2deg(this.getFlightData().heading);
let currentStyle = el.getAttribute("style") || "";
el.setAttribute("style", currentStyle + `transform:rotate(${headingDeg}deg);`);
});
/* Turn on ordnance indicators */
@ -577,14 +573,14 @@ export class Unit extends Marker {
var newHasOtherAmmo = false;
Object.values(this.getMissionData().ammo).forEach((ammo: any) => {
if (ammo.desc.category == 1 && ammo.desc.missileCategory == 1) {
if (ammo.desc.guidance == 4 || ammo.desc.guidance == 5)
if (ammo.desc.guidance == 4 || ammo.desc.guidance == 5)
newHasFox1 = true;
else if (ammo.desc.guidance == 2)
else if (ammo.desc.guidance == 2)
newHasFox2 = true;
else if (ammo.desc.guidance == 3)
else if (ammo.desc.guidance == 3)
newHasFox3 = true;
}
else
else
newHasOtherAmmo = true;
});
@ -594,18 +590,18 @@ export class Unit extends Marker {
if (hasOtherAmmo != newHasOtherAmmo) element.querySelector(".unit")?.toggleAttribute("data-has-other-ammo", newHasOtherAmmo);
/* Draw the hotgroup element */
element.querySelector(".unit")?.toggleAttribute("data-is-in-hotgroup", this.#hotgroup != null);
if (this.#hotgroup) {
element.querySelector(".unit")?.toggleAttribute("data-is-in-hotgroup", this.#hotgroup != null);
const hotgroupEl = element.querySelector(".unit-hotgroup-id") as HTMLElement;
if (hotgroupEl)
hotgroupEl.innerText = String(this.#hotgroup);
}
}
/* Set vertical offset for altitude stacking */
var pos = getMap().latLngToLayerPoint(this.getLatLng()).round();
this.setZIndexOffset(1000 + Math.floor(this.getFlightData().altitude) - pos.y + (this.#hovered || this.#selected? 5000: 0));
this.setZIndexOffset(1000 + Math.floor(this.getFlightData().altitude) - pos.y + (this.#highlighted || this.#selected ? 5000 : 0));
}
}
@ -689,8 +685,7 @@ export class Aircraft extends AirUnit {
super(ID, data);
}
getMarkerHTML()
{
getMarkerHTML() {
return `<div class="unit" data-object="unit-aircraft" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker-border"></div>
@ -718,8 +713,7 @@ export class Aircraft extends AirUnit {
</div>`
}
getMarkerCategory()
{
getMarkerCategory() {
return "aircraft";
}
}
@ -729,8 +723,7 @@ export class Helicopter extends AirUnit {
super(ID, data);
}
getVisibilityCategory()
{
getVisibilityCategory() {
return "helicopter";
}
}
@ -742,7 +735,7 @@ export class GroundUnit extends Unit {
getMarkerHTML() {
var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
return `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
<div class="unit-selected-spotlight"></div>
<div class="unit-marker"></div>
<div class="unit-short-label">${role?.substring(0, 1)?.toUpperCase() || ""}</div>
@ -752,8 +745,7 @@ export class GroundUnit extends Unit {
</div>`
}
getMarkerCategory()
{
getMarkerCategory() {
// TODO this is very messy
var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
var markerCategory = (role === "SAM") ? "sam" : "groundunit";
@ -765,7 +757,7 @@ export class NavyUnit extends Unit {
constructor(ID: number, data: UnitData) {
super(ID, data);
}
getMarkerCategory() {
return "navyunit";
}

12
client/src/units/unitsmanager.ts
View File

@ -46,7 +46,7 @@ export class UnitsManager {
}
getUnitsByHotgroup(hotgroup: number) {
return Object.values(this.#units).filter((unit: Unit) => {return unit.getHotgroup() == hotgroup});
return Object.values(this.#units).filter((unit: Unit) => {return unit.getBaseData().alive && unit.getHotgroup() == hotgroup});
}
addUnit(ID: number, data: UnitData) {
@ -117,6 +117,7 @@ export class UnitsManager {
}
selectUnitsByHotgroup(hotgroup: number) {
this.deselectAllUnits();
this.getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setSelected(true))
}
@ -222,7 +223,6 @@ export class UnitsManager {
for (let idx in selectedUnits) {
selectedUnits[idx].setSpeed(speed);
}
this.#showActionMessage(selectedUnits, `setting speed to ${speed * 1.94384} kts`);
}
@ -317,6 +317,12 @@ export class UnitsManager {
this.#showActionMessage(selectedUnits, `following unit ${this.getUnitByID(ID)?.getBaseData().unitName}`);
}
selectedUnitsSetHotgroup(hotgroup: number)
{
this.getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setHotgroup(null));
this.selectedUnitsAddToHotgroup(hotgroup);
}
selectedUnitsAddToHotgroup(hotgroup: number)
{
var selectedUnits = this.getSelectedUnits();
@ -324,7 +330,7 @@ export class UnitsManager {
selectedUnits[idx].setHotgroup(hotgroup);
}
this.#showActionMessage(selectedUnits, `added to hotgroup ${hotgroup}`);
getHotgroupPanel().addHotgroup(hotgroup);
getHotgroupPanel().refreshHotgroups();
}
/***********************************************/

2
client/views/hotgrouppanel.ejs
View File

@ -1,3 +1,3 @@
<div id="hotgroup-panel">
<!-- Here is where the various hotgroup buttons will show up -->
</div>