mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Started working on tanker and AWACS settings
This commit is contained in:
Davide Passoni
parent
cc686e2320
commit
bc5049992a
2
frontend/react/.gitignore
vendored
2
frontend/react/.gitignore
vendored
@ -21,3 +21,5 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
.vite
|
||||
@ -74,7 +74,6 @@ export function OlAccordion(props: {
|
||||
<div className={open ? "" : "hidden"}>
|
||||
{props.showArrows && (
|
||||
<div className="rotate-180">
|
||||
{" "}
|
||||
{!scrolledUp && (
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowCircleDown}
|
||||
|
||||
@ -101,13 +101,11 @@ export function CommandCallout(props: { coalition?: string }) {
|
||||
You are playing as
|
||||
{props.coalition == "blue" ? (
|
||||
<div className="inline-block font-bold text-blue-500">
|
||||
{" "}
|
||||
BLUE COMMANDER{" "}
|
||||
BLUE COMMANDER
|
||||
</div>
|
||||
) : (
|
||||
<div className="inline-block font-bold text-red-500">
|
||||
{" "}
|
||||
RED COMMANDER{" "}
|
||||
RED COMMANDER
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -96,7 +96,7 @@ export function LoginModal(props: {
|
||||
dark:text-gray-200
|
||||
`}
|
||||
>
|
||||
{window.location.toString()}{" "}
|
||||
{window.location.toString()}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -145,7 +145,7 @@ export function LoginModal(props: {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
Password{" "}
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
@ -181,7 +181,7 @@ export function LoginModal(props: {
|
||||
hover:bg-blue-800
|
||||
`}
|
||||
>
|
||||
Login{" "}
|
||||
Login
|
||||
<FontAwesomeIcon
|
||||
className={`my-auto`}
|
||||
icon={faArrowRight}
|
||||
@ -245,7 +245,7 @@ export function LoginModal(props: {
|
||||
hover:bg-blue-800
|
||||
`}
|
||||
>
|
||||
Continue{" "}
|
||||
Continue
|
||||
<FontAwesomeIcon
|
||||
className={`my-auto`}
|
||||
icon={faArrowRight}
|
||||
@ -282,7 +282,7 @@ export function LoginModal(props: {
|
||||
text-sm font-medium text-gray-200
|
||||
`}
|
||||
>
|
||||
Still having issues? See our{" "}
|
||||
Still having issues? See our
|
||||
<a
|
||||
href=""
|
||||
className={`
|
||||
@ -343,7 +343,7 @@ export function LoginModal(props: {
|
||||
mt-2 flex content-center items-center gap-2 font-bold
|
||||
`}
|
||||
>
|
||||
YouTube Video Guide{" "}
|
||||
YouTube Video Guide
|
||||
<FontAwesomeIcon
|
||||
className={`my-auto text-xs text-gray-400`}
|
||||
icon={faExternalLink}
|
||||
@ -373,7 +373,7 @@ export function LoginModal(props: {
|
||||
mt-2 flex content-center items-center gap-2 font-bold
|
||||
`}
|
||||
>
|
||||
Wiki Guide{" "}
|
||||
Wiki Guide
|
||||
<FontAwesomeIcon
|
||||
className={`my-auto text-xs text-gray-400`}
|
||||
icon={faExternalLink}
|
||||
|
||||
@ -53,7 +53,7 @@ export function Menu(props: {
|
||||
dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
|
||||
`}
|
||||
/>
|
||||
)}{" "}
|
||||
)}
|
||||
{props.title}
|
||||
<FontAwesomeIcon
|
||||
onClick={props.onClose}
|
||||
@ -69,11 +69,14 @@ export function Menu(props: {
|
||||
{props.children}
|
||||
</div>
|
||||
{props.canBeHidden == true && (
|
||||
<div className={`
|
||||
flex h-8 justify-center z-ui-4 pointer-events-auto backdrop-blur-lg
|
||||
backdrop-grayscale
|
||||
dark:bg-olympus-800/90
|
||||
`} onClick={() => setHide(!hide)}>
|
||||
<div
|
||||
className={`
|
||||
flex h-8 justify-center z-ui-4 pointer-events-auto backdrop-blur-lg
|
||||
backdrop-grayscale
|
||||
dark:bg-olympus-800/90
|
||||
`}
|
||||
onClick={() => setHide(!hide)}
|
||||
>
|
||||
{hide ? (
|
||||
<FaChevronUp className="mx-auto my-auto text-gray-400" />
|
||||
) : (
|
||||
|
||||
@ -110,7 +110,7 @@ export function Header() {
|
||||
dark:text-gray-200
|
||||
`}
|
||||
>
|
||||
{IP}{" "}
|
||||
{IP}
|
||||
<FontAwesomeIcon
|
||||
icon={connectedToServer ? faLink : faUnlink}
|
||||
data-connected={connectedToServer}
|
||||
|
||||
@ -42,10 +42,7 @@ export function MainMenu(props: {
|
||||
dark:text-green-400
|
||||
`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheckCircle}
|
||||
className={`my-auto`}
|
||||
/>
|
||||
<FontAwesomeIcon icon={faCheckCircle} className={`my-auto`} />
|
||||
Olympus Version {VERSION}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
@ -63,7 +60,7 @@ export function MainMenu(props: {
|
||||
`}
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faGithub} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
View GitHub Repo{" "}
|
||||
View GitHub Repo
|
||||
<FontAwesomeIcon
|
||||
icon={faExternalLinkAlt}
|
||||
className={`
|
||||
@ -91,7 +88,7 @@ export function MainMenu(props: {
|
||||
`}
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faFile} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
View User Guide{" "}
|
||||
View User Guide
|
||||
<FontAwesomeIcon
|
||||
icon={faExternalLinkAlt}
|
||||
className={`
|
||||
@ -126,9 +123,7 @@ export function MainMenu(props: {
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
Open Olympus Manager
|
||||
<div
|
||||
className={`ml-auto flex items-center`}
|
||||
>
|
||||
<div className={`ml-auto flex items-center`}>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightLong}
|
||||
className={`
|
||||
@ -149,9 +144,7 @@ export function MainMenu(props: {
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
Database Manager
|
||||
<div
|
||||
className={`ml-auto flex items-center`}
|
||||
>
|
||||
<div className={`ml-auto flex items-center`}>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightLong}
|
||||
className={`
|
||||
@ -172,9 +165,7 @@ export function MainMenu(props: {
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faFileExport} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
Export to file
|
||||
<div
|
||||
className={`ml-auto flex items-center`}
|
||||
>
|
||||
<div className={`ml-auto flex items-center`}>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightLong}
|
||||
className={`
|
||||
@ -195,9 +186,7 @@ export function MainMenu(props: {
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
Import from file
|
||||
<div
|
||||
className={`ml-auto flex items-center`}
|
||||
>
|
||||
<div className={`ml-auto flex items-center`}>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightLong}
|
||||
className={`
|
||||
@ -224,9 +213,7 @@ export function MainMenu(props: {
|
||||
>
|
||||
{/*<FontAwesomeIcon icon={faTimesCircle} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
|
||||
Close Olympus
|
||||
<div
|
||||
className={`ml-auto flex items-center`}
|
||||
>
|
||||
<div className={`ml-auto flex items-center`}>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightLong}
|
||||
className={`
|
||||
|
||||
@ -91,20 +91,20 @@ export function MiniMapPanel(props: {}) {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="font-semibold">
|
||||
FPS:{" "}
|
||||
<div className="flex gap-2 font-semibold">
|
||||
FPS:
|
||||
<span style={{ color: frameRateColor }} className={`font-semibold`}>
|
||||
{frameRate}
|
||||
</span>{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-semibold">
|
||||
Load:{" "}
|
||||
<div className="flex gap-2 font-semibold">
|
||||
Load:
|
||||
<span style={{ color: loadColor }} className={`font-semibold`}>
|
||||
{load}
|
||||
</span>{" "}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-semibold">
|
||||
{showMissionTime ? "MT" : "ET"}: {timeString}{" "}
|
||||
<div className="flex gap-2 font-semibold">
|
||||
{showMissionTime ? "MT" : "ET"}: {timeString}
|
||||
</div>
|
||||
<div className={`relative h-4 w-4 rounded-full bg-[#8BFF63]`}></div>
|
||||
</>
|
||||
|
||||
@ -49,11 +49,18 @@ import {
|
||||
mToFt,
|
||||
msToKnots,
|
||||
} from "../../other/utils";
|
||||
import { FaGasPump, FaQuestionCircle } from "react-icons/fa";
|
||||
import {
|
||||
FaCog,
|
||||
FaGasPump,
|
||||
FaQuestionCircle,
|
||||
FaSignal,
|
||||
FaTag,
|
||||
} from "react-icons/fa";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { OlSearchBar } from "../components/olsearchbar";
|
||||
import { OlDropdown, OlDropdownItem } from "../components/oldropdown";
|
||||
import { UnitBlueprint } from "../../interfaces";
|
||||
import { FaRadio } from "react-icons/fa6";
|
||||
|
||||
export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
|
||||
@ -280,8 +287,9 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
Selection tool
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
The selection tools allows you to select units depending on their category, coalition, and control mode. You can also
|
||||
select units depending on their specific type by using the search input.
|
||||
The selection tools allows you to select units depending on their
|
||||
category, coalition, and control mode. You can also select units
|
||||
depending on their specific type by using the search input.
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 rounded-lg bg-olympus-600 p-4">
|
||||
<div
|
||||
@ -489,14 +497,13 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
return;
|
||||
|
||||
if (
|
||||
unit.getControlled() &&
|
||||
unit.isControlledByOlympus() &&
|
||||
!selectionFilter["control"]["olympus"]
|
||||
)
|
||||
return;
|
||||
|
||||
if (
|
||||
!unit.getHuman() &&
|
||||
!unit.getControlled() &&
|
||||
!unit.isControlledByDCS() &&
|
||||
!selectionFilter["control"]["dcs"]
|
||||
)
|
||||
return;
|
||||
@ -744,45 +751,47 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
step={speedStep}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span
|
||||
className={`
|
||||
font-normal
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
Rules of engagement
|
||||
</span>
|
||||
<OlButtonGroup>
|
||||
{[
|
||||
olButtonsRoeHold,
|
||||
olButtonsRoeReturn,
|
||||
olButtonsRoeDesignated,
|
||||
olButtonsRoeFree,
|
||||
].map((icon, idx) => {
|
||||
return (
|
||||
<OlButtonGroupItem
|
||||
onClick={() => {
|
||||
selectedUnits.forEach((unit) => {
|
||||
unit.setROE(ROEs[idx]);
|
||||
setSelectedUnitsData({
|
||||
...selectedUnitsData,
|
||||
ROE: ROEs[idx],
|
||||
});
|
||||
});
|
||||
}}
|
||||
active={selectedUnitsData.ROE === ROEs[idx]}
|
||||
icon={icon}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</OlButtonGroup>
|
||||
</div>
|
||||
{!(selectedUnits.length === 1 && selectedUnits[0].isTanker()) &&
|
||||
!(selectedUnits.length === 1 && selectedUnits[0].isAWACS()) && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span
|
||||
className={`
|
||||
font-normal
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
Rules of engagement
|
||||
</span>
|
||||
<OlButtonGroup>
|
||||
{[
|
||||
olButtonsRoeHold,
|
||||
olButtonsRoeReturn,
|
||||
olButtonsRoeDesignated,
|
||||
olButtonsRoeFree,
|
||||
].map((icon, idx) => {
|
||||
return (
|
||||
<OlButtonGroupItem
|
||||
onClick={() => {
|
||||
selectedUnits.forEach((unit) => {
|
||||
unit.setROE(ROEs[idx]);
|
||||
setSelectedUnitsData({
|
||||
...selectedUnitsData,
|
||||
ROE: ROEs[idx],
|
||||
});
|
||||
});
|
||||
}}
|
||||
active={selectedUnitsData.ROE === ROEs[idx]}
|
||||
icon={icon}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</OlButtonGroup>
|
||||
</div>
|
||||
)}
|
||||
{selectedCategories.every((category) => {
|
||||
return ["Aircraft", "Helicopter"].includes(category);
|
||||
}) && (
|
||||
<>
|
||||
{" "}
|
||||
<div className={`flex flex-col gap-2`}>
|
||||
<span
|
||||
className={`
|
||||
@ -876,8 +885,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{" "}
|
||||
Act as tanker{" "}
|
||||
Make tanker available
|
||||
</span>
|
||||
<OlToggle
|
||||
toggled={selectedUnitsData.isActiveTanker}
|
||||
@ -911,8 +919,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{" "}
|
||||
Act as AWACS{" "}
|
||||
Make AWACS available
|
||||
</span>
|
||||
<OlToggle
|
||||
toggled={selectedUnitsData.isActiveAWACS}
|
||||
@ -934,11 +941,24 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{selectedUnits.length === 1 && selectedUnits[0].isTanker() && (
|
||||
<div className="flex content-center justify-between">
|
||||
<button
|
||||
className={`
|
||||
flex w-full justify-center gap-2 rounded-md border-[1px]
|
||||
p-2 align-middle text-sm
|
||||
dark:text-white
|
||||
hover:bg-white/10
|
||||
`}
|
||||
>
|
||||
<FaCog className="my-auto" /> Configure tanker settings
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{selectedCategories.every((category) => {
|
||||
return ["GroundUnit", "NavyUnit"].includes(category);
|
||||
}) && (
|
||||
<>
|
||||
{" "}
|
||||
<div className={`flex flex-col gap-2`}>
|
||||
<span
|
||||
className={`
|
||||
@ -1014,8 +1034,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{" "}
|
||||
Operate as{" "}
|
||||
Operate as
|
||||
</span>
|
||||
<OlCoalitionToggle
|
||||
coalition={selectedUnitsData.operateAs as Coalition}
|
||||
@ -1044,8 +1063,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{" "}
|
||||
Follow roads{" "}
|
||||
Follow roads
|
||||
</span>
|
||||
<OlToggle
|
||||
toggled={selectedUnitsData.followRoads}
|
||||
@ -1067,8 +1085,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{" "}
|
||||
Unit active{" "}
|
||||
Unit active
|
||||
</span>
|
||||
<OlToggle
|
||||
toggled={selectedUnitsData.onOff}
|
||||
@ -1113,30 +1130,114 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{selectedUnits[0].getAmmo().map((ammo) => {
|
||||
return (
|
||||
<div className="flex content-center gap-2">
|
||||
<div
|
||||
className={`
|
||||
my-auto w-6 min-w-6 rounded-full py-0.5
|
||||
text-center text-sm font-bold text-gray-500
|
||||
dark:bg-[#17212D]
|
||||
`}
|
||||
>
|
||||
{ammo.quantity}
|
||||
{selectedUnits[0].isControlledByOlympus() &&
|
||||
selectedUnits[0].isTanker() && (
|
||||
<>
|
||||
<div className="flex content-center justify-between">
|
||||
<div className="flex content-center gap-2">
|
||||
<div
|
||||
className={`
|
||||
mx-auto my-auto flex h-6 w-6 rounded-full
|
||||
text-center align-middle text-xs font-bold
|
||||
text-gray-500
|
||||
dark:bg-[#17212D]
|
||||
`}
|
||||
>
|
||||
<FaTag className="mx-auto my-auto" />
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
my-auto overflow-hidden text-ellipsis
|
||||
text-nowrap text-sm
|
||||
dark:text-gray-300
|
||||
`}
|
||||
>
|
||||
{`${["Texaco", "Arco", "Shell"][selectedUnits[0].getRadio().callsign]}-${
|
||||
selectedUnits[0].getRadio().callsignNumber
|
||||
}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
my-auto overflow-hidden text-ellipsis text-nowrap
|
||||
text-sm
|
||||
dark:text-gray-300
|
||||
`}
|
||||
>
|
||||
{ammo.name}
|
||||
<div className="flex content-center justify-between">
|
||||
<div className="flex content-center gap-2">
|
||||
<div
|
||||
className={`
|
||||
mx-auto my-auto flex h-6 w-6 rounded-full
|
||||
text-center align-middle text-xs font-bold
|
||||
text-gray-500
|
||||
dark:bg-[#17212D]
|
||||
`}
|
||||
>
|
||||
<FaRadio className="mx-auto my-auto" />
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
my-auto overflow-hidden text-ellipsis
|
||||
text-nowrap text-sm
|
||||
dark:text-gray-300
|
||||
`}
|
||||
>
|
||||
{`${(
|
||||
selectedUnits[0].getRadio().frequency /
|
||||
1000000
|
||||
).toFixed(3)} MHz`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="flex content-center justify-between">
|
||||
<div className="flex content-center gap-2">
|
||||
<div
|
||||
className={`
|
||||
mx-auto my-auto flex h-6 w-6 rounded-full
|
||||
text-center align-middle text-xs font-bold
|
||||
text-gray-500
|
||||
dark:bg-[#17212D]
|
||||
`}
|
||||
>
|
||||
<FaSignal className="mx-auto my-auto" />
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
my-auto overflow-hidden text-ellipsis
|
||||
text-nowrap text-sm
|
||||
dark:text-gray-300
|
||||
`}
|
||||
>
|
||||
{selectedUnits[0].getTACAN().isOn
|
||||
? `${selectedUnits[0].getTACAN().channel}${selectedUnits[0].getTACAN().XY} ${selectedUnits[0].getTACAN().callsign}`
|
||||
: "TACAN OFF"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!selectedUnits[0].isTanker() &&
|
||||
!selectedUnits[0].isAWACS() &&
|
||||
selectedUnits[0].getAmmo().map((ammo) => {
|
||||
return (
|
||||
<div className="flex content-center gap-2">
|
||||
<div
|
||||
className={`
|
||||
my-auto w-6 min-w-6 rounded-full py-0.5
|
||||
text-center text-sm font-bold text-gray-500
|
||||
dark:bg-[#17212D]
|
||||
`}
|
||||
>
|
||||
{ammo.quantity}
|
||||
</div>
|
||||
<div
|
||||
className={`
|
||||
my-auto overflow-hidden text-ellipsis
|
||||
text-nowrap text-sm
|
||||
dark:text-gray-300
|
||||
`}
|
||||
>
|
||||
{ammo.name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -71,8 +71,7 @@ export function UnitMouseControlBar(props: {}) {
|
||||
|
||||
function onScroll(el) {
|
||||
const sl = el.scrollLeft;
|
||||
const sr =
|
||||
el.scrollWidth - el.scrollLeft - el.clientWidth;
|
||||
const sr = el.scrollWidth - el.scrollLeft - el.clientWidth;
|
||||
|
||||
sl < 1 && !scrolledLeft && setScrolledLeft(true);
|
||||
sl > 1 && scrolledLeft && setScrolledLeft(false);
|
||||
@ -83,7 +82,6 @@ export function UnitMouseControlBar(props: {}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
{open && (
|
||||
<>
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user