diff --git a/frontend/react/src/ui/panels/awacsmenu.tsx b/frontend/react/src/ui/panels/awacsmenu.tsx index f820d1d6..4d1dbe83 100644 --- a/frontend/react/src/ui/panels/awacsmenu.tsx +++ b/frontend/react/src/ui/panels/awacsmenu.tsx @@ -2,12 +2,21 @@ import React, { useEffect, useState } from "react"; import { Menu } from "./components/menu"; import { OlToggle } from "../components/oltoggle"; import { MAP_OPTIONS_DEFAULTS } from "../../constants/constants"; -import { AWACSReferenceChangedEvent as AWACSReferenceUnitChangedEvent, HotgroupsChangedEvent, MapOptionsChangedEvent } from "../../events"; +import { + AWACSReferenceChangedEvent as AWACSReferenceUnitChangedEvent, + BullseyesDataChanged, + HotgroupsChangedEvent, + MapOptionsChangedEvent, +} from "../../events"; import { getApp } from "../../olympusapp"; import { OlCoalitionToggle } from "../components/olcoalitiontoggle"; import { Coalition } from "../../types/types"; import { FaQuestionCircle } from "react-icons/fa"; import { Unit } from "../../unit/unit"; +import { Bullseye } from "../../mission/bullseye"; +import { coalitionToEnum, computeBearingRangeString, mToFt, rad2deg } from "../../other/utils"; + +const trackStrings = ["North", "North-East", "East", "South-East", "South", "South-West", "West", "North-West"] export function AWACSMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) { const [callsign, setCallsign] = useState("Magic"); @@ -15,16 +24,45 @@ export function AWACSMenu(props: { open: boolean; onClose: () => void; children? const [coalition, setCoalition] = useState("blue" as Coalition); const [hotgroups, setHotgroups] = useState({} as { [key: number]: Unit[] }); const [referenceUnit, setReferenceUnit] = useState(null as Unit | null); + const [bullseyes, setBullseyes] = useState(null as null | { [name: string]: Bullseye }); useEffect(() => { MapOptionsChangedEvent.on((mapOptions) => setMapOptions({ ...mapOptions })); HotgroupsChangedEvent.on((hotgroups) => setHotgroups({ ...hotgroups })); AWACSReferenceUnitChangedEvent.on((unit) => setReferenceUnit(unit)); + BullseyesDataChanged.on((bullseyes) => setBullseyes(bullseyes)); }, []); - const enemyGroups = Object.values(hotgroups).filter((hotgroup) => { - return hotgroup.every((unit) => unit.getCoalition() !== coalition) - }) + const activeGroups = Object.values(hotgroups).filter((hotgroup) => { + return hotgroup.every((unit) => unit.getCoalition() !== coalition); + }); + + let readout: string[] = []; + + if (bullseyes) { + if (referenceUnit) { + readout.push(`$`); + } else { + readout.push(`${callsign}, ${activeGroups.length} group${activeGroups.length > 1 && "s"}`); + readout.push( + ...activeGroups.map((group, idx) => { + let order = "th"; + if (idx == 0) order = "st"; + else if (idx == 1) order = "nd"; + else if (idx == 2) order = "rd"; + + let trackDegs = rad2deg(group[0].getTrack()) + if (trackDegs < 0) trackDegs += 360 + let trackIndex = Math.round(trackDegs / 45) + + let groupLine = `${idx + 1}${order} group bullseye ${computeBearingRangeString(bullseyes[coalitionToEnum(coalition)].getLatLng(), group[0].getPosition()).replace("/", " ")}, ${ (mToFt(group[0].getPosition().alt ?? 0) / 1000).toFixed()} thousand, track ${trackStrings[trackIndex]}`; + return groupLine; + }) + ); + + } + } + return (