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

Completed adding events

Browse Source
This commit is contained in:
Pax1601
2024-10-29 07:54:58 +01:00
parent 7f5873b5b8
commit 475b04eff7
10 changed files with 205 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useContext, useEffect, useRef, useState } from "react";
import { Unit } from "../../unit/unit";
import { ContextActionSet } from "../../unit/contextactionset";
import { getApp } from "../../olympusapp";
import { ContextAction } from "../../unit/contextaction";
import { CONTEXT_ACTION_COLORS } from "../../constants/constants";
import { CONTEXT_ACTION_COLORS, OlympusState, UnitControlSubState } from "../../constants/constants";
import { OlDropdownItem } from "../components/oldropdown";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LatLng } from "leaflet";
import { SelectionClearedEvent } from "../../events";
import { StateContext } from "../../statecontext";
export function MapContextMenu(props: {}) {
const [open, setOpen] = useState(false);
const [contextActionsSet, setContextActionsSet] = useState(new ContextActionSet());
const [activeContextAction, setActiveContextAction] = useState(null as null | ContextAction);
const appState = useContext(StateContext);
const [xPosition, setXPosition] = useState(0);
const [yPosition, setYPosition] = useState(0);
const [latLng, setLatLng] = useState(null as null | LatLng);
@@ -41,69 +41,18 @@ export function MapContextMenu(props: {}) {
}
});
useEffect(() => {
document.addEventListener("showMapContextMenu", (ev: CustomEventInit) => {
setOpen(true);
updateData();
setXPosition(ev.detail.originalEvent.clientX);
setYPosition(ev.detail.originalEvent.clientY);
setLatLng(ev.detail.latlng);
setUnit(null);
});
document.addEventListener("showUnitContextMenu", (ev: CustomEventInit) => {
setOpen(true);
updateData();
setXPosition(ev.detail.originalEvent.clientX);
setYPosition(ev.detail.originalEvent.clientY);
setLatLng(null);
setUnit(ev.detail.sourceTarget);
});
document.addEventListener("hideMapContextMenu", (ev: CustomEventInit) => {
setOpen(false);
});
document.addEventListener("hideUnitContextMenu", (ev: CustomEventInit) => {
setOpen(false);
});
SelectionClearedEvent.on(() => {
setOpen(false);
});
}, []);
/* Update the current values of the shown data */
function updateData() {
var newContextActionSet = new ContextActionSet();
getApp()
.getUnitsManager()
.getSelectedUnits()
.filter((unit) => !unit.getHuman())
.forEach((unit: Unit) => {
unit.appendContextActions(newContextActionSet);
});
setContextActionsSet(newContextActionSet);
return newContextActionSet;
}
let reorderedActions: ContextAction[] = [];
CONTEXT_ACTION_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);
});
if (appState.contextActionSet)
Object.values(appState.contextActionSet.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 && (
{appState.appState === OlympusState.UNIT_CONTROL && appState.appSubState === UnitControlSubState.UNIT_CONTEXT_MENU && (
<>
<div
ref={contentRef}
@@ -116,38 +65,38 @@ 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) => {
const colorString = contextAction.getOptions().buttonColor
? `
{appState.contextActionSet &&
Object.values(appState.contextActionSet.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
${colorString}
`}
onClick={() => {
if (contextAction.getOptions().executeImmediately) {
contextAction.executeCallback(null, null);
} else {
if (latLng !== null) {
contextAction.executeCallback(null, latLng);
setOpen(false);
} else if (unit !== null) {
contextAction.executeCallback(unit, null);
setOpen(false);
: "";
return (
<OlDropdownItem
className={`
flex w-full content-center gap-2 text-white
${colorString}
`}
onClick={() => {
if (contextAction.getOptions().executeImmediately) {
contextAction.executeCallback(null, null);
} else {
if (latLng !== null) {
contextAction.executeCallback(null, latLng);
} else if (unit !== null) {
contextAction.executeCallback(unit, null);
}
}
}
}}
>
<FontAwesomeIcon className="my-auto" icon={contextAction.getIcon()} />
<div>{contextAction.getLabel()}</div>
</OlDropdownItem>
);
})}
}}
>
<FontAwesomeIcon className="my-auto" icon={contextAction.getIcon()} />
<div>{contextAction.getLabel()}</div>
</OlDropdownItem>
);
})}
</div>
</div>
</>

4
frontend/react/src/ui/modals/protectionprompt.tsx
View File

