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

Loadouts changes and spawn menu update

Browse Source
This commit is contained in:
Pax1601
2023-08-24 16:16:59 +02:00
parent b1e4dd62b0
commit eb80c39b98
298 changed files with 67845 additions and 6766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/@types/unitdatabase.d.ts vendored
View File

@@ -22,6 +22,6 @@ interface UnitBlueprint {
range?: string;
loadouts?: LoadoutBlueprint[];
filename?: string;
liveryID?: string;
liveries?: {[key: string]: string};
cost?: number;
}

27
client/src/controls/dropdown.ts
View File

@@ -24,7 +24,7 @@ export class Dropdown {
document.addEventListener("click", (ev) => {
if (!(this.#value.contains(ev.target as Node) || this.#options.contains(ev.target as Node) || this.#element.contains(ev.target as Node))) {
this.#close();
this.close();
}
});
@@ -79,7 +79,7 @@ export class Dropdown {
this.#value.replaceChildren();
this.#value.appendChild(el);
this.#index = idx;
this.#close();
this.close();
this.#callback(option);
return true;
}
@@ -102,32 +102,37 @@ export class Dropdown {
this.selectValue(index);
}
forceValue(value: string) {
var el = document.createElement("div");
el.classList.add("ol-ellipsed");
el.innerText = value;
this.#value.replaceChildren();
this.#value.appendChild(el);
this.close();
}
getIndex() {
return this.#index;
}
#clip() {
clip() {
const options = this.#options;
const bounds = options.getBoundingClientRect();
this.#element.dataset.position = (bounds.bottom > window.innerHeight) ? "top" : "";
}
#close() {
close() {
this.#element.classList.remove("is-open");
this.#element.dataset.position = "";
}
#open() {
open() {
this.#element.classList.add("is-open");
this.#options.classList.toggle("scrollbar-visible", this.#options.scrollHeight > this.#options.clientHeight);
this.#clip();
this.clip();
}
#toggle() {
if (this.#element.classList.contains("is-open")) {
this.#close();
} else {
this.#open();
}
this.#element.classList.contains("is-open")? this.close(): this.open();
}
}

145
client/src/controls/mapcontextmenu.ts
View File

