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

feat: Improvements on scenic modes

Browse Source
This commit is contained in:
Pax1601
2025-03-12 18:43:14 +01:00
parent 23f9eee39f
commit 34f9a8bc40
16 changed files with 1093 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/react/src/constants/constants.ts
View File

@@ -385,7 +385,7 @@ export enum WarningSubstate {
NO_SUBSTATE = "No substate",
NOT_CHROME = "Not chrome",
NOT_SECURE = "Not secure",
ERROR_UPLOADING_CONFIG = "Error uploading config"
ERROR_UPLOADING_CONFIG = "Error uploading config",
}
export type OlympusSubState = DrawSubState | JTACSubState | SpawnSubState | OptionsSubstate | string;
@@ -418,7 +418,7 @@ export const MAP_OPTIONS_DEFAULTS: MapOptions = {
AWACSCoalition: "blue",
hideChromeWarning: false,
hideSecureWarning: false,
showMissionDrawings: false
showMissionDrawings: false,
};
export const MAP_HIDDEN_TYPES_DEFAULTS = {
@@ -497,6 +497,17 @@ export enum DataIndexes {
racetrackLength,
racetrackAnchor,
racetrackBearing,
timeToNextTasking,
barrelHeight,
muzzleVelocity,
aimTime,
shotsToFire,
shotsBaseInterval,
shotsBaseScatter,
engagementRange,
targetingRange,
aimMethodRange,
acquisitionRange,
endOfData = 255,
}
@@ -530,7 +541,6 @@ export enum ContextActionType {
DELETE,
}
export enum colors {
ALICE_BLUE = "#F0F8FF",
ANTIQUE_WHITE = "#FAEBD7",
@@ -679,7 +689,7 @@ export enum colors {
OLYMPUS_BLUE = "#243141",
OLYMPUS_RED = "#F05252",
OLYMPUS_ORANGE = "#FF9900",
OLYMPUS_GREEN = "#8BFF63"
OLYMPUS_GREEN = "#8BFF63",
}
export const CONTEXT_ACTION_COLORS = [undefined, colors.WHITE, colors.GREEN, colors.PURPLE, colors.BLUE, colors.RED];
@@ -919,7 +929,9 @@ export namespace ContextActions {
ContextActionTarget.POINT,
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition)
getApp().getUnitsManager().fireInfrared(targetPosition, getApp().getMap().getKeepRelativePositions(), getApp().getMap().getDestinationRotation(), units);
getApp()
.getUnitsManager()
.fireInfrared(targetPosition, getApp().getMap().getKeepRelativePositions(), getApp().getMap().getDestinationRotation(), units);
},
{ type: ContextActionType.ENGAGE, code: "KeyL", ctrlKey: true, shiftKey: false }
);

28
frontend/react/src/interfaces.ts
View File

