mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Readded demo data
This commit is contained in:
dpassoni
@@ -10,14 +10,14 @@ import { AIC } from "./aic/aic";
|
||||
import { ATC } from "./atc/ATC";
|
||||
import { FeatureSwitches } from "./FeatureSwitches";
|
||||
import { LogPanel } from "./panels/logpanel";
|
||||
import { getAirbases, getBulllseye as getBulllseyes, getUnits } from "./server/server";
|
||||
import { getAirbases, getBulllseye as getBulllseyes, getUnits, toggleDemoEnabled } from "./server/server";
|
||||
|
||||
var map: Map;
|
||||
var contextMenu: ContextMenu;
|
||||
|
||||
var unitsManager: UnitsManager;
|
||||
var missionHandler: MissionHandler;
|
||||
|
||||
|
||||
var aic: AIC;
|
||||
var atc: ATC;
|
||||
|
||||
@@ -38,144 +38,48 @@ function setup() {
|
||||
|
||||
featureSwitches = new FeatureSwitches();
|
||||
|
||||
/* Initialize */
|
||||
/* Initialize base functionalitites*/
|
||||
map = new Map('map-container');
|
||||
unitsManager = new UnitsManager();
|
||||
missionHandler = new MissionHandler();
|
||||
|
||||
/* Context menus */
|
||||
contextMenu = new ContextMenu("contextmenu");
|
||||
|
||||
|
||||
/* Panels */
|
||||
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
|
||||
unitControlPanel = new UnitControlPanel("unit-control-panel");
|
||||
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
|
||||
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
|
||||
//logPanel = new LogPanel("log-panel");
|
||||
|
||||
missionHandler = new MissionHandler();
|
||||
|
||||
/* AIC */
|
||||
let aicFeatureSwitch = featureSwitches.getSwitch( "aic" );
|
||||
if ( aicFeatureSwitch?.isEnabled() ) {
|
||||
let aicFeatureSwitch = featureSwitches.getSwitch("aic");
|
||||
if (aicFeatureSwitch?.isEnabled()) {
|
||||
aic = new AIC();
|
||||
// TODO: add back buttons
|
||||
}
|
||||
|
||||
/* Generic clicks */
|
||||
document.addEventListener( "click", ( ev ) => {
|
||||
|
||||
if ( ev instanceof PointerEvent && ev.target instanceof HTMLElement ) {
|
||||
|
||||
const target = ev.target;
|
||||
|
||||
if ( target.classList.contains( "olympus-dialog-close" ) ) {
|
||||
target.closest( "div.olympus-dialog" )?.classList.add( "hide" );
|
||||
}
|
||||
|
||||
const triggerElement = target.closest( "[data-on-click]" );
|
||||
|
||||
if ( triggerElement instanceof HTMLElement ) {
|
||||
const eventName:string = triggerElement.dataset.onClick || "";
|
||||
let params = JSON.parse( triggerElement.dataset.onClickParams || "{}" );
|
||||
params._element = triggerElement;
|
||||
|
||||
if ( eventName ) {
|
||||
document.dispatchEvent( new CustomEvent( eventName, {
|
||||
detail: params
|
||||
} ) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* Keyup events */
|
||||
document.addEventListener( "keyup", ev => {
|
||||
|
||||
switch( ev.code ) {
|
||||
case "KeyL":
|
||||
document.body.toggleAttribute( "data-hide-labels" );
|
||||
break;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
const unitName = document.getElementById( "unit-name" );
|
||||
|
||||
if ( unitName instanceof HTMLInputElement ) {
|
||||
|
||||
unitName.addEventListener( "change", ev => {
|
||||
unitName.setAttribute( "disabled", "true" );
|
||||
unitName.setAttribute( "readonly", "true" );
|
||||
|
||||
// Do something with this:
|
||||
console.log( unitName.value );
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener( "editUnitName", ev => {
|
||||
|
||||
unitName.removeAttribute( "disabled" );
|
||||
unitName.removeAttribute( "readonly" );
|
||||
unitName.focus();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
//*/
|
||||
|
||||
|
||||
|
||||
document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => {
|
||||
ev.detail._element.classList.toggle( "off" );
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.coalition );
|
||||
});
|
||||
|
||||
document.addEventListener( "toggleUnitVisibility", ( ev:CustomEventInit ) => {
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.unitType );
|
||||
});
|
||||
|
||||
|
||||
/** Olympus UI ***/
|
||||
document.querySelectorAll( ".ol-select" ).forEach( select => {
|
||||
|
||||
// Do open/close toggle
|
||||
select.addEventListener( "click", ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
select.classList.toggle( "is-open" );
|
||||
});
|
||||
|
||||
// Autoclose on mouseleave
|
||||
select.addEventListener( "mouseleave", ev => {
|
||||
select.classList.remove( "is-open" );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* ATC */
|
||||
let atcFeatureSwitch = featureSwitches.getSwitch( "atc" );
|
||||
if ( atcFeatureSwitch?.isEnabled() ) {
|
||||
let atcFeatureSwitch = featureSwitches.getSwitch("atc");
|
||||
if (atcFeatureSwitch?.isEnabled()) {
|
||||
atc = new ATC();
|
||||
// TODO: add back buttons
|
||||
}
|
||||
|
||||
/* Setup event handlers */
|
||||
setupEvents();
|
||||
|
||||
/* On the first connection, force request of full data */
|
||||
getAirbases((data: AirbasesData) => getMissionData()?.update(data));
|
||||
getBulllseyes((data: BullseyesData) => getMissionData()?.update(data));
|
||||
getUnits((data: UnitsData) => getUnitsManager()?.update(data), true /* Does a full refresh */);
|
||||
|
||||
|
||||
/* Start periodically requesting updates */
|
||||
startPeriodicUpdate();
|
||||
}
|
||||
|
||||
function startPeriodicUpdate()
|
||||
{
|
||||
function startPeriodicUpdate() {
|
||||
requestUpdate();
|
||||
requestRefresh();
|
||||
}
|
||||
@@ -201,10 +105,8 @@ function requestRefresh() {
|
||||
setTimeout(() => requestRefresh(), 5000);
|
||||
}
|
||||
|
||||
function checkSessionHash(newSessionHash: string)
|
||||
{
|
||||
if (sessionHash != null)
|
||||
{
|
||||
function checkSessionHash(newSessionHash: string) {
|
||||
if (sessionHash != null) {
|
||||
if (newSessionHash != sessionHash)
|
||||
location.reload();
|
||||
}
|
||||
@@ -212,6 +114,88 @@ function checkSessionHash(newSessionHash: string)
|
||||
sessionHash = newSessionHash;
|
||||
}
|
||||
|
||||
function setupEvents() {
|
||||
/* Generic clicks */
|
||||
document.addEventListener("click", (ev) => {
|
||||
if (ev instanceof PointerEvent && ev.target instanceof HTMLElement) {
|
||||
const target = ev.target;
|
||||
if (target.classList.contains("olympus-dialog-close")) {
|
||||
target.closest("div.olympus-dialog")?.classList.add("hide");
|
||||
}
|
||||
|
||||
const triggerElement = target.closest("[data-on-click]");
|
||||
if (triggerElement instanceof HTMLElement) {
|
||||
const eventName: string = triggerElement.dataset.onClick || "";
|
||||
let params = JSON.parse(triggerElement.dataset.onClickParams || "{}");
|
||||
params._element = triggerElement;
|
||||
|
||||
if (eventName) {
|
||||
document.dispatchEvent(new CustomEvent(eventName, {
|
||||
detail: params
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* Keyup events */
|
||||
document.addEventListener("keyup", ev => {
|
||||
switch (ev.code) {
|
||||
case "KeyL":
|
||||
document.body.toggleAttribute("data-hide-labels");
|
||||
break;
|
||||
case "KeyD":
|
||||
toggleDemoEnabled();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
const unitName = document.getElementById( "unit-name" );
|
||||
if ( unitName instanceof HTMLInputElement ) {
|
||||
unitName.addEventListener( "change", ev => {
|
||||
unitName.setAttribute( "disabled", "true" );
|
||||
unitName.setAttribute( "readonly", "true" );
|
||||
|
||||
// Do something with this:
|
||||
console.log( unitName.value );
|
||||
});
|
||||
|
||||
document.addEventListener( "editUnitName", ev => {
|
||||
unitName.removeAttribute( "disabled" );
|
||||
unitName.removeAttribute( "readonly" );
|
||||
unitName.focus();
|
||||
});
|
||||
}
|
||||
//*/
|
||||
|
||||
document.addEventListener("toggleCoalitionVisibility", (ev: CustomEventInit) => {
|
||||
ev.detail._element.classList.toggle("off");
|
||||
document.body.toggleAttribute("data-hide-" + ev.detail.coalition);
|
||||
});
|
||||
|
||||
document.addEventListener("toggleUnitVisibility", (ev: CustomEventInit) => {
|
||||
document.body.toggleAttribute("data-hide-" + ev.detail.unitType);
|
||||
});
|
||||
|
||||
|
||||
/** Olympus UI ***/
|
||||
document.querySelectorAll(".ol-select").forEach(select => {
|
||||
|
||||
// Do open/close toggle
|
||||
select.addEventListener("click", ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
select.classList.toggle("is-open");
|
||||
});
|
||||
|
||||
// Autoclose on mouseleave
|
||||
select.addEventListener("mouseleave", ev => {
|
||||
select.classList.remove("is-open");
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
export function getMap() {
|
||||
return map;
|
||||
}
|
||||
@@ -250,7 +234,7 @@ export function getConnectionStatusPanel() {
|
||||
|
||||
export function setActiveCoalition(newActiveCoalition: string) {
|
||||
activeCoalition = newActiveCoalition;
|
||||
document.querySelectorAll('[data-active-coalition]').forEach((element: any) => {element.setAttribute("data-active-coalition", activeCoalition)});
|
||||
document.querySelectorAll('[data-active-coalition]').forEach((element: any) => { element.setAttribute("data-active-coalition", activeCoalition) });
|
||||
}
|
||||
|
||||
export function getActiveCoalition() {
|
||||
|
||||
@@ -4,16 +4,23 @@ import { SpawnOptions } from '../controls/contextmenu';
|
||||
|
||||
/* Edit here to change server address */
|
||||
const REST_ADDRESS = "http://localhost:30000/olympus";
|
||||
const DEMO_ADDRESS = "http://localhost:3000/demo";
|
||||
const UNITS_URI = "units";
|
||||
const LOGS_URI = "logs";
|
||||
const AIRBASES_URI = "airbases";
|
||||
const BULLSEYE_URI = "bullseyes";
|
||||
|
||||
var lastUpdateTime = 0;
|
||||
var demoEnabled = false;
|
||||
|
||||
export function toggleDemoEnabled()
|
||||
{
|
||||
demoEnabled = !demoEnabled;
|
||||
}
|
||||
|
||||
export function GET(callback: CallableFunction, uri: string){
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", `${REST_ADDRESS}/${uri}`, true);
|
||||
xmlHttp.open("GET", `${demoEnabled? DEMO_ADDRESS: REST_ADDRESS}/${uri}`, true);
|
||||
xmlHttp.onload = function (e) {
|
||||
var data = JSON.parse(xmlHttp.responseText);
|
||||
callback(data);
|
||||
@@ -29,7 +36,7 @@ export function GET(callback: CallableFunction, uri: string){
|
||||
|
||||
export function POST(request: object, callback: CallableFunction){
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("PUT", REST_ADDRESS);
|
||||
xhr.open("PUT", demoEnabled? DEMO_ADDRESS: REST_ADDRESS);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
callback();
|
||||
|
||||
@@ -370,6 +370,8 @@ export class Unit extends Marker {
|
||||
element.querySelector(".unit-fuel-level")?.setAttribute("style", `width: ${this.getMissionData().fuel}%`);
|
||||
element.querySelector(".unit")?.toggleAttribute("data-has-low-fuel", this.getMissionData().fuel < 20);
|
||||
|
||||
element.querySelector(".unit")?.toggleAttribute("data-is-dead", !this.getBaseData().alive);
|
||||
|
||||
var unitHeadingDiv = element.querySelector(".unit-heading");
|
||||
if (unitHeadingDiv != null)
|
||||
unitHeadingDiv.innerHTML = String(Math.floor(rad2deg(this.getFlightData().heading)));
|
||||
@@ -518,7 +520,13 @@ export class GroundUnit extends Unit {
|
||||
|
||||
export class NavyUnit extends Unit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data, "");
|
||||
super(ID, data, `
|
||||
<div class="unit" data-object="unit-naval" data-coalition="${data.missionData.coalition}">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">N</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
getHidden() {
|
||||
@@ -527,20 +535,26 @@ export class NavyUnit extends Unit {
|
||||
}
|
||||
|
||||
export class Weapon extends Unit {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data, "");
|
||||
constructor(ID: number, data: UnitData, html: string) {
|
||||
super(ID, data, html);
|
||||
this.setSelectable(false);
|
||||
}
|
||||
}
|
||||
|
||||
export class Missile extends Weapon {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data, `
|
||||
<div class="unit" data-object="unit-weapon-missile" data-coalition="${data.missionData.coalition}">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
export class Bomb extends Weapon {
|
||||
constructor(ID: number, data: UnitData) {
|
||||
super(ID, data);
|
||||
super(ID, data, "");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user