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

Minor graphic fixes on unit markers. Readded unit symbols instead of milsymbol

Browse Source
This commit is contained in:
Pax1601
2023-02-19 17:25:54 +01:00
parent 0308f7c6a3
commit 63c2cc058d
117 changed files with 154 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,6 @@ export class Dropdown {
this.#content.style.left = this.#container.offsetLeft + "px";
this.#content.style.top = this.#container.offsetTop + this.#container.offsetHeight + "px";
console.log(this.#container);
document.body.appendChild(this.#content);
var height = 2;

1
client/src/controls/selectionscroll.ts
View File

@@ -62,7 +62,6 @@ export class SelectionScroll {
else
this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
console.log(y - 20 + this.#container.offsetHeight)
if (y - 20 + this.#container.offsetHeight < window.innerHeight)
this.#container.style.top = y - 20 + "px";
else

6
client/src/dcs/dcs.ts
View File

@@ -41,7 +41,7 @@ export function spawnSmoke(color: string, latlng: L.LatLng) {
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
console.log("Added " + color + " smoke at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
//console.log("Added " + color + " smoke at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
}
};
@@ -57,7 +57,7 @@ export function spawnGroundUnit(type: string, latlng: L.LatLng, coalition: strin
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
console.log("Added " + coalition + " " + type + " at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
//console.log("Added " + coalition + " " + type + " at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
}
};
@@ -73,7 +73,7 @@ export function spawnAircraft(type: string, latlng: L.LatLng, coalition: string,
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
console.log("Added " + coalition + " " + type + " at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
//console.log("Added " + coalition + " " + type + " at " + ConvertDDToDMS(latlng.lat, false) + " " + ConvertDDToDMS(latlng.lng, true));
}
};

6
client/src/map/map.ts
View File

@@ -120,12 +120,6 @@ export class Map extends L.Map {
else if (this.#state === "MOVE_UNIT") {
L.DomUtil.addClass(this.getContainer(),'crosshair-cursor-enabled');
}
else if (this.#state === "ATTACK") {
}
else if (this.#state === "FORMATION") {
}
}
getState() {

19
client/src/missiondata/airbasemarker.ts
View File

@@ -19,11 +19,11 @@ export class AirbaseMarker extends L.Marker
this.#name = options.name;
var icon = new L.DivIcon({
html: `<table class="airbasemarker-container" id="container">
html: `<table class="airbase-marker-container" id="container">
<tr>
<td>
<img class="airbasemarker-icon" id="icon" src="${options.src}">
<div class="airbasemarker-name" id="name">${options.name}</div>
<img class="airbase-marker-image" id="icon" src="${options.src}">
<div class="airbase-marker-name" id="name">${options.name}</div>
</td>
</tr>
</table>`,
@@ -40,16 +40,9 @@ export class AirbaseMarker extends L.Marker
var img = element.querySelector("#icon");
if (img != null)
{
img.classList.remove("airbasemarker-icon-blue");
img.classList.remove("airbasemarker-icon-red");
if (this.#coalitionID == 2)
{
img.classList.add("airbasemarker-icon-blue");
}
else if (this.#coalitionID == 1)
{
img.classList.add("airbasemarker-icon-red");
}
img.classList.toggle("blue", this.#coalitionID == 2);
img.classList.toggle("red", this.#coalitionID == 1);
img.classList.toggle("neutral", this.#coalitionID == 0);
}
}
}

2
client/src/panels/visibilitycontrolpanel.ts
View File

@@ -51,7 +51,7 @@ export class VisibilityControlPanel {
var airVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#air-visibility");
if (airVisibilityCheckbox.checked)
AirUnit.setVisibility({human: activeVisibility, ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
AirUnit.setVisibility({human: "full", ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
else
AirUnit.setVisibility({human: "hidden", ai: "hidden", uncontrolled: "hidden", dead: "hidden"});

10
client/src/units/aircraftDatabase.ts
View File

@@ -44,6 +44,12 @@ export function getLoadoutsByName(aircraft: string, loadoutName: string)
return null;
}
export function getUnitLabel(name: string)
{
//@ts-ignore TODO
return aircraftDatabase[name] === undefined? name: aircraftDatabase[name].label;
}
export var aircraftDatabase = {
"A-10C": {
"name": "A-10C",
@@ -512,8 +518,8 @@ export var aircraftDatabase = {
]
},
"F/A-18C": {
"name": "F/A-18C",
"FA-18C_hornet": {
"name": "FA-18C_hornet",
"label": "F/A-18C",
"loadouts": [
{

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

@@ -1,9 +1,9 @@
import { Marker, LatLng, Polyline, Icon } from 'leaflet';
import { getMap, getUnitsManager} from '..';
import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker } from './unitmarker';
import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker, MissileMarker, BombMarker } from './unitmarker';
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../dcs/dcs';
interface visibilityOptions {
interface VisibilityOptions {
dead: string;
ai: string;
uncontrolled: string;
@@ -393,8 +393,8 @@ export class Unit {
}
export class AirUnit extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
static visibility: VisibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "full"}
static setVisibility(visibility: VisibilityOptions)
{
getUnitsManager().forceUpdate();
AirUnit.visibility = visibility;
@@ -438,8 +438,8 @@ export class Helicopter extends AirUnit {
}
export class GroundUnit extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
static visibility: VisibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: VisibilityOptions)
{
getUnitsManager().forceUpdate();
GroundUnit.visibility = visibility;
@@ -474,8 +474,8 @@ export class GroundUnit extends Unit {
}
export class NavyUnit extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
static visibility: VisibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: VisibilityOptions)
{
getUnitsManager().forceUpdate();
NavyUnit.visibility = visibility;
@@ -507,8 +507,8 @@ export class NavyUnit extends Unit {
}
export class Weapon extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
static visibility: VisibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: VisibilityOptions)
{
getUnitsManager().forceUpdate();
Weapon.visibility = visibility;
@@ -535,14 +535,14 @@ export class Weapon extends Unit {
export class Missile extends Weapon {
constructor(ID: number, options: MarkerOptions) {
var marker = new WeaponMarker(options);
var marker = new MissileMarker(options);
super(ID, marker);
}
}
export class Bomb extends Weapon {
constructor(ID: number, options: MarkerOptions) {
var marker = new WeaponMarker(options);
var marker = new BombMarker(options);
super(ID, marker);
}
}

124
client/src/units/unitmarker.ts
View File

@@ -1,5 +1,6 @@
import * as L from 'leaflet'
import { Symbol } from 'milsymbol'
import { getMap } from '..'
import { getUnitLabel } from './aircraftDatabase'
import { AirUnit, GroundUnit, NavyUnit, Weapon } from './unit'
export interface MarkerOptions {
@@ -29,12 +30,11 @@ export class UnitMarker extends L.Marker {
constructor(options: MarkerOptions) {
super(new L.LatLng(0, 0), { riseOnHover: true });
this.#unitName = options.unitName;
this.#name = options.name;
this.#name = getUnitLabel(options.name);
this.#human = options.human;
this.#AI = options.AI;
var symbol = new Symbol(this.#computeMarkerCode(options), { size: 25 });
var img = symbol.asCanvas().toDataURL('image/png');
var img = this.getUnitImage();
var coalition = "";
if (options.coalitionID == 1)
@@ -50,7 +50,7 @@ export class UnitMarker extends L.Marker {
<td>
<div class="${coalition}" id="background"></div>
<div class="${coalition}" id="ring"></div>
<div class="unit-marker-icon" id="icon"><img src="${img}"></div>
<div class="unit-marker-icon" id="icon"><img class="${coalition} unit-marker-image" src="${img}"></div>
<div class="unit-marker-unitName" id="unitName">${this.#unitName}</div>
<div class="unit-marker-altitude" id="altitude"></div>
<div class="unit-marker-speed" id="speed"></div>
@@ -104,6 +104,9 @@ export class UnitMarker extends L.Marker {
altitudeDiv.innerHTML = String(Math.round(data.altitude / 0.3048 / 100) / 10);
speedDiv.innerHTML = String(Math.round(data.speed * 1.94384));
var pos = getMap().latLngToLayerPoint(this.getLatLng()).round();
this.setZIndexOffset(Math.floor(data.altitude) - pos.y);
if (!this.#alive)
{
this.getElement()?.querySelector("#icon")?.classList.add("unit-marker-dead");
@@ -142,85 +145,9 @@ export class UnitMarker extends L.Marker {
return "full";
}
#computeMarkerCode(options: MarkerOptions) {
var identity = "00";
var set = "00";
var entity = "00";
var entityType = "00";
var entitySubtype = "00";
var sectorOneModifier = "00";
var sectorTwoModifier = "00";
/* Identity */
if (options.coalitionID == 1)
identity = "06" /* Hostile */
else if (options.coalitionID == 2)
identity = "03" /* Friendly */
else
identity = "04" /* Neutral */
/* Air */
if (options.type.level1 == 1) {
set = "01"
entity = "11"
if (options.type.level2 == 1)
entityType = "01"
else if (options.type.level2 == 1)
entityType = "02"
if (options.type.level3 == 1)
entitySubtype = "04";
else if (options.type.level3 == 2)
entitySubtype = "05";
else if (options.type.level3 == 3)
entitySubtype = "04";
else if (options.type.level3 == 4)
entitySubtype = "02";
else if (options.type.level3 == 5)
entitySubtype = "00";
else if (options.type.level3 == 6)
entitySubtype = "00";
}
/* Ground */
else if (options.type.level1 == 2)
{
set = "10"
entity = "12"
entityType = "05"
}
/* Navy */
else if (options.type.level1 == 3)
set = "30"
/* Weapon */
else if (options.type.level1 == 4)
{
set = "02"
entity = "11"
if (options.type.level3 == 7)
{
sectorOneModifier = "01"
sectorTwoModifier = "01"
}
else if (options.type.level3 == 8)
{
sectorOneModifier = "01"
sectorTwoModifier = "02"
}
else if (options.type.level3 == 34)
{
sectorOneModifier = "02"
sectorTwoModifier = "01"
}
else if (options.type.level3 == 11)
{
sectorOneModifier = "02"
sectorTwoModifier = "02"
}
}
return `10${identity}${set}0000${entity}${entityType}${entitySubtype}${sectorOneModifier}${sectorTwoModifier}`
}
getUnitImage() {
return new Image().src = "images/units/unit.png"
}
}
export class AirUnitMarker extends UnitMarker {
@@ -239,6 +166,11 @@ export class AirUnitMarker extends UnitMarker {
else
return "minimal";
}
getUnitImage()
{
return new Image().src = "images/units/airUnit.png"
}
}
export class AircraftMarker extends AirUnitMarker {
@@ -264,6 +196,11 @@ export class GroundUnitMarker extends UnitMarker {
else
return "minimal";
}
getUnitImage()
{
return new Image().src = "images/units/groundUnit.png"
}
}
export class NavyUnitMarker extends UnitMarker {
@@ -282,6 +219,11 @@ export class NavyUnitMarker extends UnitMarker {
else
return "minimal";
}
getUnitImage()
{
return new Image().src = "images/units/navyUnit.png"
}
}
export class WeaponMarker extends UnitMarker {
@@ -300,4 +242,18 @@ export class WeaponMarker extends UnitMarker {
else
return "minimal";
}
}
export class BombMarker extends WeaponMarker {
getUnitImage()
{
return new Image().src = "images/units/bomb.png"
}
}
export class MissileMarker extends WeaponMarker {
getUnitImage()
{
return new Image().src = "images/units/missile.png"
}
}

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

@@ -37,7 +37,7 @@ export class UnitsManager {
var options = {
unitName: data.unitName,
name: data.name,
human: data.human,
human: data.flags.Human,
coalitionID: data.coalitionID,
type: data.type,
AI: data.AI
@@ -298,12 +298,12 @@ export class UnitsManager {
{
if (selectedUnits[idx].isWingman)
{
console.log(selectedUnits[idx].unitName + " is already in a formation.");
//console.log(selectedUnits[idx].unitName + " is already in a formation.");
return;
}
else if (selectedUnits[idx].isLeader)
{
console.log(selectedUnits[idx].unitName + " is already in a formation.");
//console.log(selectedUnits[idx].unitName + " is already in a formation.");
return;
}
else
@@ -326,7 +326,7 @@ export class UnitsManager {
}
else
{
console.log("At least 2 units must be selected to create a formation.");
//console.log("At least 2 units must be selected to create a formation.");
}
}
setTimeout(() => this.#updateUnitControlPanel(), 300); // TODO find better method, may fail