feature(map): added ability to exclusively show unit types

This commit is contained in:
MarcoJayUsai 2025-03-28 19:47:40 +01:00
parent 0452a8081b
commit 011ccc0a99
2 changed files with 26 additions and 15 deletions

View File

@ -100,7 +100,7 @@ export function OlRoundStateButton(props: {
icon: IconProp;
tooltip?: string | (() => JSX.Element | JSX.Element[]);
tooltipPosition?: string;
onClick: () => void;
onClick: (event) => void;
}) {
const [hover, setHover] = useState(false);
const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
@ -123,8 +123,8 @@ export function OlRoundStateButton(props: {
<>
<button
ref={buttonRef}
onClick={() => {
props.onClick();
onClick={(event) => {
props.onClick(event);
setHover(false);
}}
data-checked={props.checked}

View File

@ -60,6 +60,16 @@ export function Header() {
const [enabledCommandModes, setEnabledCommandModes] = useState([] as string[]);
const [loadingNewCommandMode, setLoadingNewCommandMode] = useState(false);
const unitViewTypesFilter = {
aircraft: olButtonsVisibilityAircraft,
helicopter: olButtonsVisibilityHelicopter,
"groundunit-sam": olButtonsVisibilityGroundunitSam,
groundunit: olButtonsVisibilityGroundunit,
navyunit: olButtonsVisibilityNavyunit,
airbase: olButtonsVisibilityAirbase,
dead: faSkull,
}
useEffect(() => {
HiddenTypesChangedEvent.on((hiddenTypes) => setMapHiddenTypes({ ...hiddenTypes }));
MapOptionsChangedEvent.on((mapOptions) => {
@ -418,24 +428,25 @@ 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`}>
{Object.entries({
aircraft: olButtonsVisibilityAircraft,
helicopter: olButtonsVisibilityHelicopter,
"groundunit-sam": olButtonsVisibilityGroundunitSam,
groundunit: olButtonsVisibilityGroundunit,
navyunit: olButtonsVisibilityNavyunit,
airbase: olButtonsVisibilityAirbase,
dead: faSkull,
}).map((entry) => {
{Object.entries(unitViewTypesFilter).map((entry) => {
return (
<OlRoundStateButton
key={entry[0]}
onClick={() => {
getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
onClick={(event) => {
if (event.ctrlKey) {
Object.entries(unitViewTypesFilter)
.map(ut => ut[0])
.filter(utName => utName !== entry[0])
.forEach(utName => getApp().getMap().setHiddenType(utName, true));
getApp().getMap().setHiddenType(entry[0], false);
} else {
getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
}
}}
checked={!mapHiddenTypes[entry[0]]}
icon={entry[1]}
tooltip={"Hide/show " + entry[0] + " units"}
tooltip={"Hide/show " + entry[0] + " units. Tip: holding ctrl key while clicking will hide other unit categories."}
/>
);
})}