@@ -5,7 +5,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { Unit } from "../../unit/unit";
import { FaLock } from "react-icons/fa6";
export function ProtectionPrompt(props: {onContinue: (units: Unit[]) => void, onBack: () => void, units: Unit[] }) {
export function ProtectionPrompt(props: {onContinue: () => void, onBack: () => void }) {
return (
<Modal
className={`
@@ -56,7 +56,7 @@ export function ProtectionPrompt(props: {onContinue: (units: Unit[]) => void, on
<div className="flex">
<button
type="button"
onClick={() => {props.onContinue(props.units);}}
onClick={() => {props.onContinue()}}
className={`
mb-2 me-2 ml-auto flex content-center items-center gap-2
rounded-sm bg-blue-700 px-5 py-2.5 text-sm font-medium text-white

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

@@ -8,13 +8,11 @@ import { CONTEXT_ACTION_COLORS } from "../../constants/constants";
import { FaInfoCircle } from "react-icons/fa";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa6";
import { OlympusState } from "../../constants/constants";
import { AppStateChangedEvent } from "../../events";
import { StateContext } from "../../statecontext";
export function UnitMouseControlBar(props: {}) {
const appState = useContext(StateContext);
const [open, setOpen] = useState(false);
const [scrolledLeft, setScrolledLeft] = useState(true);
const [scrolledRight, setScrolledRight] = useState(false);
@@ -24,12 +22,6 @@ export function UnitMouseControlBar(props: {}) {
if (scrollRef.current) onScroll(scrollRef.current);
});
useEffect(() => {
AppStateChangedEvent.on((state, subState) => {
setOpen(state === OlympusState.UNIT_CONTROL);
});
}, []);
function onScroll(el) {
const sl = el.scrollLeft;
const sr = el.scrollWidth - el.scrollLeft - el.clientWidth;
@@ -53,7 +45,7 @@ export function UnitMouseControlBar(props: {}) {
return (
<>
{open && appState.contextActionSet && Object.keys(appState.contextActionSet.getContextActions()).length > 0 && (
{appState.appState === OlympusState.UNIT_CONTROL && appState.contextActionSet && Object.keys(appState.contextActionSet.getContextActions()).length > 0 && (
<>
<div
className={`

2
frontend/react/src/ui/panels/unitspawnmenu.tsx
View File

@@ -58,7 +58,7 @@ export function UnitSpawnMenu(props: { blueprint: UnitBlueprint; spawnAtLocation
if (getApp().getState() === OlympusState.SPAWN) getApp().setState(OlympusState.IDLE);
}
}
});
}, [spawnAltitude, spawnAltitudeType, spawnLoadoutName, spawnCoalition]);
function spawnAtAirbase() {
getApp()

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

@@ -83,8 +83,8 @@ export function UI() {
const [audioSinks, setAudioSinks] = useState([] as AudioSink[]);
const [audioManagerState, setAudioManagerState] = useState(false);
const [serverStatus, setServerStatus] = useState({} as ServerStatus);
const [contextActionSet, setContextActionsSet] = useState(null as ContextActionSet | null);
const [contextAction, setContextActions] = useState(null as ContextAction | null);
const [contextActionSet, setContextActionSet] = useState(null as ContextActionSet | null);
const [contextAction, setContextAction] = useState(null as ContextAction | null);
const [checkingPassword, setCheckingPassword] = useState(false);
const [loginError, setLoginError] = useState(false);
@@ -94,9 +94,6 @@ export function UI() {
const [formationLeader, setFormationLeader] = useState(null as null | Unit);
const [formationWingmen, setFormationWingmen] = useState(null as null | Unit[]);
const [protectionPromptVisible, setProtectionPromptVisible] = useState(false);
const [protectionCallback, setProtectionCallback] = useState(null as any);
const [protectionUnits, setProtectionUnits] = useState([] as Unit[]);
const [unitExplosionUnits, setUnitExplosionUnits] = useState([] as Unit[]);
@@ -119,16 +116,8 @@ export function UI() {
AudioSinksChangedEvent.on((sinks) => setAudioSinks(sinks));
AudioManagerStateChangedEvent.on((state) => setAudioManagerState(state));
ServerStatusUpdatedEvent.on((status) => setServerStatus(status));
ContextActionSetChangedEvent.on((contextActionSet) => setContextActionsSet(contextActionSet));
ContextActionChangedEvent.on((contextAction) => setContextActions(contextAction));
document.addEventListener("showProtectionPrompt", (ev: CustomEventInit) => {
setProtectionPromptVisible(true);
setProtectionCallback(() => {
return ev.detail.callback;
});
setProtectionUnits(ev.detail.units);
});
ContextActionSetChangedEvent.on((contextActionSet) => setContextActionSet(contextActionSet));
ContextActionChangedEvent.on((contextAction) => setContextAction(contextAction));
}, []);
function checkPassword(password: string) {
@@ -210,7 +199,7 @@ export function UI() {
/>
</>
)}
{protectionPromptVisible && (
{appState === OlympusState.UNIT_CONTROL && appSubState == UnitControlSubState.PROTECTION && (
<>
<div
className={`
@@ -218,14 +207,12 @@ export function UI() {
`}
></div>
<ProtectionPrompt
onContinue={(units) => {
protectionCallback(units);
setProtectionPromptVisible(false);
onContinue={() => {
getApp().getUnitsManager().executeProtectionCallback()
}}
onBack={() => {
setProtectionPromptVisible(false);
getApp().setState(OlympusState.UNIT_CONTROL)
}}
units={protectionUnits}
/>
</>
)}