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

Added client support for server URIs

Browse Source
This commit is contained in:
dpassoni 2023-03-06 14:42:59 +01:00
parent 6a599a12a1
commit 8e83621b22
12 changed files with 221 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/public/stylesheets/layout.css
View File

@ -41,16 +41,15 @@ body {
margin: 50px;
}
#settings-panel {
#primary-toolbar {
position: absolute;
left: 10px;
height: fit-content;
width: fit-content;
top: 10px;
z-index: 1000;
display: flex;
align-items: center;
column-gap: 10px;
}
.content #primary-toolbar {
position: static;
}
#unit-control-panel {

1
client/public/stylesheets/olympus.css
View File

@ -1,6 +1,7 @@
@import url("layout.css");
@import url("airbases.css");
@import url("contextmenu.css");
@import url("units.css");
/* Variables definitions */
:root {

19
client/src/@types/server.d.ts vendored
View File

@ -1,6 +1,15 @@
interface ServerData {
units: {[key: string]: UnitData},
bullseye: any, //TODO
airbases: any, //TODO
logs: any //TODO
interface UnitsData {
units: {[key: string]: UnitData},
}
interface AirbasesData {
airbases: {[key: string]: any},
}
interface BullseyesData {
bullseyes: {[key: string]: any},
}
interface LogData {
logs: {[key: string]: string},
}

1
client/src/@types/unit.d.ts vendored
View File

@ -20,7 +20,6 @@ interface FormationData {
isLeader: boolean;
isWingman: boolean;
leaderID: number;
wingmen: Unit[];
wingmenIDs: number[];
}

34
client/src/index.ts
View File

@ -1,22 +1,22 @@
import { Map } from "./map/map"
import { getDataFromDCS } from "./server/server"
import { UnitsManager } from "./units/unitsmanager";
import { UnitInfoPanel } from "./panels/unitinfopanel";
import { ContextMenu } from "./controls/contextmenu";
import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
import { MissionData } from "./missiondata/missiondata";
import { MissionHandler } from "./missionhandler/missionhandler";
import { UnitControlPanel } from "./panels/unitcontrolpanel";
import { MouseInfoPanel } from "./panels/mouseinfopanel";
import { AIC } from "./aic/aic";
import { ATC } from "./atc/ATC";
import { FeatureSwitches } from "./FeatureSwitches";
import { LogPanel } from "./panels/logpanel";
import { getAirbases, getBulllseye, getUnits } from "./server/server";
var map: Map;
var contextMenu: ContextMenu;
var unitsManager: UnitsManager;
var missionData: MissionData;
var missionHandler: MissionHandler;
var aic: AIC;
var atc: ATC;
@ -29,7 +29,6 @@ var logPanel: LogPanel;
var connected: boolean = false;
var activeCoalition: string = "blue";
var refreshData: boolean = true;
var featureSwitches;
@ -40,7 +39,7 @@ function setup() {
/* Initialize */
map = new Map('map-container');
unitsManager = new UnitsManager();
missionData = new MissionData();
missionHandler = new MissionHandler();
contextMenu = new ContextMenu("contextmenu");
@ -50,7 +49,7 @@ function setup() {
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
//logPanel = new LogPanel("log-panel");
missionData = new MissionData();
missionHandler = new MissionHandler();
/* AIC */
let aicFeatureSwitch = featureSwitches.getSwitch( "aic" );
@ -76,31 +75,28 @@ function setup() {
}
/* On the first connection, force request of full data */
requestUpdate();
refreshData = false;
getAirbases((data: AirbasesData) => getMissionData()?.update(data));
getBulllseye((data: BullseyesData) => getMissionData()?.update(data));
getUnits((data: UnitsData) => getUnitsManager()?.update(data), true /* Does a full refresh */);
/* Start periodically requesting updates */
requestUpdate(true /* Start looping */);
}
function requestUpdate() {
getDataFromDCS(refreshData, update);
function requestUpdate(loop: boolean) {
/* Main update rate = 250ms is minimum time, equal to server update time. */
setTimeout(() => requestUpdate(), getConnected() ? 250 : 1000);
getUnits((data: UnitsData) => getUnitsManager()?.update(data))
setTimeout(() => requestUpdate(loop), getConnected() ? 250 : 1000);
getConnectionStatusPanel()?.update(getConnected());
}
export function update(data: ServerData) {
getUnitsManager()?.update(data);
getMissionData()?.update(data);
getLogPanel()?.update(data);
}
export function getMap() {
return map;
}
export function getMissionData() {
return missionData;
return missionHandler;
}
export function getContextMenu() {

0
client/src/missiondata/airbase.ts → client/src/missionhandler/airbase.ts
View File

18
client/src/missiondata/missiondata.ts → client/src/missionhandler/missionhandler.ts
View File

@ -9,7 +9,7 @@ var bullseyeIcons = [
new Icon({ iconUrl: 'images/bullseye2.png', iconAnchor: [30, 30]})
]
export class MissionData
export class MissionHandler
{
#bullseyes : any; //TODO declare interface
#bullseyeMarkers: any;
@ -27,13 +27,17 @@ export class MissionData
this.#airbasesMarkers = {};
}
update(data: ServerData)
update(data: BullseyesData | AirbasesData)
{
this.#bullseyes = data.bullseye;
this.#airbases = data.airbases;
if (this.#bullseyes != null && this.#airbases != null)
if ("bullseyes" in data)
{
this.#drawBullseye();
this.#bullseyes = data.bullseyes;
this.#drawBullseyes();
}
if ("airbases" in data)
{
this.#airbases = data.airbases;
this.#drawAirbases();
}
}
@ -43,7 +47,7 @@ export class MissionData
return this.#bullseyes;
}
#drawBullseye()
#drawBullseyes()
{
for (let idx in this.#bullseyes)
{

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

@ -1,267 +1,232 @@
import * as L from 'leaflet'
import { setConnected } from '..';
const DEMO = true;
/* Edit here to change server address */
const RESTaddress = "http://localhost:30000/olympus";
const REST_ADDRESS = "http://localhost:30000/olympus";
const UNITS_URI = "units";
const FULL_UPDATE_URI = "full";
const PARTIAL_UPDATE_URI = "partial";
const REFRESH_URI = "refresh";
const UPDATE_URI = "update";
const LOGS_URI = "logs";
const AIRBASES_URI = "airbases";
const BULLSEYE_URI = "bullseye";
export function getDataFromDCS(refresh: boolean, callback: CallableFunction) {
/* Request the updated unit data from the server */
export function GET(callback: CallableFunction, uri: string){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", RESTaddress, true);
xmlHttp.open("GET", `${REST_ADDRESS}/${uri}`, true);
xmlHttp.onload = function (e) {
var data = JSON.parse(xmlHttp.responseText);
callback(data);
setConnected(true);
};
xmlHttp.onerror = function () {
console.error("An error occurred during the XMLHttpRequest");
setConnected(false);
};
xmlHttp.send(null);
}
var request = { "refresh": refresh }
xmlHttp.send(JSON.stringify(request));
export function POST(request: object, callback: CallableFunction){
var xhr = new XMLHttpRequest();
xhr.open("PUT", REST_ADDRESS);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => { callback(); };
xhr.send(JSON.stringify(request));
}
export function getAirbases(callback: CallableFunction) {
GET(callback, AIRBASES_URI);
}
export function getBulllseye(callback: CallableFunction) {
GET(callback, BULLSEYE_URI);
}
export function getLogs(callback: CallableFunction) {
GET(callback, LOGS_URI);
}
export function getUnits(callback: CallableFunction, refresh: boolean = false) {
if (!DEMO)
GET(callback, `${UNITS_URI}/${refresh? REFRESH_URI: UPDATE_URI}}`);
else
callback(DEMO_UNITS_DATA);
}
export function addDestination(ID: number, path: any) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => { };
var command = { "ID": ID, "path": path }
var data = { "setPath": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function spawnSmoke(color: string, latlng: L.LatLng) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
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));
}
};
var command = { "color": color, "location": latlng };
var data = { "smoke": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function spawnGroundUnit(type: string, latlng: L.LatLng, coalition: string) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
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));
}
};
var command = { "type": type, "location": latlng, "coalition": coalition };
var data = { "spawnGround": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function spawnAircraft(type: string, latlng: L.LatLng, coalition: string, payloadName: string | null = null, airbaseName: string | null = null) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
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));
}
};
var command = { "type": type, "location": latlng, "coalition": coalition, "payloadName": payloadName != null? payloadName: "", "airbaseName": airbaseName != null? airbaseName: ""};
var data = { "spawnAir": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function attackUnit(ID: number, targetID: number) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " attack " + getUnitsManager().getUnitByID(targetID).unitName);
}
};
var command = { "ID": ID, "targetID": targetID };
var data = { "attackUnit": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function cloneUnit(ID: number, latlng: L.LatLng) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
}
};
var command = { "ID": ID, "location": latlng };
var data = { "cloneUnit": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function deleteUnit(ID: number) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
}
};
var command = { "ID": ID};
var data = { "deleteUnit": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function landAt(ID: number, latlng: L.LatLng) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
}
};
var command = { "ID": ID, "location": latlng };
var data = { "landAt": command }
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function changeSpeed(ID: number, speedChange: string) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
}
};
var command = {"ID": ID, "change": speedChange}
var data = {"changeSpeed": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function setSpeed(ID: number, speed: number) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
}
};
var command = {"ID": ID, "speed": speed}
var data = {"setSpeed": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function changeAltitude(ID: number, altitudeChange: string) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " altitude change request: " + altitudeChange);
}
};
var command = {"ID": ID, "change": altitudeChange}
var data = {"changeAltitude": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function setAltitude(ID: number, altitude: number) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
}
};
var command = {"ID": ID, "altitude": altitude}
var data = {"setAltitude": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function createFormation(ID: number, isLeader: boolean, wingmenIDs: number[]) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " created formation with: " + wingmenIDs);
}
};
var command = {"ID": ID, "wingmenIDs": wingmenIDs, "isLeader": isLeader}
var data = {"setLeader": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function setROE(ID: number, ROE: string) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
}
};
var command = {"ID": ID, "ROE": ROE}
var data = {"setROE": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
export function setReactionToThreat(ID: number, reactionToThreat: string) {
var xhr = new XMLHttpRequest();
xhr.open("PUT", RESTaddress);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
}
};
var command = {"ID": ID, "reactionToThreat": reactionToThreat}
var data = {"setReactionToThreat": command}
xhr.send(JSON.stringify(data));
POST(data, () => { });
}
const DEMO_UNITS_DATA = {
units: {
"1": {
AI: true,
name: "F-5E",
unitName: "Olympus 1-1",
groupName: "Group 1",
alive: true,
category: "Aircraft",
flightData: {
latitude: 37.3,
longitude: -116,
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",
}
},
"2": {
AI: true,
name: "F-5E",
unitName: "Olympus 1-1",
groupName: "Group 1",
alive: true,
category: "Aircraft",
flightData: {
latitude: 37.3,
longitude: -115.9,
altitude: 2000,
heading: .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",
}
}
},
bullseyes: [],
airbases: []
}

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

