import React, { useEffect, useRef, useState } from "react"; import { OlRoundStateButton, OlStateButton, OlLockStateButton } from "../components/olstatebutton"; import { faSkull, faCamera, faFlag, faVolumeHigh, faDownload, faUpload } from "@fortawesome/free-solid-svg-icons"; import { OlDropdownItem, OlDropdown } from "../components/oldropdown"; import { OlLabelToggle } from "../components/ollabeltoggle"; import { getApp, IP } from "../../olympusapp"; import { olButtonsVisibilityAirbase, olButtonsVisibilityAircraft, olButtonsVisibilityDcs, olButtonsVisibilityGroundunit, olButtonsVisibilityGroundunitSam, olButtonsVisibilityHelicopter, olButtonsVisibilityHuman, olButtonsVisibilityNavyunit, olButtonsVisibilityOlympus, } from "../components/olicons"; import { FaChevronLeft, FaChevronRight, FaFloppyDisk } from "react-icons/fa6"; import { CommandModeOptionsChangedEvent, ConfigLoadedEvent, HiddenTypesChangedEvent, MapOptionsChangedEvent, MapSourceChangedEvent, SessionDataChangedEvent, SessionDataSavedEvent } from "../../events"; import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, ImportExportSubstate, MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEFAULTS, OlympusState } from "../../constants/constants"; import { OlympusConfig } from "../../interfaces"; import { FaCheck, FaSave, FaSpinner } from "react-icons/fa"; export function Header() { const [mapHiddenTypes, setMapHiddenTypes] = useState(MAP_HIDDEN_TYPES_DEFAULTS); const [mapOptions, setMapOptions] = useState(MAP_OPTIONS_DEFAULTS); const [mapSource, setMapSource] = useState(""); const [mapSources, setMapSources] = useState([] as string[]); const [scrolledLeft, setScrolledLeft] = useState(true); const [scrolledRight, setScrolledRight] = useState(false); const [audioEnabled, setAudioEnabled] = useState(false); const [commandModeOptions, setCommandModeOptions] = useState(COMMAND_MODE_OPTIONS_DEFAULTS); const [savingSessionData, setSavingSessionData] = useState(false); useEffect(() => { HiddenTypesChangedEvent.on((hiddenTypes) => setMapHiddenTypes({ ...hiddenTypes })); MapOptionsChangedEvent.on((mapOptions) => setMapOptions({ ...mapOptions })); MapSourceChangedEvent.on((source) => setMapSource(source)); ConfigLoadedEvent.on((config: OlympusConfig) => { // Timeout needed to make sure the map configuration has updated window.setTimeout(() => { var sources = Object.keys(getApp().getMap().getMirrors()).concat(getApp().getMap().getLayers()); setMapSources(sources); }, 200); }); CommandModeOptionsChangedEvent.on((commandModeOptions) => { setCommandModeOptions(commandModeOptions); }); SessionDataChangedEvent.on(() => setSavingSessionData(true)); SessionDataSavedEvent.on(() => setSavingSessionData(false)); }, []); /* Initialize the "scroll" position of the element */ var scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) onScroll(scrollRef.current); }); 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); } return ( ); }