feat: Added starred spawns to spawn menu and ability to remove starred spawns

This commit is contained in:
Davide Passoni 2025-03-27 17:10:27 +01:00
parent 3c02802807
commit bdf9c83053
3 changed files with 118 additions and 28 deletions

View File

@ -37,6 +37,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
import { Coalition } from "../../types/types";
import { spawn } from "child_process";
import { FaXmark } from "react-icons/fa6";
enum CategoryGroup {
NONE,
@ -334,9 +335,13 @@ export function SpawnContextMenu(props: {}) {
/>
);
})}
{blueprints?.length === 0 && <span className={`
text-gray-200
`}>No aircraft available</span>}
{blueprints?.length === 0 && (
<span
className={`text-gray-200`}
>
No aircraft available
</span>
)}
</div>
</>
)}
@ -384,9 +389,13 @@ export function SpawnContextMenu(props: {}) {
/>
);
})}
{blueprints?.length === 0 && <span className={`
text-gray-200
`}>No helicopter available</span>}
{blueprints?.length === 0 && (
<span
className={`text-gray-200`}
>
No helicopter available
</span>
)}
</div>
</>
)}
@ -437,9 +446,13 @@ export function SpawnContextMenu(props: {}) {
/>
);
})}
{blueprints?.length === 0 && <span className={`
text-gray-200
`}>No air defence unit available</span>}
{blueprints?.length === 0 && (
<span
className={`text-gray-200`}
>
No air defence unit available
</span>
)}
</div>
</>
)}
@ -505,9 +518,13 @@ export function SpawnContextMenu(props: {}) {
/>
);
})}
{blueprints?.length === 0 && <span className={`
text-gray-200
`}>No ground unit available</span>}
{blueprints?.length === 0 && (
<span
className={`text-gray-200`}
>
No ground unit available
</span>
)}
</div>
</>
)}
@ -555,9 +572,13 @@ export function SpawnContextMenu(props: {}) {
/>
);
})}
{blueprints?.length === 0 && <span className={`
text-gray-200
`}>No navy unit available</span>}
{blueprints?.length === 0 && (
<span
className={`text-gray-200`}
>
No navy unit available
</span>
)}
</div>
</>
)}
@ -624,7 +645,8 @@ export function SpawnContextMenu(props: {}) {
{openAccordion === CategoryGroup.STARRED && (
<div className="flex flex-col gap-2">
{Object.values(starredSpawns).length > 0 ? (
Object.values(starredSpawns).map((spawnRequestTable) => {
Object.keys(starredSpawns).map((key) => {
const spawnRequestTable = starredSpawns[key];
return (
<OlDropdownItem
className={`
@ -660,6 +682,16 @@ export function SpawnContextMenu(props: {}) {
{getApp().getUnitsManager().getDatabase().getByName(spawnRequestTable.unit.unitType)?.label} (
{spawnRequestTable.quickAccessName})
</div>
<FaXmark
className={`
my-auto ml-auto min-h-4 min-w-4 text-gray-400
hover:text-white
`}
onClick={(ev) => {
getApp().getMap().removeStarredSpawnRequestTable(key);
ev.stopPropagation();
}}
/>
</OlDropdownItem>
);
})

View File

@ -248,7 +248,7 @@ export function Header() {
}
}}
>
<span className="my-auto font-bold">Game Master</span>
<span className="my-auto text-nowrap font-bold">Game Master</span>
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (
@ -279,7 +279,7 @@ export function Header() {
}
}}
>
<span className="my-auto font-bold">BLUE Commander</span>
<span className="my-auto text-nowrap font-bold">BLUE Commander</span>
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (
@ -310,7 +310,7 @@ export function Header() {
}
}}
>
<span className="my-auto font-bold">RED Commander</span>
<span className="my-auto text-nowrap font-bold">RED Commander</span>
{enabledCommandModes.length > 0 && (
<>
{loadingNewCommandMode ? (

View File

@ -19,11 +19,14 @@ import {
olIconsTank,
olIconsTruck,
} from "../components/olicons";
import { faExplosion, faSmog } from "@fortawesome/free-solid-svg-icons";
import { faExplosion, faSmog, faStar } from "@fortawesome/free-solid-svg-icons";
import { OlEffectListEntry } from "../components/oleffectlistentry";
import { EffectSpawnMenu } from "./effectspawnmenu";
import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, NO_SUBSTATE, OlympusState } from "../../constants/constants";
import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, NO_SUBSTATE, OlympusState, SpawnSubState } from "../../constants/constants";
import { AppStateChangedEvent, CommandModeOptionsChangedEvent, StarredSpawnsChangedEvent, UnitDatabaseLoadedEvent } from "../../events";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OlDropdownItem } from "../components/oldropdown";
import { FaXmark } from "react-icons/fa6";
enum CategoryAccordion {
NONE,
@ -34,6 +37,7 @@ enum CategoryAccordion {
GROUND_UNIT,
NAVY_UNIT,
EFFECT,
STARRED,
}
export function SpawnMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) {
@ -347,13 +351,9 @@ export function SpawnMenu(props: { open: boolean; onClose: () => void; children?
/>
);
})}
{filteredBlueprints.filter((blueprint) => blueprint.canAAA).length === 0 && (
<span
className={`text-gray-400`}
>
No AAA unit available
</span>
)}
{filteredBlueprints.filter((blueprint) => blueprint.canAAA).length === 0 && <span className={`
text-gray-400
`}>No AAA unit available</span>}
</div>
</OlAccordion>
<OlAccordion
@ -518,6 +518,64 @@ export function SpawnMenu(props: { open: boolean; onClose: () => void; children?
</div>
</OlAccordion>
)}
<OlAccordion
title={`Starred Spawns`}
open={openAccordion == CategoryAccordion.STARRED}
onClick={() => {
setOpenAccordion(openAccordion === CategoryAccordion.NONE ? CategoryAccordion.STARRED : CategoryAccordion.NONE);
setSelectedRole(null);
setSelectedType(null);
}}
>
<div
className={`
flex max-h-[450px] flex-col gap-1 overflow-y-scroll
no-scrollbar
`}
>
{Object.values(starredSpawns).length > 0 ? (
Object.keys(starredSpawns).map((key) => {
const spawnRequestTable = starredSpawns[key];
return (
<OlDropdownItem
className={`
flex w-full content-center gap-2 text-sm text-white
`}
onClick={() => {
getApp().getMap().setSpawnRequestTable(spawnRequestTable);
getApp().setState(OlympusState.SPAWN, SpawnSubState.SPAWN_UNIT);
}}
>
<FontAwesomeIcon
data-coalition={spawnRequestTable.coalition}
className={`
my-auto
data-[coalition='blue']:text-blue-500
data-[coalition='neutral']:text-gay-500
data-[coalition='red']:text-red-500
`}
icon={faStar}
/>
<div>
{getApp().getUnitsManager().getDatabase().getByName(spawnRequestTable.unit.unitType)?.label} ({spawnRequestTable.quickAccessName})
</div>
<FaXmark className={`
my-auto ml-auto min-h-4 min-w-4 text-gray-400
hover:text-white
`} onClick={
(ev) => {
getApp().getMap().removeStarredSpawnRequestTable(key);
ev.stopPropagation();
}
}/>
</OlDropdownItem>
);
})
) : (
<div className="p-2 text-sm text-white">No starred spawns, use the spawn menu to create a quick access spawn</div>
)}
</div>
</OlAccordion>
</div>
)}