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 bug fixing, added patcher for Export.lua, added plugin options to enable/disable mod

Browse Source
This commit is contained in:
Pax1601
2023-02-18 12:52:43 +01:00
parent 433b4bdf56
commit 0308f7c6a3
51 changed files with 767 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/TODO.txt
View File

@@ -4,6 +4,4 @@ scenario dropdown
explosion
wrong name for ground units
improve map zIndex
fuel is wrong (either 0 or 1, its is casting it to int somewhere)
weapons should not be selectable
human symbol if user

8
client/public/stylesheets/button.css
View File

@@ -1,4 +1,4 @@
.olympus-button {
.ol-button {
width: 24px;
height: 24px;
background-color: transparent;
@@ -7,11 +7,11 @@
align-items: center;
}
.olympus-button img {
.ol-button img {
width: 24px;
height: 24px;
}
.olympus-button:hover {}
.ol-button:hover {}
.olympus-button:active {}
.ol-button:active {}

4
client/public/stylesheets/connectionstatuspanel.css
View File

@@ -10,7 +10,7 @@
color: white;
}
.olympus-status-disconnected::after {
.ol-status-disconnected::after {
content: "";
position: absolute;
right: 5px;
@@ -21,7 +21,7 @@
background-color: red;
}
.olympus-status-connected::after {
.ol-status-connected::after {
content: "";
position: absolute;
right: 5px;

16
client/public/stylesheets/dropdown.css
View File

@@ -1,4 +1,4 @@
.olympus-dropdown {
.ol-dropdown {
width: 100%;
min-width: 100px;
height: 30px;
@@ -18,7 +18,7 @@
padding-left: 15px;
}
.olympus-dropdown::before {
.ol-dropdown::before {
content: "";
position: absolute;
height: 30px;
@@ -31,11 +31,11 @@
border-bottom-right-radius: 15px;
}
.olympus-dropdown-open {
.ol-dropdown-open {
border-bottom-left-radius: 0px;
}
.olympus-dropdown-open::after {
.ol-dropdown-open::after {
content: "";
position: absolute;
top: 13px;
@@ -50,7 +50,7 @@
-webkit-transform: rotate(-135deg);
}
.olympus-dropdown-closed::after {
.ol-dropdown-closed::after {
content: "";
position: absolute;
top: 9px;
@@ -65,7 +65,7 @@
-webkit-transform: rotate(45deg);
}
.olympus-dropdown-content {
.ol-dropdown-content {
position: fixed;
/*overflow: visible;
overflow-y: scroll;*/
@@ -75,7 +75,7 @@
border-bottom-right-radius: 4px;
}
.olympus-dropdown-element {
.ol-dropdown-element {
margin: 2px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: var(--background-color-dark);
@@ -85,6 +85,6 @@
padding-left: 5px;
}
.olympus-dropdown-element:hover {
.ol-dropdown-element:hover {
background-color: var(--highlight-color);
}

2
client/public/stylesheets/elements.css
View File

@@ -1,4 +1,4 @@
.olympus-element-1 {
.ol-element-1 {
background-color: #247be2;
height: 28;
border-radius: 14px;

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

@@ -45,7 +45,7 @@ body {
position: absolute;
left: 230px;
height: 30px;
width: 150;
width: fit-content;
top: 10px;
z-index: 1000;
display: flex;

2
client/public/stylesheets/panels.css
View File

@@ -1,5 +1,5 @@
/* Panels style */
.olympus-panel {
.ol-panel {
background-color: var(--background-color-dark);
font-size: 12px;
transition: bottom 0.2s;

28
client/public/stylesheets/selectionscroll.css
View File

@@ -1,4 +1,4 @@
.olympus-selection-scroll-container {
.ol-selection-scroll-container {
position: absolute;
font-size: 12px;
border-radius: 5px;
@@ -13,7 +13,7 @@
align-items: center;
}
#olympus-selection-scroll-top-bar {
#ol-selection-scroll-top-bar {
color: white;
font-size: 14px;
opacity: 1;
@@ -30,30 +30,30 @@
padding-right: 15px;
}
.olympus-selection-scroll {
.ol-selection-scroll {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
width: 100%;
}
.olympus-selection-scroll::-webkit-scrollbar {
.ol-selection-scroll::-webkit-scrollbar {
width: 10px;
}
.olympus-selection-scroll::-webkit-scrollbar-track {
.ol-selection-scroll::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 100px;
}
.olympus-selection-scroll::-webkit-scrollbar-thumb {
.ol-selection-scroll::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 100px;
opacity: 0.8;
margin-top: 10px;
}
.olympus-selection-scroll-element {
.ol-selection-scroll-element {
border-bottom: 1px solid #FFF5;
color: white;
cursor: pointer;
@@ -66,25 +66,25 @@
font-weight: 600;
}
.olympus-selection-scroll:last-child {
.ol-selection-scroll:last-child {
border-radius: 5px;
border-bottom: 0px transparent !important;
}
.olympus-selection-scroll-container label {
.ol-selection-scroll-container label {
display: inline-block;
width: 40px;
height: 24px;
}
.olympus-selection-scroll-container input {
.ol-selection-scroll-container input {
display: inline-block;
width: 0;
height: 0;
margin: 0px;
}
.olympus-selection-scroll-switch {
.ol-selection-scroll-switch {
position: relative;
display: inline-block;
width: 40px;
@@ -94,7 +94,7 @@
cursor: pointer;
}
.olympus-selection-scroll-switch:before {
.ol-selection-scroll-switch:before {
position: absolute;
content: "";
height: 16px;
@@ -107,13 +107,13 @@
border-radius: 999px;
}
input:checked+.olympus-selection-scroll-switch:before {
input:checked+.ol-selection-scroll-switch:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
.olympus-selection-scroll-title {
.ol-selection-scroll-title {
font-size: 11px;
font-weight: 600;
}

16
client/public/stylesheets/selectionwheel.css
View File

@@ -1,4 +1,4 @@
.olympus-selection-wheel {
.ol-selection-wheel {
margin: 0;
position: fixed;
z-index: 1000;
@@ -10,7 +10,7 @@
justify-content: center;
}
.olympus-wheel {
.ol-wheel {
width: 100%;
border-radius: 50%;
background-color: var(--background-color-dark);
@@ -19,7 +19,7 @@
transition: background-color 0.2s;
}
.olympus-wheel:before {
.ol-wheel:before {
content: "";
display: block;
padding-top: 100%;
@@ -57,17 +57,17 @@
/*filter: invert(21%) sepia(23%) saturate(775%) hue-rotate(170deg) brightness(92%) contrast(90%);*/
}
.olympus-selection-wheel label {
.ol-selection-wheel label {
width: 0;
height: 0;
}
.olympus-selection-wheel input {
.ol-selection-wheel input {
width: 0;
height: 0;
}
.olympus-selection-wheel-switch {
.ol-selection-wheel-switch {
position: absolute;
top: 50%;
left: 50%;
@@ -81,7 +81,7 @@
cursor: pointer;
}
.olympus-selection-wheel-switch:before {
.ol-selection-wheel-switch:before {
position: absolute;
content: "";
height: 26px;
@@ -95,7 +95,7 @@
}
input:checked+.olympus-selection-wheel-switch:before {
input:checked+.ol-selection-wheel-switch:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);

19
client/public/stylesheets/style.css
View File

@@ -184,4 +184,23 @@ html {
font-size: 12px;
z-index: 2000;
font-weight: 600;
}
.ol-scrollable {
overflow-y: auto;
}
.ol-scrollable::-webkit-scrollbar {
width: 10px;
}
.ol-scrollable::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 100px;
}
.ol-scrollable::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 100px;
opacity: 0.8;
}

5
client/public/stylesheets/unitcontrolpanel.css
View File

@@ -29,7 +29,10 @@
flex-direction: column;
row-gap: 5px;
width: 100%;
height: 100%;
height: fit-content;
max-height: 200px;
padding-top: 10px;
padding-bottom: 10px;
}
#formation-buttons-container {

9
client/public/stylesheets/unitinfopanel.css
View File

@@ -119,3 +119,12 @@
font-weight: 600;
}
#loadout-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2px;
row-gap: 2px;
min-height: 0px;
max-height: 70px; /* TODO: fix me, magic number */
}

20
client/public/stylesheets/visibilitycontrolpanel.css
View File

@@ -1,4 +1,16 @@
#visibility-control-panel .olympus-button {
filter: invert(100%);
opacity: 0.8;
}
#visibility-control-panel
{
display: flex;
column-gap: 10px;
}
#visibility-control-panel .label {
color: white;
font-size: 12px;
font-weight: 600;
}
#visibility-control-panel .vl {
height: 60%;
}

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

@@ -20,10 +20,10 @@ export class Dropdown {
open() {
if (this.#container != null) {
this.#open = true;
this.#container.classList.add("olympus-dropdown-open");
this.#container.classList.remove("olympus-dropdown-closed");
this.#container.classList.add("ol-dropdown-open");
this.#container.classList.remove("ol-dropdown-closed");
this.#content = document.createElement("div");
this.#content.classList.add("olympus-dropdown-content");
this.#content.classList.add("ol-dropdown-content");
this.#content.style.width = (this.#container.offsetWidth - this.#container.offsetHeight) + "px";
this.#content.style.left = this.#container.offsetLeft + "px";
@@ -34,7 +34,7 @@ export class Dropdown {
var height = 2;
for (let optionID in this.#options) {
var node = document.createElement("div");
node.classList.add("olympus-dropdown-element");
node.classList.add("ol-dropdown-element");
node.appendChild(document.createTextNode(this.#options[optionID]));
this.#content.appendChild(node);
height += node.offsetHeight + 2;
@@ -53,8 +53,8 @@ export class Dropdown {
close() {
if (this.#container != null) {
this.#open = false;
this.#container?.classList.remove("olympus-dropdown-open");
this.#container?.classList.add("olympus-dropdown-closed");
this.#container?.classList.remove("ol-dropdown-open");
this.#container?.classList.add("ol-dropdown-closed");
if (this.#content != null)
document.body.removeChild(this.#content);
}

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

@@ -20,18 +20,17 @@ export class SelectionScroll {
this.hide();
if (this.#container != null && options.length >= 1) {
var titleDiv = this.#container.querySelector("#olympus-selection-scroll-top-bar")?.querySelector(".olympus-selection-scroll-title");
var titleDiv = this.#container.querySelector("#ol-selection-scroll-top-bar")?.querySelector(".ol-selection-scroll-title");
if (titleDiv)
titleDiv.innerHTML = title;
this.#container.style.display = this.#display;
this.#container.style.left = x - this.#container.offsetWidth / 2 + "px";
this.#container.style.top = y - 20 + "px";
var scroll = this.#container.querySelector(".olympus-selection-scroll");
var scroll = this.#container.querySelector(".ol-selection-scroll");
if (scroll != null)
{
for (let optionID in options) {
var node = document.createElement("div");
node.classList.add("olympus-selection-scroll-element");
node.classList.add("ol-selection-scroll-element");
if (typeof options[optionID] === 'string' || options[optionID] instanceof String){
node.appendChild(document.createTextNode(options[optionID]));
node.addEventListener('click', () => callback(options[optionID]));
@@ -45,7 +44,7 @@ export class SelectionScroll {
}
/* Hide the coalition switch if required */
var switchContainer = <HTMLElement>this.#container.querySelector("#olympus-selection-scroll-top-bar")?.querySelector("#coalition-switch-container");
var switchContainer = <HTMLElement>this.#container.querySelector("#ol-selection-scroll-top-bar")?.querySelector("#coalition-switch-container");
if (showCoalition == false) {
switchContainer.style.display = "none";
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--neutral-coalition-color"));
@@ -57,14 +56,26 @@ export class SelectionScroll {
else
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
}
if (x - this.#container.offsetWidth / 2 + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = x - this.#container.offsetWidth / 2 + "px";
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
this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
}
}
hide() {
if (this.#container != null) {
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".olympus-selection-scroll-element");
var scroll = this.#container.querySelector(".olympus-selection-scroll");
var buttons = this.#container.querySelectorAll(".ol-selection-scroll-element");
var scroll = this.#container.querySelector(".ol-selection-scroll");
if (scroll != null)
{
for (let child of buttons) {

94
client/src/index.ts
View File

@@ -11,6 +11,7 @@ import { MissionData } from "./missiondata/missiondata";
import { UnitControlPanel } from "./panels/unitcontrolpanel";
import { MouseInfoPanel } from "./panels/mouseInfoPanel";
import { Slider } from "./controls/slider";
import { VisibilityControlPanel } from "./panels/visibilitycontrolpanel";
/* TODO: should this be a class? */
var map: Map;
@@ -24,6 +25,7 @@ var unitInfoPanel: UnitInfoPanel;
var connectionStatusPanel: ConnectionStatusPanel;
var unitControlPanel: UnitControlPanel;
var mouseInfoPanel: MouseInfoPanel;
var visibilityControlPanel: VisibilityControlPanel;
var scenarioDropdown: Dropdown;
var mapSourceDropdown: Dropdown;
@@ -32,11 +34,6 @@ var slowButton: Button;
var fastButton: Button;
var climbButton: Button;
var descendButton: Button;
var userVisibilityButton: Button;
var aiVisibilityButton: Button;
var uncontrolledVisibilityButton: Button;
var weaponVisibilityButton: Button;
var deadVisibilityButton: Button;
var altitudeSlider: Slider;
var airspeedSlider: Slider;
@@ -47,15 +44,20 @@ var activeCoalition: string;
function setup() {
/* Initialize */
map = new Map('map-container');
unitsManager = new UnitsManager();
selectionWheel = new SelectionWheel("selection-wheel");
selectionScroll = new SelectionScroll("selection-scroll");
unitsManager = new UnitsManager();
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
unitControlPanel = new UnitControlPanel("unit-control-panel");
scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Marianas", "Nevada", "South Atlantic", "The channel"], () => { });
mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
visibilityControlPanel = new VisibilityControlPanel("visibility-control-panel");
scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Marianas", "Nevada", "South Atlantic", "The channel"], () => { });
mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
missionData = new MissionData();
/* Unit control buttons */
@@ -68,18 +70,6 @@ function setup() {
altitudeSlider = new Slider("altitude-slider", 0, 100, "ft", (value: number) => getUnitsManager().selectedUnitsSetAltitude(value * 0.3048));
airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
/* Visibility buttons */
userVisibilityButton = new Button("user-visibility-button", ["images/buttons/user-full.svg", "images/buttons/user-partial.svg", "images/buttons/user-none.svg", "images/buttons/user-hidden.svg"], () => { getUnitsManager().forceUpdate() });
aiVisibilityButton = new Button("ai-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { getUnitsManager().forceUpdate() });
uncontrolledVisibilityButton = new Button("uncontrolled-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { getUnitsManager().forceUpdate() });
weaponVisibilityButton = new Button("weapon-visibility-button", ["images/buttons/weapon-partial.svg", "images/buttons/weapon-none.svg", "images/buttons/weapon-hidden.svg"], () => { getUnitsManager().forceUpdate() });
deadVisibilityButton = new Button("dead-visibility-button", ["images/buttons/dead.svg", "images/buttons/dead-hidden.svg"], () => { getUnitsManager().forceUpdate() });
aiVisibilityButton.setState(1);
uncontrolledVisibilityButton.setState(3);
weaponVisibilityButton.setState(1);
deadVisibilityButton.setState(1);
/* Default values */
activeCoalition = "blue";
connected = false;
@@ -147,70 +137,6 @@ export function getConnected() {
return connected;
}
export function getVisibilitySettings() {
var visibility = {
user: "",
ai: "",
uncontrolled: "",
weapon: "",
dead: ""
};
switch (userVisibilityButton.getState()) {
case 0:
visibility.user = "full"; break;
case 1:
visibility.user = "partial"; break;
case 2:
visibility.user = "none"; break;
case 3:
visibility.user = "hidden"; break;
}
switch (aiVisibilityButton.getState()) {
case 0:
visibility.ai = "full"; break;
case 1:
visibility.ai = "partial"; break;
case 2:
visibility.ai = "none"; break;
case 3:
visibility.ai = "hidden"; break;
}
switch (uncontrolledVisibilityButton.getState()) {
case 0:
visibility.uncontrolled = "full"; break;
case 1:
visibility.uncontrolled = "partial"; break;
case 2:
visibility.uncontrolled = "none"; break;
case 3:
visibility.uncontrolled = "hidden"; break;
}
switch (weaponVisibilityButton.getState()) {
case 0:
visibility.weapon = "partial"; break;
case 1:
visibility.weapon = "none"; break;
case 2:
visibility.weapon = "hidden"; break;
}
switch (deadVisibilityButton.getState()) {
case 0:
visibility.dead = "none"; break;
case 1:
visibility.dead = "hidden"; break;
}
return visibility;
}
export function getVisibilityButtons() {
return {user: userVisibilityButton, ai: aiVisibilityButton, weapon: weaponVisibilityButton, dead: deadVisibilityButton}
}
export function getUnitControlSliders() {
return {altitude: altitudeSlider, airspeed: airspeedSlider}
}

8
client/src/panels/connectionstatuspanel.ts
View File

@@ -11,13 +11,13 @@ export class ConnectionStatusPanel {
if (div != null) {
if (connected) {
div.innerHTML = "Connected";
div.classList.add("olympus-status-connected");
div.classList.remove("olympus-status-disconnected");
div.classList.add("ol-status-connected");
div.classList.remove("ol-status-disconnected");
}
else {
div.innerHTML = "Disconnected";
div.classList.add("olympus-status-disconnected");
div.classList.remove("olympus-status-connected");
div.classList.add("ol-status-disconnected");
div.classList.remove("ol-status-connected");
}
}
}

4
client/src/panels/unitinfopanel.ts
View File

@@ -26,7 +26,7 @@ export class UnitInfoPanel {
if (this.#element != null) {
var els = this.#element.getElementsByClassName("js-loadout-element");
while (els.length > 0)
this.#element.querySelector("#loadout-data")?.removeChild(els[0]);
this.#element.querySelector("#loadout-container")?.removeChild(els[0]);
for (let index in unit.ammo) {
var ammo = unit.ammo[index];
@@ -35,7 +35,7 @@ export class UnitInfoPanel {
var el = document.createElement("div")
el.classList.add("js-loadout-element", "rectangular-container-dark")
el.innerHTML = amount + "x" + displayName;
this.#element.querySelector("#loadout-data")?.appendChild(el);
this.#element.querySelector("#loadout-container")?.appendChild(el);
}
this.#element.querySelector("#unit-name")!.innerHTML = unit.unitName;

80
client/src/panels/visibilitycontrolpanel.ts Normal file
View File

@@ -0,0 +1,80 @@
import { AirUnit, GroundUnit, NavyUnit, Weapon } from "../units/unit";
export class VisibilityControlPanel {
#element: HTMLElement
constructor(ID: string) {
this.#element = <HTMLElement>document.getElementById(ID);
if (this.#element != null)
{
var airVisibilityCheckbox = this.#element.querySelector("#air-visibility");
var groundVisibilityCheckbox = this.#element.querySelector("#ground-visibility");
var navyVisibilityCheckbox = this.#element.querySelector("#navy-visibility");
var weaponVisibilityCheckbox = this.#element.querySelector("#weapon-visibility");
airVisibilityCheckbox?.addEventListener("change", () => this.#onChange());
groundVisibilityCheckbox?.addEventListener("change", () => this.#onChange());
navyVisibilityCheckbox?.addEventListener("change", () => this.#onChange());
weaponVisibilityCheckbox?.addEventListener("change", () => this.#onChange());
var fullVisibilitySelection = this.#element.querySelector("#full-visibility");
var partialVisibilitySelection = this.#element.querySelector("#partial-visibility");
var minimalVisibilitySelection = this.#element.querySelector("#minimal-visibility");
fullVisibilitySelection?.addEventListener("change", () => this.#onChange());
partialVisibilitySelection?.addEventListener("change", () => this.#onChange());
minimalVisibilitySelection?.addEventListener("change", () => this.#onChange());
var uncontrolledVisibilityCheckbox = this.#element.querySelector("#uncontrolled-visibility");
uncontrolledVisibilityCheckbox?.addEventListener("change", () => this.#onChange());
}
}
#onChange(){
if (this.#element != null)
{
var fullVisibilitySelection = <HTMLInputElement> this.#element.querySelector("#full-visibility");
var partialVisibilitySelection = <HTMLInputElement> this.#element.querySelector("#partial-visibility");
var minimalVisibilitySelection = <HTMLInputElement> this.#element.querySelector("#minimal-visibility");
var activeVisibility = "";
if (fullVisibilitySelection.checked)
activeVisibility = "full";
else if (partialVisibilitySelection.checked)
activeVisibility = "partial";
else if (minimalVisibilitySelection.checked)
activeVisibility = "minimal";
var uncontrolledVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#uncontrolled-visibility");
var uncontrolledVisibility = !uncontrolledVisibilityCheckbox.checked;
var airVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#air-visibility");
if (airVisibilityCheckbox.checked)
AirUnit.setVisibility({human: activeVisibility, ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
else
AirUnit.setVisibility({human: "hidden", ai: "hidden", uncontrolled: "hidden", dead: "hidden"});
var groundVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#ground-visibility");
if (groundVisibilityCheckbox.checked)
GroundUnit.setVisibility({human: activeVisibility, ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
else
GroundUnit.setVisibility({human: "hidden", ai: "hidden", uncontrolled: "hidden", dead: "hidden"});
var navyVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#navy-visibility");
if (navyVisibilityCheckbox.checked)
NavyUnit.setVisibility({human: activeVisibility, ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
else
NavyUnit.setVisibility({human: "hidden", ai: "hidden", uncontrolled: "hidden", dead: "hidden"});
var weaponVisibilityCheckbox = <HTMLInputElement> this.#element.querySelector("#weapon-visibility");
if (weaponVisibilityCheckbox.checked)
Weapon.setVisibility({human: activeVisibility, ai: activeVisibility, uncontrolled: uncontrolledVisibility? activeVisibility: "hidden", dead: "hidden"});
else
Weapon.setVisibility({human: "hidden", ai: "hidden", uncontrolled: "hidden", dead: "hidden"});
}
}
}

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

@@ -1,9 +1,15 @@
import { Marker, LatLng, Polyline, Icon } from 'leaflet';
import { ConvertDDToDMS } from '../other/utils';
import { getMap, getUnitsManager, getVisibilitySettings } from '..';
import { getMap, getUnitsManager} from '..';
import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker } from './unitmarker';
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../dcs/dcs';
interface visibilityOptions {
dead: string;
ai: string;
uncontrolled: string;
human: string;
}
var pathIcon = new Icon({
iconUrl: 'images/marker-icon.png',
shadowUrl: 'images/marker-shadow.png',
@@ -387,20 +393,33 @@ export class Unit {
}
export class AirUnit extends Unit {
getHidden() {
if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
return true
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
{
getUnitsManager().forceUpdate();
AirUnit.visibility = visibility;
}
static getVisibility()
{
return AirUnit.visibility;
}
getHidden() {
if (this.alive)
{
if (this.flags.user && getVisibilitySettings().user === "hidden")
return true
else if (!this.flags.user && getVisibilitySettings().ai === "hidden")
return true
if (this.flags.user)
return AirUnit.getVisibility().human === "hidden"
if (this.AI)
return AirUnit.getVisibility().ai === "hidden"
else
return AirUnit.getVisibility().uncontrolled === "hidden"
}
else
return getVisibilitySettings().dead === "hidden"
return false;
{
return AirUnit.getVisibility().dead === "hidden"
}
}
}
@@ -419,52 +438,87 @@ 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)
{
getUnitsManager().forceUpdate();
GroundUnit.visibility = visibility;
}
static getVisibility()
{
return GroundUnit.visibility;
}
constructor(ID: number, options: MarkerOptions) {
var marker = new GroundUnitMarker(options);
super(ID, marker);
}
getHidden() {
if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
return true
if (this.alive)
{
if (this.flags.user && getVisibilitySettings().user === "hidden")
return true
else if (!this.flags.user && getVisibilitySettings().ai === "hidden")
return true
if (this.flags.user)
return GroundUnit.getVisibility().human === "hidden"
if (this.AI)
return GroundUnit.getVisibility().ai === "hidden"
else
return GroundUnit.getVisibility().uncontrolled === "hidden"
}
else
return getVisibilitySettings().dead === "hidden"
return false;
{
return GroundUnit.getVisibility().dead === "hidden"
}
}
}
export class NavyUnit extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
{
getUnitsManager().forceUpdate();
NavyUnit.visibility = visibility;
}
static getVisibility()
{
return NavyUnit.visibility;
}
constructor(ID: number, options: MarkerOptions) {
var marker = new NavyUnitMarker(options);
super(ID, marker);
}
getHidden() {
if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
return true
if (this.alive)
{
if (this.flags.user && getVisibilitySettings().user === "hidden")
return true
else if (!this.flags.user && getVisibilitySettings().ai === "hidden")
return true
if (this.AI)
return NavyUnit.getVisibility().ai === "hidden"
else
return NavyUnit.getVisibility().uncontrolled === "hidden"
}
else
return getVisibilitySettings().dead === "hidden"
return false;
{
return NavyUnit.getVisibility().dead === "hidden"
}
}
}
export class Weapon extends Unit {
static visibility: visibilityOptions = {dead: "hidden", ai: "partial", uncontrolled: "partial", human: "partial"}
static setVisibility(visibility: visibilityOptions)
{
getUnitsManager().forceUpdate();
Weapon.visibility = visibility;
}
static getVisibility()
{
return Weapon.visibility;
}
constructor(ID: number, marker: UnitMarker)
{
super(ID, marker);
@@ -473,13 +527,9 @@ export class Weapon extends Unit {
getHidden() {
if (this.alive)
{
if (!this.flags.user && getVisibilitySettings().weapon === "hidden")
return true
}
return Weapon.getVisibility().uncontrolled === "hidden"
else
return getVisibilitySettings().dead === "hidden"
return false;
return true;
}
}

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

@@ -1,6 +1,6 @@
import * as L from 'leaflet'
import { Symbol } from 'milsymbol'
import { getVisibilitySettings } from '..'
import { AirUnit, GroundUnit, NavyUnit, Weapon } from './unit'
export interface MarkerOptions {
unitName: string
@@ -88,13 +88,13 @@ export class UnitMarker extends L.Marker {
speedDiv.style.display = '';
/* If visibility is partial shown only icon and unit name. If none, shown only icon. */
if (this.getVisibility() === "partial" || this.getVisibility() === "none")
if (this.getVisibility() === "partial" || this.getVisibility() === "minimal")
{
unitNameDiv.style.display = 'none';
altitudeDiv.style.display = 'none';
speedDiv.style.display = 'none';
}
if (this.getVisibility() === "none" && nameDiv.style.display != 'none')
if (this.getVisibility() === "minimal" && nameDiv.style.display != 'none')
nameDiv.style.display = 'none';
nameDiv.style.left = (-(nameDiv.offsetWidth - container.offsetWidth) / 2) + "px";
@@ -225,15 +225,19 @@ export class UnitMarker extends L.Marker {
export class AirUnitMarker extends UnitMarker {
getVisibility() {
if (this.getSelected())
return "full";
if (this.getHuman())
return getVisibilitySettings().user;
else if (!this.getAlive())
return "none";
else
return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
if (this.getAlive())
{
if (this.getSelected())
return "full";
else if (this.getHuman())
return AirUnit.getVisibility().human;
else if (this.getAI())
return AirUnit.getVisibility().ai;
else
return AirUnit.getVisibility().uncontrolled;
}
else
return "minimal";
}
}
@@ -246,38 +250,54 @@ export class HelicopterMarker extends AirUnitMarker {
export class GroundUnitMarker extends UnitMarker {
/* Are user driven units recognized as human? */
getVisibility() {
if (this.getSelected())
return "full";
if (this.getHuman())
return getVisibilitySettings().user;
else if (!this.getAlive())
return "none";
else
return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
if (this.getAlive())
{
if (this.getSelected())
return "full";
else if (this.getHuman())
return GroundUnit.getVisibility().human;
else if (this.getAI())
return GroundUnit.getVisibility().ai;
else
return GroundUnit.getVisibility().uncontrolled;
}
else
return "minimal";
}
}
export class NavyUnitMarker extends UnitMarker {
getVisibility() {
if (this.getSelected())
return "full";
if (!this.getAlive())
return "none";
else
return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
if (this.getAlive())
{
if (this.getSelected())
return "full";
else if (this.getHuman())
return NavyUnit.getVisibility().human;
else if (this.getAI())
return NavyUnit.getVisibility().ai;
else
return NavyUnit.getVisibility().uncontrolled;
}
else
return "minimal";
}
}
export class WeaponMarker extends UnitMarker {
getVisibility() {
if (this.getSelected())
return "full";
if (!this.getAlive())
return "none";
else
return getVisibilitySettings().weapon;
if (this.getAlive())
{
if (this.getSelected())
return "full";
else if (this.getHuman())
return Weapon.getVisibility().human;
else if (this.getAI())
return Weapon.getVisibility().ai;
else
return Weapon.getVisibility().uncontrolled;
}
else
return "minimal";
}
}

4
client/views/connectionstatuspanel.ejs
View File

@@ -1,3 +1,3 @@
<div class="olympus-panel" id="connection-status-panel">
<div class="olympus-panel-title" id="status-string"> Connected </div>
<div class="ol-panel" id="connection-status-panel">
<div class="ol-panel-title" id="status-string"> Connected </div>
</div>

4
client/views/index.ejs
View File

@@ -13,8 +13,8 @@
<div id="map-container"></div>
<%- include('selectionwheel.ejs') %>
<%- include('selectionscroll.ejs') %>
<div class="olympus-dropdown" id="map-source-dropdown"></div>
<!-- <div class="olympus-dropdown" id="scenario-dropdown"></div> -->
<div class="ol-dropdown" id="map-source-dropdown"></div>
<!-- <div class="ol-dropdown" id="scenario-dropdown"></div> -->
<%- include('unitinfopanel.ejs') %>
<%- include('unitcontrolpanel.ejs') %>
<%- include('visibilitycontrolpanel.ejs') %>

2
client/views/mouseinfopanel.ejs
View File

@@ -1,4 +1,4 @@
<div class="olympus-panel" id="mouse-info-panel">
<div class="ol-panel" id="mouse-info-panel">
<div id="measure-position-container" class="rectangular-container"><img src="images/pin.png"><div id="measure-position">---° / --- NM</div></div>
<div id="unit-position-container" class="rectangular-container"><img src="images/unit.png"><div id="unit-position">---° / --- NM</div></div>
<div class="rectangular-container"><img src="images/BEBlue.png"><div id="bullseye-2">---° / --- NM</div></div>

10
client/views/selectionscroll.ejs
View File

@@ -1,11 +1,11 @@
<div id="selection-scroll" class="olympus-selection-scroll-container">
<div id="olympus-selection-scroll-top-bar">
<div class="olympus-selection-scroll-title"></div>
<div id="selection-scroll" class="ol-selection-scroll-container">
<div id="ol-selection-scroll-top-bar">
<div class="ol-selection-scroll-title"></div>
<label id="coalition-switch-container">
<input type="checkbox" id="coalition-switch"> <span
class="olympus-selection-scroll-slider olympus-selection-scroll-switch"></span>
class="ol-selection-scroll-slider ol-selection-scroll-switch"></span>
</label>
</div>
<div class="olympus-selection-scroll">
<div class="ol-selection-scroll">
</div>
</div>

6
client/views/selectionwheel.ejs
View File

@@ -1,8 +1,8 @@
<div class="olympus-selection-wheel" id="selection-wheel">
<div class="olympus-wheel">
<div class="ol-selection-wheel" id="selection-wheel">
<div class="ol-wheel">
</div>
<label id="coalition-switch-container">
<input type="checkbox" id="coalition-switch"> <span
class="olympus-selection-wheel-slider olympus-selection-wheel-switch"></span>
class="ol-selection-wheel-slider ol-selection-wheel-switch"></span>
</label>
</div>

14
client/views/unitcontrolpanel.ejs
View File

@@ -1,14 +1,14 @@
<div class="olympus-panel" id="unit-control-panel">
<div class="olympus-panel" id="unit-control-buttons">
<div class="olympus-button" id="slow-button"></div>
<div class="olympus-button" id="fast-button"></div>
<div class="olympus-button" id="descend-button"></div>
<div class="olympus-button" id="climb-button"></div>
<div class="ol-panel" id="unit-control-panel">
<div class="ol-panel" id="unit-control-buttons">
<div class="ol-button" id="slow-button"></div>
<div class="ol-button" id="fast-button"></div>
<div class="ol-button" id="descend-button"></div>
<div class="ol-button" id="climb-button"></div>
</div>
<div id="title-label">Selected units</div>
<div id="selected-units-container">
<div id="selected-units-container" class="ol-scrollable">
<!-- This is where all the unit selection buttons will be shown-->
</div>

5
client/views/unitinfopanel.ejs
View File

@@ -1,4 +1,4 @@
<div class="olympus-panel padding-large" id="unit-info-panel">
<div class="ol-panel padding-large" id="unit-info-panel">
<div id="general">
<div id="unit-name"></div>
<div class="rectangular-container" id="name"></div>
@@ -26,5 +26,8 @@
<img class="flight-data-icon" src="images/icons/fuel.svg">
<div class="flight-data-label">Fuel</div>
<div class="flight-data-value" id="fuel"></div>
<div id="loadout-container" class="ol-scrollable">
<!-- Unit loadout will be shown here -->
</div>
</div>
</div>

49
client/views/visibilitycontrolpanel.ejs
View File

@@ -1,7 +1,44 @@
<div class="olympus-panel" id="visibility-control-panel">
<div class="olympus-button" id="user-visibility-button"></div>
<div class="olympus-button" id="ai-visibility-button"></div>
<div class="olympus-button" id="uncontrolled-visibility-button"></div>
<div class="olympus-button" id="weapon-visibility-button"></div>
<div class="olympus-button" id="dead-visibility-button"></div>
<div class="ol-panel" id="visibility-control-panel">
<div class="label">Air: </div>
<div>
<input type="checkbox" id="air-visibility" checked>
</div>
<div class="label">Ground: </div>
<div>
<input type="checkbox" id="ground-visibility" checked>
</div>
<div class="label">Navy: </div>
<div>
<input type="checkbox" id="navy-visibility" checked>
</div>
<div class="label">Weapons: </div>
<div>
<input type="checkbox" id="weapon-visibility" checked>
</div>
<div class="vl"></div>
<div class="label">Full: </div>
<div>
<input type="radio" id="full-visibility" name="labels" value="full">
</div>
<div class="label">Partial: </div>
<div>
<input type="radio" id="partial-visibility" name="labels" value="partial" checked>
</div>
<div class="label">Minimal: </div>
<div>
<input type="radio" id="minimal-visibility" name="labels" value="minimal">
</div>
<div class="vl"></div>
<div class="label">Olympus only: </div>
<div>
<input type="checkbox" id="uncontrolled-visibility">
</div>
</div>