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

Started working on unit spawning

Browse Source
This commit is contained in:
Pax1601
2024-04-14 12:34:38 +02:00
parent 40df2ebb7d
commit 288df71970
9 changed files with 117 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ export function Header() {
{(appState) =>
<EventsConsumer>
{(events) =>
<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3">
<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3 z-ui-1">
<div className="w-full max-w-full flex flex-nowrap items-center justify-between gap-3 my-auto">
<div className="flex flex-row items-center justify-center gap-1 flex-none">
<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>

19
frontend/react/src/ui/panels/spawnmenu.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { Menu } from "./components/menu";
import { faHelicopter, faJetFighter, faPlus, faShieldAlt, faShip, faTruck } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -9,6 +9,7 @@ import { OlUnitEntryList } from "../components/olunitlistentry";
import { UnitSpawnMenu } from "./unitspawnmenu";
import { UnitBlueprint } from "../../interfaces";
import { olButtonsVisibilityAircraft, olButtonsVisibilityGroundunit, olButtonsVisibilityGroundunitSam, olButtonsVisibilityHelicopter, olButtonsVisibilityNavyunit } from "../components/olicons";
import { SPAWN_UNIT } from "../../constants/constants";
library.add(faPlus);
@@ -31,6 +32,12 @@ export function SpawnMenu(props: {
var [blueprint, setBlueprint] = useState(null as (null | UnitBlueprint));
var [filterString, setFilterString] = useState("");
useEffect(() => {
if (!props.open || blueprint !== null) {
//getApp()?.getMap()?.setState(SPAWN_UNIT, {name: blueprint?.name ?? '', coalition: 'blue'});
}
} )
/* Filter aircrafts, helicopters, and navyunits */
const filteredAircraft = filterUnits(getApp()?.getAircraftDatabase()?.blueprints, filterString);
const filteredHelicopters = filterUnits(getApp()?.getHelicopterDatabase()?.blueprints, filterString);
@@ -59,7 +66,7 @@ export function SpawnMenu(props: {
<>
{(blueprint === null) && <div className="p-5">
<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)}/>
<OlAccordion title={`Aircrafts (${Object.keys(filteredAircraft).length})`}>
<OlAccordion title={`Aircrafts`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredAircraft).map((key) => {
const blueprint = getApp().getAircraftDatabase().blueprints[key];
@@ -67,7 +74,7 @@ export function SpawnMenu(props: {
})}
</div>
</OlAccordion>
<OlAccordion title={`Helicopters (${Object.keys(filteredHelicopters).length})`}>
<OlAccordion title={`Helicopters`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredHelicopters).map((key) => {
const blueprint = getApp().getHelicopterDatabase().blueprints[key];
@@ -75,7 +82,7 @@ export function SpawnMenu(props: {
})}
</div>
</OlAccordion>
<OlAccordion title={`SAM & AAA (${Object.keys(filteredAirDefense).length})`}>
<OlAccordion title={`SAM & AAA`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredAirDefense).map((key) => {
const blueprint = getApp().getGroundUnitDatabase().blueprints[key];
@@ -83,7 +90,7 @@ export function SpawnMenu(props: {
})}
</div>
</OlAccordion>
<OlAccordion title={`Ground Units (${Object.keys(filteredGroundUnits).length})`}>
<OlAccordion title={`Ground Units`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredGroundUnits).map((key) => {
const blueprint = getApp().getGroundUnitDatabase().blueprints[key];
@@ -91,7 +98,7 @@ export function SpawnMenu(props: {
})}
</div>
</OlAccordion>
<OlAccordion title={`Ships and submarines (${Object.keys(filteredNavyUnits).length})`}>
<OlAccordion title={`Ships and submarines`}>
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
{Object.keys(filteredNavyUnits).map((key) => {
const blueprint = getApp().getNavyUnitDatabase().blueprints[key];

23
frontend/react/src/ui/panels/unitcontrolmenu.tsx
View File

@@ -10,6 +10,7 @@ import { OlToggle } from "../components/oltoggle";
import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
import { olButtonsEmissionsAttack, olButtonsEmissionsDefend, olButtonsEmissionsFree, olButtonsEmissionsSilent, olButtonsIntensity1, olButtonsIntensity2, olButtonsIntensity3, olButtonsRoeDesignated, olButtonsRoeFree, olButtonsRoeHold, olButtonsRoeReturn, olButtonsScatter1, olButtonsScatter2, olButtonsScatter3, olButtonsThreatEvade, olButtonsThreatManoeuvre, olButtonsThreatNone, olButtonsThreatPassive } from "../components/olicons";
import { Coalition } from "../../types/types";
import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
export function UnitControlMenu() {
var [open, setOpen] = useState(false);
@@ -63,13 +64,13 @@ export function UnitControlMenu() {
/* Update the current values of the shown data */
function updateData() {
const getters = {
desiredAltitude: (unit: Unit) => { return unit.getDesiredAltitude(); },
desiredAltitude: (unit: Unit) => { return Math.round(mToFt(unit.getDesiredAltitude())); },
desiredAltitudeType: (unit: Unit) => { return unit.getDesiredAltitudeType(); },
desiredSpeed: (unit: Unit) => { return unit.getDesiredSpeed(); },
desiredSpeed: (unit: Unit) => { return Math.round(msToKnots(unit.getDesiredSpeed())); },
desiredSpeedType: (unit: Unit) => { return unit.getDesiredSpeedType(); },
ROE: (unit: Unit) => { return unit.getROE(); },
reactionToThreat: (unit: Unit) => { return unit.getReactionToThreat(); },
emissionsCountermeasures: (unit: Unit) => { return unit.getROE(); },
emissionsCountermeasures: (unit: Unit) => { return unit.getEmissionsCountermeasures(); },
shotsScatter: (unit: Unit) => { return unit.getShotsScatter(); },
shotsIntensity: (unit: Unit) => { return unit.getShotsIntensity(); },
operateAs: (unit: Unit) => { return unit.getOperateAs(); },
@@ -158,7 +159,7 @@ export function UnitControlMenu() {
<OlRangeSlider
onChange={(ev) => {
selectedUnits.forEach((unit) => {
unit.setAltitude(Number(ev.target.value));
unit.setAltitude(ftToM(Number(ev.target.value)));
setSelectedUnitsData({
...selectedUnitsData,
desiredAltitude: Number(ev.target.value)
@@ -200,7 +201,7 @@ export function UnitControlMenu() {
<OlRangeSlider
onChange={(ev) => {
selectedUnits.forEach((unit) => {
unit.setSpeed(Number(ev.target.value));
unit.setSpeed(knotsToMs(Number(ev.target.value)));
setSelectedUnitsData({
...selectedUnitsData,
desiredSpeed: Number(ev.target.value)
@@ -318,14 +319,14 @@ export function UnitControlMenu() {
return <OlButtonGroupItem
onClick={() => {
selectedUnits.forEach((unit) => {
unit.setShotsScatter(idx);
unit.setShotsScatter((idx + 1));
setSelectedUnitsData({
...selectedUnitsData,
shotsScatter: idx
shotsScatter: (idx + 1)
})
})
}}
active={selectedUnitsData.shotsScatter === idx}
active={selectedUnitsData.shotsScatter === (idx + 1)}
icon={icon} />
})
}
@@ -339,14 +340,14 @@ export function UnitControlMenu() {
return <OlButtonGroupItem
onClick={() => {
selectedUnits.forEach((unit) => {
unit.setShotsIntensity(idx);
unit.setShotsIntensity((idx + 1));
setSelectedUnitsData({
...selectedUnitsData,
shotsIntensity: idx
shotsIntensity: (idx + 1)
})
})
}}
active={selectedUnitsData.shotsIntensity === idx}
active={selectedUnitsData.shotsIntensity === (idx + 1)}
icon={icon} />
})
}

2
frontend/react/src/ui/ui.tsx
View File

@@ -77,12 +77,12 @@ export function UI() {
<Header />
<div className='flex h-full'>
<SideBar />
<div id='map-container' className='relative h-full w-screen top-0 left-0' />
<MainMenu open={mainMenuVisible} onClose={() => setMainMenuVisible(false)} />
<SpawnMenu open={spawnMenuVisible} onClose={() => setSpawnMenuVisible(false)} />
<UnitControlMenu />
</div>
</div>
<div id='map-container' className='fixed h-full w-screen top-0 left-0' />
</EventsProvider>
</StateProvider>
</div>