Still having issues? See our
diff --git a/frontend/react/src/ui/panels/audiomenu.tsx b/frontend/react/src/ui/panels/audiomenu.tsx
index 16ef6f10..66a83330 100644
--- a/frontend/react/src/ui/panels/audiomenu.tsx
+++ b/frontend/react/src/ui/panels/audiomenu.tsx
@@ -11,9 +11,7 @@ import { UnitSinkPanel } from "./components/unitsinkpanel";
import { UnitSink } from "../../audio/unitsink";
import { FaMinus, FaVolumeHigh } from "react-icons/fa6";
import { getRandomColor } from "../../other/utils";
-import { AudioManagerStateChangedEvent, AudioSinksChangedEvent, AudioSourcesChangedEvent } from "../../events";
-
-let shortcutKeys = ["Z", "X", "C", "V", "B", "N", "M", "K", "L"];
+import { AudioManagerStateChangedEvent, AudioSinksChangedEvent, AudioSourcesChangedEvent, ShortcutsChangedEvent } from "../../events";
export function AudioMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) {
const [sinks, setSinks] = useState([] as AudioSink[]);
@@ -21,6 +19,7 @@ export function AudioMenu(props: { open: boolean; onClose: () => void; children?
const [audioManagerEnabled, setAudioManagerEnabled] = useState(false);
const [activeSource, setActiveSource] = useState(null as AudioSource | null);
const [count, setCount] = useState(0);
+ const [shortcuts, setShortcuts] = useState({})
/* Preallocate 128 references for the source and sink panels. If the number of references changes, React will give an error */
const sourceRefs = Array(128)
@@ -60,6 +59,8 @@ export function AudioMenu(props: { open: boolean; onClose: () => void; children?
AudioManagerStateChangedEvent.on(() => {
setAudioManagerEnabled(getApp().getAudioManager().isRunning());
});
+
+ ShortcutsChangedEvent.on((shortcuts) => setShortcuts(shortcuts));
}, []);
/* When the sinks or sources change, use the count state to force a rerender to update the connection lines */
@@ -180,7 +181,7 @@ export function AudioMenu(props: { open: boolean; onClose: () => void; children?
if (sink instanceof RadioSink)
return (
{
@@ -218,7 +219,7 @@ export function AudioMenu(props: { open: boolean; onClose: () => void; children?
if (sink instanceof UnitSink)
return (
void }, ref: ForwardedRef) => {
+export const RadioSinkPanel = forwardRef((props: { radio: RadioSink; shortcutKeys: string[]; onExpanded: () => void }, ref: ForwardedRef) => {
const [expanded, setExpanded] = useState(false);
useEffect(() => {
@@ -39,22 +39,20 @@ export const RadioSinkPanel = forwardRef((props: { radio: RadioSink; shortcutKey
data-expanded={expanded}
/>
- {props.shortcutKey && (
+ {props.shortcutKeys && (
<>
{
- props.radio.setPtt(!props.radio.getPtt());
+ onClick={() => {}}
+ onMouseDown={() => {
+ props.radio.setPtt(true);
+ }}
+ onMouseUp={() => {
+ props.radio.setPtt(false);
}}
tooltip="Talk on frequency"
>
diff --git a/frontend/react/src/ui/panels/components/unitsinkpanel.tsx b/frontend/react/src/ui/panels/components/unitsinkpanel.tsx
index a82889aa..22ecb7e5 100644
--- a/frontend/react/src/ui/panels/components/unitsinkpanel.tsx
+++ b/frontend/react/src/ui/panels/components/unitsinkpanel.tsx
@@ -6,7 +6,7 @@ import { OlStateButton } from "../../components/olstatebutton";
import { faMicrophoneLines } from "@fortawesome/free-solid-svg-icons";
import { OlRangeSlider } from "../../components/olrangeslider";
-export const UnitSinkPanel = forwardRef((props: { sink: UnitSink; shortcutKey: string; onExpanded: () => void }, ref: ForwardedRef) => {
+export const UnitSinkPanel = forwardRef((props: { sink: UnitSink; shortcutKeys: string[]; onExpanded: () => void }, ref: ForwardedRef) => {
const [expanded, setExpanded] = useState(false);
useEffect(() => {
@@ -36,20 +36,21 @@ export const UnitSinkPanel = forwardRef((props: { sink: UnitSink; shortcutKey: s
data-expanded={expanded}
/>
- {props.shortcutKey && (<>
- {
- props.sink.setPtt(!props.sink.getPtt());
+ onClick={() => {}}
+ onMouseDown={() => {
+ props.sink.setPtt(true);
+ }}
+ onMouseUp={() => {
+ props.sink.setPtt(false);
}}
tooltip="Talk on frequency"
>
diff --git a/frontend/react/src/ui/panels/controlspanel.tsx b/frontend/react/src/ui/panels/controlspanel.tsx
index 9ba9a40a..9488daeb 100644
--- a/frontend/react/src/ui/panels/controlspanel.tsx
+++ b/frontend/react/src/ui/panels/controlspanel.tsx
@@ -1,17 +1,17 @@
import React, { useCallback, useEffect, useState } from "react";
-import { faHandPointer, faJetFighter, faMap, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { faFighterJet, faHandPointer, faJetFighter, faMap, IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ContextActionTarget, MAP_OPTIONS_DEFAULTS, NO_SUBSTATE, OlympusState, OlympusSubState, SpawnSubState } from "../../constants/constants";
-import { AppStateChangedEvent, MapOptionsChangedEvent } from "../../events";
-import { getApp } from "../../olympusapp";
+import { MAP_OPTIONS_DEFAULTS, NO_SUBSTATE, OlympusState, OlympusSubState, SpawnSubState } from "../../constants/constants";
+import { AppStateChangedEvent, ContextActionSetChangedEvent, MapOptionsChangedEvent, ShortcutsChangedEvent } from "../../events";
import { ContextAction } from "../../unit/contextaction";
+import { ContextActionSet } from "../../unit/contextactionset";
export function ControlsPanel(props: {}) {
const [controls, setControls] = useState(
null as
| {
actions: (string | number | IconDefinition)[];
- target: IconDefinition | null;
+ target?: IconDefinition;
text: string;
}[]
| null
@@ -19,6 +19,8 @@ export function ControlsPanel(props: {}) {
const [appState, setAppState] = useState(OlympusState.NOT_INITIALIZED);
const [appSubState, setAppSubState] = useState(NO_SUBSTATE as OlympusSubState);
const [mapOptions, setMapOptions] = useState(MAP_OPTIONS_DEFAULTS);
+ const [shortcuts, setShortcuts] = useState({})
+ const [contextActionSet, setContextActionSet] = useState(null as null | ContextActionSet)
useEffect(() => {
AppStateChangedEvent.on((state, subState) => {
@@ -26,65 +28,61 @@ export function ControlsPanel(props: {}) {
setAppSubState(subState);
});
MapOptionsChangedEvent.on((mapOptions) => setMapOptions({ ...mapOptions }));
+ ShortcutsChangedEvent.on((shortcuts) => setShortcuts(shortcuts));
+ ContextActionSetChangedEvent.on((contextActionSet) => setContextActionSet(contextActionSet));
}, []);
const callback = useCallback(() => {
const touch = matchMedia("(hover: none)").matches;
let controls: {
actions: (string | number | IconDefinition)[];
- target: IconDefinition | null;
+ target?: IconDefinition;
text: string;
}[] = [];
+ const baseControls = [
+ {
+ actions: [touch ? faHandPointer : "LMB"],
+ text: "Select unit",
+ },
+ {
+ actions: [touch ? faHandPointer : "LMB", "Drag"],
+ text: "Box selection",
+ },
+ {
+ actions: [touch ? faHandPointer : "Wheel", "Drag"],
+ text: "Move map",
+ },
+ ];
+ if (!touch) {
+ controls.push({
+ actions: ["Shift", "LMB", "Drag"],
+
+ text: "Box selection",
+ });
+ }
+
if (appState === OlympusState.IDLE) {
- controls = [
- {
- actions: [touch ? faHandPointer : "LMB"],
- target: faJetFighter,
- text: "Select unit",
- },
- {
- actions: touch ? [faHandPointer, "Hold"] : ["RMB"],
- target: faMap,
- text: "Quick spawn menu",
- },
- {
- actions: touch ? [faHandPointer, "Drag"] : ["Shift", "LMB", "Drag"],
- target: faMap,
- text: "Box selection",
- },
- {
- actions: [touch ? faHandPointer : "LMB", "Drag"],
- target: faMap,
- text: "Move map location",
- },
- ];
+ controls = baseControls;
+ controls.push({
+ actions: touch ? [faHandPointer, "Hold"] : ["RMB"],
+ text: "Quick spawn menu",
+ });
} else if (appState === OlympusState.SPAWN_CONTEXT) {
- controls = [
+ controls = baseControls;
+ controls.push(
{
actions: [touch ? faHandPointer : "LMB"],
- target: faJetFighter,
text: "Close context menu",
},
{
actions: touch ? [faHandPointer, "Hold"] : ["RMB"],
- target: faMap,
text: "Move context menu",
- },
- {
- actions: touch ? [faHandPointer, "Drag"] : ["Shift", "LMB", "Drag"],
- target: faMap,
- text: "Box selection",
- },
- {
- actions: [touch ? faHandPointer : "LMB", "Drag"],
- target: faMap,
- text: "Move map location",
- },
- ];
+ }
+ );
} else if (appState === OlympusState.UNIT_CONTROL) {
if (!mapOptions.tabletMode) {
- controls = Object.values(getApp().getMap().getContextActionSet()?.getContextActions() ?? {})
+ controls = Object.values(contextActionSet?.getContextActions() ?? {})
.sort((a: ContextAction, b: ContextAction) => (a.getLabel() > b.getLabel() ? 1 : -1))
.filter((contextAction: ContextAction) => contextAction.getOptions().code)
.map((contextAction: ContextAction) => {
@@ -95,53 +93,73 @@ export function ControlsPanel(props: {}) {
actions.push(
(contextAction.getOptions().code as string)
.replace("Key", "")
- .replace("ControlLeft", "Ctrl LH")
- .replace("AltLeft", "Alt LH")
- .replace("ShiftLeft", "Shift LH")
- .replace("ControlRight", "Ctrl RH")
- .replace("AltRight", "Alt RH")
- .replace("ShiftRight", "Shift RH")
+ .replace("ControlLeft", "Left Ctrl")
+ .replace("AltLeft", "Left Alt")
+ .replace("ShiftLeft", "Left Shift")
+ .replace("ControlRight", "Right Ctrl")
+ .replace("AltRight", "Right Alt")
+ .replace("ShiftRight", "Right Shift")
);
- contextAction.getTarget() !== ContextActionTarget.NONE && actions.push(touch ? faHandPointer : "LMB");
return {
actions: actions,
- target:
- contextAction.getTarget() === ContextActionTarget.NONE ? null : contextAction.getTarget() === ContextActionTarget.POINT ? faMap : faJetFighter,
text: contextAction.getLabel(),
};
});
+ controls.unshift({
+ actions: ["RMB"],
+ text: "Move",
+ });
+ controls.push({
+ actions: ["RMB", "Hold"],
+ target: faMap,
+ text: "Show point actions",
+ });
+ controls.push({
+ actions: ["RMB", "Hold"],
+ target: faFighterJet,
+ text: "Show unit actions",
+ });
+ controls.push({
+ actions: shortcuts["toggleRelativePositions"]?.toActions(),
+ text: "Activate group movement",
+ });
+ controls.push({
+ actions: [...shortcuts["toggleRelativePositions"]?.toActions(), "Wheel"],
+ text: "Rotate formation",
+ });
}
} else if (appState === OlympusState.SPAWN) {
controls = [
{
actions: [touch ? faHandPointer : "LMB", 2],
- target: faMap,
text: appSubState === SpawnSubState.NO_SUBSTATE ? "Close spawn menu" : "Return to spawn menu",
},
{
actions: touch ? [faHandPointer, "Drag"] : ["Shift", "LMB", "Drag"],
- target: faMap,
text: "Box selection",
},
{
actions: [touch ? faHandPointer : "LMB", "Drag"],
- target: faMap,
text: "Move map location",
},
];
if (appSubState === SpawnSubState.SPAWN_UNIT) {
controls.unshift({
actions: [touch ? faHandPointer : "LMB"],
- target: faMap,
text: "Spawn unit",
});
} else if (appSubState === SpawnSubState.SPAWN_EFFECT) {
controls.unshift({
actions: [touch ? faHandPointer : "LMB"],
- target: faMap,
text: "Spawn effect",
});
}
+ } else {
+ controls = baseControls;
+ controls.push({
+ actions: ["LMB"],
+ text: "Return to idle state"
+ })
}
setControls(controls);
@@ -178,20 +196,23 @@ export function ControlsPanel(props: {}) {
return (
- {typeof action === "string" || typeof action === "number" ? (
- action
- ) : (
-
- )}
+ {typeof action === "string" || typeof action === "number" ? action : }
{idx < control.actions.length - 1 && typeof control.actions[idx + 1] === "string" &&
+
}
{idx < control.actions.length - 1 && typeof control.actions[idx + 1] === "number" &&
x
}
);
})}
+ {control.target && (
+ <>
+
+
+
+
+
+
+ )}