@@ -40,7 +40,8 @@ export interface OlympusConfig {
/* Set by server */
local?: boolean;
authentication?: { // Only sent when in localhost mode for autologin
authentication?: {
// Only sent when in localhost mode for autologin
gameMasterPassword: string;
blueCommanderPasword: string;
redCommanderPassword: string;
@@ -53,12 +54,12 @@ export interface SessionData {
unitSinks?: { ID: number }[];
connections?: any[];
coalitionAreas?: (
| { type: 'circle', label: string; latlng: { lat: number; lng: number }; radius: number; coalition: Coalition }
| { type: 'polygon', label: string; latlngs: { lat: number; lng: number }[]; coalition: Coalition }
| { type: "circle"; label: string; latlng: { lat: number; lng: number }; radius: number; coalition: Coalition }
| { type: "polygon"; label: string; latlngs: { lat: number; lng: number }[]; coalition: Coalition }
)[];
hotgroups?: {[key: string]: number[]},
starredSpawns?: { [key: number]: SpawnRequestTable }
drawings?: { [key: string]: {visibility: boolean, opacity: number, name: string, guid: string, containers: any, drawings: any} }
hotgroups?: { [key: string]: number[] };
starredSpawns?: { [key: number]: SpawnRequestTable };
drawings?: { [key: string]: { visibility: boolean; opacity: number; name: string; guid: string; containers: any; drawings: any } };
}
export interface ProfileOptions {
@@ -88,7 +89,7 @@ export interface BullseyesData {
export interface SpotsData {
spots: {
[key: string]: { type: string, targetPosition: {lat: number; lng: number}; sourceUnitID: number; code?: number };
[key: string]: { type: string; targetPosition: { lat: number; lng: number }; sourceUnitID: number; code?: number };
};
sessionHash: string;
time: number;
@@ -265,6 +266,17 @@ export interface UnitData {
racetrackLength: number;
racetrackAnchor: LatLng;
racetrackBearing: number;
timeToNextTasking: number;
barrelHeight: number;
muzzleVelocity: number;
aimTime: number;
shotsToFire: number;
shotsBaseInterval: number;
shotsBaseScatter: number;
engagementRange: number;
targetingRange: number;
aimMethodRange: number;
acquisitionRange: number;
}
export interface LoadoutItemBlueprint {
@@ -400,4 +412,4 @@ export interface Drawing {
hiddenOnPlanner?: boolean;
file?: string;
scale?: number;
}
}

32
frontend/react/src/server/servermanager.ts
View File

@@ -554,6 +554,38 @@ export class ServerManager {
this.PUT(data, callback);
}
setEngagementProperties(
ID: number,
barrelHeight: number,
muzzleVelocity: number,
aimTime: number,
shotsToFire: number,
shotsBaseInterval: number,
shotsBaseScatter: number,
engagementRange: number,
targetingRange: number,
aimMethodRange: number,
acquisitionRange: number,
callback: CallableFunction = () => {}
) {
var command = {
ID: ID,
barrelHeight: barrelHeight,
muzzleVelocity: muzzleVelocity,
aimTime: aimTime,
shotsToFire: shotsToFire,
shotsBaseInterval: shotsBaseInterval,
shotsBaseScatter: shotsBaseScatter,
engagementRange: engagementRange,
targetingRange: targetingRange,
aimMethodRange: aimMethodRange,
acquisitionRange: acquisitionRange,
}
var data = { setEngagementProperties: command };
this.PUT(data, callback);
}
setCommandModeOptions(commandModeOptions: CommandModeOptions, callback: CallableFunction = () => {}) {
var data = { setCommandModeOptions: commandModeOptions };
this.PUT(data, callback);

3
frontend/react/src/ui/components/olnumberinput.tsx
View File

@@ -11,6 +11,7 @@ export function OlNumberInput(props: {
tooltip?: string | (() => JSX.Element | JSX.Element[]);
tooltipPosition?: string;
tooltipRelativeToParent?: boolean;
decimalPlaces?: number;
onDecrease: () => void;
onIncrease: () => void;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -89,7 +90,7 @@ export function OlNumberInput(props: {
dark:focus:ring-blue-700
focus:border-blue-700 focus:ring-blue-500
`}
value={zeroAppend(props.value, props.minLength ?? 0)}
value={zeroAppend(props.value, props.minLength ?? 0, props.decimalPlaces !== undefined, props.decimalPlaces ?? 0)}
/>
<button
type="button"

720
frontend/react/src/ui/panels/unitcontrolmenu.tsx
View File

@@ -8,6 +8,7 @@ import { OlButtonGroup, OlButtonGroupItem } from "../components/olbuttongroup";
import { OlCheckbox } from "../components/olcheckbox";
import {
ROEs,
UnitState,
altitudeIncrements,
emissionsCountermeasures,
maxAltitudeValues,
@@ -46,7 +47,7 @@ import {
olButtonsVisibilityOlympus,
} from "../components/olicons";
import { Coalition } from "../../types/types";
import { convertROE, deepCopyTable, ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
import { convertROE, deepCopyTable, ftToM, knotsToMs, mToFt, msToKnots, zeroAppend } from "../../other/utils";
import { FaChevronLeft, FaCog, FaExclamationCircle, FaGasPump, FaQuestionCircle, FaSignal, FaTag } from "react-icons/fa";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OlSearchBar } from "../components/olsearchbar";
@@ -58,9 +59,10 @@ import { OlStringInput } from "../components/olstringinput";
import { OlFrequencyInput } from "../components/olfrequencyinput";
import { UnitSink } from "../../audio/unitsink";
import { AudioManagerStateChangedEvent, SelectedUnitsChangedEvent, SelectionClearedEvent, UnitsUpdatedEvent } from "../../events";
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { faCog, IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { OlExpandingTooltip } from "../components/olexpandingtooltip";
import { OlLocation } from "../components/ollocation";
import { OlStateButton } from "../components/olstatebutton";
export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
function initializeUnitsData() {
@@ -129,6 +131,17 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
const [activeAdvancedSettings, setActiveAdvancedSettings] = useState(null as null | GeneralSettings);
const [lastUpdateTime, setLastUpdateTime] = useState(0);
const [showScenicModes, setShowScenicModes] = useState(true);
const [showEngagementSettings, setShowEngagementSettings] = useState(false);
const [barrelHeight, setBarrelHeight] = useState(0);
const [muzzleVelocity, setMuzzleVelocity] = useState(0);
const [aimTime, setAimTime] = useState(0);
const [shotsToFire, setShotsToFire] = useState(0);
const [shotsBaseInterval, setShotsBaseInterval] = useState(0);
const [shotsBaseScatter, setShotsBaseScatter] = useState(0);
const [engagementRange, setEngagementRange] = useState(0);
const [targetingRange, setTargetingRange] = useState(0);
const [aimMethodRange, setAimMethodRange] = useState(0);
const [acquisitionRange, setAcquisitionRange] = useState(0);
var searchBarRef = useRef(null);
@@ -205,6 +218,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
setForcedUnitsData(initializeUnitsData);
setShowRadioSettings(false);
setShowAdvancedSettings(false);
if (selectedUnits.length > 0) {
setBarrelHeight(selectedUnits[0].getBarrelHeight());
setMuzzleVelocity(selectedUnits[0].getMuzzleVelocity());
setAimTime(selectedUnits[0].getAimTime());
setShotsToFire(selectedUnits[0].getShotsToFire());
setShotsBaseInterval(selectedUnits[0].getShotsBaseInterval());
setShotsBaseScatter(selectedUnits[0].getShotsBaseScatter());
setEngagementRange(selectedUnits[0].getEngagementRange());
setTargetingRange(selectedUnits[0].getTargetingRange());
setAimMethodRange(selectedUnits[0].getAimMethodRange());
setAcquisitionRange(selectedUnits[0].getAcquisitionRange());
}
}, [selectedUnits]);
/* Count how many units are selected of each type, divided by coalition */
@@ -227,7 +253,9 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
const selectedCategories = getApp()?.getUnitsManager()?.getSelectedUnitsCategories() ?? [];
const filteredUnits = Object.values(getApp()?.getUnitsManager()?.getUnits() ?? {}).filter(
(unit) => (unit.getUnitName().toLowerCase().indexOf(filterString.toLowerCase()) >= 0 || (unit.getBlueprint()?.label ?? "").toLowerCase()?.indexOf(filterString.toLowerCase()) >= 0 )
(unit) =>
unit.getUnitName().toLowerCase().indexOf(filterString.toLowerCase()) >= 0 ||
(unit.getBlueprint()?.label ?? "").toLowerCase()?.indexOf(filterString.toLowerCase()) >= 0
);
const everyUnitIsGround = selectedCategories.every((category) => {
@@ -269,23 +297,45 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
onClose={props.onClose}
canBeHidden={true}
wiki={() => {
return <div className={`
h-full flex-col overflow-auto p-4 text-gray-400 no-scrollbar flex
gap-2
`}>
return (
<div
className={`
h-full flex-col overflow-auto p-4 text-gray-400 no-scrollbar flex
gap-2
`}
>
<h2 className="mb-4 font-bold">Unit selection tool</h2>
<div>
The unit control menu serves two purposes. If no unit is currently selected, it allows you to select units based on their category, coalition, and control mode. You can also select units based on their specific type by using the search input.
The unit control menu serves two purposes. If no unit is currently selected, it allows you to select units based on their category, coalition, and
control mode. You can also select units based on their specific type by using the search input.
</div>
<h2 className="my-4 font-bold">Unit control tool</h2>
<div>If units are selected, the menu will display the selected units and allow you to control their altitude, speed, rules of engagement, and other settings.</div>
<div>The available controls depend on what type of unit is selected. Only controls applicable to every selected unit will be displayed, so make sure to refine your selection. </div>
<div> You will be able to inspect the current values of the controls, e.g. the desired altitude, rules of engagement and so on. However, if multiple units are selected, you will only see the values of controls that are set to be the same for each selected unit.</div>
<div> For example, if two airplanes are selected and they both have been instructed to fly at 1000ft, you will see the altitude slider set at that value. But if one airplane is set to fly at 1000ft and the other at 2000ft, you will see the slider display 'Different values'.</div>
<div>
If units are selected, the menu will display the selected units and allow you to control their altitude, speed, rules of engagement, and other
settings.
</div>
<div>
The available controls depend on what type of unit is selected. Only controls applicable to every selected unit will be displayed, so make sure to
refine your selection.{" "}
</div>
<div>
{" "}
You will be able to inspect the current values of the controls, e.g. the desired altitude, rules of engagement and so on. However, if multiple
units are selected, you will only see the values of controls that are set to be the same for each selected unit.
</div>
<div>
{" "}
For example, if two airplanes are selected and they both have been instructed to fly at 1000ft, you will see the altitude slider set at that
value. But if one airplane is set to fly at 1000ft and the other at 2000ft, you will see the slider display 'Different values'.
</div>
<div> If at that point you move the slider, you will instruct both airplanes to fly at the same altitude.</div>
<div> If a single unit is selected, you will also be able to see additional info on the unit, like its fuel level, position and altitude, tasking, and available ammunition. </div>
<div>
{" "}
If a single unit is selected, you will also be able to see additional info on the unit, like its fuel level, position and altitude, tasking, and
available ammunition.{" "}
</div>
</div>
);
}}
>
<>
@@ -365,9 +415,14 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
return (
<tr key={idx}>
<td className="flex gap-2 text-lg text-gray-200">
<FontAwesomeIcon icon={entry[1][0] as IconDefinition} /> <div className={`
<FontAwesomeIcon icon={entry[1][0] as IconDefinition} />{" "}
<div
className={`
text-sm text-gray-400
`}>{entry[1][1] as string}</div>
`}
>
{entry[1][1] as string}
</div>
</td>
{["blue", "neutral", "red"].map((coalition) => {
return (
@@ -450,23 +505,25 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
onClick={() => {
setSelectionID(unit.ID);
}}
>
<div data-coalition={unit.getCoalition()}
className={`
flex content-center justify-between border-l-4
pl-2
data-[coalition='blue']:border-blue-500
data-[coalition='neutral']:border-gray-500
data-[coalition='red']:border-red-500
`}
onMouseEnter={() => {
unit.setHighlighted(true);
}}
onMouseLeave={() => {
unit.setHighlighted(false);
}}
>{unit.getUnitName()} ({unit.getBlueprint()?.label ?? ""})</div>
<div
data-coalition={unit.getCoalition()}
className={`
flex content-center justify-between border-l-4
pl-2
data-[coalition='blue']:border-blue-500
data-[coalition='neutral']:border-gray-500
data-[coalition='red']:border-red-500
`}
onMouseEnter={() => {
unit.setHighlighted(true);
}}
onMouseLeave={() => {
unit.setHighlighted(false);
}}
>
{unit.getUnitName()} ({unit.getBlueprint()?.label ?? ""})
</div>
</OlDropdownItem>
);
})}
@@ -740,53 +797,81 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
<div className="flex flex-col gap-2 px-2">
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsRoeHold} className={`
<FontAwesomeIcon
icon={olButtonsRoeHold}
className={`
my-auto min-w-8 text-white
`} /> Hold fire: The unit will not shoot in
any circumstance
`}
/>{" "}
Hold fire: The unit will not shoot in any circumstance
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsRoeReturn} className={`
<FontAwesomeIcon
icon={olButtonsRoeReturn}
className={`
my-auto min-w-8 text-white
`} /> Return fire: The unit will not fire
unless fired upon
`}
/>{" "}
Return fire: The unit will not fire unless fired upon
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsRoeDesignated} className={`
<FontAwesomeIcon
icon={olButtonsRoeDesignated}
className={`
my-auto min-w-8 text-white
`} />{" "}
`}
/>{" "}
<div>
{" "}
Fire on target: The unit will not fire unless fired upon <p className={`
Fire on target: The unit will not fire unless fired upon{" "}
<p
className={`
inline font-bold
`}>or</p> ordered to do so{" "}
`}
>
or
</p>{" "}
ordered to do so{" "}
</div>
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsRoeFree} className={`
<FontAwesomeIcon
icon={olButtonsRoeFree}
className={`
my-auto min-w-8 text-white
`} /> Free: The unit will fire at any
detected enemy in range
`}
/>{" "}
Free: The unit will fire at any detected enemy in range
</div>
</div>
<div className="flex gap-4">
<div className="my-auto">
<FaExclamationCircle className={`
<FaExclamationCircle
className={`
animate-bounce text-xl
`} />
`}
/>
</div>
<div>
Currently, DCS blue and red ground units do not respect{" "}
<FontAwesomeIcon icon={olButtonsRoeReturn} className={`
<FontAwesomeIcon
icon={olButtonsRoeReturn}
className={`
my-auto text-white
`} /> and{" "}
<FontAwesomeIcon icon={olButtonsRoeDesignated} className={`
`}
/>{" "}
and{" "}
<FontAwesomeIcon
icon={olButtonsRoeDesignated}
className={`
my-auto text-white
`} /> rules of engagement, so be careful, they
may start shooting when you don't want them to. Use neutral units for finer control.
`}
/>{" "}
rules of engagement, so be careful, they may start shooting when you don't want them to. Use neutral units for finer
control.
</div>
</div>
</div>
@@ -842,31 +927,43 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
<div className="flex flex-col gap-2 px-2">
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsThreatNone} className={`
<FontAwesomeIcon
icon={olButtonsThreatNone}
className={`
my-auto min-w-8 text-white
`} /> No reaction: The unit will not
react in any circumstance
`}
/>{" "}
No reaction: The unit will not react in any circumstance
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsThreatPassive} className={`
<FontAwesomeIcon
icon={olButtonsThreatPassive}
className={`
my-auto min-w-8 text-white
`} /> Passive: The unit will use
counter-measures, but will not alter its course
`}
/>{" "}
Passive: The unit will use counter-measures, but will not alter its course
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsThreatManoeuvre} className={`
<FontAwesomeIcon
icon={olButtonsThreatManoeuvre}
className={`
my-auto min-w-8 text-white
`} /> Manouevre: The unit will try
to evade the threat using manoeuvres, but no counter-measures
`}
/>{" "}
Manouevre: The unit will try to evade the threat using manoeuvres, but no counter-measures
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsThreatEvade} className={`
<FontAwesomeIcon
icon={olButtonsThreatEvade}
className={`
my-auto min-w-8 text-white
`} /> Full evasion: the unit will try
to evade the threat both manoeuvering and using counter-measures
`}
/>{" "}
Full evasion: the unit will try to evade the threat both manoeuvering and using counter-measures
</div>
</div>
</div>
@@ -917,31 +1014,43 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
<div className="flex flex-col gap-2 px-2">
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsEmissionsSilent} className={`
<FontAwesomeIcon
icon={olButtonsEmissionsSilent}
className={`
my-auto min-w-8 text-white
`} /> Radio silence: No radar or
ECM will be used
`}
/>{" "}
Radio silence: No radar or ECM will be used
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsEmissionsDefend} className={`
<FontAwesomeIcon
icon={olButtonsEmissionsDefend}
className={`
my-auto min-w-8 text-white
`} /> Defensive: The unit will turn
radar and ECM on only when threatened
`}
/>{" "}
Defensive: The unit will turn radar and ECM on only when threatened
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsEmissionsAttack} className={`
<FontAwesomeIcon
icon={olButtonsEmissionsAttack}
className={`
my-auto min-w-8 text-white
`} /> Attack: The unit will use
radar and ECM when engaging other units
`}
/>{" "}
Attack: The unit will use radar and ECM when engaging other units
</div>
<div className="flex content-center gap-2">
{" "}
<FontAwesomeIcon icon={olButtonsEmissionsFree} className={`
<FontAwesomeIcon
icon={olButtonsEmissionsFree}
className={`
my-auto min-w-8 text-white
`} /> Free: the unit will use the
radar and ECM all the time
`}
/>{" "}
Free: the unit will use the radar and ECM all the time
</div>
</div>
</div>
@@ -1159,9 +1268,11 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
>
<div className="flex gap-4">
<div className="my-auto">
<FaExclamationCircle className={`
<FaExclamationCircle
className={`
animate-bounce text-xl
`} />
`}
/>
</div>
<div>
Currently, DCS blue and red ground units do not respect their rules of engagement, so be careful, they may start shooting when
@@ -1186,15 +1297,27 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
<OlToggle
toggled={selectedUnitsData.scenicAAA}
onClick={() => {
getApp()
.getUnitsManager()
.scenicAAA(null, () =>
setForcedUnitsData({
...forcedUnitsData,
scenicAAA: !selectedUnitsData.scenicAAA,
missOnPurpose: false,
})
);
if (selectedUnitsData.scenicAAA) {
getApp()
.getUnitsManager()
.stop(null, () =>
setForcedUnitsData({
...forcedUnitsData,
missOnPurpose: false,
scenicAAA: false,
})
);
} else {
getApp()
.getUnitsManager()
.scenicAAA(null, () =>
setForcedUnitsData({
...forcedUnitsData,
missOnPurpose: false,
scenicAAA: true,
})
);
}
}}
tooltip={() => (
<OlExpandingTooltip
@@ -1219,15 +1342,27 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
<OlToggle
toggled={selectedUnitsData.missOnPurpose}
onClick={() => {
getApp()
.getUnitsManager()
.missOnPurpose(null, () =>
setForcedUnitsData({
...forcedUnitsData,
scenicAAA: false,
missOnPurpose: !selectedUnitsData.missOnPurpose,
})
);
if (selectedUnitsData.missOnPurpose) {
getApp()
.getUnitsManager()
.stop(null, () =>
setForcedUnitsData({
...forcedUnitsData,
scenicAAA: false,
missOnPurpose: false,
})
);
} else {
getApp()
.getUnitsManager()
.missOnPurpose(null, () =>
setForcedUnitsData({
...forcedUnitsData,
scenicAAA: false,
missOnPurpose: true,
})
);
}
}}
tooltip={() => (
<OlExpandingTooltip
@@ -1306,11 +1441,19 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
</OlButtonGroup>
</div>
{/* ============== Shots intensity END ============== */}
<OlStateButton
className="mt-auto"
checked={showEngagementSettings}
onClick={() => setShowEngagementSettings(!showEngagementSettings)}
icon={faCog}
></OlStateButton>
</div>
{/* ============== Operate as toggle START ============== */}
{selectedUnits.every((unit) => unit.getCoalition() === "neutral") && (
<div
className={`flex content-center justify-between`}
className={`
flex content-center justify-between
`}
>
<span
className={`
@@ -1344,6 +1487,371 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
</div>
)}
{/* ============== Operate as toggle END ============== */}
{showEngagementSettings && (
<div
className={`
flex flex-col gap-2 text-sm text-gray-200
`}
>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Barrel height:{" "}
</div>
<OlNumberInput
decimalPlaces={1}
className={`
ml-auto
`}
value={barrelHeight}
min={0}
max={100}
onChange={(ev) => {
setBarrelHeight(Number(ev.target.value));
}}
onIncrease={() => {
setBarrelHeight(barrelHeight + 0.1);
}}
onDecrease={() => {
setBarrelHeight(barrelHeight - 0.1);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Muzzle velocity:{" "}
</div>
<OlNumberInput
decimalPlaces={0}
className={`
ml-auto
`}
value={muzzleVelocity}
min={0}
max={10000}
onChange={(ev) => {
setMuzzleVelocity(Number(ev.target.value));
}}
onIncrease={() => {
setMuzzleVelocity(muzzleVelocity + 10);
}}
onDecrease={() => {
setMuzzleVelocity(muzzleVelocity - 10);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m/s
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Aim time:{" "}
</div>
<OlNumberInput
decimalPlaces={2}
className={`
ml-auto
`}
value={aimTime}
min={0}
max={100}
onChange={(ev) => {
setAimTime(Number(ev.target.value));
}}
onIncrease={() => {
setAimTime(aimTime + 0.1);
}}
onDecrease={() => {
setAimTime(aimTime - 0.1);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
s
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Shots to fire:{" "}
</div>
<OlNumberInput
className={`
ml-auto
`}
value={shotsToFire}
min={0}
max={100}
onChange={(ev) => {
setShotsToFire(Number(ev.target.value));
}}
onIncrease={() => {
setShotsToFire(shotsToFire + 1);
}}
onDecrease={() => {
setShotsToFire(shotsToFire - 1);
}}
></OlNumberInput>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Shots base interval:{" "}
</div>
<OlNumberInput
decimalPlaces={2}
className={`
ml-auto
`}
value={shotsBaseInterval}
min={0}
max={100}
onChange={(ev) => {
setShotsBaseInterval(Number(ev.target.value));
}}
onIncrease={() => {
setShotsBaseInterval(shotsBaseInterval + 0.1);
}}
onDecrease={() => {
setShotsBaseInterval(shotsBaseInterval - 0.1);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
s
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Shots base scatter:{" "}
</div>
<OlNumberInput
decimalPlaces={2}
className={`
ml-auto
`}
value={shotsBaseScatter}
min={0}
max={50}
onChange={(ev) => {
setShotsBaseScatter(Number(ev.target.value));
}}
onIncrease={() => {
setShotsBaseScatter(shotsBaseScatter + 0.1);
}}
onDecrease={() => {
setShotsBaseScatter(shotsBaseScatter - 0.1);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
deg
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Engagement range:{" "}
</div>
<OlNumberInput
className={`
ml-auto
`}
value={engagementRange}
min={0}
max={100000}
onChange={(ev) => {
setEngagementRange(Number(ev.target.value));
}}
onIncrease={() => {
setEngagementRange(engagementRange + 100);
}}
onDecrease={() => {
setEngagementRange(engagementRange - 100);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Targeting range:{" "}
</div>
<OlNumberInput
className={`
ml-auto
`}
value={targetingRange}
min={0}
max={100000}
onChange={(ev) => {
setTargetingRange(Number(ev.target.value));
}}
onIncrease={() => {
setTargetingRange(targetingRange + 100);
}}
onDecrease={() => {
setTargetingRange(targetingRange - 100);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Aim method range:{" "}
</div>
<OlNumberInput
className={`
ml-auto
`}
value={aimMethodRange}
min={0}
max={100000}
onChange={(ev) => {
setAimMethodRange(Number(ev.target.value));
}}
onIncrease={() => {
setAimMethodRange(aimMethodRange + 100);
}}
onDecrease={() => {
setAimMethodRange(aimMethodRange - 100);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m
</div>
</div>
<div className="flex align-center gap-2">
<div
className={`
my-auto
`}
>
Acquisition range:{" "}
</div>
<OlNumberInput
className={`
ml-auto
`}
value={acquisitionRange}
min={0}
max={100000}
onChange={(ev) => {
setAcquisitionRange(Number(ev.target.value));
}}
onIncrease={() => {
setAcquisitionRange(acquisitionRange + 100);
}}
onDecrease={() => {
setAcquisitionRange(acquisitionRange - 100);
}}
></OlNumberInput>
<div
className={`
my-auto
`}
>
m
</div>
</div>
<button
className={`
mb-2 me-2 rounded-sm bg-blue-700 px-5 py-2.5
text-md font-medium text-white
dark:bg-blue-600 dark:hover:bg-blue-700
dark:focus:ring-blue-800
focus:outline-none focus:ring-4
focus:ring-blue-300
hover:bg-blue-800
`}
onClick={() => {
getApp()
.getUnitsManager()
.setEngagementProperties(
barrelHeight,
muzzleVelocity,
aimTime,
shotsToFire,
shotsBaseInterval,
shotsBaseScatter,
engagementRange,
targetingRange,
aimMethodRange,
acquisitionRange
);
}}
>
Save
</button>
</div>
)}
</>
)}
</div>
@@ -1825,14 +2333,18 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
</div>
</div>
<div className="my-auto text-sm text-gray-400">
{selectedUnits[0].getTask()}
</div>
<div className="my-auto text-sm text-gray-400">{selectedUnits[0].getTask()}</div>
{([UnitState.SIMULATE_FIRE_FIGHT, UnitState.MISS_ON_PURPOSE, UnitState.SCENIC_AAA] as string[]).includes(selectedUnits[0].getState()) && (
<div className="my-auto text-sm text-gray-400">
Time to next tasking: {zeroAppend(selectedUnits[0].getTimeToNextTasking(), 0, true, 2)}s
</div>
)}
<div className="flex content-center gap-2">
<OlLocation location={selectedUnits[0].getPosition()} className={`
w-[280px] text-sm
`}/>
<div className="my-auto text-gray-200">{Math.round(mToFt(selectedUnits[0].getPosition().alt ?? 0))} ft</div>
<OlLocation location={selectedUnits[0].getPosition()} className={`
w-[280px] text-sm
`} />
<div className="my-auto text-gray-200">{Math.round(mToFt(selectedUnits[0].getPosition().alt ?? 0))} ft</div>
</div>
</div>

120
frontend/react/src/unit/unit.ts
View File

@@ -177,6 +177,17 @@ export abstract class Unit extends CustomMarker {
#spotLines: { [key: number]: Polyline } = {};
#spotEditMarkers: { [key: number]: SpotEditMarker } = {};
#spotMarkers: { [key: number]: SpotMarker } = {};
#timeToNextTasking: number = 0;
#barrelHeight: number = 0;
#muzzleVelocity: number = 0;
#aimTime: number = 0;
#shotsToFire: number = 0;
#shotsBaseInterval: number = 0;
#shotsBaseScatter: number = 0;
#engagementRange: number = 0;
#targetingRange: number = 0;
#aimMethodRange: number = 0;
#acquisitionRange: number = 0;
/* Inputs timers */
#debounceTimeout: number | null = null;
@@ -332,6 +343,39 @@ export abstract class Unit extends CustomMarker {
getRaceTrackBearing() {
return this.#racetrackBearing;
}
getTimeToNextTasking() {
return this.#timeToNextTasking;
}
getBarrelHeight() {
return this.#barrelHeight;
}
getMuzzleVelocity() {
return this.#muzzleVelocity;
}
getAimTime() {
return this.#aimTime;
}
getShotsToFire() {
return this.#shotsToFire;
}
getShotsBaseInterval() {
return this.#shotsBaseInterval;
}
getShotsBaseScatter() {
return this.#shotsBaseScatter;
}
getEngagementRange() {
return this.#engagementRange;
}
getTargetingRange() {
return this.#targetingRange;
}
getAimMethodRange() {
return this.#aimMethodRange;
}
getAcquisitionRange() {
return this.#acquisitionRange;
}
static getConstructor(type: string) {
if (type === "GroundUnit") return GroundUnit;
@@ -644,6 +688,41 @@ export abstract class Unit extends CustomMarker {
case DataIndexes.racetrackBearing:
this.#racetrackBearing = dataExtractor.extractFloat64();
break;
case DataIndexes.timeToNextTasking:
this.#timeToNextTasking = dataExtractor.extractFloat64();
break;
case DataIndexes.barrelHeight:
this.#barrelHeight = dataExtractor.extractFloat64();
break;
case DataIndexes.muzzleVelocity:
this.#muzzleVelocity = dataExtractor.extractFloat64();
break;
case DataIndexes.aimTime:
this.#aimTime = dataExtractor.extractFloat64();
break;
case DataIndexes.shotsToFire:
this.#shotsToFire = dataExtractor.extractUInt32();
break;
case DataIndexes.shotsBaseInterval:
this.#shotsBaseInterval = dataExtractor.extractFloat64();
break;
case DataIndexes.shotsBaseScatter:
this.#shotsBaseScatter = dataExtractor.extractFloat64();
break;
case DataIndexes.engagementRange:
this.#engagementRange = dataExtractor.extractFloat64();
break;
case DataIndexes.targetingRange:
this.#targetingRange = dataExtractor.extractFloat64();
break;
case DataIndexes.aimMethodRange:
this.#aimMethodRange = dataExtractor.extractFloat64();
break;
case DataIndexes.acquisitionRange:
this.#acquisitionRange = dataExtractor.extractFloat64();
break;
default:
break;
}
}
@@ -750,6 +829,17 @@ export abstract class Unit extends CustomMarker {
racetrackLength: this.#racetrackLength,
racetrackAnchor: this.#racetrackAnchor,
racetrackBearing: this.#racetrackBearing,
timeToNextTasking: this.#timeToNextTasking,
barrelHeight: this.#barrelHeight,
muzzleVelocity: this.#muzzleVelocity,
aimTime: this.#aimTime,
shotsToFire: this.#shotsToFire,
shotsBaseInterval: this.#shotsBaseInterval,
shotsBaseScatter: this.#shotsBaseScatter,
engagementRange: this.#engagementRange,
targetingRange: this.#targetingRange,
aimMethodRange: this.#aimMethodRange,
acquisitionRange: this.#acquisitionRange,
};
}
@@ -1307,6 +1397,36 @@ export abstract class Unit extends CustomMarker {
if (!this.#human) getApp().getServerManager().setAdvancedOptions(this.ID, isActiveTanker, isActiveAWACS, TACAN, radio, generalSettings);
}
setEngagementProperties(
barrelHeight: number,
muzzleVelocity: number,
aimTime: number,
shotsToFire: number,
shotsBaseInterval: number,
shotsBaseScatter: number,
engagementRange: number,
targetingRange: number,
aimMethodRange: number,
acquisitionRange: number
) {
if (!this.#human)
getApp()
.getServerManager()
.setEngagementProperties(
this.ID,
barrelHeight,
muzzleVelocity,
aimTime,
shotsToFire,
shotsBaseInterval,
shotsBaseScatter,
engagementRange,
targetingRange,
aimMethodRange,
acquisitionRange
);
}
bombPoint(latlng: LatLng) {
getApp().getServerManager().bombPoint(this.ID, latlng);
}

61
frontend/react/src/unit/unitsmanager.ts
View File

@@ -546,6 +546,7 @@ export class UnitsManager {
units = units.filter((unit) => !unit.getHuman());
let callback = (units: Unit[]) => {
onExecution();
for (let idx in units) {
getApp().getServerManager().addDestination(units[idx].ID, []);
}
@@ -819,16 +820,24 @@ export class UnitsManager {
}
/** Set the advanced options for the selected units
*
*
* @param isActiveTanker If true, the unit will be a tanker
* @param isActiveAWACS If true, the unit will be an AWACS
* @param TACAN TACAN settings
* @param radio Radio settings
* @param generalSettings General settings
* @param units (Optional) Array of units to apply the control to. If not provided, the operation will be completed on all selected units.
* @param onExecution Function to execute after the operation is completed
*/
setAdvancedOptions(isActiveTanker: boolean, isActiveAWACS: boolean, TACAN: TACAN, radio: Radio, generalSettings: GeneralSettings, units: Unit[] | null = null, onExecution: () => void = () => {}) {
* @param onExecution Function to execute after the operation is completed
*/
setAdvancedOptions(
isActiveTanker: boolean,
isActiveAWACS: boolean,
TACAN: TACAN,
radio: Radio,
generalSettings: GeneralSettings,
units: Unit[] | null = null,
onExecution: () => void = () => {}
) {
if (units === null) units = this.getSelectedUnits();
units = units.filter((unit) => !unit.getHuman());
let callback = (units) => {
@@ -836,7 +845,49 @@ export class UnitsManager {
units.forEach((unit: Unit) => unit.setAdvancedOptions(isActiveTanker, isActiveAWACS, TACAN, radio, generalSettings));
this.#showActionMessage(units, `advanced options set`);
};
if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
this.#protectionCallback = callback;
} else callback(units);
}
//TODO
setEngagementProperties(
barrelHeight: number,
muzzleVelocity: number,
aimTime: number,
shotsToFire: number,
shotsBaseInterval: number,
shotsBaseScatter: number,
engagementRange: number,
targetingRange: number,
aimMethodRange: number,
acquisitionRange: number,
units: Unit[] | null = null,
onExecution: () => void = () => {}
) {
if (units === null) units = this.getSelectedUnits();
units = units.filter((unit) => !unit.getHuman());
let callback = (units) => {
onExecution();
units.forEach((unit: Unit) =>
unit.setEngagementProperties(
barrelHeight,
muzzleVelocity,
aimTime,
shotsToFire,
shotsBaseInterval,
shotsBaseScatter,
engagementRange,
targetingRange,
aimMethodRange,
acquisitionRange
)
);
this.#showActionMessage(units, `engagement parameters set`);
};
if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
this.#protectionCallback = callback;