void; airbase
`}
>
void; airbase
>
ICAO name
- {props.airbase?.getChartData().ICAO !== "" ? props.airbase?.getChartData().ICAO : "N/A"}
+ {airbase?.getChartData().ICAO !== "" ? airbase?.getChartData().ICAO : "N/A"}
TACAN
- {props.airbase?.getChartData().TACAN !== "" ? props.airbase?.getChartData().TACAN : "None"}
+ {airbase?.getChartData().TACAN !== "" ? airbase?.getChartData().TACAN : "None"}
Elevation
- {props.airbase?.getChartData().elevation !== "" ? props.airbase?.getChartData().elevation : "N/A"}ft
+ {airbase?.getChartData().elevation !== "" ? airbase?.getChartData().elevation : "N/A"}ft
{
- // TODO
+ // TODO I can't remember what tho
}
-
+ setRunwaysAccordionOpen(!runwaysAccordionOpen)}
+ open={runwaysAccordionOpen}
+ >
- {props.airbase?.getChartData().runways.map((runway, idx) => {
+ {airbase?.getChartData().runways.map((runway, idx) => {
return (
<>
{Object.keys(runway.headings[0]).map((runwayName) => {
return (
-
+
{" "}
RWY {runwayName}
@@ -82,7 +132,6 @@ export function AirbaseMenu(props: { open: boolean; onClose: () => void; airbase
-
{blueprint && (
void; airbase
)}
Spawn units at airbase
+ {blueprint === null && (
+
+
setFilterString(value)} text={filterString} />
+ {
+ setOpenAccordion(openAccordion === CategoryAccordion.AIRCRAFT ? CategoryAccordion.NONE : CategoryAccordion.AIRCRAFT);
+ setSelectedRole(null);
+ }}
+ >
+
+ {roles.aircraft.sort().map((role) => {
+ return (
+
{
+ selectedRole === role ? setSelectedRole(null) : setSelectedRole(role);
+ }}
+ >
+ {role}
+
+ );
+ })}
+
+ {filteredBlueprints
+ .filter((blueprint) => blueprint.category === "aircraft")
+ .map((entry) => {
+ return
setBlueprint(entry)} />;
+ })}
+
+ {roles.helicopter.sort().map((role) => {
+ return (
+
{
+ selectedRole === role ? setSelectedRole(null) : setSelectedRole(role);
+ }}
+ >
+ {role}
+
+ );
+ })}
+
+ {filteredBlueprints
+ .filter((blueprint) => blueprint.category === "helicopter")
+ .map((entry) => {
+ return
setBlueprint(entry)} />;
+ })}
+
+ )}
<>
- {blueprint === null && (
-
-
setFilterString(value)} text={filterString} />
-
-
- {Object.entries(filteredAircraft).map((entry) => {
- return
setBlueprint(entry[1])} />;
- })}
-
- {Object.entries(filteredHelicopters).map((entry) => {
- return
setBlueprint(entry[1])} />;
- })}
-
- )}
-
{!(blueprint === null) && (
-
+
)}
-
Explosion type
-
-
- {["High explosive", "Napalm", "White phosphorous"].map((optionExplosionType) => {
- return (
- {
- setExplosionType(optionExplosionType);
- }}
- >
- {optionExplosionType}
-
- );
- })}
-
-
+ {props.effect === "explosion" && (
+ <>
+
Explosion type
+
+ {["High explosive", "Napalm", "White phosphorous"].map((optionExplosionType) => {
+ return (
+ {
+ setExplosionType(optionExplosionType);
+ }}
+ >
+ {optionExplosionType}
+
+ );
+ })}
+
+
+ )}
+ {props.effect === "smoke" && (
+ <>
+
Smoke color
+
+ {["white", "blue", "red", "green", "orange"].map((optionSmokeColor) => {
+ return (
+
{
+ setSmokeColor(optionSmokeColor);
+ }}
+ tooltip=""
+ borderColor={optionSmokeColor}
+ />
+ );
+ })}
+
+
+ )}
+
diff --git a/frontend/react/src/ui/panels/infobar.tsx b/frontend/react/src/ui/panels/infobar.tsx
new file mode 100644
index 00000000..e41ca112
--- /dev/null
+++ b/frontend/react/src/ui/panels/infobar.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from "react";
+import { ContextActionSet } from "../../unit/contextactionset";
+import { OlStateButton } from "../components/olstatebutton";
+import { getApp } from "../../olympusapp";
+import { ContextAction } from "../../unit/contextaction";
+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, ContextActionChangedEvent, ContextActionSetChangedEvent } from "../../events";
+
+export function InfoBar(props: {}) {
+ const [appState, setAppState] = useState(OlympusState.NOT_INITIALIZED);
+ const [contextActionSet, setContextActionsSet] = useState(null as ContextActionSet | null);
+ const [contextAction, setContextAction] = useState(null as ContextAction | null);
+ const [scrolledLeft, setScrolledLeft] = useState(true);
+ const [scrolledRight, setScrolledRight] = useState(false);
+
+ /* Initialize the "scroll" position of the element */
+ var scrollRef = useRef(null);
+ useEffect(() => {
+ if (scrollRef.current) onScroll(scrollRef.current);
+ });
+
+ useEffect(() => {
+ AppStateChangedEvent.on((state, subState) => setAppState(state));
+ ContextActionSetChangedEvent.on((contextActionSet) => setContextActionsSet(contextActionSet));
+ ContextActionChangedEvent.on((contextAction) => setContextAction(contextAction));
+ }, []);
+
+ function onScroll(el) {
+ const sl = el.scrollLeft;
+ const sr = el.scrollWidth - el.scrollLeft - el.clientWidth;
+
+ sl < 1 && !scrolledLeft && setScrolledLeft(true);
+ sl > 1 && scrolledLeft && setScrolledLeft(false);
+
+ sr < 1 && !scrolledRight && setScrolledRight(true);
+ sr > 1 && scrolledRight && setScrolledRight(false);
+ }
+
+ let reorderedActions: ContextAction[] = [];
+ CONTEXT_ACTION_COLORS.forEach((color) => {
+ if (contextActionSet) {
+ Object.values(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 (
+ <>
+ {appState === OlympusState.UNIT_CONTROL && contextActionSet && Object.keys(contextActionSet.getContextActions()).length > 0 && (
+ <>
+
+ {!scrolledLeft && (
+
+ )}
+
onScroll(ev.target)} ref={scrollRef}>
+ {reorderedActions.map((contextActionIt: ContextAction) => {
+ return (
+
{
+ if (contextActionIt.getOptions().executeImmediately) {
+ contextActionIt.executeCallback(null, null);
+ } else {
+ contextActionIt !== contextAction ? getApp().getMap().setContextAction(contextActionIt) : getApp().getMap().setContextAction(null);
+ }
+ }}
+ />
+ );
+ })}
+
+ {!scrolledRight && (
+
+ )}
+
+ {contextAction && (
+
+
+
+ {contextAction.getDescription()}
+
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index f75db7aa..376bb2c7 100644
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -2,18 +2,17 @@ import React, { useEffect, useState } from "react";
import { OlStateButton } from "../components/olstatebutton";
import {
faGamepad,
- faRuler,
faPencil,
faEllipsisV,
faCog,
faQuestionCircle,
faPlusSquare,
- faMagnifyingGlass,
faVolumeHigh,
faJ,
+ faCrown,
} from "@fortawesome/free-solid-svg-icons";
import { getApp } from "../../olympusapp";
-import { NO_SUBSTATE, OlympusState, OlympusSubState } from "../../constants/constants";
+import { OlympusState } from "../../constants/constants";
import { AppStateChangedEvent } from "../../events";
export function SideBar() {
@@ -80,6 +79,14 @@ export function SideBar() {
icon={faJ}
tooltip="Hide/show JTAC menu"
>
+
{
+ getApp().setState(appState !== OlympusState.GAME_MASTER ? OlympusState.GAME_MASTER : OlympusState.IDLE);
+ }}
+ checked={appState === OlympusState.GAME_MASTER}
+ icon={faCrown}
+ tooltip="Hide/show Game Master menu"
+ >
diff --git a/frontend/react/src/ui/panels/spawnmenu.tsx b/frontend/react/src/ui/panels/spawnmenu.tsx
index d9ad346d..33a0122d 100644
--- a/frontend/react/src/ui/panels/spawnmenu.tsx
+++ b/frontend/react/src/ui/panels/spawnmenu.tsx
@@ -16,8 +16,8 @@ import {
import { faExplosion, faSmog } from "@fortawesome/free-solid-svg-icons";
import { OlEffectListEntry } from "../components/oleffectlistentry";
import { EffectSpawnMenu } from "./effectspawnmenu";
-import { NO_SUBSTATE, OlympusState } from "../../constants/constants";
-import { AppStateChangedEvent, UnitDatabaseLoadedEvent } from "../../events";
+import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, NO_SUBSTATE, OlympusState } from "../../constants/constants";
+import { AppStateChangedEvent, CommandModeOptionsChangedEvent, UnitDatabaseLoadedEvent } from "../../events";
enum CategoryAccordion {
NONE,
@@ -40,6 +40,8 @@ export function SpawnMenu(props: { open: boolean; onClose: () => void; children?
const [blueprints, setBlueprints] = useState([] as UnitBlueprint[]);
const [roles, setRoles] = useState({ aircraft: [] as string[], helicopter: [] as string[] });
const [types, setTypes] = useState({ groundunit: [] as string[], navyunit: [] as string[] });
+ const [commandModeOptions, setCommandModeOptions] = useState(COMMAND_MODE_OPTIONS_DEFAULTS);
+ const [showCost, setShowCost] = useState(false);
useEffect(() => {
if (selectedRole) setBlueprints(getApp()?.getUnitsManager().getDatabase().getByRole(selectedRole));
@@ -71,6 +73,19 @@ export function SpawnMenu(props: { open: boolean; onClose: () => void; children?
.getTypes((unit) => unit.category === "navyunit"),
});
});
+
+ AppStateChangedEvent.on((state, subState) => {
+ if (subState === NO_SUBSTATE) {
+ setBlueprint(null);
+ setEffect(null);
+ }
+ });
+
+ CommandModeOptionsChangedEvent.on((commandModeOptions) => {
+ setCommandModeOptions(commandModeOptions);
+ setShowCost(!(commandModeOptions.commandMode == GAME_MASTER || !commandModeOptions.restrictSpawns));
+ setOpenAccordion(CategoryAccordion.NONE);
+ });
}, []);
/* Filter the blueprints according to the label */
@@ -90,15 +105,6 @@ export function SpawnMenu(props: { open: boolean; onClose: () => void; children?
}
});
- useEffect(() => {
- AppStateChangedEvent.on((state, subState) => {
- if (subState === NO_SUBSTATE) {
- setBlueprint(null);
- setEffect(null);
- }
- });
- }, []);
-
return (