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

feat: Aligned orbits representation, added visibility option

Browse Source
This commit is contained in:
Davide Passoni
2025-02-26 12:05:59 +01:00
parent c7ff73f8a6
commit 8aac6b7d7e
10 changed files with 193 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import { OlRoundStateButton, OlStateButton, OlLockStateButton } from "../components/olstatebutton";
import { faSkull, faCamera, faFlag, faVolumeHigh, faDownload, faUpload, faDrawPolygon } from "@fortawesome/free-solid-svg-icons";
import { faSkull, faCamera, faFlag, faVolumeHigh, faDownload, faUpload, faDrawPolygon, faCircle, faTriangleExclamation, faWifi, faHourglass, faInfo } from "@fortawesome/free-solid-svg-icons";
import { OlDropdownItem, OlDropdown } from "../components/oldropdown";
import { OlLabelToggle } from "../components/ollabeltoggle";
import { getApp, IP } from "../../olympusapp";
@@ -146,17 +146,13 @@ export function Header() {
}}
checked={false}
/>
{savingSessionData ? (
{savingSessionData ? (
<div className="text-white">
<FaSpinner
className={`animate-spin text-2xl`}
/>
<FaSpinner className={`animate-spin text-2xl`} />
</div>
) : (
<div className={`relative text-white`}>
<FaFloppyDisk
className={`absolute -top-3 text-2xl`}
/>
<FaFloppyDisk className={`absolute -top-3 text-2xl`} />
<FaCheck
className={`
absolute left-[9px] top-[-6px] text-2xl text-olympus-900
@@ -271,6 +267,23 @@ export function Header() {
);
})}
</div>
<div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
<div className={`flex h-fit flex-row items-center justify-start gap-1`}>
<OlRoundStateButton
onClick={() => getApp().getMap().setOption("showUnitsEngagementRings", !mapOptions.showUnitsEngagementRings)}
checked={mapOptions.showUnitsEngagementRings}
icon={faTriangleExclamation}
className={""}
tooltip={"Hide/show units engagement rings"}
/>
<OlRoundStateButton
onClick={() => getApp().getMap().setOption("showUnitsAcquisitionRings", !mapOptions.showUnitsAcquisitionRings)}
checked={mapOptions.showUnitsAcquisitionRings}
icon={faWifi}
className={""}
tooltip={"Hide/show units acquisition rings"}
/>
</div>
<OlLabelToggle
toggled={mapOptions.cameraPluginMode === "map"}

36
frontend/react/src/ui/panels/optionsmenu.tsx
View File

@@ -11,6 +11,7 @@ import { Shortcut } from "../../shortcut/shortcut";
import { OlSearchBar } from "../components/olsearchbar";
import { FaTrash, FaXmark } from "react-icons/fa6";
import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
import { FaQuestionCircle } from "react-icons/fa";
const enum Accordion {
NONE,
@@ -92,7 +93,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("showUnitLabels", !mapOptions.showUnitLabels)}
>
<OlCheckbox checked={mapOptions.showUnitLabels} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show Unit Labels</span>
<span className="my-auto">Show unit labels</span>
</div>
<div
className={`
@@ -103,7 +104,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("showUnitsEngagementRings", !mapOptions.showUnitsEngagementRings)}
>
<OlCheckbox checked={mapOptions.showUnitsEngagementRings} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show Threat Rings</span>
<span className="my-auto">Show threat rings</span>
</div>
<div
className={`
@@ -114,7 +115,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("showUnitsAcquisitionRings", !mapOptions.showUnitsAcquisitionRings)}
>
<OlCheckbox checked={mapOptions.showUnitsAcquisitionRings} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show Detection rings</span>
<span className="my-auto">Show detection rings</span>
</div>
<div
className={`
@@ -125,7 +126,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("showUnitTargets", !mapOptions.showUnitTargets)}
>
<OlCheckbox checked={mapOptions.showUnitTargets} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show Detection lines</span>
<span className="my-auto">Show detection lines</span>
</div>
<div
className={`
@@ -136,7 +137,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("hideUnitsShortRangeRings", !mapOptions.hideUnitsShortRangeRings)}
>
<OlCheckbox checked={mapOptions.hideUnitsShortRangeRings} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Hide Short range Rings</span>
<span className="my-auto">Hide short range rings</span>
</div>
<div
@@ -148,7 +149,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
onClick={() => getApp().getMap().setOption("hideGroupMembers", !mapOptions.hideGroupMembers)}
>
<OlCheckbox checked={mapOptions.hideGroupMembers} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Hide Group members</span>
<span className="my-auto">Hide group members</span>
</div>
<div
className={`
@@ -161,6 +162,17 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
<OlCheckbox checked={mapOptions.showMinimap} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show minimap</span>
</div>
<div
className={`
group flex cursor-pointer flex-row content-center justify-start
gap-4 rounded-md p-2
dark:hover:bg-olympus-400
`}
onClick={() => getApp().getMap().setOption("showRacetracks", !mapOptions.showRacetracks)}
>
<OlCheckbox checked={mapOptions.showRacetracks} onChange={() => {}}></OlCheckbox>
<span className="my-auto">Show racetracks</span>
</div>
<div
className={`
group flex cursor-pointer flex-row content-center justify-start
@@ -173,8 +185,20 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
mapOptions.AWACSCoalition === "red" && getApp().getMap().setOption("AWACSCoalition", "blue");
}}
>
<div className="flex flex-col gap-2">
<div className="flex content-center gap-4">
<OlCoalitionToggle onClick={() => {}} coalition={mapOptions.AWACSCoalition} />
<span className="my-auto">Coalition of unit bullseye info</span>
</div>
<div className="flex gap-1 text-sm text-gray-400">
<FaQuestionCircle className={`my-auto w-8`} />{" "}
<div
className={`my-auto ml-2`}
>
Change the coalition of the bullseye to use to provide bullseye information in the unit tooltip.
</div>
</div>
</div>
</div>
</OlAccordion>