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

Multiple small improvements and bugfixes

Browse Source
This commit is contained in:
Pax1601
2024-10-19 10:53:43 +02:00
parent 0c5139f5ee
commit 7fa39561e3
17 changed files with 133 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/react/src/audio/unitsink.ts
View File

@@ -37,6 +37,7 @@ export class UnitSink extends AudioSink {
this.#unitPipelines[unitID] = new AudioUnitPipeline(this.#unit, unitID, this.getInputNode());
this.#unitPipelines[unitID].setPtt(false);
this.#unitPipelines[unitID].setMaxDistance(this.#maxDistance);
console.log(`Added unit pipeline for unitID ${unitID} ` )
}
});

1
frontend/react/src/dom.d.ts vendored
View File

@@ -3,6 +3,7 @@ import { CoalitionPolygon } from "./map/coalitionarea/coalitionpolygon";
import { Unit } from "./unit/unit";
interface CustomEventMap {
// TODO add missing events and remove unused
unitSelection: CustomEvent<Unit>;
unitDeselection: CustomEvent<Unit>;
unitsSelection: CustomEvent<Unit[]>;

5
frontend/react/src/map/boxselect.ts
View File

@@ -89,11 +89,8 @@ export var BoxSelect = Handler.extend({
_onMouseMove: function (e: any) {
if (!this._moved) {
this._moved = true;
this._box = DomUtil.create("div", "leaflet-zoom-box", this._container);
DomUtil.addClass(this._container, "leaflet-crosshair");
this._map.fire("boxzoomstart");
}
if (e.type === "touchmove") this._point = this._map.mouseEventToContainerPoint(e.touches[0]);
@@ -117,6 +114,7 @@ export var BoxSelect = Handler.extend({
DomUtil.enableTextSelection();
DomUtil.enableImageDrag();
this._map.dragging.enable();
this._forceBoxSelect = false;
DomEvent.off(
//@ts-ignore
@@ -149,7 +147,6 @@ export var BoxSelect = Handler.extend({
window.setTimeout(Util.bind(this._resetState, this), 0);
var bounds = new LatLngBounds(this._map.containerPointToLatLng(this._startPoint), this._map.containerPointToLatLng(this._point));
this._forceBoxSelect = false;
this._map.fire("selectionend", { selectionBounds: bounds });
},

13
frontend/react/src/map/map.ts
View File

@@ -67,8 +67,10 @@ export class Map extends L.Map {
#mouseCooldownTimer: number = 0;
#shortPressTimer: number = 0;
#longPressTimer: number = 0;
#selecting: boolean = false;
/* Camera keyboard panning control */
// TODO add back
defaultPanDelta: number = 100;
#panInterval: number | null = null;
#panLeft: boolean = false;
@@ -80,6 +82,7 @@ export class Map extends L.Map {
#isShiftKeyDown: boolean = false;
/* Center on unit target */
// TODO add back
#centeredUnit: Unit | null = null;
/* Minimap */
@@ -721,6 +724,10 @@ export class Map extends L.Map {
return this.#centeredUnit;
}
isSelecting() {
return this.#selecting;
}
setTheatre(theatre: string) {
this.#theatre = theatre;
@@ -921,11 +928,14 @@ export class Map extends L.Map {
this.#isDragging = false;
}
#onSelectionStart(e: any) {}
#onSelectionStart(e: any) {
this.#selecting = true;
}
#onSelectionEnd(e: any) {
getApp().getUnitsManager().selectFromBounds(e.selectionBounds);
document.dispatchEvent(new CustomEvent("mapSelectionEnd"));
this.#selecting = false;
}
#onMouseUp(e: any) {
@@ -966,7 +976,6 @@ export class Map extends L.Map {
this.setState(COALITIONAREA_EDIT);
} else {
this.setState(IDLE);
document.dispatchEvent(new CustomEvent("hideAllMenus"));
}
}

26
frontend/react/src/ui/contextmenus/mapcontextmenu.tsx
View File

@@ -16,7 +16,7 @@ export function MapContextMenu(props: {}) {
const [xPosition, setXPosition] = useState(0);
const [yPosition, setYPosition] = useState(0);
const [latLng, setLatLng] = useState(null as null | LatLng);
const [unit, setUnit] = useState(null as null | Unit)
const [unit, setUnit] = useState(null as null | Unit);
var contentRef = useRef(null);
@@ -84,7 +84,7 @@ export function MapContextMenu(props: {}) {
getApp()
.getUnitsManager()
.getSelectedUnits()
.filter(unit => !unit.getHuman())
.filter((unit) => !unit.getHuman())
.forEach((unit: Unit) => {
unit.appendContextActions(newContextActionSet);
});
@@ -93,6 +93,15 @@ export function MapContextMenu(props: {}) {
return newContextActionSet;
}
let colors = [null, "white", "green", "purple", "blue", "red"];
let reorderedActions: ContextAction[] = [];
colors.forEach((color) => {
Object.values(contextActionsSet.getContextActions()).forEach((contextAction: ContextAction) => {
if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
});
});
return (
<>
{open && (
@@ -108,10 +117,19 @@ export function MapContextMenu(props: {}) {
flex w-full flex-col gap-2 overflow-x-auto no-scrollbar p-2
`}
>
{Object.values(contextActionsSet.getContextActions(latLng? "position": "unit")).map((contextAction) => {
{Object.values(contextActionsSet.getContextActions(latLng ? "position" : "unit")).map((contextAction) => {
const colorString = contextAction.getOptions().buttonColor
? `
border-2
border-${contextAction.getOptions().buttonColor}-500
`
: "";
return (
<OlDropdownItem
className="flex w-full content-center gap-2 text-white"
className={`
flex w-full content-center gap-2 text-white
${colorString}
`}
onClick={() => {
if (contextAction.getOptions().executeImmediately) {
contextAction.executeCallback(null, null);

11
frontend/react/src/ui/modals/login.tsx
View File

@@ -15,7 +15,7 @@ export function LoginModal(props: {
onBack: () => void;
}) {
const [password, setPassword] = useState("");
const [displayName, setDisplayName] = useState("");
const [displayName, setDisplayName] = useState("Game Master");
return (
<Modal
@@ -29,9 +29,7 @@ export function LoginModal(props: {
>
<img
src="/vite/images/splash/1.jpg"
className={`
contents-center w-full object-cover opacity-[7%]
`}
className={`contents-center w-full object-cover opacity-[7%]`}
></img>
<div
className={`
@@ -92,9 +90,7 @@ export function LoginModal(props: {
<span className="size-[80px] min-w-14">
<img
src="..\vite\images\olympus-500x500.png"
className={`
flex w-full
`}
className={`flex w-full`}
></img>
</span>
<div className={`flex flex-col items-start gap-1`}>
@@ -204,6 +200,7 @@ export function LoginModal(props: {
focus:border-blue-500 focus:ring-blue-500
`}
placeholder="Enter display name"
value={displayName}
required
/>
</div>

6
frontend/react/src/ui/panels/airbasemenu.tsx
View File

@@ -50,12 +50,14 @@ export function AirbaseMenu(props: { open: boolean; onClose: () => void; airbase
<OlAccordion title={`Runways`} className="!p-0 !text-gray-400">
<div className="flex flex-col gap-2">
{props.airbase?.getChartData().runways.map((runway) => {
{props.airbase?.getChartData().runways.map((runway, idx) => {
return (
<>
{Object.keys(runway.headings[0]).map((runwayName) => {
return (
<div className="flex w-full justify-between">
<div key={`${idx}-${runwayName}`} className={`
flex w-full justify-between
`}>
<span>
{" "}
<span className="text-gray-400">RWY</span> {runwayName}

2
frontend/react/src/ui/panels/components/sourcepanel.tsx
View File

@@ -116,7 +116,7 @@ export const AudioSourcePanel = forwardRef((props: { source: AudioSource; onExpa
<OlRangeSlider
value={props.source.getVolume() * 100}
min={0}
max={200}
max={100}
onChange={(ev) => {
props.source.setVolume(parseFloat(ev.currentTarget.value) / 100);
}}

5
frontend/react/src/ui/panels/drawingmenu.tsx
View File

@@ -43,11 +43,6 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
/* Align the state of the coalition toggle to the coalition of the area */
if (activeCoalitionArea && activeCoalitionArea?.getCoalition() !== areaCoalition) setAreaCoalition(activeCoalitionArea?.getCoalition());
if (!props.open) {
if ([COALITIONAREA_EDIT, COALITIONAREA_DRAW_CIRCLE, COALITIONAREA_DRAW_POLYGON].includes(getApp().getMap().getState()))
getApp().getMap().setState(IDLE);
}
}
});

7
frontend/react/src/ui/panels/formationmenu.tsx
View File

@@ -103,6 +103,7 @@ export function FormationMenu(props: {
.map((optionFormationType) => {
return (
<OlDropdownItem
key={optionFormationType}
onClick={() => {
setCount(count + 1);
setFormationType(optionFormationType);
@@ -231,7 +232,7 @@ export function FormationMenu(props: {
.forEach((unit, idx) => {
if (units.length > 0 && units[0] !== null && idx != 0) {
const ID = units[0].ID;
const [dx, dz] = [
-(silhouetteHandles[idx].position.y - silhouetteHandles[0].position.y),
silhouetteHandles[idx].position.x - silhouetteHandles[0].position.x,
@@ -265,7 +266,9 @@ export function FormationMenu(props: {
style={{
width: `${referenceWidth}px`,
}}
><div className="translate-y-[-8px]">{referenceDistance}ft</div></div>
>
<div className="translate-y-[-8px]">{referenceDistance}ft</div>
</div>
</div>
<div

4
frontend/react/src/ui/panels/sidebar.tsx
View File

@@ -3,7 +3,7 @@ import { OlStateButton } from "../components/olstatebutton";
import { faGamepad, faRuler, faPencil, faEllipsisV, faCog, faQuestionCircle, faPlusSquare, faMagnifyingGlass, faRadio, faVolumeHigh, faJ } from "@fortawesome/free-solid-svg-icons";
import { EventsConsumer } from "../../eventscontext";
import { StateConsumer } from "../../statecontext";
import { IDLE } from "../../constants/constants";
import { CONTEXT_ACTION, IDLE } from "../../constants/constants";
export function SideBar() {
return (
@@ -42,7 +42,7 @@ export function SideBar() {
<OlStateButton
onClick={events.toggleUnitControlMenuVisible}
checked={appState.unitControlMenuVisible}
icon={appState.mapState === IDLE? faMagnifyingGlass: faGamepad}
icon={appState.mapState !== CONTEXT_ACTION? faMagnifyingGlass: faGamepad}
tooltip="Hide/show selection tool and unit control menu"
></OlStateButton>
<OlStateButton onClick={events.toggleMeasureMenuVisible} checked={appState.measureMenuVisible} icon={faRuler} tooltip="NOT IMPLEMENTED"></OlStateButton>

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

@@ -137,6 +137,10 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
});
}, []);
useEffect(() => {
setShowAdvancedSettings(false);
}, [selectedUnits])
/* Update the current values of the shown data */
function updateData() {
const getters = {

19
frontend/react/src/ui/panels/unitmousecontrolbar.tsx
View File

@@ -72,6 +72,15 @@ export function UnitMouseControlBar(props: {}) {
sr > 1 && scrolledRight && setScrolledRight(false);
}
let colors = [null, "white", "green", "purple", "blue", "red"];
let reorderedActions: ContextAction[] = [];
colors.forEach((color) => {
Object.values(contextActionsSet.getContextActions()).forEach((contextAction: ContextAction) => {
if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
});
});
return (
<>
{open && Object.keys(contextActionsSet.getContextActions()).length > 0 && (
@@ -93,13 +102,21 @@ export function UnitMouseControlBar(props: {}) {
/>
)}
<div className="flex gap-2 overflow-x-auto no-scrollbar p-2" onScroll={(ev) => onScroll(ev.target)} ref={scrollRef}>
{Object.values(contextActionsSet.getContextActions()).map((contextAction: ContextAction) => {
{reorderedActions.map((contextAction: ContextAction) => {
return (
<OlStateButton
key={contextAction.getId()}
checked={contextAction === activeContextAction}
icon={contextAction.getIcon()}
tooltip={contextAction.getLabel()}
className={
contextAction.getOptions().buttonColor
? `
border-2
border-${contextAction.getOptions().buttonColor}-500
`
: ""
}
onClick={() => {
if (contextAction.getOptions().executeImmediately) {
setActiveContextAction(null);

20
frontend/react/src/ui/ui.tsx
View File

@@ -79,14 +79,13 @@ export function UI() {
setMapOptions({ ...getApp().getMap().getOptions() });
});
document.addEventListener("mapStateChanged", (ev) => {
//if ((ev as CustomEvent).detail === IDLE) hideAllMenus();
/*else*/ if ((ev as CustomEvent).detail === CONTEXT_ACTION && window.innerWidth > 1000) setUnitControlMenuVisible(true);
setMapState(String((ev as CustomEvent).detail));
});
document.addEventListener("mapStateChanged", (ev: CustomEventInit) => {
if (ev.detail === IDLE || ev.detail === CONTEXT_ACTION || mapState !== IDLE) {
hideAllMenus();
}
document.addEventListener("hideAllMenus", (ev) => {
hideAllMenus();
if (ev.detail === CONTEXT_ACTION && window.innerWidth > 1000) setUnitControlMenuVisible(true);
setMapState(ev.detail);
});
document.addEventListener("mapSourceChanged", (ev) => {
@@ -116,14 +115,16 @@ export function UI() {
document.addEventListener("showProtectionPrompt", (ev: CustomEventInit) => {
setProtectionPromptVisible(true);
setProtectionCallback(() => {return ev.detail.callback});
setProtectionCallback(() => {
return ev.detail.callback;
});
setProtectionUnits(ev.detail.units);
});
document.addEventListener("showUnitExplosionMenu", (ev) => {
setUnitExplosionMenuVisible(true);
setUnitExplosionUnits((ev as CustomEvent).detail.units);
})
});
}, []);
function hideAllMenus() {
@@ -137,6 +138,7 @@ export function UI() {
setAudioMenuVisible(false);
setFormationMenuVisible(false);
setUnitExplosionMenuVisible(false);
setJTACMenuVisible(false);
}
function checkPassword(password: string) {

1
frontend/react/src/unit/contextaction.ts
View File

@@ -4,6 +4,7 @@ import { LatLng } from "leaflet";
export interface ContextActionOptions {
executeImmediately?: boolean;
buttonColor?: string;
}
export type ContextActionCallback = (units: Unit[], targetUnit: Unit | null, targetPosition: LatLng | null) => void;

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

@@ -827,7 +827,8 @@ export abstract class Unit extends CustomMarker {
(units: Unit[], _, targetPosition) => {
getApp().getUnitsManager().clearDestinations(units);
if (targetPosition) getApp().getUnitsManager().addDestination(targetPosition, false, 0, units);
}
},
{ buttonColor: "white" }
);
contextActionSet.addContextAction(
@@ -839,7 +840,8 @@ export abstract class Unit extends CustomMarker {
"position",
(units: Unit[], _, targetPosition) => {
if (targetPosition) getApp().getUnitsManager().addDestination(targetPosition, false, 0, units);
}
},
{ buttonColor: "white" }
);
contextActionSet.addContextAction(
@@ -854,6 +856,7 @@ export abstract class Unit extends CustomMarker {
},
{
executeImmediately: true,
buttonColor: "red",
}
);
@@ -869,6 +872,7 @@ export abstract class Unit extends CustomMarker {
},
{
executeImmediately: true,
buttonColor: "red",
}
);
@@ -1244,10 +1248,10 @@ export abstract class Unit extends CustomMarker {
// .getServerManager()
// .isCommandExecuted((res: any) => {
// if (res.commandExecuted) {
getApp().getMap().addExplosionMarker(this.getPosition());
window.clearInterval(timer);
// }
// }, commandHash);
getApp().getMap().addExplosionMarker(this.getPosition());
window.clearInterval(timer);
// }
// }, commandHash);
}, 500);
}
});
@@ -1337,6 +1341,8 @@ export abstract class Unit extends CustomMarker {
#onMouseUp(e: any) {
this.#isMouseDown = false;
if (getApp().getMap().isSelecting()) return;
DomEvent.stop(e);
DomEvent.preventDefault(e);
e.originalEvent.stopImmediatePropagation();
@@ -1386,8 +1392,8 @@ export abstract class Unit extends CustomMarker {
this.setSelected(!this.getSelected());
}
} else if (getApp().getMap().getState() === SELECT_JTAC_TARGET) {
document.dispatchEvent(new CustomEvent("selectJTACTarget", {detail: {unit: this}}))
getApp().getMap().setState(IDLE)
document.dispatchEvent(new CustomEvent("selectJTACTarget", { detail: { unit: this } }));
getApp().getMap().setState(IDLE);
}
}
@@ -1820,7 +1826,7 @@ export abstract class AirUnit extends Unit {
(units: Unit[]) => {
getApp().getUnitsManager().refuel(units);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "purple" }
);
contextActionSet.addContextAction(
this,
@@ -1832,7 +1838,7 @@ export abstract class AirUnit extends Unit {
(units: Unit[]) => {
getApp().getMap().centerOnUnit(units[0]);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "green" }
);
/* Context actions that require a target unit */
@@ -1845,7 +1851,8 @@ export abstract class AirUnit extends Unit {
"unit",
(units: Unit[], targetUnit: Unit | null, _) => {
if (targetUnit) getApp().getUnitsManager().attackUnit(targetUnit.ID, units);
}
},
{ buttonColor: "blue" }
);
contextActionSet.addContextAction(
this,
@@ -1865,7 +1872,8 @@ export abstract class AirUnit extends Unit {
})
);
}
}
},
{ buttonColor: "purple" }
);
/* Context actions that require a target position */
@@ -1878,7 +1886,8 @@ export abstract class AirUnit extends Unit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().bombPoint(targetPosition, units);
}
},
{ buttonColor: "blue" }
);
contextActionSet.addContextAction(
this,
@@ -1889,7 +1898,8 @@ export abstract class AirUnit extends Unit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().carpetBomb(targetPosition, units);
}
},
{ buttonColor: "blue" }
);
contextActionSet.addContextAction(
@@ -1901,7 +1911,8 @@ export abstract class AirUnit extends Unit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().landAt(targetPosition, units);
}
},
{ buttonColor: "purple" }
);
}
}
@@ -1948,7 +1959,8 @@ export class Helicopter extends AirUnit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().landAtPoint(targetPosition, units);
}
},
{ buttonColor: "purple" }
);
}
@@ -1997,7 +2009,7 @@ export class GroundUnit extends Unit {
(units: Unit[], _1, _2) => {
getApp().getUnitsManager().createGroup(units);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "green" }
);
contextActionSet.addContextAction(
this,
@@ -2009,7 +2021,7 @@ export class GroundUnit extends Unit {
(units: Unit[]) => {
getApp().getMap().centerOnUnit(units[0]);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "green" }
);
/* Context actions that require a target unit */
@@ -2022,7 +2034,8 @@ export class GroundUnit extends Unit {
"unit",
(units: Unit[], targetUnit: Unit | null, _) => {
if (targetUnit) getApp().getUnitsManager().attackUnit(targetUnit.ID, units);
}
},
{ buttonColor: "blue" }
);
/* Context actions that require a target position */
@@ -2036,7 +2049,8 @@ export class GroundUnit extends Unit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().fireAtArea(targetPosition, units);
}
},
{ buttonColor: "blue" }
);
contextActionSet.addContextAction(
this,
@@ -2047,7 +2061,8 @@ export class GroundUnit extends Unit {
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().simulateFireFight(targetPosition, units);
}
},
{ buttonColor: "purple" }
);
}
}
@@ -2139,7 +2154,7 @@ export class NavyUnit extends Unit {
(units: Unit[], _1, _2) => {
getApp().getUnitsManager().createGroup(units);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "green" }
);
contextActionSet.addContextAction(
this,
@@ -2151,7 +2166,7 @@ export class NavyUnit extends Unit {
(units: Unit[]) => {
getApp().getMap().centerOnUnit(units[0]);
},
{ executeImmediately: true }
{ executeImmediately: true, buttonColor: "green" }
);
/* Context actions that require a target unit */
@@ -2160,11 +2175,12 @@ export class NavyUnit extends Unit {
"attack",
"Attack unit",
"Click on a unit to attack it",
faQuestionCircle,
olButtonsContextAttack,
"unit",
(units: Unit[], targetUnit: Unit | null, _) => {
if (targetUnit) getApp().getUnitsManager().attackUnit(targetUnit.ID, units);
}
},
{ buttonColor: "blue" }
);
/* Context actions that require a target position */
@@ -2173,11 +2189,11 @@ export class NavyUnit extends Unit {
"fire-at-area",
"Fire at area",
"Click on a point to precisely fire at it (if possible)",
faQuestionCircle,
faLocationCrosshairs,
"position",
(units: Unit[], _, targetPosition: LatLng | null) => {
if (targetPosition) getApp().getUnitsManager().fireAtArea(targetPosition, units);
}
}, { buttonColor: "blue" }
);
}

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

@@ -381,11 +381,11 @@ export class UnitsManager {
else unit.clearDestinations();
} else unit.clearDestinations();
}
if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
else callback(units);
};
if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
else callback(units);
}
/** Instruct all the selected units to land at a specific location