@ -49,26 +49,33 @@ export class Unit extends Marker {
this.on('contextmenu', (e) => this.#onContextMenu(e));
var icon = new DivIcon({
html: ` <svg class="unit" data-coalition="${this.getMissionData().coalition}" xmlns="http://www.w3.org/2000/svg">
<circle class="unit-spotlight" />
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 090deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
<rect class="unit-hotgroup"></rect>
<text x="74" y="27" class="unit-hotgroup-id">3</text>
<rect class="unit-selected-border" />
<rect class="unit-marker" />
<text x="50%" y="54px" class="unit-short-label">${aircraftDatabase.getShortLabelByName(this.getData().name)}</text>
<rect class="unit-fuel" />
<rect class="unit-fuel-level" />
<circle class="unit-ammo unit-ammo-fox-1" />
<circle class="unit-ammo unit-ammo-fox-2" />
<circle class="unit-ammo unit-ammo-fox-3" />
<circle class="unit-ammo unit-ammo-other" />
<g class="unit-summary">
<text class="unit-callsign" x="1" y="46">${this.getData().unitName}</text>
<text class="unit-heading" x="20" y="60"></text>
<text class="unit-altitude" x="46" y="60"></text>
</g>
</svg>`,
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>
`,
className: 'ol-unit-marker',
iconAnchor: [60, 60]
});
@ -287,7 +294,7 @@ export class Unit extends Marker {
this.setLatLng(new LatLng(this.getFlightData().latitude, this.getFlightData().longitude));
var element = this.getElement();
if (element != null) {
element.querySelector(".unit-vvi")?.setAttribute("style", `transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + ${rad2deg(this.getFlightData().heading)}deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + ${this.getFlightData().speed / 5}px );`);
element.querySelector(".unit-vvi")?.setAttribute("style", `style="height: ${this.getFlightData().speed / 5}px; transform:rotate(${rad2deg(this.getFlightData().heading)}deg);`);
element.querySelector(".unit")?.setAttribute("data-fuel-level", "20");
element.querySelector(".unit")?.setAttribute("data-has-fox-1", "true");

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

@ -36,12 +36,11 @@ export class UnitsManager {
}
}
removeUnit(ID: number) {
}
update(data: ServerData) {
update(data: UnitsData) {
for (let ID in data.units) {
/* Create the unit if missing from the local array, then update the data. Drawing is handled by leaflet. */
if (!(ID in this.#units)) {

6
client/views/index.ejs
View File

@ -26,9 +26,11 @@
<%- include('atc.ejs') %>
<%- include('contextmenu.ejs') %>
<%- include('unitcontrol.ejs') %>
<%- include('unitcontrolpanel.ejs') %>
<%- include('unitinfopanel.ejs') %>
<%- include('mouseinfopanel.ejs') %>
<%- include('navbar.ejs') %>
<%- include('mouseinfo.ejs') %>
<%- include('connectionstatuspanel.ejs') %>
<% /* %>
<%- include('log.ejs') %>

7
client/views/navbar.ejs
View File

@ -1,7 +1,8 @@
<nav id="primary-toolbar" class="ol-panel">
<div id="app-icon">
(I)
</div>
<nav id="app-icon">
<div id="options" class="ol-select-value icon"><img src="images/icon.png" class="main-logo"></img></div>
</nav>
<div id="map-type" class="ol-select">
<div class="ol-select-value">ArcGIS Satellite</div>
<div class="ol-select-options">