{props.children}
;
+export function OlButtonGroup(props: {
+ tooltip?: string | (() => JSX.Element | JSX.Element[]);
+ tooltipPosition?: string;
+ tooltipRelativeToParent?: boolean;
+ children?: JSX.Element | JSX.Element[];
+}) {
+ const [hover, setHover] = useState(false);
+ const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+ var buttonRef = useRef(null);
+ return (
+ <>
+ {
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
+ }}
+ >
+ {props.children}
+
+ {hover && props.tooltip && (
+
+ <>
+ ) => void;
}) {
+ const [hover, setHover] = useState(false);
+ const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+ var buttonRef = useRef(null);
+
return (
; position?: string }) {
+export function OlTooltip(props: {
+ content: string | JSX.Element | JSX.Element[];
+ buttonRef: React.MutableRefObject;
+ position?: string;
+ relativeToParent?: boolean;
+}) {
var contentRef = useRef(null);
function setPosition(content: HTMLDivElement, button: HTMLButtonElement) {
@@ -9,8 +14,16 @@ export function OlTooltip(props: { content: string | JSX.Element | JSX.Element[]
content.style.top = "0px";
content.style.height = "";
+ button.style.position = "relative";
+ button.style.left = "0px";
+ button.style.top = "0px";
+
+
+ let parent = button.closest(".ol-panel-container") as HTMLElement;
+ if (parent === null) parent = document.body;
+
/* Get the position and size of the button and the content elements */
- let [cxl, cyt, cxr, cyb, cw, ch] = [
+ let [contentXLeft, contentYTop, contentXRight, contentYBottom, contentWidth, contentHeight] = [
content.getBoundingClientRect().x,
content.getBoundingClientRect().y,
content.getBoundingClientRect().x + content.offsetWidth,
@@ -18,7 +31,7 @@ export function OlTooltip(props: { content: string | JSX.Element | JSX.Element[]
content.offsetWidth,
content.offsetHeight,
];
- let [bxl, byt, bxr, byb, bbw, bh] = [
+ let [buttonXLeft, buttonYTop, buttonXRight, buttonYBottom, buttonWidth, buttonHeight] = [
button.getBoundingClientRect().x,
button.getBoundingClientRect().y,
button.getBoundingClientRect().x + button.offsetWidth,
@@ -28,38 +41,49 @@ export function OlTooltip(props: { content: string | JSX.Element | JSX.Element[]
];
/* Limit the maximum height */
- if (ch > 400) {
- ch = 400;
- content.style.height = `${ch}px`;
+ if (contentHeight > 400) {
+ contentHeight = 400;
+ content.style.height = `${contentHeight}px`;
}
/* Compute the horizontal position of the center of the button and the content */
- var cxc = (cxl + cxr) / 2;
- var bxc = (bxl + bxr) / 2;
+ var contentXCenter = (contentXLeft + contentXRight) / 2;
+ var buttonXCenter = (buttonXLeft + buttonXRight) / 2;
/* Compute the x and y offsets needed to align the button and element horizontally, and to put the content depending on the requested position */
var offsetX = 0;
var offsetY = 0;
if (props.position === undefined || props.position === "below") {
- offsetX = bxc - cxc;
- offsetY = byb - cyt + 8;
- } else if (props.position === "side") {
- offsetX = bxr + 8;
- offsetY = byt - cyt + (bh - ch) / 2;
+ offsetX = buttonXCenter - contentXCenter;
+ offsetY = buttonYBottom - contentYTop + 8;
+ } else if (props.position === "above") {
+ offsetX = buttonXCenter - contentXCenter;
+ offsetY = buttonYTop - contentYTop - contentHeight - 8;
}
+ else if (props.position === "side") {
+ offsetX = buttonXRight + 8;
+ offsetY = buttonYTop - contentYTop + (buttonHeight - contentHeight) / 2;
+ }
+
+ content.style.left = `${offsetX}px`;
+ content.style.top = `${offsetY}px`;
/* Compute the new position of the left and right margins of the content */
- let ncxl = cxl + offsetX;
- let ncxr = cxr + offsetX;
- let ncyb = cyb + offsetY;
+ let newContentXLeft = props.relativeToParent ? offsetX : contentXLeft + offsetX;
+ let newContentXRight = newContentXLeft + contentWidth;
+ let newContentYBottom = props.relativeToParent ? offsetY : contentYBottom + offsetY;
/* Try and move the content so it is inside the screen */
- if (ncxl < 0) offsetX -= cxl;
- if (ncxr > window.innerWidth) {
- offsetX = bxl - cxl - cw - 12;
+ if (newContentXLeft < 0) offsetX = 15;
+ if (newContentXRight > (props.relativeToParent ? parent.clientWidth : window.innerWidth)) {
+ if (props.position === "side") {
+ offsetX = buttonXLeft - contentXLeft - contentWidth - 12;
+ } else {
+ offsetX -= newContentXRight - (props.relativeToParent ? parent.clientWidth : window.innerWidth) + 15;
+ }
}
- if (ncyb > window.innerHeight) offsetY -= bh + ch + 16;
+ if (newContentYBottom > (props.relativeToParent ? parent.clientHeight : window.innerHeight)) offsetY -= buttonHeight + contentHeight + 16;
/* Apply the offset */
content.style.left = `${offsetX}px`;
@@ -77,7 +101,7 @@ export function OlTooltip(props: { content: string | JSX.Element | JSX.Element[]
setPosition(content, button);
});
resizeObserver.observe(content);
- return () => resizeObserver.disconnect(); // clean up
+ return () => resizeObserver.disconnect(); // clean up
}
});
@@ -86,9 +110,9 @@ export function OlTooltip(props: { content: string | JSX.Element | JSX.Element[]
{
+ e.stopPropagation();
+ props.onClick();
+ props.onClick ?? setHover(false);
+ }}
+ onMouseEnter={() => {
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
+ }}
+ ref={buttonRef}
+ >
| null;
open?: boolean;
+ tooltip?: string | (() => JSX.Element | JSX.Element[]);
+ tooltipPosition?: string;
+ tooltipRelativeToParent?: boolean;
}) {
const [open, setOpen] = props.open !== undefined ? [props.open, () => {}] : useState(false);
+ const [hover, setHover] = useState(false);
+ const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
var contentRef = useRef(null);
var buttonRef = props.buttonRef !== undefined ? props.buttonRef : useRef(null);
@@ -88,67 +94,92 @@ export function OlDropdown(props: {
});
return (
-
);
diff --git a/frontend/react/src/ui/components/olnumberinput.tsx b/frontend/react/src/ui/components/olnumberinput.tsx
index a7e53395..ce2f352a 100644
--- a/frontend/react/src/ui/components/olnumberinput.tsx
+++ b/frontend/react/src/ui/components/olnumberinput.tsx
@@ -1,5 +1,6 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useRef, useState } from "react";
import { zeroAppend } from "../../other/utils";
+import { OlTooltip } from "./oltooltip";
export function OlNumberInput(props: {
value: number;
@@ -7,10 +8,17 @@ export function OlNumberInput(props: {
max: number;
minLength?: number;
className?: string;
+ tooltip?: string | (() => JSX.Element | JSX.Element[]);
+ tooltipPosition?: string;
+ tooltipRelativeToParent?: boolean;
onDecrease: () => void;
onIncrease: () => void;
onChange: (e: ChangeEvent
)}
+
+ {hover && props.tooltip && (
+
- {props.buttonRef === undefined && (
-
+ {hover && props.tooltip && (
+
{props.location.lng >= 0 ? "E" : "W"}
- {zeroAppend(props.location.lng, 3, true, 6)}
+ {zeroAppend(props.location.lng, 3, true, 6)}°
- }
+ {hover && props.tooltip && (
+
+ {hover && props.tooltip && (
+
+
);
}
diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index 3f81b24a..9650fa16 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -13,12 +13,14 @@ export function OlStateButton(props: {
icon?: IconProp;
tooltip?: string | (() => JSX.Element | JSX.Element[]);
tooltipPosition?: string;
+ tooltipRelativeToParent?: boolean;
onClick: () => void;
onMouseUp?: () => void;
onMouseDown?: () => void;
children?: JSX.Element | JSX.Element[];
}) {
const [hover, setHover] = useState(false);
+ const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
var buttonRef = useRef(null);
const className =
@@ -45,30 +47,63 @@ export function OlStateButton(props: {
className={className}
style={{
border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent",
- background: setOpacity(props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE, (!props.checked && hover)? 0.3: 1),
+ background: setOpacity(
+ props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
+ !props.checked && hover ? 0.3 : 1
+ ),
}}
onMouseEnter={() => {
- setHover(true);
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
}}
onMouseLeave={() => {
setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
}}
>
{
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
+ }}
+ >
+ {hover && props.tooltip && (
+
- {props.icon && 200} className={`
- m-auto text-gray-200
- data-[bright='true']:text-gray-800
- `} />}
+ {props.icon && (
+ 200}
+ className={`
+ m-auto text-gray-200
+ data-[bright='true']:text-gray-800
+ `}
+ />
+ )}
{props.children}
- {hover && props.tooltip && {
- e.stopPropagation();
- props.onClick();
- }}
- >
-
+ <>
-
+ className="inline-flex cursor-pointer items-center"
+ ref={buttonRef}
+ onClick={(e) => {
+ e.stopPropagation();
+ props.onClick();
+ setHover(false);
+ }}
+ onMouseEnter={() => {
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
+ }}
+ >
+
+
+
{props.content}
diff --git a/frontend/react/src/ui/components/olunitsummary.tsx b/frontend/react/src/ui/components/olunitsummary.tsx
index 698739a1..e08649c2 100644
--- a/frontend/react/src/ui/components/olunitsummary.tsx
+++ b/frontend/react/src/ui/components/olunitsummary.tsx
@@ -1,8 +1,23 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { UnitBlueprint } from "../../interfaces";
import { Coalition } from "../../types/types";
+import { getWikipediaImage, getWikipediaSummary } from "../../other/utils";
+import { OlStateButton } from "./olstatebutton";
+import { faImage } from "@fortawesome/free-solid-svg-icons";
+import { FaQuestionCircle } from "react-icons/fa";
export function OlUnitSummary(props: { blueprint: UnitBlueprint; coalition: Coalition }) {
+ const [imageUrl, setImageUrl] = useState(null as string | null);
+ const [summary, setSummary] = useState(null as string | null);
+ const [hover, setHover] = useState(false);
+ const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+
+ useEffect(() => {
+ getWikipediaImage(props.blueprint.label).then((url) => {
+ setImageUrl(url);
+ });
+ }, [props.blueprint]);
+
return (
{
+ setHoverTimeout(
+ window.setTimeout(() => {
+ setHover(true);
+ setHoverTimeout(null);
+ }, 400)
+ );
+ }}
+ onMouseLeave={() => {
+ setHover(false);
+ if (hoverTimeout) {
+ window.clearTimeout(hoverTimeout);
+ setHoverTimeout(null);
+ }
+ }}
>
-
- ![]({"vite./images/units/")
+ {imageUrl && hover && 
}
+
-
+ {imageUrl && hover &&
{props.blueprint.label}
+ {imageUrl && (
+
+
+ )}
Hover to show image
+
+
- {props.blueprint.description} + {summary ?? props.blueprint.description}
diff --git a/frontend/react/src/ui/modals/components/modal.tsx b/frontend/react/src/ui/modals/components/modal.tsx
index 1592944a..b8734b8f 100644
--- a/frontend/react/src/ui/modals/components/modal.tsx
+++ b/frontend/react/src/ui/modals/components/modal.tsx
@@ -1,7 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
import { ModalEvent } from "../../../events";
+import { FaXmark } from "react-icons/fa6";
+import { getApp, OlympusApp } from "../../../olympusapp";
+import { OlympusState } from "../../../constants/constants";
export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Element[]; className?: string }) {
+ const [splash, setSplash] = useState(Math.ceil(Math.random() * 7));
+
useEffect(() => {
ModalEvent.dispatch(props.open);
}, [props.open]);
@@ -13,13 +18,52 @@ export function Modal(props: { open: boolean; children?: JSX.Element | JSX.Eleme
-
- {props.children}
+ 
+
)}
diff --git a/frontend/react/src/ui/modals/importexportmodal.tsx b/frontend/react/src/ui/modals/importexportmodal.tsx
index 9bd55183..34301d29 100644
--- a/frontend/react/src/ui/modals/importexportmodal.tsx
+++ b/frontend/react/src/ui/modals/importexportmodal.tsx
@@ -45,7 +45,7 @@ export function ImportExportModal(props: { open: boolean }) {
"groundunit-sam": true,
groundunit: true,
navyunit: true,
- }
+ },
};
}
@@ -95,274 +95,263 @@ export function ImportExportModal(props: { open: boolean }) {
});
return (
-
+
+
+
+
+ {props.children}
+
+
+ {
+ getApp().setState(OlympusState.IDLE);
+ }}
+ />{" "}
+
+
-
-
+
+
+ {appSubState === ImportExportSubstate.EXPORT ? "Export to file" : "Import from file"}
+
+
+
+ {appSubState === ImportExportSubstate.EXPORT ? <>Select what units you want to export to file using the toggles below : <>}
+
+
+
+
-
- {appSubState === ImportExportSubstate.EXPORT ? "Export to file" : "Import from file"}
-
+ Control mode
+
-
- {appSubState === ImportExportSubstate.EXPORT ? <>Select what units you want to export to file using the toggles below : <>}
-
+
+ {Object.entries({
+ olympus: ["Olympus controlled", olButtonsVisibilityOlympus],
+ dcs: ["From DCS mission", olButtonsVisibilityDcs],
+ }).map((entry, idx) => {
+ return (
+
-
+ {entry[1][0] as string}
+ {
+ selectionFilter["control"][entry[0]] = !selectionFilter["control"][entry[0]];
+ setSelectionFilter(deepCopyTable(selectionFilter));
+ }}
+ toggled={selectionFilter["control"][entry[0]]}
+ />
+
+ );
+ })}
+
-
-
- Control mode
-
+
+ Types and coalitions
+
-
+
+
+
-
+ {
-
+ }
+
+
+ | + | BLUE | +NEUTRAL | +RED | +||||
|
+ |
+ {["blue", "neutral", "red"].map((coalition) => {
+ return (
+
+ |
+ );
+ })}
+
| - | BLUE | -NEUTRAL | -RED | ++ |
+ |
+
+ |
+
+ |
|
- |
- {["blue", "neutral", "red"].map((coalition) => {
- return (
-
- |
- );
- })}
- ||||||
| - |
- |
-
- |
-
- |
-
-
+
+
);
diff --git a/frontend/react/src/ui/modals/keybindmodal.tsx b/frontend/react/src/ui/modals/keybindmodal.tsx
index 47a22852..f39da88b 100644
--- a/frontend/react/src/ui/modals/keybindmodal.tsx
+++ b/frontend/react/src/ui/modals/keybindmodal.tsx
@@ -61,99 +61,91 @@ export function KeybindModal(props: { open: boolean }) {
}
return (
-
-
-
- {shortcut?.getOptions().label}
-
-
- Press the key you want to bind to this event
-
-
-
- {ctrlKey && "Ctrl + "}
- {altKey && "Alt + "}
- {shiftKey && "Shift + "}
- {code}
-
-
- {available === true &&
Keybind is free!
}
- {available === false && (
-
-
- 
+
-
-
- Keybind is already in use:
+
);
diff --git a/frontend/react/src/ui/modals/loginmodal.tsx b/frontend/react/src/ui/modals/loginmodal.tsx
index 6dd3546e..df5afb0f 100644
--- a/frontend/react/src/ui/modals/loginmodal.tsx
+++ b/frontend/react/src/ui/modals/loginmodal.tsx
@@ -80,346 +80,301 @@ export function LoginModal(props: { open: boolean }) {
useEffect(subStateCallback, [subState]);
return (
- {inUseShortcuts.map((shortcut) => {shortcut.getOptions().label})}
+
+
+ {shortcut?.getOptions().label}
+
+
+ Press the key you want to bind to this event
+
+
+
+ {ctrlKey && "Ctrl + "}
+ {altKey && "Alt + "}
+ {shiftKey && "Shift + "}
+ {code}
+
+
+ {available === true &&
+ Keybind is free!
}
+ {available === false && (
+
+
-
-
+ Keybind is already in use:{" "}
+
- )}
-
+ {inUseShortcuts.map((shortcut) => (
+ {shortcut.getOptions().label}
+ ))}
- A key combination can be assigned to multiple actions, and all bound actions will fire
- {shortcut && (
-
- )}
+
+ )}
+ A key combination can be assigned to multiple actions, and all bound actions will fire
+
+ {shortcut && (
-
+ )}
+
+
-
- {!checkingPassword ? (
- <>
-
-
-
+
- Connect to
-
-
- {window.location.toString()}
-
+ {!checkingPassword ? (
+ <>
+
+
+ Connect to
-
- 
-
-
+
-
-
-
+ - DCS Olympus -
-
-
+ {window.location.toString()}
+
+
+
+
+
-
+
+
+
- {!loginError ? (
- <>
- {subState === LoginSubState.CREDENTIALS && (
- <>
- + DCS Olympus +
+
+
-
- setUsername(ev.currentTarget.value)}
- className={`
- block w-full max-w-80 rounded-lg border
- border-gray-300 bg-gray-50 p-2.5 text-sm
- text-gray-900
- dark:border-gray-600 dark:bg-gray-700
- dark:text-white dark:placeholder-gray-400
- dark:focus:border-blue-500
- dark:focus:ring-blue-500
- focus:border-blue-500 focus:ring-blue-500
- `}
- placeholder="Enter display name"
- value={username}
- required
- />
+
+ {!loginError ? (
+ <>
+ {subState === LoginSubState.CREDENTIALS && (
+ <>
+
+
+ setUsername(ev.currentTarget.value)}
+ className={`
+ block w-full max-w-80 rounded-lg border
+ border-gray-300 bg-gray-50 p-2.5 text-sm
+ text-gray-900
+ dark:border-gray-600 dark:bg-gray-700
+ dark:text-white dark:placeholder-gray-400
+ dark:focus:border-blue-500 dark:focus:ring-blue-500
+ focus:border-blue-500 focus:ring-blue-500
+ `}
+ placeholder="Enter display name"
+ value={username}
+ required
+ />
-
- setPassword(ev.currentTarget.value)}
- className={`
- block w-full max-w-80 rounded-lg border
- border-gray-300 bg-gray-50 p-2.5 text-sm
- text-gray-900
- dark:border-gray-600 dark:bg-gray-700
- dark:text-white dark:placeholder-gray-400
- dark:focus:border-blue-500
- dark:focus:ring-blue-500
- focus:border-blue-500 focus:ring-blue-500
- `}
- placeholder="Enter password"
- required
- />
-
-
-
- {/*
+
+ setPassword(ev.currentTarget.value)}
+ className={`
+ block w-full max-w-80 rounded-lg border
+ border-gray-300 bg-gray-50 p-2.5 text-sm
+ text-gray-900
+ dark:border-gray-600 dark:bg-gray-700
+ dark:text-white dark:placeholder-gray-400
+ dark:focus:border-blue-500 dark:focus:ring-blue-500
+ focus:border-blue-500 focus:ring-blue-500
+ `}
+ placeholder="Enter password"
+ required
+ />
+
+
+
+ {/*
*/}
-
-
- )}
- {subState === LoginSubState.COMMAND_MODE && (
- <>
-
-
-
- {commandModes?.map((commandMode) => {
- return setActiveCommandMode(commandMode)}>{commandMode} ;
- })}
-
-
-
-
-
-
- )}
-
- ) : (
- <>
-
- Still having issues? See our{" "}
-
- troubleshooting guide here
-
- .
-
-
- )}
-
- ) : (
-
-
-
- )}
-
-
-
+
+ )}
+ {subState === LoginSubState.COMMAND_MODE && (
+ <>
+
+ )}
+
+ )}
+ {subState === LoginSubState.COMMAND_MODE && (
+ <>
+
+
+
+ {commandModes?.map((commandMode) => {
+ return setActiveCommandMode(commandMode)}>{commandMode} ;
+ })}
+
+
+
+
+
+
+ )}
+
+ ) : (
+ <>
+
+ Still having issues? See our{" "}
+
+ troubleshooting guide here
+
+ .
+
+
+ )}
+
+ ) : (
+
+
+
- DCS Olympus (the "MATERIAL" or "Software") is provided completely free to users subject to the terms of the CC BY-NC-SA 4.0 Licence except where such
- terms conflict with this disclaimer, in which case, the terms of this disclaimer shall prevail. Any party making use of the Software in any manner
- agrees to be bound by the terms set out in the disclaimer. THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
+
+
+
+
+
+
+
+ YouTube Video Guide
+
+
+ Check out our official video tutorial on how to get started with Olympus - so you can immediately start controlling the battlefield.
+
+
+
+ Wiki Guide
+
+
+ Find out more about Olympus through our online wiki guide.
+
+
+ DCS Olympus (the "MATERIAL" or "Software") is provided completely free to users subject to the terms of the CC BY-NC-SA 4.0 Licence except where such
+ terms conflict with this disclaimer, in which case, the terms of this disclaimer shall prevail. Any party making use of the Software in any manner
+ agrees to be bound by the terms set out in the disclaimer. THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
+
);
}
diff --git a/frontend/react/src/ui/modals/protectionpromptmodal.tsx b/frontend/react/src/ui/modals/protectionpromptmodal.tsx
index d8d0d230..6017c8e8 100644
--- a/frontend/react/src/ui/modals/protectionpromptmodal.tsx
+++ b/frontend/react/src/ui/modals/protectionpromptmodal.tsx
@@ -10,14 +10,8 @@ export function ProtectionPromptModal(props: { open: boolean }) {
return (
+
Pressing "Continue" will cause all DCS controlled units in the current selection to abort their mission and start following Olympus commands only.
@@ -38,7 +32,7 @@ export function ProtectionPromptModal(props: { open: boolean }) {
If you are trying to delete a human player unit, they will be killed and de-slotted. Be careful!
@@ -46,7 +40,7 @@ export function ProtectionPromptModal(props: { open: boolean }) {
To disable this warning, press on the{" "}
diff --git a/frontend/react/src/ui/modals/trainingmodal.tsx b/frontend/react/src/ui/modals/trainingmodal.tsx
new file mode 100644
index 00000000..ef55de5f
--- /dev/null
+++ b/frontend/react/src/ui/modals/trainingmodal.tsx
@@ -0,0 +1,526 @@
+import React, { useState } from "react";
+import { Modal } from "./components/modal";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FaCaretRight, FaLink } from "react-icons/fa6";
+import { FaQuestionCircle } from "react-icons/fa";
+
+const MAX_STEPS = 10;
+
+export function TrainingModal(props: { open: boolean }) {
+ const [step, setStep] = useState(0);
+
+ return (
+
+
+ );
+}
diff --git a/frontend/react/src/ui/modals/warningmodal.tsx b/frontend/react/src/ui/modals/warningmodal.tsx
index 2ee38610..99fc3f58 100644
--- a/frontend/react/src/ui/modals/warningmodal.tsx
+++ b/frontend/react/src/ui/modals/warningmodal.tsx
@@ -28,10 +28,11 @@ export function WarningModal(props: { open: boolean }) {
warningText = (
+
+
+ <>
+ {step === 0 && (
+ DCS Olympus guided tour
+ +
+
+
+ )}
+
+
+ <>
+ {step === 1 && (
+
+
+
+ Home
++ Welcome to the Olympus quick start guide! This tour will guide you through the basics of DCS Olympus. You can navigate through the steps using + the "Next" and "Previous" buttons at the bottom of the screen, or select a topic from the list below. +
+
+
+
+
+
+
+
+ Every panel has a dedicated integrated wiki. Click on the{" "}
+
+
+
+ 
+
+ )}
+
+
+ <>
+ {step === 2 && (
+
+
+
+ Main navbar
++ The main functions of DCS Olympus are accessible from the main navbar. You can access the spawn tool, the unit selection and control tool, the + drawings tool, the audio/radio tool, and the game master options from here. +
+On the bottom left corner, you can find the DCS Olympus options tool.
+
+ 
+
+ )}
+
+
+ <>
+ {step === 3 && (
+
+
+
+ Spawning units (1 of 3)
++ To spawn a unit, click on the spawn tool icon on the main navbar. This will open the spawn tool. You can select the unit you want to spawn by + searching for it or by finding it in the list, which can be filtered by category. +
+After selecting the unit you can edit its properties, like spawn altitude and heading, loadout, livery, skill level, and so on.
++ Once you are happy with your setup, click on the map to spawn the unit. You can click multiple times to spawn more units. When you are done, + double click to exit the spawning mode. +
+
+ 
+
+ )}
+
+
+ <>
+ {step === 4 && (
+
+
+
+ Spawning units (2 of 3)
++ You can also spawn units directly on the map by right clicking on it and selecting the unit you want to spawn. This will spawn the unit at the + clicked location. +
+You can edit the unit properties like in the previous method.
+
+ 
+
+ )}
+
+
+ <>
+ {step === 5 && (
+
+
+
+ Spawning units (3 of 3)
++ If you plan on spawning many similar units throughout the mission, you can "star" a unit. This will save the unit in the starred units list, + which can be accessed from the spawn tool. This way you can quickly spawn the same unit multiple times without having to search for it. +
+You can edit the unit properties like in the previous method.
+
+ 
+
+ )}
+
+
+ <>
+ {step === 6 && (
+
+
+
+ Controlling units (1 of 4)
++ {" "} + The most basic form of unit control is movement. A short right click on the map will add a destination point. If the ctrl key is held while + right clicking, the destination will be appended, creating a path. +
++ Previously created destinations can be moved by dragging the marker on the map. If multiple units are selected when creating the path, + destinations will be shared between them. +
+
+ 
+
+ )}
+
+
+ <>
+ {step === 7 && (
+
+
+
+ Controlling units (2 of 4)
++ To issue an instruction to a unit, long press the right mouse button on the map. This will allow you to select an action, depending on what you + clicked on. +
+ +
+ 
+
+ )}
+
+
+ <>
+ {step === 8 && (
+
+
+
+ Controlling units (3 of 4)
++ The same instructions can be issued using the unit control toolbar. First select the tool, then left click on the map to issue the instruction. + The tool will be active until deselected, either by double clicking on the map, or by clicking on the tool button again.{" "} +
++ Tools can be enabled using keyboard shortcuts. To learn what a tool does and what shortcut enables it, place your cursor over the corresponding + button.{" "} +
+
+ 
+
+ )}
+
+
+ <>
+ {step === 9 && (
+
+
+
+ Controlling units (4 of 4)
++ {" "} + Unit properties are set using the unit control menu, which opens automatically when a unit is selected. Here, depending on the selected unit, + you can set altitude and speed, Rules Of Engagement, reaction to threat, as well as advanced settings like AWACS frequencies and so on.{" "} +
++
+ 
+
+ )}
+
+
+ <>
+ {step === 10 && (
+
+
+
+ The unit marker (1 of 2)
++ The unit marker is a small icon that appears on the map. It shows the unit's type, coalition, and the name (for Mission Editor units and human + players only). It has the following parts: +
+
+
+
+
+ +
+ 1
+
+ Unit short label or type symbol
+ +
+
+ +
+ 2
+
+ Flight level
+ +
+
+ +
+ 3
+
+ Ground speed (knots)
+ +
+
+ +
+ 4
+
+ Bullseye position
+ +
+
+ +
+ 5
+
+ Fuel state (% of internal)
+ +
+
+ +
+ 6
+
+ A/A weapons (Fox 1/2/3 & guns)
+ +
+
+ +
+ 7
+
+ Current state
+ ++ Most of these information is only available for air units. Ground units will show the type symbol, the name, and the coalition, and the fuel + level is replace by the unit's health (%). +
+
+
+ )}
+
+
+
+
+ The unit marker (2 of 2)
+The unit marker has a symbol showing the unit state, i.e. what instruction it is performing. These are all the possible values:
+
+
+
+
+
+ 
+
Attacking unit or ground
+ +
+
+
+ 
+
Operating as AWACS
+ +
+
+
+ 
+
Under DCS control
+ +
+
+
+ 
+
Following unit
+ +
+
+
+ 
+
Human player
+ +
+
+
+ 
+
Idle, orbiting
+ +
+
+
+ 
+
Landing at point (helicopter)
+ +
+
+
+ 
+
Miss on purpose mode
+ +
+
+
+ 
+
No task, not controllable
+ +
+
+
+ 
+
Shut down
+ +
+
+
+ 
+
Refueling from tanker
+ +
+
+
+ 
+
RTB
+ +
+
+
+ 
+
Scenic AAA mode
+ +
+
+
+ 
+
Simulating fire fight
+ +
+
+
+ 
+
Operating as AAR tanker
+ +
+ {step > 0 ? (
+
+ ) : (
+
+ )}
+
+ {step > 0 && (
+
+
+ {[...Array(MAX_STEPS).keys()].map((i) => (
+
+ ))}
+
+ )}
+
+ {step < MAX_STEPS ? (
+
+ ) : (
+
+ )}
+
Non-Google Chrome Browser Detected.
+ It appears you are using a browser other than Google Chrome.
- It appears you are using a browser other than Google Chrome.
+ If you encounter any problems, we strongly suggest you use a Chrome based browser. Many features, especially advanced ones such as audio playback
+ and capture, were developed specifically for Chrome based browsers.{" "}
- If you encounter any problems, we strongly suggest you use a Chrome based browser. Many features, especially advanced ones such as audio playback and capture, were developed specifically for Chrome based browsers.
Your connection to DCS Olympus is not secure.
+ To protect your personal data some advanced DCS Olympus features like the camera plugin or the audio backend have been disabled.
- To protect your personal data some advanced DCS Olympus features like the camera plugin or the audio backend
- have been disabled.
-
-
- To solve this issue, DCS Olympus should be served using the https protocol.
+ To solve this issue, DCS Olympus should be served using the{" "}
+
+ https
+ {" "}
+ protocol.
To do so, we suggest using a dedicated server and a reverse proxy with SSL enabled.
@@ -77,38 +79,27 @@ export function WarningModal(props: { open: boolean }) {
}
return (
-
-
-
+
);
diff --git a/frontend/react/src/ui/panels/audiomenu.tsx b/frontend/react/src/ui/panels/audiomenu.tsx
index 7adeb529..87614869 100644
--- a/frontend/react/src/ui/panels/audiomenu.tsx
+++ b/frontend/react/src/ui/panels/audiomenu.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import { Menu } from "./components/menu";
import { getApp } from "../../olympusapp";
-import { FaPlus, FaQuestionCircle } from "react-icons/fa";
+import { FaExclamation, FaExclamationCircle, FaPlus, FaQuestionCircle } from "react-icons/fa";
import { AudioSourcePanel } from "./components/sourcepanel";
import { AudioSource } from "../../audio/audiosource";
import { RadioSinkPanel } from "./components/radiosinkpanel";
@@ -117,15 +117,20 @@ export function AudioMenu(props: { open: boolean; onClose: () => void; children?
return (
-
- Warning
- {warningText}
-
-
-
+
+
+ Warning
+ {warningText}
+
+