289 lines
19 KiB
TypeScript
289 lines
19 KiB
TypeScript
import React from "react";
|
|
import {useTheme} from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import ArmorTypeNames from "../types/ArmorTypeValues";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow
|
|
} from "@mui/material";
|
|
import ArmorType from "./ArmorType";
|
|
import {IMod} from "../types/Imod";
|
|
import {IPiercing} from "../types/IPiercing";
|
|
import {IArmorType} from "../types/IArmorType";
|
|
import {StyledTableCell} from "../commons/StyledTableCell";
|
|
|
|
export default function DpsTable(props: { mod: IMod, minDamageValue?: number, minDamage?: number, maxDamage?: number, piercings: IPiercing[], targetFilter: IArmorType[], moraleDamage?: number }) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
function getPiercingK(armorType: string): number|null {
|
|
if(props.targetFilter.length > 0 && props.targetFilter.find(tf => tf.name == armorType) === undefined) return null
|
|
const piercing = props.piercings.find((p) => p.armorType.name === armorType)
|
|
return (typeof piercing !== "undefined" ? piercing.piercingValue : 10) / 100
|
|
}
|
|
|
|
const infLowPiercing = getPiercingK(ArmorTypeNames.InfantryLow)
|
|
const infMedPiercing = getPiercingK(ArmorTypeNames.InfantryMedium)
|
|
const infHighPiercing = getPiercingK(ArmorTypeNames.InfantryHigh)
|
|
const infHeavyMedPiercing = getPiercingK(ArmorTypeNames.InfantryHeavyMedium)
|
|
const infHeavyHighPiercing = getPiercingK(ArmorTypeNames.InfantryHeavyHigh)
|
|
const demonPiercing = getPiercingK(ArmorTypeNames.DemonMedium)
|
|
const demonHighPiercing = getPiercingK(ArmorTypeNames.DemonHigh)
|
|
const commanderPiercing = getPiercingK(ArmorTypeNames.Commander)
|
|
|
|
const airPiercing = getPiercingK(ArmorTypeNames.Air)
|
|
const vehLowPiercing = getPiercingK(ArmorTypeNames.VehicleLow)
|
|
const vehMedPiercing = getPiercingK(ArmorTypeNames.VehicleMedium)
|
|
const vehHighPiercing = getPiercingK(ArmorTypeNames.VehicleHigh)
|
|
const buildingLowPiercing = getPiercingK(ArmorTypeNames.BuildingLow)
|
|
const buildingMedPiercing = getPiercingK(ArmorTypeNames.BuildingMedium)
|
|
const buildingHighPiercing = getPiercingK(ArmorTypeNames.BuildingHigh)
|
|
|
|
// UA mod
|
|
const demonLowPiercing = getPiercingK(ArmorTypeNames.DemonLow)
|
|
const buildingSuperPiercing = getPiercingK(ArmorTypeNames.BuildingSuper)
|
|
const livingMetalPiercing = getPiercingK(ArmorTypeNames.LivingMetal)
|
|
const titanPiercing = getPiercingK(ArmorTypeNames.Titan)
|
|
|
|
const getTotalDamage = (damagePiercing: number|null) => {
|
|
if(damagePiercing === null) return ""
|
|
|
|
if(props.minDamageValue !== undefined && props.minDamage !== undefined && props.maxDamage !== undefined){
|
|
var minDamage = damagePiercing * props.minDamage
|
|
var maxDamage = damagePiercing * props.maxDamage
|
|
|
|
if(props.minDamageValue !== undefined){
|
|
if (minDamage < props.minDamageValue) {
|
|
minDamage = props.minDamageValue
|
|
}
|
|
if (maxDamage < props.minDamageValue) {
|
|
maxDamage = props.minDamageValue
|
|
}
|
|
}
|
|
|
|
const averageDmg = (minDamage + maxDamage) / 2
|
|
|
|
return averageDmg.toFixed(2)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const getMoraleDamage = () => {
|
|
if(props.moraleDamage !== undefined) return (props.moraleDamage / 2).toFixed(2)
|
|
}
|
|
|
|
if (isMobile) {
|
|
const items = props.mod !== undefined && props.mod.name.includes("Ultimate Apocalypse") ? [
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryLow}/>, value: () => getTotalDamage(infLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryMedium}/>, value: () => getTotalDamage(infMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHigh}/>, value: () => getTotalDamage(infHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHeavyMedium}/>, value: () => getTotalDamage(infHeavyMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHeavyHigh}/>, value: () => getTotalDamage(infHeavyHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.Commander}/>, value: () => getTotalDamage(commanderPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.DemonLow}/>, value: () => getTotalDamage(demonLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.DemonMedium}/>, value: () => getTotalDamage(demonPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.DemonHigh}/>, value: () => getTotalDamage(demonHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.Air}/>, value: () => getTotalDamage(airPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleLow}/>, value: () => getTotalDamage(vehLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleMedium}/>, value: () => getTotalDamage(vehMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleHigh}/>, value: () => getTotalDamage(vehHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.LivingMetal}/>, value: () => getTotalDamage(livingMetalPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.Titan}/>, value: () => getTotalDamage(titanPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingLow}/>, value: () => getTotalDamage(buildingLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingMedium}/>, value: () => getTotalDamage(buildingMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingHigh}/>, value: () => getTotalDamage(buildingHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingSuper}/>, value: () => getTotalDamage(buildingSuperPiercing) },
|
|
{ label: <ArmorType name="Morale damage"/>, value: () => getMoraleDamage() },
|
|
] : [
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryLow}/>, value: () => getTotalDamage(infLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryMedium}/>, value: () => getTotalDamage(infMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHigh}/>, value: () => getTotalDamage(infHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHeavyMedium}/>, value: () => getTotalDamage(infHeavyMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.InfantryHeavyHigh}/>, value: () => getTotalDamage(infHeavyHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.Commander}/>, value: () => getTotalDamage(commanderPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.DemonMedium}/>, value: () => getTotalDamage(demonPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.DemonHigh}/>, value: () => getTotalDamage(demonHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.Air}/>, value: () => getTotalDamage(airPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleLow}/>, value: () => getTotalDamage(vehLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleMedium}/>, value: () => getTotalDamage(vehMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.VehicleHigh}/>, value: () => getTotalDamage(vehHighPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingLow}/>, value: () => getTotalDamage(buildingLowPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingMedium}/>, value: () => getTotalDamage(buildingMedPiercing) },
|
|
{ label: <ArmorType name={ArmorTypeNames.BuildingHigh}/>, value: () => getTotalDamage(buildingHighPiercing) },
|
|
{ label: <ArmorType name="Morale damage"/>, value: () => getMoraleDamage() },
|
|
];
|
|
|
|
const chunks = [];
|
|
for (let i = 0; i < items.length; i += 5) {
|
|
chunks.push(items.slice(i, i + 5));
|
|
}
|
|
|
|
return (<>{chunks.map((chunk, chunkIndex) => (
|
|
<Table key={chunkIndex} sx={{marginTop: "10px", textAlign: "center"}} size="small" aria-label="a dense table">
|
|
<TableHead>
|
|
<TableRow>
|
|
{chunk.map((item, i) => (
|
|
<StyledTableCell key={i}>{item.label}</StyledTableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
|
|
{chunk.map((item, i) => (
|
|
<StyledTableCell key={i}>{item.value()}</StyledTableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
))}</>)
|
|
}
|
|
|
|
return (
|
|
<TableContainer>
|
|
{ props.mod !== undefined && props.mod.name.includes("Ultimate Apocalypse") ?
|
|
<Table sx={{ textAlign: "center"}} size="small" aria-label="a dense table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHeavyMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHeavyHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.Commander}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.DemonLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.DemonMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.DemonHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType name={ArmorTypeNames.Air}/></StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<StyledTableCell>{getTotalDamage(infLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHeavyMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHeavyHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(commanderPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(demonLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(demonPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(demonHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(airPiercing)}</StyledTableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.LivingMetal}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.Titan}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name='Morale damage'/>
|
|
</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
|
|
<StyledTableCell>{getTotalDamage(vehLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(vehMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(vehHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(livingMetalPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(titanPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingSuperPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getMoraleDamage()}</StyledTableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table> :
|
|
<Table sx={{ minWidth: 800 }} size="small" aria-label="a dense table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHeavyMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.InfantryHeavyHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.Commander}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.DemonMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.DemonHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType name={ArmorTypeNames.Air}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.VehicleHigh}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingLow}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
|
|
<StyledTableCell><ArmorType
|
|
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
|
|
<StyledTableCell>
|
|
<ArmorType
|
|
name='Morale damage'/>
|
|
</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
|
|
<StyledTableCell>{getTotalDamage(infLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHeavyMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(infHeavyHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(commanderPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(demonPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(demonHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(airPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(vehLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(vehMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(vehHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingLowPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingMedPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getTotalDamage(buildingHighPiercing)}</StyledTableCell>
|
|
<StyledTableCell>{getMoraleDamage()}</StyledTableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
}
|
|
</TableContainer>
|
|
)
|
|
}
|