@@ -15,24 +15,34 @@ import { CoalitionArea } from "../map/coalitionarea";
export class MapContextMenu extends ContextMenu {
#coalitionSwitch: Switch;
#aircraftNationDropdown: Dropdown;
#aircraftRoleDropdown: Dropdown;
#aircraftLabelDropdown: Dropdown;
#aircraftCountDropdown: Dropdown;
#aircraftLoadoutDropdown: Dropdown;
#aircraftLiveryDropdown: Dropdown;
#aircraftSpawnAltitudeSlider: Slider;
#helicopterNationDropdown: Dropdown;
#helicopterRoleDropdown: Dropdown;
#helicopterLabelDropdown: Dropdown;
#helicopterCountDropdown: Dropdown;
#helicopterLoadoutDropdown: Dropdown;
#helicopterLiveryDropdown: Dropdown;
#helicopterSpawnAltitudeSlider: Slider;
#groundUnitTypeDropdown: Dropdown;
#groundUnitLabelDropdown: Dropdown;
#groundUnitCountDropdown: Dropdown;
#navyUnitTypeDropdown: Dropdown;
#navyUnitLabelDropdown: Dropdown;
#navyUnitCountDropdown: Dropdown;
#spawnOptions = { role: "", name: "", latlng: new LatLng(0, 0), coalition: "blue", loadout: "", airbaseName: "", altitude: 0, count: 1 };
#spawnOptions = { role: "", name: "", latlng: new LatLng(0, 0), coalition: "blue", loadout: "", airbaseName: "", liveryID: "", altitude: 0, count: 1, nation: "" };
#coalitionArea: CoalitionArea | null = null;
#nationCodes: any;
constructor(id: string) {
super(id);
@@ -42,24 +52,28 @@ export class MapContextMenu extends ContextMenu {
this.#coalitionSwitch.getContainer()?.addEventListener("contextmenu", (e) => this.#onSwitchRightClick(e));
/* Aircraft menu */
this.#aircraftNationDropdown = new Dropdown("aircraft-nation-options", (nation: string) => this.#setAircraftNation(nation));
this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
this.#aircraftLabelDropdown = new Dropdown("aircraft-label-options", (type: string) => this.#setAircraftLabel(type));
this.#aircraftCountDropdown = new Dropdown("aircraft-count-options", (type: string) => this.#setAircraftCount(type));
this.#aircraftCountDropdown = new Dropdown("aircraft-count-options", (count: string) => this.#setAircraftCount(count));
this.#aircraftCountDropdown.setOptions(["1", "2", "3", "4"]);
this.#aircraftCountDropdown.setValue("1");
this.#aircraftLoadoutDropdown = new Dropdown("aircraft-loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
this.#aircraftLiveryDropdown = new Dropdown("aircraft-livery-options", (livery: string) => this.#setAircraftLivery(livery));
this.#aircraftSpawnAltitudeSlider = new Slider("aircraft-spawn-altitude-slider", 0, 50000, "ft", (value: number) => {this.#spawnOptions.altitude = ftToM(value);});
this.#aircraftSpawnAltitudeSlider.setIncrement(500);
this.#aircraftSpawnAltitudeSlider.setValue(20000);
this.#aircraftSpawnAltitudeSlider.setActive(true);
/* Helicopter menu */
this.#helicopterNationDropdown = new Dropdown("helicopter-nation-options", (nation: string) => this.#setHelicopterNation(nation));
this.#helicopterRoleDropdown = new Dropdown("helicopter-role-options", (role: string) => this.#setHelicopterRole(role));
this.#helicopterLabelDropdown = new Dropdown("helicopter-label-options", (type: string) => this.#setHelicopterLabel(type));
this.#helicopterCountDropdown = new Dropdown("helicopter-count-options", (type: string) => this.#setHelicopterCount(type));
this.#helicopterCountDropdown = new Dropdown("helicopter-count-options", (count: string) => this.#setHelicopterCount(count));
this.#helicopterCountDropdown.setOptions(["1", "2", "3", "4"]);
this.#helicopterCountDropdown.setValue("1");
this.#helicopterLoadoutDropdown = new Dropdown("helicopter-loadout-options", (loadout: string) => this.#setHelicopterLoadout(loadout));
this.#helicopterLiveryDropdown = new Dropdown("helicopter-livery-options", (livery: string) => this.#setHelicopterLivery(livery));
this.#helicopterSpawnAltitudeSlider = new Slider("helicopter-spawn-altitude-slider", 0, 10000, "ft", (value: number) => {this.#spawnOptions.altitude = ftToM(value);});
this.#helicopterSpawnAltitudeSlider.setIncrement(50);
this.#helicopterSpawnAltitudeSlider.setValue(5000);
@@ -92,8 +106,14 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployAircrafts", () => {
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions) {
const liveryID = aircraftDatabase.getByName(this.#spawnOptions.name)?.liveryID;
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, altitude: this.#spawnOptions.altitude, loadout: this.#spawnOptions.loadout, liveryID: liveryID? liveryID: ""};
var unitTable = {
unitType: this.#spawnOptions.name,
location: this.#spawnOptions.latlng,
altitude: this.#spawnOptions.altitude,
loadout: this.#spawnOptions.loadout,
liveryID: this.#spawnOptions.liveryID,
nation: this.#spawnOptions.nation
};
var units = [];
for (let i = 1; i < parseInt(this.#aircraftCountDropdown.getValue()) + 1; i++) {
units.push(unitTable);
@@ -108,8 +128,14 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployHelicopters", () => {
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions) {
const liveryID = aircraftDatabase.getByName(this.#spawnOptions.name)?.liveryID;
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, altitude: this.#spawnOptions.altitude, loadout: this.#spawnOptions.loadout, liveryID: liveryID? liveryID: ""};
var unitTable = {
unitType: this.#spawnOptions.name,
location: this.#spawnOptions.latlng,
altitude: this.#spawnOptions.altitude,
loadout: this.#spawnOptions.loadout,
liveryID: this.#spawnOptions.liveryID,
nation: this.#spawnOptions.nation
};
var units = [];
for (let i = 1; i < parseInt(this.#helicopterCountDropdown.getValue()) + 1; i++) {
units.push(unitTable);
@@ -124,8 +150,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployGroundUnits", () => {
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions) {
const liveryID = aircraftDatabase.getByName(this.#spawnOptions.name)?.liveryID;
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, liveryID: liveryID? liveryID: ""};
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, liveryID: this.#spawnOptions.liveryID};
var units = [];
for (let i = 1; i < parseInt(this.#groundUnitCountDropdown.getValue()) + 1; i++) {
units.push(JSON.parse(JSON.stringify(unitTable)));
@@ -141,8 +166,7 @@ export class MapContextMenu extends ContextMenu {
document.addEventListener("contextMenuDeployNavyUnits", () => {
this.#spawnOptions.coalition = getActiveCoalition();
if (this.#spawnOptions) {
const liveryID = aircraftDatabase.getByName(this.#spawnOptions.name)?.liveryID;
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, liveryID: liveryID? liveryID: ""};
var unitTable = {unitType: this.#spawnOptions.name, location: this.#spawnOptions.latlng, liveryID: this.#spawnOptions.liveryID};
var units = [];
for (let i = 1; i < parseInt(this.#navyUnitCountDropdown.getValue()) + 1; i++) {
units.push(JSON.parse(JSON.stringify(unitTable)));
@@ -177,6 +201,28 @@ export class MapContextMenu extends ContextMenu {
this.#refreshOptions();
});
document.addEventListener("toggleAdvancedOptions", (e: any) => {
if (e.detail.type === "aircraft")
document.querySelector("#aircraft-advanced-options")?.classList.toggle("hide");
else if (e.detail.type === "helicopter")
document.querySelector("#helicopter-advanced-options")?.classList.toggle("hide");
this.clip();
});
/* Load the nation codes from the public folder */
var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/nations/codes.json', true);
xhr.responseType = 'json';
xhr.onload = () => {
var status = xhr.status;
if (status === 200) {
this.#nationCodes = xhr.response;
} else {
console.error(`Error retrieving nation codes`)
}
};
xhr.send();
this.hide();
}
@@ -201,6 +247,8 @@ export class MapContextMenu extends ContextMenu {
this.#coalitionSwitch.hide()
this.getContainer()?.querySelector("#coalition-area-button")?.classList.toggle("hide", true);
this.#setNations();
}
showSubMenu(type: string) {
@@ -314,15 +362,56 @@ export class MapContextMenu extends ContextMenu {
this.getContainer()?.querySelector("#coalition-area-button")?.classList.toggle("hide", false);
}
#setNations() {
var coalitions = getMissionHandler().getCoalitions();
var nations = coalitions[getActiveCoalition() as keyof typeof coalitions];
this.#aircraftNationDropdown.setOptionsElements(this.#createNationButtons(this.#aircraftNationDropdown, nations, (nation: string) => {this.#spawnOptions.nation = nation;}));
this.#helicopterNationDropdown.setOptionsElements(this.#createNationButtons(this.#helicopterNationDropdown, nations, (nation: string) => {this.#spawnOptions.nation = nation;}));
if (nations.length > 0) {
this.#aircraftNationDropdown.forceValue(nations[0]);
this.#helicopterNationDropdown.forceValue(nations[0]);
}
}
#createNationButtons(parent: Dropdown, nations: string[], callback: CallableFunction) {
return Object.values(nations).map((nation: string) => {
var el = document.createElement("div");
var button = document.createElement("button");
button.classList.add("nation-dropdown-element");
el.appendChild(button);
button.addEventListener("click", () => {
callback(nation);
parent.forceValue(nation);
parent.close();
});
var code = this.#nationCodes[nation];
if (code !== undefined) {
var img = document.createElement("img");
img.src = `images/nations/${code.toLowerCase()}.svg`;
button.appendChild(img);
}
var text = document.createElement("div");
text.innerText = nation;
button.appendChild(text);
return el;
});
}
#onSwitchClick(value: boolean) {
value? setActiveCoalition("red"): setActiveCoalition("blue");
this.getContainer()?.querySelectorAll('[data-coalition]').forEach((element: any) => { element.setAttribute("data-coalition", getActiveCoalition()) });
this.#setNations();
}
#onSwitchRightClick(e: any) {
this.#coalitionSwitch.setValue(undefined);
setActiveCoalition("neutral");
this.getContainer()?.querySelectorAll('[data-coalition]').forEach((element: any) => { element.setAttribute("data-coalition", getActiveCoalition()) });
this.#setNations();
}
#refreshOptions() {
@@ -373,6 +462,8 @@ export class MapContextMenu extends ContextMenu {
this.#spawnOptions.name = name;
this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(name, this.#spawnOptions.role));
this.#aircraftLoadoutDropdown.selectValue(0);
this.#aircraftLiveryDropdown.setOptions(aircraftDatabase.getLiveryNamesByName(name));
this.#aircraftLiveryDropdown.selectValue(0);
var image = (<HTMLImageElement>this.getContainer()?.querySelector("#aircraft-unit-image"));
image.src = `images/units/${aircraftDatabase.getByLabel(label)?.filename}`;
image.classList.toggle("hide", false);
@@ -385,6 +476,7 @@ export class MapContextMenu extends ContextMenu {
(<HTMLButtonElement>this.getContainer()?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.getContainer()?.querySelector("#aircraft-loadout-list")).replaceChildren();
this.#aircraftLoadoutDropdown.reset();
this.#aircraftLiveryDropdown.reset();
(<HTMLImageElement>this.getContainer()?.querySelector("#aircraft-unit-image")).classList.toggle("hide", true);
this.clip();
}
@@ -413,6 +505,20 @@ export class MapContextMenu extends ContextMenu {
this.clip();
}
#setAircraftLivery(liveryName: string) {
var liveries = aircraftDatabase.getByName(this.#spawnOptions.name)?.liveries;
if (liveries !== undefined) {
for (let liveryID in liveries)
if (liveries[liveryID] === liveryName)
this.#spawnOptions.liveryID = liveryID;
}
this.clip();
}
#setAircraftNation(nation: string) {
this.#spawnOptions.nation = nation;
}
/********* Helicopter spawn menu *********/
#setHelicopterRole(role: string) {
this.#spawnOptions.role = role;
@@ -439,6 +545,8 @@ export class MapContextMenu extends ContextMenu {
this.#spawnOptions.name = name;
this.#helicopterLoadoutDropdown.setOptions(helicopterDatabase.getLoadoutNamesByRole(name, this.#spawnOptions.role));
this.#helicopterLoadoutDropdown.selectValue(0);
this.#helicopterLiveryDropdown.setOptions(helicopterDatabase.getLiveryNamesByName(name));
this.#helicopterLiveryDropdown.selectValue(0);
var image = (<HTMLImageElement>this.getContainer()?.querySelector("#helicopter-unit-image"));
image.src = `images/units/${helicopterDatabase.getByLabel(label)?.filename}`;
image.classList.toggle("hide", false);
@@ -451,6 +559,7 @@ export class MapContextMenu extends ContextMenu {
(<HTMLButtonElement>this.getContainer()?.querySelector("#helicopter-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
(<HTMLButtonElement>this.getContainer()?.querySelector("#helicopter-loadout-list")).replaceChildren();
this.#helicopterLoadoutDropdown.reset();
this.#helicopterLiveryDropdown.reset();
(<HTMLImageElement>this.getContainer()?.querySelector("#helicopter-unit-image")).classList.toggle("hide", true);
this.clip();
}
@@ -479,6 +588,20 @@ export class MapContextMenu extends ContextMenu {
this.clip();
}
#setHelicopterLivery(liveryName: string) {
var liveries = helicopterDatabase.getByName(this.#spawnOptions.name)?.liveries;
if (liveries !== undefined) {
for (let liveryID in liveries)
if (liveries[liveryID] === liveryName)
this.#spawnOptions.liveryID = liveryID;
}
this.clip();
}
#setHelicopterNation(nation: string) {
this.#spawnOptions.nation = nation;
}
/********* Groundunit spawn menu *********/
#setGroundUnitType(role: string) {
this.#resetGroundUnitLabel();

2
client/src/mission/missionhandler.ts
View File

@@ -79,7 +79,7 @@ export class MissionHandler {
this.#dateAndTime = data.mission.dateAndTime;
/* Set the coalition countries */
//this.#coalitions = data.mission.coalitions;
this.#coalitions = data.mission.coalitions;
/* Set the command mode options */
this.#setcommandModeOptions(data.mission.commandModeOptions);

5
client/src/unit/unit.ts
View File

@@ -312,11 +312,6 @@ export class Unit extends CustomMarker {
}
}
getLiveryID(): string {
const liveryID = this.getDatabase()?.getByName(this.getName())?.liveryID;
return liveryID? liveryID: "";
}
setAlive(newAlive: boolean) {
if (newAlive != this.#alive)
document.dispatchEvent(new CustomEvent("unitDeath", { detail: this }));

9
client/src/unit/unitdatabase.ts
View File

@@ -170,6 +170,15 @@ export class UnitDatabase {
return loadoutsByRole;
}
/* Get the livery names for a specific unit */
getLiveryNamesByName(name: string) {
var liveries = this.blueprints[name].liveries;
if (liveries !== undefined)
return Object.values(liveries);
else
return [];
}
/* Get the loadout content from the unit name and loadout name */
getLoadoutByName(name: string, loadoutName: string) {
var loadouts = this.blueprints[name].loadouts;

14
client/src/unit/unitsmanager.ts
View File

@@ -560,7 +560,7 @@ export class UnitsManager {
this.#showActionMessage(selectedUnits, `unit bombing point`);
}
// TODO add undo group
// TODO handle from lua
selectedUnitsCreateGroup() {
var selectedUnits = this.getSelectedUnits({ excludeHumans: true, onlyOnePerGroup: false });
var units = [];
@@ -569,7 +569,7 @@ export class UnitsManager {
var unit = selectedUnits[idx];
coalition = unit.getCoalition();
deleteUnit(unit.ID, false, true);
units.push({unitType: unit.getName(), location: unit.getPosition(), liveryID: unit.getLiveryID()});
units.push({unitType: unit.getName(), location: unit.getPosition()});
}
const category = this.getSelectedUnitsTypes()[0];
this.spawnUnits(category, units, coalition, true);
@@ -581,6 +581,7 @@ export class UnitsManager {
getInfoPopup().setText(`${this.#copiedUnits.length} units copied`);
}
// TODO handle from lua
pasteUnits() {
if (!this.#pasteDisabled && getMissionHandler().getCommandModeOptions().commandMode == GAME_MASTER) {
/* Compute the position of the center of the copied units */
@@ -607,8 +608,7 @@ export class UnitsManager {
var units = groups[groupName].map((unit: any) => {
var position = new LatLng(getMap().getMouseCoordinates().lat + unit.position.lat - avgLat, getMap().getMouseCoordinates().lng + unit.position.lng - avgLng);
getMap().addTemporaryMarker(position, unit.name, unit.coalition);
const liveryID = unit.getDatabase()?.getByName(unit.getName())?.liveryID;
return {unitType: unit.name, location: position, liveryID: liveryID? liveryID: ""};
return {unitType: unit.name, location: position, liveryID: ""};
});
this.spawnUnits(groups[groupName][0].category, units, groups[groupName][0].coalition, true);
}
@@ -644,8 +644,7 @@ export class UnitsManager {
if (Math.random() < IADSDensities[type]) {
const unitBlueprint = randomUnitBlueprint(groundUnitDatabase, {type: type, eras: activeEras, ranges: activeRanges});
if (unitBlueprint) {
const liveryID = unitBlueprint.liveryID;
this.spawnUnits("GroundUnit", [{unitType: unitBlueprint.name, location: latlng, liveryID: liveryID? liveryID: ""}], coalitionArea.getCoalition(), true);
this.spawnUnits("GroundUnit", [{unitType: unitBlueprint.name, location: latlng, liveryID: ""}], coalitionArea.getCoalition(), true);
getMap().addTemporaryMarker(latlng, unitBlueprint.name, coalitionArea.getCoalition());
}
}
@@ -690,8 +689,7 @@ export class UnitsManager {
if (groupName !== "" && groups[groupName].length > 0 && (groups[groupName].every((unit: any) => {return unit.category == "GroundUnit";}) || groups[groupName].every((unit: any) => {return unit.category == "NavyUnit";}))) {
var aliveUnits = groups[groupName].filter((unit: any) => {return unit.alive});
var units = aliveUnits.map((unit: any) => {
const liveryID = unit.getDatabase()?.getByName(unit.getName())?.liveryID;
return { unitType: unit.name, location: unit.position, liveryID: liveryID? liveryID: "" }
return { unitType: unit.name, location: unit.position, liveryID: "" }
});
getUnitsManager().spawnUnits(groups[groupName][0].category, units, groups[groupName][0].coalition, true);
}