mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Completed contextmenu, only missing is callback for smoke spawning
This commit is contained in:
dpassoni
parent
3a9e321e67
commit
a896916204
303
client/demo.js
303
client/demo.js
@ -1,44 +1,251 @@
|
||||
|
||||
const DEMO_UNIT_DATA = {
|
||||
AI: true,
|
||||
name: "F-5E",
|
||||
unitName: "Olympus 1-1",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "Aircraft",
|
||||
flightData: {
|
||||
latitude: 37.2,
|
||||
longitude: -115.8,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
["1"]:{
|
||||
AI: true,
|
||||
name: "F-5E",
|
||||
unitName: "Olympus 1-1",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "Aircraft",
|
||||
flightData: {
|
||||
latitude: 37.2,
|
||||
longitude: -115.8,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "blue"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "blue"
|
||||
["2"]:{
|
||||
AI: true,
|
||||
name: "F-5E",
|
||||
unitName: "Olympus 1-2",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "Aircraft",
|
||||
flightData: {
|
||||
latitude: 37.2,
|
||||
longitude: -115.75,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "red"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
["3"]:{
|
||||
AI: true,
|
||||
name: "2S6 Tunguska",
|
||||
unitName: "Olympus 1-3",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "GroundUnit",
|
||||
flightData: {
|
||||
latitude: 37.175,
|
||||
longitude: -115.8,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "blue"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
["4"]:{
|
||||
AI: true,
|
||||
name: "2S6 Tunguska",
|
||||
unitName: "Olympus 1-4",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "GroundUnit",
|
||||
flightData: {
|
||||
latitude: 37.175,
|
||||
longitude: -115.75,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "red"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
["5"]:{
|
||||
AI: true,
|
||||
name: "M-60",
|
||||
unitName: "Olympus 1-3",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "GroundUnit",
|
||||
flightData: {
|
||||
latitude: 37.15,
|
||||
longitude: -115.8,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "blue"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
},
|
||||
["6"]:{
|
||||
AI: true,
|
||||
name: "M-60",
|
||||
unitName: "Olympus 1-4",
|
||||
groupName: "Group 1",
|
||||
alive: true,
|
||||
category: "GroundUnit",
|
||||
flightData: {
|
||||
latitude: 37.15,
|
||||
longitude: -115.75,
|
||||
altitude: 2000,
|
||||
heading: 0.5,
|
||||
speed: 300
|
||||
},
|
||||
missionData: {
|
||||
fuel: 0.5,
|
||||
flags: {human: false},
|
||||
ammo: [],
|
||||
targets: [],
|
||||
hasTask: true,
|
||||
coalition: "red"
|
||||
},
|
||||
formationData: {
|
||||
formation: "Echelon",
|
||||
isLeader: false,
|
||||
isWingman: false,
|
||||
leaderID: null,
|
||||
wingmen: [],
|
||||
wingmenIDs: []
|
||||
},
|
||||
taskData: {
|
||||
currentTask: "Example task",
|
||||
activePath: undefined,
|
||||
targetSpeed: 400,
|
||||
targetAltitude: 3000
|
||||
},
|
||||
optionsData: {
|
||||
ROE: "None",
|
||||
reactionToThreat: "None",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class DemoDataGenerator {
|
||||
@ -53,11 +260,11 @@ class DemoDataGenerator {
|
||||
}
|
||||
|
||||
unitsUpdate(req, res){
|
||||
Object.keys(this.demoUnits.units).forEach((ID) => {
|
||||
this.demoUnits.units[ID].flightData.heading += 0.05;
|
||||
this.demoUnits.units[ID].flightData.latitude += 0.001 * Math.cos(this.demoUnits.units[ID].flightData.heading);
|
||||
this.demoUnits.units[ID].flightData.longitude += 0.001 * Math.sin(this.demoUnits.units[ID].flightData.heading);
|
||||
});
|
||||
//Object.keys(this.demoUnits.units).forEach((ID) => {
|
||||
// this.demoUnits.units[ID].flightData.heading += 0.05;
|
||||
// this.demoUnits.units[ID].flightData.latitude += 0.001 * Math.cos(this.demoUnits.units[ID].flightData.heading);
|
||||
// this.demoUnits.units[ID].flightData.longitude += 0.001 * Math.sin(this.demoUnits.units[ID].flightData.heading);
|
||||
//});
|
||||
var ret = this.demoUnits;
|
||||
res.send(JSON.stringify(ret));
|
||||
};
|
||||
@ -79,14 +286,14 @@ class DemoDataGenerator {
|
||||
|
||||
generateRandomUnitsDemoData(unitsNumber)
|
||||
{
|
||||
var units = {};
|
||||
for (let i = 0; i < unitsNumber; i++)
|
||||
{
|
||||
units[String(i)] = JSON.parse(JSON.stringify(DEMO_UNIT_DATA));
|
||||
units[String(i)].flightData.latitude += (Math.random() - 0.5) * 0.3;
|
||||
units[String(i)].flightData.longitude += (Math.random() - 0.5) * 0.3;
|
||||
}
|
||||
return {"units": units};
|
||||
//var units = {};
|
||||
//for (let i = 0; i < unitsNumber; i++)
|
||||
//{
|
||||
// units[String(i)] = JSON.parse(JSON.stringify(DEMO_UNIT_DATA));
|
||||
// units[String(i)].flightData.latitude += (Math.random() - 0.5) * 0.3;
|
||||
// units[String(i)].flightData.longitude += (Math.random() - 0.5) * 0.3;
|
||||
//}
|
||||
return {"units": DEMO_UNIT_DATA};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#ground-unit-spawn-menu {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#active-coalition-label {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
@ -57,12 +61,7 @@
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#contextmenu>div:nth-child(3)>button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#contextmenu>div:nth-child(3){
|
||||
#contextmenu>div:nth-child(n+3){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -77,22 +76,23 @@
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
#contextmenu>div:nth-child(3)>button:last-of-type {
|
||||
#aircraft-spawn-menu>button,
|
||||
#ground-unit-spawn-menu>button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#unit-spawn-aircraft {
|
||||
#aircraft-spawn-button {
|
||||
background-image: var( --spawn-aircraft-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#unit-spawn-ground {
|
||||
#ground-unit-spawn-button {
|
||||
background-image: var( --spawn-ground-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#unit-spawn-smoke {
|
||||
#smoke-spawn-button {
|
||||
background-image: var( --spawn-smoke-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
@ -115,7 +115,7 @@
|
||||
[data-active-coalition=blue].unit-spawn-button:hover,
|
||||
[data-active-coalition=blue].unit-spawn-button.is-open,
|
||||
[data-active-coalition=blue]#active-coalition-label,
|
||||
[data-active-coalition=blue]#deploy-unit-button
|
||||
[data-active-coalition=blue].deploy-unit-button
|
||||
{
|
||||
background-color: var(--primary-blue)
|
||||
}
|
||||
@ -124,17 +124,17 @@
|
||||
[data-active-coalition=red].unit-spawn-button:hover,
|
||||
[data-active-coalition=red].unit-spawn-button.is-open,
|
||||
[data-active-coalition=red]#active-coalition-label,
|
||||
[data-active-coalition=red]#deploy-unit-button
|
||||
[data-active-coalition=red].deploy-unit-button
|
||||
{
|
||||
background-color: var(--primary-red)
|
||||
}
|
||||
|
||||
[data-active-coalition=blue]#deploy-unit-button:disabled {
|
||||
[data-active-coalition=blue].deploy-unit-button:disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--primary-blue);
|
||||
cursor: default;
|
||||
}
|
||||
[data-active-coalition=red]#deploy-unit-button:disabled {
|
||||
[data-active-coalition=red].deploy-unit-button:disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--primary-red);
|
||||
cursor: default;
|
||||
@ -168,4 +168,36 @@
|
||||
filter: invert(100%);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#smoke-spawn-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#smoke-spawn-menu>button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
#smoke-spawn-menu>button::before {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
[data-smoke-color=red]::before{ background-color: red; }
|
||||
[data-smoke-color=white]::before{ background-color: white; }
|
||||
[data-smoke-color=blue]::before{ background-color: blue; }
|
||||
[data-smoke-color=green]::before{ background-color: green; }
|
||||
[data-smoke-color=orange]::before{ background-color: orange; }
|
||||
|
||||
|
||||
|
||||
@ -2,8 +2,9 @@ import { LatLng } from "leaflet";
|
||||
import { getActiveCoalition, setActiveCoalition } from "..";
|
||||
import { ContextMenuOption } from "../@types/dom";
|
||||
import { ClickEvent } from "../map/map";
|
||||
import { spawnAircraft } from "../server/server";
|
||||
import { spawnAircraft, spawnGroundUnit } from "../server/server";
|
||||
import { aircraftDatabase } from "../units/aircraftdatabase";
|
||||
import { groundUnitsDatabase } from "../units/groundunitsdatabase";
|
||||
import { Dropdown } from "./dropdown";
|
||||
|
||||
export interface SpawnOptions {
|
||||
@ -21,24 +22,32 @@ export class ContextMenu {
|
||||
#aircraftRoleDropdown: Dropdown;
|
||||
#aircraftTypeDropdown: Dropdown;
|
||||
#aircraftLoadoutDropdown: Dropdown;
|
||||
//#unitsNumberDropdown: Dropdown;
|
||||
#groundUnitRoleDropdown: Dropdown;
|
||||
#groundUnitTypeDropdown: Dropdown;
|
||||
#spawnOptions: SpawnOptions = {role: "", type: "", latlng: this.#latlng, loadout: null, coalition: "blue", airbaseName: null};
|
||||
|
||||
constructor(id: string,) {
|
||||
this.#container = document.getElementById(id);
|
||||
this.#container?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
|
||||
|
||||
this.#aircraftRoleDropdown = new Dropdown("role-options", (role: string) => this.#setAircraftRole(role));
|
||||
this.#aircraftTypeDropdown = new Dropdown("aircraft-options", (type: string) => this.#setAircraftType(type));
|
||||
this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
|
||||
this.#aircraftTypeDropdown = new Dropdown("aircraft-type-options", (type: string) => this.#setAircraftType(type));
|
||||
this.#aircraftLoadoutDropdown = new Dropdown("loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
|
||||
//this.#unitsNumberDropdown = new Dropdown("#units-options", this.#setAircraftType, [""]);
|
||||
this.#groundUnitRoleDropdown = new Dropdown("ground-unit-role-options", (role: string) => this.#setGroundUnitRole(role));
|
||||
this.#groundUnitTypeDropdown = new Dropdown("ground-unit-type-options", (type: string) => this.#setGroundUnitType(type));
|
||||
|
||||
document.addEventListener("contextMenuShow", (e: any) => {
|
||||
this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
|
||||
this.#container?.querySelector("#unit-spawn-aircraft")?.classList.toggle("is-open", e.detail.type === "aircraft");
|
||||
this.#container?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", e.detail.type === "aircraft");
|
||||
this.#container?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", e.detail.type !== "ground-unit");
|
||||
this.#container?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", e.detail.type === "ground-unit");
|
||||
this.#container?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", e.detail.type !== "smoke");
|
||||
this.#container?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", e.detail.type === "smoke");
|
||||
|
||||
this.#resetAircraftRole();
|
||||
this.#resetAircraftType();
|
||||
this.#resetGroundUnitRole();
|
||||
this.#resetGroundUnitType();
|
||||
})
|
||||
|
||||
document.addEventListener("contextMenuDeployAircraft", () => {
|
||||
@ -48,6 +57,13 @@ export class ContextMenu {
|
||||
spawnAircraft(this.#spawnOptions);
|
||||
})
|
||||
|
||||
document.addEventListener("contextMenuDeployGroundUnit", () => {
|
||||
this.hide();
|
||||
this.#spawnOptions.coalition = getActiveCoalition();
|
||||
if (this.#spawnOptions)
|
||||
spawnGroundUnit(this.#spawnOptions);
|
||||
})
|
||||
|
||||
this.hide();
|
||||
}
|
||||
|
||||
@ -93,8 +109,9 @@ export class ContextMenu {
|
||||
}
|
||||
|
||||
#resetAircraftRole() {
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
|
||||
this.#aircraftRoleDropdown.reset();
|
||||
this.#aircraftTypeDropdown.reset();
|
||||
this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
|
||||
}
|
||||
@ -118,7 +135,7 @@ export class ContextMenu {
|
||||
}
|
||||
|
||||
#resetAircraftType() {
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
|
||||
this.#aircraftLoadoutDropdown.reset();
|
||||
(<HTMLImageElement>this.#container?.querySelector("#unit-image")).classList.toggle("hide", true);
|
||||
@ -132,7 +149,7 @@ export class ContextMenu {
|
||||
if (loadout)
|
||||
{
|
||||
this.#spawnOptions.loadout = loadout.code;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = false;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
|
||||
var items = loadout.items.map((item: any) => {return `${item.quantity}x ${item.name}`;});
|
||||
items.length == 0? items.push("Empty loadout"): "";
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren(
|
||||
@ -145,4 +162,42 @@ export class ContextMenu {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********* Ground unit spawn menu *********/
|
||||
#setGroundUnitRole(role: string)
|
||||
{
|
||||
if (this.#spawnOptions != null)
|
||||
{
|
||||
this.#spawnOptions.role = role;
|
||||
this.#resetGroundUnitRole();
|
||||
this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
|
||||
this.#groundUnitTypeDropdown.selectValue(0);
|
||||
}
|
||||
}
|
||||
|
||||
#resetGroundUnitRole() {
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
|
||||
this.#groundUnitRoleDropdown.reset();
|
||||
this.#groundUnitTypeDropdown.reset();
|
||||
this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
|
||||
}
|
||||
|
||||
#setGroundUnitType(label: string)
|
||||
{
|
||||
if (this.#spawnOptions != null)
|
||||
{
|
||||
this.#resetGroundUnitType();
|
||||
var type = groundUnitsDatabase.getNameByLabel(label);
|
||||
if (type != null)
|
||||
{
|
||||
this.#spawnOptions.type = type;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#resetGroundUnitType() {
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,6 @@
|
||||
import * as L from "leaflet"
|
||||
import { getContextMenu, getUnitsManager, getActiveCoalition } from "..";
|
||||
import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../server/server";
|
||||
import { aircraftDatabase } from "../units/aircraftdatabase";
|
||||
import { unitTypes } from "../units/unittypes";
|
||||
import { getContextMenu, getUnitsManager } from "..";
|
||||
import { BoxSelect } from "./boxselect";
|
||||
import { ContextMenuOption } from "../@types/dom";
|
||||
import { SpawnOptions } from "../controls/contextmenu";
|
||||
|
||||
export const IDLE = "IDLE";
|
||||
@ -201,11 +197,6 @@ export class Map extends L.Map {
|
||||
|
||||
#onMouseMove(e: any)
|
||||
{
|
||||
var selectedUnitPosition = null;
|
||||
var selectedUnits = getUnitsManager().getSelectedUnits();
|
||||
if (selectedUnits && selectedUnits.length == 1)
|
||||
selectedUnitPosition = new L.LatLng(selectedUnits[0].getFlightData().latitude, selectedUnits[0].getFlightData().longitude);
|
||||
|
||||
this.#lastMousePosition.x = e.originalEvent.x;
|
||||
this.#lastMousePosition.y = e.originalEvent.y;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { setConnected } from '..';
|
||||
import { SpawnOptions } from '../controls/contextmenu';
|
||||
|
||||
/* Edit here to change server address */
|
||||
const REST_ADDRESS = "http://localhost:30000/olympus";
|
||||
const REST_ADDRESS = "http://localhost:3000/demo";
|
||||
const UNITS_URI = "units";
|
||||
const REFRESH_URI = "refresh";
|
||||
const UPDATE_URI = "update";
|
||||
@ -64,8 +64,8 @@ export function spawnSmoke(color: string, latlng: L.LatLng) {
|
||||
POST(data, () => { });
|
||||
}
|
||||
|
||||
export function spawnGroundUnit(type: string, latlng: L.LatLng, coalition: string) {
|
||||
var command = { "type": type, "location": latlng, "coalition": coalition };
|
||||
export function spawnGroundUnit(spawnOptions: SpawnOptions) {
|
||||
var command = { "type": spawnOptions.type, "location": spawnOptions.latlng, "coalition": spawnOptions.coalition };
|
||||
var data = { "spawnGround": command }
|
||||
POST(data, () => { });
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { similarity } from "../other/utils";
|
||||
import { UnitDatabase } from "./unitdatabase"
|
||||
|
||||
export class AircraftDatabase extends UnitDatabase {
|
||||
|
||||
2766
client/src/units/groundunitsdatabase.ts
Normal file
2766
client/src/units/groundunitsdatabase.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,7 @@ import { getMap, getUnitsManager } from '..';
|
||||
import { rad2deg } from '../other/utils';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../server/server';
|
||||
import { aircraftDatabase } from './aircraftdatabase';
|
||||
import { groundUnitsDatabase } from './groundunitsdatabase';
|
||||
|
||||
var pathIcon = new Icon({
|
||||
iconUrl: 'images/marker-icon.png',
|
||||
@ -36,7 +37,7 @@ export class Unit extends Marker {
|
||||
if (type === "NavyUnit") return NavyUnit;
|
||||
}
|
||||
|
||||
constructor(ID: number, data: UnitData) {
|
||||
constructor(ID: number, data: UnitData, html: string) {
|
||||
super(new LatLng(0, 0), { riseOnHover: true });
|
||||
|
||||
this.ID = ID;
|
||||
@ -49,33 +50,7 @@ export class Unit extends Marker {
|
||||
this.on('contextmenu', (e) => this.#onContextMenu(e));
|
||||
|
||||
var icon = new DivIcon({
|
||||
html: `
|
||||
<div class="unit unit-air" data-status="hold" data-coalition="${this.getMissionData().coalition}" data-is-in-hotgroup="false" data-is-selected="false">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker-border"></div>
|
||||
<div class="unit-status"></div>
|
||||
<div class="unit-vvi"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">${aircraftDatabase.getShortLabelByName(this.getData().name)}</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">${this.getData().unitName}</div>
|
||||
<div class="unit-heading"></div>
|
||||
<div class="unit-altitude"></div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
html: html,
|
||||
className: 'ol-unit-marker',
|
||||
iconAnchor: [0, 0]
|
||||
});
|
||||
@ -408,19 +383,55 @@ export class AirUnit extends Unit {
|
||||
|
||||
export class Aircraft extends AirUnit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data,
|
||||
`<div class="unit unit-air" data-status="hold" data-coalition="${data.missionData.coalition}" data-is-in-hotgroup="false" data-is-selected="false">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker-border"></div>
|
||||
<div class="unit-status"></div>
|
||||
<div class="unit-vvi"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">${aircraftDatabase.getShortLabelByName(data.name)}</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">${data.unitName}</div>
|
||||
<div class="unit-heading"></div>
|
||||
<div class="unit-altitude"></div>
|
||||
</div>
|
||||
</div>`);
|
||||
}
|
||||
}
|
||||
|
||||
export class Helicopter extends AirUnit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data,
|
||||
``);
|
||||
}
|
||||
}
|
||||
|
||||
export class GroundUnit extends Unit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
var role = groundUnitsDatabase.getByName(data.name)?.loadouts[0].roles[0];
|
||||
var roleType = "ground";
|
||||
if (role === "SAM")
|
||||
roleType = "sam"
|
||||
super(ID, data, `
|
||||
<div class="unit unit-${roleType}" data-coalition="${data.missionData.coalition}">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">${role?.substring(0, 1).toUpperCase()}</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
getHidden() {
|
||||
@ -430,7 +441,7 @@ export class GroundUnit extends Unit {
|
||||
|
||||
export class NavyUnit extends Unit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data, "");
|
||||
}
|
||||
|
||||
getHidden() {
|
||||
@ -440,7 +451,7 @@ export class NavyUnit extends Unit {
|
||||
|
||||
export class Weapon extends Unit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data, "");
|
||||
this.setSelectable(false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,13 @@ export class UnitDatabase {
|
||||
|
||||
}
|
||||
|
||||
getByName(name: string)
|
||||
{
|
||||
if (name in this.units)
|
||||
return this.units[name];
|
||||
return null;
|
||||
}
|
||||
|
||||
getByLabel(label: string)
|
||||
{
|
||||
for (let unit in this.units)
|
||||
|
||||
@ -1,207 +0,0 @@
|
||||
|
||||
|
||||
export var unitTypes: any = {};
|
||||
/* NAVY */
|
||||
unitTypes.navy = {};
|
||||
unitTypes.navy.blue = [
|
||||
"VINSON",
|
||||
"PERRY",
|
||||
"TICONDEROG"
|
||||
]
|
||||
|
||||
unitTypes.navy.red = [
|
||||
"ALBATROS",
|
||||
"KUZNECOW",
|
||||
"MOLNIYA",
|
||||
"MOSCOW",
|
||||
"NEUSTRASH",
|
||||
"PIOTR",
|
||||
"REZKY"
|
||||
]
|
||||
|
||||
unitTypes.navy.civil = [
|
||||
"ELNYA",
|
||||
"Dry-cargo ship-2",
|
||||
"Dry-cargo ship-1",
|
||||
"ZWEZDNY"
|
||||
]
|
||||
|
||||
unitTypes.navy.submarine = [
|
||||
"KILO",
|
||||
"SOM"
|
||||
]
|
||||
|
||||
unitTypes.navy.speedboat = [
|
||||
"speedboat"
|
||||
]
|
||||
|
||||
/* VEHICLES (GROUND) */
|
||||
unitTypes.vehicles = []
|
||||
unitTypes.vehicles.Howitzers = [
|
||||
"2B11 mortar",
|
||||
"SAU Gvozdika",
|
||||
"SAU Msta",
|
||||
"SAU Akatsia",
|
||||
"SAU 2-C9",
|
||||
"M-109"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.IFV = [
|
||||
"AAV7",
|
||||
"BMD-1",
|
||||
"BMP-1",
|
||||
"BMP-2",
|
||||
"BMP-3",
|
||||
"Boman",
|
||||
"BRDM-2",
|
||||
"BTR-80",
|
||||
"BTR_D",
|
||||
"Bunker",
|
||||
"Cobra",
|
||||
"LAV-25",
|
||||
"M1043 HMMWV Armament",
|
||||
"M1045 HMMWV TOW",
|
||||
"M1126 Stryker ICV",
|
||||
"M-113",
|
||||
"M1134 Stryker ATGM",
|
||||
"M-2 Bradley",
|
||||
"Marder",
|
||||
"MCV-80",
|
||||
"MTLB",
|
||||
"Paratrooper RPG-16",
|
||||
"Paratrooper AKS-74",
|
||||
"Sandbox",
|
||||
"Soldier AK",
|
||||
"Infantry AK",
|
||||
"Soldier M249",
|
||||
"Soldier M4",
|
||||
"Soldier M4 GRG",
|
||||
"Soldier RPG",
|
||||
"TPZ"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.MLRS = [
|
||||
"Grad-URAL",
|
||||
"Uragan_BM-27",
|
||||
"Smerch",
|
||||
"MLRS"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.SAM = [
|
||||
"2S6 Tunguska",
|
||||
"Kub 2P25 ln",
|
||||
"5p73 s-125 ln",
|
||||
"S-300PS 5P85C ln",
|
||||
"S-300PS 5P85D ln",
|
||||
"SA-11 Buk LN 9A310M1",
|
||||
"Osa 9A33 ln",
|
||||
"Tor 9A331",
|
||||
"Strela-10M3",
|
||||
"Strela-1 9P31",
|
||||
"SA-11 Buk CC 9S470M1",
|
||||
"SA-8 Osa LD 9T217",
|
||||
"Patriot AMG",
|
||||
"Patriot ECS",
|
||||
"Gepard",
|
||||
"Hawk pcp",
|
||||
"SA-18 Igla manpad",
|
||||
"SA-18 Igla comm",
|
||||
"Igla manpad INS",
|
||||
"SA-18 Igla-S manpad",
|
||||
"SA-18 Igla-S comm",
|
||||
"Vulcan",
|
||||
"Hawk ln",
|
||||
"M48 Chaparral",
|
||||
"M6 Linebacker",
|
||||
"Patriot ln",
|
||||
"M1097 Avenger",
|
||||
"Patriot EPP",
|
||||
"Patriot cp",
|
||||
"Roland ADS",
|
||||
"S-300PS 54K6 cp",
|
||||
"Stinger manpad GRG",
|
||||
"Stinger manpad dsr",
|
||||
"Stinger comm dsr",
|
||||
"Stinger manpad",
|
||||
"Stinger comm",
|
||||
"ZSU-23-4 Shilka",
|
||||
"ZU-23 Emplacement Closed",
|
||||
"ZU-23 Emplacement",
|
||||
"ZU-23 Closed Insurgent",
|
||||
"Ural-375 ZU-23 Insurgent",
|
||||
"ZU-23 Insurgent",
|
||||
"Ural-375 ZU-23"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.Radar = [
|
||||
"1L13 EWR",
|
||||
"Kub 1S91 str",
|
||||
"S-300PS 40B6M tr",
|
||||
"S-300PS 40B6MD sr",
|
||||
"55G6 EWR",
|
||||
"S-300PS 64H6E sr",
|
||||
"SA-11 Buk SR 9S18M1",
|
||||
"Dog Ear radar",
|
||||
"Hawk tr",
|
||||
"Hawk sr",
|
||||
"Patriot str",
|
||||
"Hawk cwar",
|
||||
"p-19 s-125 sr",
|
||||
"Roland Radar",
|
||||
"snr s-125 tr"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.Structures = [
|
||||
"house1arm",
|
||||
"house2arm",
|
||||
"outpost_road",
|
||||
"outpost",
|
||||
"houseA_arm"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.Tanks = [
|
||||
"Challenger2",
|
||||
"Leclerc",
|
||||
"Leopard1A3",
|
||||
"Leopard-2",
|
||||
"M-60",
|
||||
"M1128 Stryker MGS",
|
||||
"M-1 Abrams",
|
||||
"T-55",
|
||||
"T-72B",
|
||||
"T-80UD",
|
||||
"T-90"
|
||||
]
|
||||
|
||||
unitTypes.vehicles.Unarmed = [
|
||||
"Ural-4320 APA-5D",
|
||||
"ATMZ-5",
|
||||
"ATZ-10",
|
||||
"GAZ-3307",
|
||||
"GAZ-3308",
|
||||
"GAZ-66",
|
||||
"M978 HEMTT Tanker",
|
||||
"HEMTT TFFT",
|
||||
"IKARUS Bus",
|
||||
"KAMAZ Truck",
|
||||
"LAZ Bus",
|
||||
"Hummer",
|
||||
"M 818",
|
||||
"MAZ-6303",
|
||||
"Predator GCS",
|
||||
"Predator TrojanSpirit",
|
||||
"Suidae",
|
||||
"Tigr_233036",
|
||||
"Trolley bus",
|
||||
"UAZ-469",
|
||||
"Ural ATsP-6",
|
||||
"Ural-375 PBU",
|
||||
"Ural-375",
|
||||
"Ural-4320-31",
|
||||
"Ural-4320T",
|
||||
"VAZ Car",
|
||||
"ZiL-131 APA-80",
|
||||
"SKP-11",
|
||||
"ZIL-131 KUNG",
|
||||
"ZIL-4331"
|
||||
]
|
||||
@ -5,16 +5,16 @@
|
||||
<input class="toggle-input" name="" type="checkbox" id="context-menu-toggle">
|
||||
<div data-active-coalition="blue" class="toggle-fill"></div>
|
||||
</label>
|
||||
<button data-active-coalition="blue" id="unit-spawn-aircraft" title="Spawn aircraft" data-on-click="contextMenuShow"
|
||||
<button data-active-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="unit-spawn-ground" title="Spawn ground unit" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "ground" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="unit-spawn-smoke" title="Spawn smoke" data-on-click="contextMenuShow"
|
||||
<button data-active-coalition="blue" id="ground-unit-spawn-button" title="Spawn ground unit" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "ground-unit" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "smoke" }' class="unit-spawn-button"></button>
|
||||
</div>
|
||||
<div id="aircraft-spawn-menu" class="ol-panel hide">
|
||||
<div class="ol-select-container">
|
||||
<div id="role-options" class="ol-select">
|
||||
<div id="aircraft-role-options" class="ol-select">
|
||||
<div class="ol-select-value">Aircraft role</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the aircraft roles buttons will be shown-->
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="ol-select-container">
|
||||
<div id="aircraft-options" class="ol-select">
|
||||
<div id="aircraft-type-options" class="ol-select">
|
||||
<div class="ol-select-value">Aircraft type</div>
|
||||
<div class="ol-select-options">
|
||||
<div>Select role first</div>
|
||||
@ -44,6 +44,33 @@
|
||||
<div id="loadout-list">
|
||||
</div>
|
||||
</div>
|
||||
<button id="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployUnit" disabled>Deploy unit</button>
|
||||
<button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployAircraft" disabled>Deploy unit</button>
|
||||
</div>
|
||||
<div id="ground-unit-spawn-menu" class="ol-panel hide">
|
||||
<div class="ol-select-container">
|
||||
<div id="ground-unit-role-options" class="ol-select">
|
||||
<div class="ol-select-value">Ground unit role</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the ground unit roles buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ol-select-container">
|
||||
<div id="ground-unit-type-options" class="ol-select">
|
||||
<div class="ol-select-value">Ground unit type</div>
|
||||
<div class="ol-select-options">
|
||||
<div>Select role first</div>
|
||||
<!-- This is where all the ground unit types buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployGroundUnit" disabled>Deploy unit</button>
|
||||
</div>
|
||||
<div id="smoke-spawn-menu" class="ol-panel hide">
|
||||
<button class="smoke-button" title="" data-smoke-color="white" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "type": "white" }'>White smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="blue" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "type": "blue" }'>Blue smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="red" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "type": "red" }'>Red smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="green" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "type": "green" }'>Green smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="orange" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "type": "orange" }'>Orange smoke</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user