mirror of
https://github.com/dcs-retribution/dcs-retribution.git
synced 2025-11-10 15:41:24 +00:00
Add missing keys to list components.
This commit is contained in:
parent
c5c596dc2f
commit
4539e91fa9
@ -8,6 +8,7 @@ export enum TgoType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface Tgo {
|
export interface Tgo {
|
||||||
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
control_point_name: string;
|
control_point_name: string;
|
||||||
category: string;
|
category: string;
|
||||||
|
|||||||
@ -26,9 +26,10 @@ const TgoRangeCircles = (props: TgoRangeCirclesProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{radii.map((radius) => {
|
{radii.map((radius, idx) => {
|
||||||
return (
|
return (
|
||||||
<Circle
|
<Circle
|
||||||
|
key={idx}
|
||||||
center={props.tgo.position}
|
center={props.tgo.position}
|
||||||
radius={radius}
|
radius={radius}
|
||||||
color={color}
|
color={color}
|
||||||
@ -61,7 +62,9 @@ export const AirDefenseRangeLayer = (props: AirDefenseRangeLayerProps) => {
|
|||||||
return (
|
return (
|
||||||
<LayerGroup>
|
<LayerGroup>
|
||||||
{allTgos.map((tgo) => {
|
{allTgos.map((tgo) => {
|
||||||
return <TgoRangeCircles tgo={tgo} {...props}></TgoRangeCircles>;
|
return (
|
||||||
|
<TgoRangeCircles key={tgo.id} tgo={tgo} {...props}></TgoRangeCircles>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</LayerGroup>
|
</LayerGroup>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -33,9 +33,9 @@ export default function LiberationMap(props: GameProps) {
|
|||||||
<LayersControl.Overlay name="Control points" checked>
|
<LayersControl.Overlay name="Control points" checked>
|
||||||
<ControlPointsLayer />
|
<ControlPointsLayer />
|
||||||
</LayersControl.Overlay>
|
</LayersControl.Overlay>
|
||||||
{Object.values(TgoType).map((type) => {
|
{Object.values(TgoType).map((type, idx) => {
|
||||||
return (
|
return (
|
||||||
<LayersControl.Overlay name={type} checked>
|
<LayersControl.Overlay key={idx} name={type} checked>
|
||||||
<TgosLayer type={type as TgoType} />
|
<TgosLayer type={type as TgoType} />
|
||||||
</LayersControl.Overlay>
|
</LayersControl.Overlay>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import { Fragment } from "react";
|
||||||
|
|
||||||
interface SplitLinesProps {
|
interface SplitLinesProps {
|
||||||
items: string[];
|
items: string[];
|
||||||
}
|
}
|
||||||
@ -5,12 +7,12 @@ interface SplitLinesProps {
|
|||||||
const SplitLines = (props: SplitLinesProps) => {
|
const SplitLines = (props: SplitLinesProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.items.map((text) => {
|
{props.items.map((text, idx) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<Fragment key={idx}>
|
||||||
{text}
|
{text}
|
||||||
<br />
|
<br />
|
||||||
</>
|
</Fragment>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { Icon, Point } from "leaflet";
|
|||||||
import { Marker, Tooltip } from "react-leaflet";
|
import { Marker, Tooltip } from "react-leaflet";
|
||||||
|
|
||||||
import { Symbol as MilSymbol } from "milsymbol";
|
import { Symbol as MilSymbol } from "milsymbol";
|
||||||
|
import SplitLines from "../splitlines/SplitLines";
|
||||||
import { Tgo as TgoModel } from "../../api/tgo";
|
import { Tgo as TgoModel } from "../../api/tgo";
|
||||||
|
|
||||||
function iconForTgo(cp: TgoModel) {
|
function iconForTgo(cp: TgoModel) {
|
||||||
@ -25,12 +26,7 @@ export default function Tgo(props: TgoProps) {
|
|||||||
<Tooltip>
|
<Tooltip>
|
||||||
{`${props.tgo.name} (${props.tgo.control_point_name})`}
|
{`${props.tgo.name} (${props.tgo.control_point_name})`}
|
||||||
<br />
|
<br />
|
||||||
{props.tgo.units.map((unit) => (
|
<SplitLines items={props.tgo.units} />
|
||||||
<>
|
|
||||||
{unit}
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
))}
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Marker>
|
</Marker>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user