Anibus/Soulstorm-wiki-frontend
Anibus/Soulstorm-wiki-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vibe-code дизайн light theme

Browse Source
This commit is contained in:
anibus 2026-07-21 03:55:59 +03:00
parent b603732dd6
commit c750e19443
24 changed files with 280 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -35,7 +35,7 @@ const LogoText = styled(Typography)(({ theme }) => ({
? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
: 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : '#1a1a2e',
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
letterSpacing: '-0.5px',
cursor: 'pointer',
'&:hover': {
@ -94,7 +94,7 @@ function AppBarContent() {
</LogoText>
</Box>
<ThemeToggleLight onClick={toggleTheme} size="large">
<DarkModeIcon />
<DarkModeIcon sx={{ color: '#000000' }} />
</ThemeToggleLight>
</Toolbar>
</Container>

12
src/classes/Ability.tsx
View File

@ -1,6 +1,7 @@
import {AccordionDetails, AccordionSummary} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IAbilityShort} from "../types/IAbility";
import {getIcon} from "./ModifiersProvideTable";
import {IMod} from "../types/Imod";
@ -15,23 +16,26 @@ interface IAbilityProps {
}
function Ability(props: IAbilityProps){
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const ability = props.ability
return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
<AccordionSummary
sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content"
>
<span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
{ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.gif"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
&nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
<i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> ({ability.activationType})</i>
</span>
</AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}>
<AccordionDetails sx={{color: textColor}}>
<AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
</AccordionDetails>
</StyledAccordion></div>

32
src/classes/AbilityFull.tsx
View File

@ -1,21 +1,19 @@
import React, {useEffect, useState} from "react";
import {useTheme} from "@mui/material/styles";
import {AbilityUrl, AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
import {IWeapon} from "../types/IUnit";
import ArmorTypeNames from "../types/ArmorTypeValues";
import {
AccordionDetails,
Grid2,
styled,
Table,
TableBody,
TableCell,
tableCellClasses,
TableContainer, TableHead,
TableRow, ToggleButton, ToggleButtonGroup
} from "@mui/material";
import ArmorType from "./ArmorType";
import Required from "./Required";
import {renderAffectedResearches} from "./building/Research";
import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace";
import {IRaceUnits} from "../types/IUnitShort";
@ -28,36 +26,22 @@ import AbilitySpawnedObject from "./AbilitySpawnedObject";
import DpsTable from "./DpsTable";
import {DescriptionBox} from "../commons/DescriptionBox";
import {StyledPaper} from "../commons/StyledPaper";
import {StyledTableCell} from "../commons/StyledTableCell";
interface IAbilityFullState {
ability?: IAbilityFill;
}
export default function AbilityFull(props: { abilityId?: number, mod: IMod, race: Irace, isChild?: boolean, abilityFull?: IAbilityFill }) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const [abilityFull, setAbilityFull] = useState<IAbilityFullState>({
ability: undefined,
});
const StyledTableCell = styled(TableCell)(({theme}) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
fontWeight: 700,
marginRight: 'auto',
marginLeft: 'auto',
paddingLeft: 10,
borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
textAlign: 'center',
color: '#dee2e6',
paddingRight: 18,
paddingLeft: 10,
},
}));
useEffect(() => {
if(props.abilityFull !== undefined){
@ -94,11 +78,11 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
const showTargetTable = !showDpsTable && ability.abilityEnvironment == null && (ability.targetFilter.length > 0 || ability.radius !== 0)
return (
<div style={{color: '#dee2e6'}}>
<div style={{color: textColor}}>
<Grid2 container spacing={2}>
<Grid2 size={{xs: 12}}>
{ability.initialDelayTime !== undefined && props.isChild === true &&
<b><br/><center style={{color: '#dee2e6'}}>&nbsp;After {ability.initialDelayTime.toFixed(1)}s&nbsp;
<b><br/><center style={{color: textColor}}>&nbsp;After {ability.initialDelayTime.toFixed(1)}s&nbsp;
<img style={{verticalAlign: "top"}}
src="/images/Time_icon.webp"/></center></b>}
</Grid2>
@ -201,7 +185,7 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
</Grid2>
{showDpsTable ?
<Grid2 size={12}>
{(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: '#dee2e6'}}>Every <b style={{color: '#dee2e6'}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
{(ability.refreshTime !== undefined && ability.durationTime !== undefined && ability.refreshTime * 2 < ability.durationTime) && <i style={{color: textColor}}>Every <b style={{color: textColor}}>{ability.refreshTime.toFixed(1)}s</b> deal damege:</i>}
<DpsTable mod={props.mod} minDamageValue={ability.minDamageValue} minDamage={ability.minDamage} maxDamage={ability.maxDamage} piercings={ability.piercings} targetFilter={ability.targetFilter} moraleDamage={ability.moraleDamage}
/>
</Grid2> : showTargetTable ?

37
src/classes/AbilitySpawnedObject.tsx
View File

@ -4,13 +4,14 @@ import {
AccordionSummary, Grid2,
Table,
TableBody,
TableCell, TableContainer,
TableContainer,
TableRow,
Tooltip,
Typography
} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IAbilityShort} from "../types/IAbility";
import {getIcon} from "./ModifiersProvideTable";
import {IMod} from "../types/Imod";
@ -25,6 +26,7 @@ import DeathExplosion from "./DeathExplosion";
import {styled} from '@mui/material/styles';
import {DescriptionBox} from "../commons/DescriptionBox";
import {StyledPaper} from "../commons/StyledPaper";
import {StyledTableCell} from "../commons/StyledTableCell";
const SectionTitle = styled(Typography)(({ theme }) => ({
fontWeight: 700,
@ -40,10 +42,13 @@ interface AbilityEnvironmentProps {
}
function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const abilityEnvironment = props.abilityEnvironment
return <div style={{color: '#dee2e6'}}>
return <div style={{color: textColor}}>
<SectionTitle>
{props.abilityEnvironment.name ?? props.abilityEnvironment.filename.charAt(0).toUpperCase() + props.abilityEnvironment.filename.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
<i style={{fontSize: 11, color: 'rgba(255,255,255,0.5)'}}> (Spawned object)</i>
@ -57,23 +62,23 @@ function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Armor type</TableCell>
<TableCell>
<StyledTableCell component="th" scope="row" >Armor type</StyledTableCell>
<StyledTableCell>
{abilityEnvironment.armorType2 == null ?
<ArmorType name={abilityEnvironment.armorType.name} compact={false}/> :
<Tooltip
title={"upgrade/debuff can turns to " + abilityEnvironment.armorType2.name}><span><ArmorType
name={abilityEnvironment.armorType.name}
compact={false}/></span></Tooltip>}
</TableCell>
</StyledTableCell>
</TableRow>
}
{abilityEnvironment.health !== null &&
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Health</TableCell>
<TableCell>
<StyledTableCell component="th" scope="row" >Health</StyledTableCell>
<StyledTableCell>
<img style={{verticalAlign: "top"}}
src="/images/Health_icon.webp"/>&nbsp;
{abilityEnvironment.health} {abilityEnvironment.healthRegeneration != null && abilityEnvironment.healthRegeneration > 0 &&
@ -81,36 +86,36 @@ function AbilitySpawnedObject(props: AbilityEnvironmentProps) {
{abilityEnvironment.armour !== undefined && abilityEnvironment.armour !== 0 &&
<span><img style={{height: 20, verticalAlign: "top"}}
src="/images/defence.png"/>{abilityEnvironment.armour} </span>}
</TableCell>
</StyledTableCell>
</TableRow>
}
{abilityEnvironment.moveSpeed != null &&
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Move speed</TableCell>
<TableCell>{abilityEnvironment.moveSpeed}</TableCell>
<StyledTableCell component="th" scope="row" >Move speed</StyledTableCell>
<StyledTableCell>{abilityEnvironment.moveSpeed}</StyledTableCell>
</TableRow>
}
{abilityEnvironment.sightRadius != null &&
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Vision</TableCell>
<TableCell>
<StyledTableCell component="th" scope="row" >Vision</StyledTableCell>
<StyledTableCell>
<Vision sight={abilityEnvironment.sightRadius ?? 0}
detect={abilityEnvironment.detectRadius ?? 0}/>
</TableCell>
</StyledTableCell>
</TableRow>
}
{abilityEnvironment.lifetime != null &&
<TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
<TableCell component="th" scope="row" >Lifetime</TableCell>
<TableCell>
<StyledTableCell component="th" scope="row" >Lifetime</StyledTableCell>
<StyledTableCell>
<img style={{verticalAlign: "top"}}
src="/images/Time_icon.webp"/>&nbsp;
{abilityEnvironment.lifetime.toFixed(0)}s&nbsp;
</TableCell>
</StyledTableCell>
</TableRow>
}
</TableBody>

2
src/classes/ArmorType.tsx
View File

@ -53,6 +53,8 @@ class ArmorType extends React.Component<IArmorType, any> {
return '/images/ARM_Dmn_Hi.webp';
case 'Titan':
return '/images/ARM_titan.webp';
case 'Morale damage':
return '/images/ARM_Morale.webp';
default:
return armorTypeId;
}

27
src/classes/DeathExplosion.tsx
View File

@ -3,12 +3,13 @@ import {
AccordionSummary, Grid2,
Table,
TableBody,
TableCell, TableContainer, TableHead,
TableContainer, TableHead,
TableRow,
Tooltip
} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IAbilityShort} from "../types/IAbility";
import {getIcon, ModifiersProvidesTable} from "./ModifiersProvideTable";
import {IMod} from "../types/Imod";
@ -26,6 +27,7 @@ import DpsTable from "./DpsTable";
import {StyledAccordion} from "../commons/StyledAccordion";
import {StyledPaper} from "../commons/StyledPaper";
import {styled} from "@mui/material/styles";
import {StyledTableCell} from "../commons/StyledTableCell";
interface DeathExpProps {
@ -34,6 +36,9 @@ interface DeathExpProps {
}
function DeathExplosion(props: DeathExpProps) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const deathExplosion = props.deathExplosion
const chanceTotalNotZero = deathExplosion.globalChance * deathExplosion.chance != 0
@ -41,15 +46,15 @@ function DeathExplosion(props: DeathExpProps) {
return chanceTotalNotZero ?
<div className='addon-research-accordion' id='death-explosion'><StyledAccordion>
<AccordionSummary
sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content"
>
<span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
Death Explosion
</span>
</AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}>
<AccordionDetails sx={{color: textColor}}>
<Grid2 container spacing={2}>
<Grid2 size={{xs: 12, md: 4}}>
<TableContainer component={StyledPaper} elevation={0}>
@ -58,18 +63,18 @@ function DeathExplosion(props: DeathExpProps) {
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Chance</TableCell>
<TableCell>{deathExplosion.globalChance * deathExplosion.chance}%</TableCell>
<StyledTableCell component="th" scope="row" >Chance</StyledTableCell>
<StyledTableCell>{deathExplosion.globalChance * deathExplosion.chance}%</StyledTableCell>
</TableRow>
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" >Damage radius</TableCell>
<TableCell>{deathExplosion.damageRadius}</TableCell>
<StyledTableCell component="th" scope="row" >Damage radius</StyledTableCell>
<StyledTableCell>{deathExplosion.damageRadius}</StyledTableCell>
</TableRow>
<TableRow sx={{'&:last-child td, &:last-child th': {border: 0}}}>
<TableCell component="th" scope="row" >Throw force</TableCell>
<TableCell>{deathExplosion.throwForceMin} - {deathExplosion.throwForceMax}</TableCell>
<StyledTableCell component="th" scope="row" >Throw force</StyledTableCell>
<StyledTableCell>{deathExplosion.throwForceMin} - {deathExplosion.throwForceMax}</StyledTableCell>
</TableRow>
</TableBody>
</Table>

35
src/classes/DpsTable.tsx
View File

@ -1,11 +1,8 @@
import React from "react";
import ArmorTypeNames from "../types/ArmorTypeValues";
import {
styled,
Table,
TableBody,
TableCell,
tableCellClasses,
TableContainer,
TableHead,
TableRow
@ -14,27 +11,10 @@ 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 StyledTableCell = styled(TableCell)(({theme}) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
fontWeight: 700,
marginRight: 'auto',
marginLeft: 'auto',
paddingLeft: 10,
borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
textAlign: 'center',
color: '#dee2e6',
paddingRight: 18,
paddingLeft: 10,
},
}));
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)
@ -153,10 +133,8 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}}
src="/images/ARM_Morale.webp"/>
<div style={{width: 20, fontSize: 12, height: 50}}>
<i>Morale</i></div>
<StyledTableCell><ArmorType
name='Morale damage'/>
</StyledTableCell>
</TableRow>
</TableHead>
@ -207,10 +185,9 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
<StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}}
src="/images/ARM_Morale.webp"/>
<div style={{width: 20, fontSize: 12, height: 50}}>
<i>Morale</i></div>
<StyledTableCell>
<ArmorType
name='Morale damage'/>
</StyledTableCell>
</TableRow>
</TableHead>

17
src/classes/ModifiersProvideTable.tsx
View File

@ -1,5 +1,6 @@
import {Paper, Table, TableCell, TableContainer, TableRow} from "@mui/material";
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IModifier} from "../types/IModifier";
import {IconUrl} from "../core/api";
import {Irace} from "../types/Irace";
@ -142,6 +143,9 @@ function getChangeDescription(ref: String, v: number) {
}
export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
let noWeaponMods = props.modifiers.filter(m => !m.reference.includes("default_weapon_modifier_hardpoint"))
@ -152,8 +156,8 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModName(m.reference)}</TableCell>
<TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
<TableCell component="th" scope="row" sx={{color: textColor}}>{getModName(m.reference)}</TableCell>
<TableCell component="th" scope="row" sx={{color: textColor}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
</TableRow>
)}
</Table>
@ -162,6 +166,9 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
}
export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
let mods = props.modifiers
@ -237,9 +244,9 @@ export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
<TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}}
>
<TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getTarget(m.target)}</TableCell>
<TableCell component="th" scope="row" sx={{color: '#dee2e6', minWidth: 120}}>{getModName(m.reference)}</TableCell>
<TableCell component="th" scope="row" sx={{color: '#dee2e6'}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
<TableCell component="th" scope="row" sx={{color: textColor}}>{getTarget(m.target)}</TableCell>
<TableCell component="th" scope="row" sx={{color: textColor, minWidth: 120}}>{getModName(m.reference)}</TableCell>
<TableCell component="th" scope="row" sx={{color: textColor}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
{m.maxLifeTime !== undefined && m.maxLifeTime > 0 &&
<span><img style={{verticalAlign: "top"}} src='/images/Time_icon.webp'/>{m.maxLifeTime}s
</span>}

34
src/classes/Required.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IBuildingShort} from "../types/IBuildingShort";
import {IBuildingAddonShort} from "../types/IBuilding";
import {IconUrl} from "../core/api";
@ -14,6 +15,9 @@ interface IRequiredProps{
}
function Required (props: IRequiredProps) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
function renderRequirementGlobalAddons(rgas: IBuildingAddonShort[],) {
@ -115,20 +119,20 @@ function Required (props: IRequiredProps) {
return (
<div style={{color: '#dee2e6'}}>
<h4 style={{color: '#dee2e6', fontWeight: 700}}>Required: </h4>
<div style={{color: textColor}}>
<h4 style={{color: textColor, fontWeight: 700}}>Required: </h4>
{requirement.requiredTotalPop !== undefined && requirement.requiredTotalPop !== null &&
<div style={{color: '#dee2e6'}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
<div style={{color: textColor}}>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
src="/images/Resource_orksquadcap.gif"/>&nbsp;
{requirement.requiredTotalPop}</div>
}
{requirement.mobBonus !== null && requirement.mobBonus !== undefined &&
<div style={{color: '#dee2e6'}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
<div style={{color: textColor}}>&nbsp; Mob requirement: <img style={{verticalAlign: "top", height: 25}}
src="/images/Mob_bonus.gif"/>&nbsp;
{requirement.mobBonus.mobvalueRequired} in radius {requirement.mobBonus.proximityRequired}</div>
}
{requirement.requireAddon !== null &&
<div style={{color: '#dee2e6'}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
<div style={{color: textColor}}>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
src={IconUrl + requirement.requireAddon.icon.replaceAll('\\', '/')}/>&nbsp;
<StyledLink href={`/mod/${props.modId}/race/${props.raceId}/building/${requirement.requireAddon.buildingId}#addon-${requirement.requireAddon.id}`}>
{requirement.requireAddon.name}
@ -137,26 +141,26 @@ function Required (props: IRequiredProps) {
</div>
}
{requirement.requirementAddonExclusive != null &&
<div style={{color: '#dee2e6'}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
<div style={{color: textColor}}>{renderRequiremenAddonExclusive(requirement.requirementAddonExclusive,)}</div>}
{requirement.requirementBuildings.map(b =>
<div key={b.id} style={{color: '#dee2e6'}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
<div key={b.id} style={{color: textColor}}>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
src={IconUrl + b.icon.replaceAll('\\', '/')}/>&nbsp;
<StyledLink href= {'/mod/'+ props.modId +'/race/'+ props.raceId +'/building/' + b.id + "/"}>{b.name}</StyledLink></div>)
}
{requirement.requirementResearches.length !== 0 &&
<div style={{color: '#dee2e6'}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
<div style={{color: textColor}}>{renderRequirementResearches(requirement.requirementResearches,)}</div>}
{requirement.requirementSquads.length !== 0 &&
<div style={{color: '#dee2e6'}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
<div style={{color: textColor}}>{renderRequirementSquads(requirement.requirementSquads,)}</div>}
{requirement.requirementResearchesEither.length !== 0 &&
<div style={{color: '#dee2e6'}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
<div style={{color: textColor}}>{renderRequirementResearchesEither(requirement.requirementResearchesEither,)}</div>}
{requirement.requirementBuildingsEither.length !== 0 &&
<div style={{color: '#dee2e6'}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
<div style={{color: textColor}}>{renderRequirementBuildingEither(requirement.requirementBuildingsEither,)}</div>}
{requirement.requirementStructureExclusive != null &&
<div style={{color: '#dee2e6'}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
{requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: '#dee2e6'}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
<div style={{color: textColor}}>{renderRequiremenStructureExclusive(requirement.requirementStructureExclusive,)}</div>}
{requirement.limitByBuilding !== undefined && requirement.limitByBuilding !== null && <div style={{color: textColor}}>{renderLimitPerBuilding(requirement.limitByBuilding)}</div>}
{requirement.requirementsGlobalAddons.length !== 0 &&
<div style={{color: '#dee2e6'}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
<div style={{color: '#dee2e6'}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
<div style={{color: textColor}}>{renderRequirementGlobalAddons(requirement.requirementsGlobalAddons,)}</div>}
<div style={{color: textColor}}>{renderRequirementOwnership(requirement.requiredOwnership)}</div>
</div>
)
}

10
src/classes/Sergeant.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import {useTheme} from "@mui/material/styles";
import {ISergeant, IShortWeapon} from "../types/IUnit";
import {Grid2, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
@ -6,7 +7,7 @@ import ArmorType from "./ArmorType";
import WeaponSlot from "./WeaponSlot";
import Vision from "./Vision";
import {IMod} from "../types/Imod";
import {renderAffectedResearches} from "./building/Research";
import {AffectedResearches} from "./building/Research";
import {Irace} from "../types/Irace";
import Required from "./Required";
import {ModifiersProvidesTable} from "./ModifiersProvideTable";
@ -30,6 +31,9 @@ export interface SergeantProps {
}
const Sergeant = (props: SergeantProps) => {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const sergeant = props.sergeant
@ -47,7 +51,7 @@ const Sergeant = (props: SergeantProps) => {
})
return (
<div style={{color: '#dee2e6'}}>
<div style={{color: textColor}}>
<Grid2 container spacing={2}>
<Grid2 size= {{xs: 12, md: 4}}>
<TableContainer component={StyledPaper} elevation={0}>
@ -189,7 +193,7 @@ const Sergeant = (props: SergeantProps) => {
</Grid2>
}
<Grid2 size={12}>
{renderAffectedResearches(sergeant.affectedResearches, props.mod.id, props.race.id)}
<AffectedResearches researches={sergeant.affectedResearches} modId={props.mod.id} raceId={props.race.id} />
</Grid2>
</Grid2>
<b className="hotkey" >Hotkey: {sergeant.hotkey}</b>

18
src/classes/UnitsTable.tsx
View File

@ -9,10 +9,10 @@ import {StyledPaper} from "../commons/StyledPaper";
const StyledTable = styled(Table)(({ theme }) => ({
'& .MuiTableCell-head': {
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
fontWeight: 700,
fontSize: '1rem',
borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.2)'}`,
},
'& .MuiTableCell-body': {
color: theme.palette.text.primary,
@ -20,7 +20,7 @@ const StyledTable = styled(Table)(({ theme }) => ({
fontSize: '0.9rem',
},
'& .MuiTableRow-hover:hover': {
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(233, 69, 96, 0.08)',
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)',
},
}));
@ -28,7 +28,7 @@ const StyledHeaderLink = styled(StyledLink)(({ theme }) => ({
fontWeight: 700,
fontSize: '1.1rem',
'&:hover': {
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
},
}));
@ -95,11 +95,11 @@ export default function UnitsTable(prop: {modId: number}) {
return 3;
case 'Demon Medium':
return 4;
case 'Infantry Heavy Medium':
case 'Infantry H.Med.':
return 5;
case 'Infantry Heavy High':
case 'Infantry H.High':
return 6;
case 'Commander':
case 'Infantry Com.':
return 7;
case 'Vehicle Low':
return 8;
@ -109,7 +109,7 @@ export default function UnitsTable(prop: {modId: number}) {
return 10;
case 'Demon High':
return 11;
case 'Air':
case 'Vehicle Air':
return 12;
case 'Building Low':
return 13;
@ -131,7 +131,7 @@ export default function UnitsTable(prop: {modId: number}) {
}
function generateRaceUnitTable(racesUnitsPart: IRaceUnits[], racesBuildings: IRaceBuildings[]){
return (<StyledPaper elevation={0}>
return (<StyledPaper elevation={0} sx={{borderRadius: 0}}>
{<StyledTable sx={{minWidth: 650}} size="small" aria-label="a dense table">
<TableHead>
<TableRow>

14
src/classes/Weapon.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import {IShortWeapon, IWeapon} from "../types/IUnit";
import {AccordionDetails, AccordionSummary} from "@mui/material";
import {withTheme} from "../core/api";
import {IconUrl} from "../core/api";
import {ExpandMore} from "@mui/icons-material";
import {IMod} from "../types/Imod";
@ -31,18 +32,21 @@ class Weapon extends React.Component<IWeaponProps, any> {
render() {
const theme = (this.props as any).theme;
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const weapon = this.props.weapon
return (
<div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
<AccordionSummary
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content"
id="panel1-header"
sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
>
<span style={{fontSize: 18, color: '#dee2e6', display: 'flex', alignItems: 'center'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
<span style={{fontSize: 18, color: textColor, display: 'flex', alignItems: 'center'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
<img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
weapon.isMeleeWeapon ?
<img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
@ -51,7 +55,7 @@ class Weapon extends React.Component<IWeaponProps, any> {
{this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
</span>
</AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}>
<AccordionDetails sx={{color: textColor}}>
<WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
</AccordionDetails>
</StyledAccordion></div>
@ -59,4 +63,4 @@ class Weapon extends React.Component<IWeaponProps, any> {
}
}
export default Weapon;
export default withTheme(Weapon);

44
src/classes/WeaponFull.tsx
View File

@ -1,21 +1,20 @@
import React, {useEffect, useState} from "react";
import {useTheme} from "@mui/material/styles";
import {AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
import {IWeapon} from "../types/IUnit";
import ArmorTypeNames from "../types/ArmorTypeValues";
import {
AccordionDetails,
Grid2,
styled,
Table,
TableBody,
TableCell,
tableCellClasses,
TableContainer, TableHead,
TableRow, ToggleButton, ToggleButtonGroup
} from "@mui/material";
import ArmorType from "./ArmorType";
import Required from "./Required";
import {renderAffectedResearches} from "./building/Research";
import {AffectedResearches} from "./building/Research";
import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace";
import {IRaceUnits} from "../types/IUnitShort";
@ -23,6 +22,7 @@ import {IRaceBuildings} from "../types/IBuildingShort";
import {ModifiersProvidesTable} from "./ModifiersProvideTable";
import {DescriptionBox} from "../commons/DescriptionBox";
import {StyledPaper} from "../commons/StyledPaper";
import {StyledTableCell} from "../commons/StyledTableCell";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
interface IWeaponFull {
@ -31,29 +31,15 @@ interface IWeaponFull {
}
export default function WeaponFull(props: {weaponId: number, isDefault: Boolean, mod: IMod, race: Irace, haveReinforceMenu: Boolean}) {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const [weaoponFull, setWeaponFull] = useState<IWeaponFull>({
currentTable: "dps",
weapon: undefined,
});
const StyledTableCell = styled(TableCell)(({theme}) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
marginRight: 'auto',
marginLeft: 'auto',
paddingLeft: 10,
borderBottom: `2px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)'}`,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
textAlign: 'center',
color: '#dee2e6',
paddingRight: 18,
paddingLeft: 10,
},
}));
useEffect(() => {
fetch(WeaponUrl + "/" + props.mod.id + "/" + props.weaponId)
@ -137,7 +123,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
return (
<div style={{color: '#dee2e6'}}>
<div style={{color: textColor}}>
<Grid2 container spacing={2}>
{!props.isDefault && <Grid2 size={12}>
<DescriptionBox>
@ -248,8 +234,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
onChange={handleChange}
sx={{ mb: 2 }}
>
<ToggleButton size="small" value="dps" sx={{ color: '#dee2e6', '&.Mui-selected': { borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' } }}>Dps</ToggleButton>
<ToggleButton size="small" value="one hit" sx={{ color: '#dee2e6', '&.Mui-selected': {borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' } }}>One hit average damage</ToggleButton>
<ToggleButton size="small" value="dps" sx={{ color: textColor, '&.Mui-selected': { borderColor: textColor, color: textColor, backgroundColor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)' } }}>Dps</ToggleButton>
<ToggleButton size="small" value="one hit" sx={{ color: textColor, '&.Mui-selected': {borderColor: textColor, color: textColor, backgroundColor: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)' } }}>One hit average damage</ToggleButton>
</ToggleButtonGroup>
<TableContainer>
{ props.mod !== undefined && props.mod.technicalName === 'UltimateApocalypse' ?
@ -313,7 +299,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}}
src="/images/ARM_Morale.webp"/>
<div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
<div style={{width: 20, fontSize: 12, height: 50, color: textColor}}>
<i>Morale</i></div>
</StyledTableCell>
</TableRow>
@ -365,10 +351,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
<StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}}
src="/images/ARM_Morale.webp"/>
<div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
<i>Morale</i></div>
<StyledTableCell><ArmorType
name='Morale damage'/>
</StyledTableCell>
</TableRow>
</TableHead>
@ -399,7 +383,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
</Grid2>
{weapon.modifiers.length > 0 && <Grid2 size={12}>
<h3 style={{color: '#dee2e6', fontWeight: 700}}>Modifiers</h3>
<h3 style={{color: textColor, fontWeight: 700}}>Modifiers</h3>
<ModifiersProvidesTable modifiers={weapon.modifiers} modId={props.mod.id} race={props.race} affectedData={null}/>
</Grid2>}
{weapon.requirements !== null && !props.isDefault && props.haveReinforceMenu &&
@ -407,7 +391,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
<Required requirement={weapon.requirements} modId={props.mod.id} raceId={props.race.id}/>
</Grid2>}
<Grid2 size={12}>
{renderAffectedResearches(weapon.affectedResearches, props.mod.id, props.race.id)}
<AffectedResearches researches={weapon.affectedResearches} modId={props.mod.id} raceId={props.race.id} />
</Grid2>
</Grid2>
{!props.isDefault && props.haveReinforceMenu && <b className="hotkey" >Hotkey: {weapon.hotkey}</b>}

12
src/classes/building/BuildingAddon.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import {useTheme} from "@mui/material/styles";
import {
AccordionDetails,
AccordionSummary,
@ -29,6 +30,9 @@ interface IBuildingAddonProps {
}
function BuildingAddon(props: IBuildingAddonProps){
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const addon = props.addon
const building = props.building
@ -37,16 +41,16 @@ function BuildingAddon(props: IBuildingAddonProps){
return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
<AccordionSummary
sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content"
>
<span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
<img className="sergeantIcon" src={getIcon(addon.icon)}/>
&nbsp; {addon.name}
</span>
</AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}>
<AccordionDetails sx={{color: textColor}}>
<Grid2 container spacing={2}>
<Grid2 size={{xs: 12, md: 4}}>
<TableContainer component={StyledPaper} elevation={0}>

34
src/classes/building/Research.tsx
View File

@ -13,24 +13,13 @@ import {
} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import {getIcon, ModifiersProvidesTable} from "../ModifiersProvideTable";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
import Required from "../Required";
import React from "react";
import {useTheme} from "@mui/material/styles";
import {IBuilding} from "../../types/IBuilding";
import {IResearchShort} from "../../types/IResearchShort";
import ResearchFull from "./ResearchFull";
import {StyledAccordion} from "../../commons/StyledAccordion";
import {styled} from "@mui/material/styles";
const StyledLink = styled('a')(({ theme }) => ({
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
textDecoration: 'none',
'&:hover': {
color: theme.palette.mode === 'dark' ? '#cccccc' : '#ff6b6b',
textDecoration: 'underline',
},
}));
import {StyledLink} from "../../commons/StyledLink";
interface IResearchProps {
research: IResearchShort,
@ -39,29 +28,36 @@ interface IResearchProps {
}
function Research(props: IResearchProps){
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const research = props.research
const building = props.building
return <div className='addon-research-accordion' id={"research-" + research.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
<AccordionSummary
sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content"
>
<span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
<img className="sergeantIcon" src={getIcon(research.icon)}/>
&nbsp; {research.name}
</span>
</AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}>
<AccordionDetails sx={{color: textColor}}>
<ResearchFull id={research.id} building={building}/>
</AccordionDetails>
</StyledAccordion></div>
}
export function renderAffectedResearches(researches: IResearchShort[], modId: number, raceId: string) {
export function AffectedResearches(props: { researches: IResearchShort[], modId: number, raceId: string }) {
const { researches, modId, raceId } = props;
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
function researchLink(rs: IResearchShort) {
return <span><img style={{verticalAlign: "top", height: 25}}
@ -71,7 +67,7 @@ export function renderAffectedResearches(researches: IResearchShort[], modId: nu
</StyledLink></span>
}
return <div style={{color: '#dee2e6'}}> {researches.map(rs =>
return <div style={{color: textColor}}> {researches.map(rs =>
rs.buildingId == null ? <span key={rs.id}></span> :
<span key={rs.id}>Research affect: {researchLink(rs)}<br/></span>
)}</div>

25
src/commons/BackButton.tsx
View File

@ -1,14 +1,17 @@
import {Button, Link} from "@mui/material";
import {styled} from '@mui/material/styles';
export const BackButton = styled(Button)(({ theme }) => ({
marginBottom: theme.spacing(3),
color: '#FFD700',
borderColor: 'rgba(255, 215, 0, 0.5)',
textTransform: 'none',
fontWeight: 600,
'&:hover': {
borderColor: '#FFD700',
backgroundColor: 'rgba(255, 215, 0, 0.1)',
},
}));
export const BackButton = styled(Button)(({ theme }) => {
const isDark = theme.palette.mode === 'dark';
return {
marginBottom: theme.spacing(3),
color: isDark ? '#FFD700' : '#1976d2',
borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
textTransform: 'none',
fontWeight: 600,
'&:hover': {
borderColor: isDark ? '#FFD700' : '#1976d2',
backgroundColor: isDark ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
},
};
});

4
src/commons/StyledLink.tsx
View File

@ -2,11 +2,11 @@ import {Link} from "@mui/material";
import {styled} from '@mui/material/styles';
export const StyledLink = styled(Link)(({ theme }) => ({
color: theme.palette.mode === 'dark' ? '#abc3ff' : '#e94560BB',
color: theme.palette.mode === 'dark' ? '#abc3ff' : '#1976d2',
textDecoration: 'none',
transition: 'all 0.2s ease',
'&:hover': {
color: theme.palette.mode === 'dark' ? '#ffffff' : '#ff6b6bBB',
color: theme.palette.mode === 'dark' ? '#ffffff' : '#1565c0',
textDecoration: 'underline',
},
}));

2
src/commons/StyledPaper.tsx
View File

@ -12,7 +12,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
color: theme.palette.text.primary,
},
'& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
fontWeight: 600,
},
}));

22
src/commons/StyledTableCell.tsx Normal file
View File

@ -0,0 +1,22 @@
import {styled, TableCell, tableCellClasses} from "@mui/material";
export const StyledTableCell = styled(TableCell)(({theme}) => {
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
return {
[`&.${tableCellClasses.head}`]: {
backgroundColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
marginRight: 'auto',
marginLeft: 'auto',
paddingLeft: 10,
borderBottom: `2px solid ${isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.2)'}`,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
textAlign: 'center',
color: textColor,
paddingRight: 18,
paddingLeft: 10,
},
};
});

8
src/pages/BuildingPage.tsx
View File

@ -28,7 +28,7 @@ import {IBuilding} from "../types/IBuilding";
import Vision from "../classes/Vision";
import BuildingAddon from "../classes/building/BuildingAddon";
import {IUnitShort} from "../types/IUnitShort";
import Research, {renderAffectedResearches} from "../classes/building/Research";
import Research, {AffectedResearches} from "../classes/building/Research";
import Required from "../classes/Required";
import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
import Ability from "../classes/Ability";
@ -57,7 +57,7 @@ const StatsPaper = styled(Paper)(({ theme }) => ({
color: theme.palette.text.primary,
},
'& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
fontWeight: 600,
},
}));
@ -83,7 +83,7 @@ const BuildingSubtitle = styled(Typography)(({ theme }) => ({
const UnitLink = styled(Link)(({ theme }) => ({
color: theme.palette.text.primary,
textDecoration: 'none',
'&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' },
'&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' },
}));
const UnitListItem = styled(ListItem)(({ theme }) => ({
@ -288,7 +288,7 @@ function Building(building: IBuilding, mod: IMod, theme: Theme) {
}).map(h => <WeaponSlot race={building.race} mod={mod} unitWeapons={mapBuildingWeapons.get(h)} hardpoint={h}/>)}
</Grid2>
<Grid2 size={12}>
{renderAffectedResearches(building.affectedResearches, mod.id, building.race.id)}
<AffectedResearches researches={building.affectedResearches} modId={mod.id} raceId={building.race.id} />
</Grid2>
<b className="hotkey" >Hotkey: {building.hotkey}</b>
</Grid2>

14
src/pages/ModPage.tsx
View File

@ -84,15 +84,13 @@ class ModPage extends React.Component<any, ModPageState> {
mb: 1,
WebkitBackgroundClip: isDark ? 'text' : 'initial',
WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
color: isDark ? '#dee2e6' : '#000000',
color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
}}>
{this.state.mod.name}
</Typography>
<Typography variant="h6" sx={{
color: this.props.theme.palette.text.secondary,
fontWeight: 500,
}}>
({this.state.mod.version})
{this.state.mod.name} <Box component="span" sx={{
fontSize: '0.5em',
color: this.props.theme.palette.text.secondary,
fontWeight: 500,
}}>({this.state.mod.version})</Box>
</Typography>
<Box>

61
src/pages/ModsPage.tsx
View File

@ -62,13 +62,13 @@ const ModCard = styled(Card)(({ theme }) => ({
height: '3px',
background: theme.palette.mode === 'dark'
? 'linear-gradient(90deg, #dee2e6 0%, #cccccc 100%)'
: 'linear-gradient(90deg, #e94560 0%, #ff6b6b 100%)',
: 'linear-gradient(90deg, #000000 0%, #333333 100%)',
transform: 'scaleX(0)',
transition: 'transform 0.3s ease',
},
'&:hover': {
boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(233, 69, 96, 0.2)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
'&::before': {
transform: 'scaleX(1)',
},
@ -87,8 +87,8 @@ const VersionLink = styled(NavLink)(({ theme }) => ({
transition: 'all 0.2s ease',
border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
'&:hover': {
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
},
}));
@ -97,10 +97,10 @@ const ModTitle = styled(Typography)(({ theme }) => ({
mb: 1,
background: theme.palette.mode === 'dark'
? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
: 'linear-gradient(135deg, #000000 0%, #333333 100%)',
: 'none',
WebkitBackgroundClip: theme.palette.mode === 'dark' ? 'text' : 'initial',
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'initial',
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#000000',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
}));
const ModDescription = styled(Typography)(({ theme }) => ({
@ -109,8 +109,8 @@ const ModDescription = styled(Typography)(({ theme }) => ({
}));
const VersionsChip = styled(Chip)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(233, 69, 96, 0.2)',
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#ff6b6b',
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
fontWeight: 600,
}));
@ -140,21 +140,24 @@ const BetaVersionsLabel = styled(Typography)(({ theme }) => ({
mb: 1,
}));
const OpenLatestButton = styled(Button)(({ theme }) => ({
width: '100%',
color: '#FFD700',
borderColor: 'rgba(255, 215, 0, 0.5)',
fontWeight: 600,
borderRadius: '10px',
textTransform: 'none',
fontSize: '1rem',
py: 1.5,
'&:hover': {
borderColor: '#FFD700',
backgroundColor: 'rgba(255, 215, 0, 0.1)',
boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
},
}));
const OpenLatestButton = styled(Button)(({ theme }) => {
const isDark = theme.palette.mode === 'dark';
return {
width: '100%',
color: isDark ? '#FFD700' : '#1976d2',
borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
fontWeight: 600,
borderRadius: '10px',
textTransform: 'none',
fontSize: '1rem',
py: 1.5,
'&:hover': {
borderColor: isDark ? '#FFD700' : '#1976d2',
backgroundColor: isDark ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
boxShadow: isDark ? '0 8px 20px rgba(255, 215, 0, 0.2)' : '0 8px 20px rgba(25, 118, 210, 0.2)',
},
};
});
interface ModsProps {
mods: IMod[];
@ -254,17 +257,17 @@ function Mods({ mods }: ModsProps) {
state={latest?.id}
sx={{
width: '100%',
color: '#FFD700',
borderColor: 'rgba(255, 215, 0, 0.5)',
color: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
fontWeight: 600,
borderRadius: '10px',
textTransform: 'none',
fontSize: '1rem',
py: 1.5,
'&:hover': {
borderColor: '#FFD700',
backgroundColor: 'rgba(255, 215, 0, 0.1)',
boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)',
borderColor: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
boxShadow: theme.palette.mode === 'dark' ? '0 8px 20px rgba(255, 215, 0, 0.2)' : '0 8px 20px rgba(25, 118, 210, 0.2)',
},
}}
>

67
src/pages/RacePageFast.tsx
View File

@ -35,24 +35,27 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
}));
const UnitCard = styled(Paper)(({ theme }) => ({
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)',
border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`,
borderRadius: '10px',
padding: theme.spacing(1.5, 2),
transition: 'all 0.2s ease',
background: theme.palette.mode === 'dark'
? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
: 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
borderRadius: '16px',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.1)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(233, 69, 96, 0.3)',
boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
},
}));
const BuildingCard = styled(UnitCard)(({ theme }) => ({}));
const BuildingCard = styled(UnitCard)(({ theme }) => ({
padding: theme.spacing(1),
}));
const UnitLink = styled(Link)(({ theme }) => ({
color: theme.palette.text.primary,
textDecoration: 'none',
display: 'block',
'&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560' }
'&:hover': { color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' }
}));
const LoadingText = styled(Typography)(({ theme }) => ({
@ -75,12 +78,18 @@ function Unit(unit: IUnitShort, modId: number, raceId: String, theme: Theme) {
<UnitLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
<ListItem sx={{
color: theme.palette.text.primary,
padding: '6px 12px',
background: bgColor,
borderRadius: '8px',
border: `1px solid ${borderColor}`,
transition: 'all 0.2s ease',
'&:hover': { background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(233, 69, 96, 0.1)', borderColor: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(233, 69, 96, 0.3)' }
padding: '1.5rem 2rem',
marginBottom: '0.5rem',
background: isDark
? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
: 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
borderRadius: '16px',
border: `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
boxShadow: isDark ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(0, 0, 0, 0.2)',
borderColor: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
}
}}>
{unit.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
{unit.name}
@ -95,14 +104,14 @@ function UnitSmall(unit: IUnitShort, modId: number, raceId: String) {
var unitName = ""
if (unit.name.length > 21) {
unitName = unit.name.substring(0, 20) + "...";
unitName = unit.name.substring(0, 19) + "...";
} else {
unitName = unit.name;
}
return (<StyledLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} >
{unit.icon && <img className="unitIconSmall" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
<span style={{fontSize: 14}}>{unitName}</span>
&nbsp;<span style={{fontSize: 14}}>{unitName}</span>
{unit.canDetect && <span>&nbsp;<img
src="/images/DETECT_YES.webp"/></span>}<br/></StyledLink>)
}
@ -114,14 +123,12 @@ function Building(building: IBuildingShort, modId: number, raceId: String, theme
<Link href={"/mod/" + modId + "/race/" + raceId + "/building/" + building.id} sx={{
textDecoration: 'none',
display: 'block',
'&:hover': { color: isDark ? '#dee2e6' : '#e94560' }
'&:hover': { color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' }
}}>
<BuildingCard elevation={0}>
<ListItem sx={{
padding: '8px 12px',
}}>
<ListItem sx={{}}>
{building.icon && <img className="unitIcon" src={IconUrl + building.icon.replaceAll('\\', '/')}/>}
<StyledLink>{building.name}</StyledLink>
&nbsp;<StyledLink>{building.name}</StyledLink>
{building.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
src="/images/DETECT_YES.webp"/></span>}
</ListItem>
@ -208,27 +215,27 @@ class Units extends React.Component<UnitsProps & { theme: Theme }, UnitsState> {
<Box sx={{ mt: 3 }}>
<Accordion sx={accordionSx}>
<AccordionSummary
expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : '#000000'}}/>}
expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)'}}/>}
aria-controls="units-accordion"
id="units-accordion"
sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
>
<SectionTitle sx={{ mb: 0, display: 'flex', alignItems: 'center' }}>All units</SectionTitle>
</AccordionSummary>
<AccordionDetails>
<Grid2 container spacing={2}>
<Grid2 size={{xs: 12, md: 4}}>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Infantry</Typography>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Infantry</Typography>
{this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</Grid2>
<Grid2 size={{xs: 12, md: 4}}>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Tech</Typography>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Tech</Typography>
<List>
{this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</List>
</Grid2>
<Grid2 size={{xs: 12, md: 4}}>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : '#000000', fontWeight: 600, mb: 2 }}>Support</Typography>
<Typography variant="h6" sx={{ color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', fontWeight: 600, mb: 2 }}>Support</Typography>
<List>
{this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</List>
@ -263,6 +270,8 @@ class RacePageFast extends React.Component<any, RacePageState> {
mod: modData
});
document.title = `${modData.name} (${modData.version})`;
const response = await fetch(AvailableRacesPart + "/" + this.props.match.params.raceId);
const racesData: Irace = await response.json();
@ -294,10 +303,10 @@ class RacePageFast extends React.Component<any, RacePageState> {
mb: 1,
background: isDark
? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
: 'linear-gradient(135deg, #000000 0%, #333333 100%)',
: 'none',
WebkitBackgroundClip: isDark ? 'text' : 'initial',
WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
color: isDark ? '#dee2e6' : '#000000',
color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
}}>
{this.state.race.name}
</Typography>

10
src/pages/UnitPage.tsx
View File

@ -29,7 +29,7 @@ import UnitsTable from "../classes/UnitsTable";
import {IMod} from "../types/Imod";
import Vision from "../classes/Vision";
import Required from "../classes/Required";
import {renderAffectedResearches} from "../classes/building/Research";
import {AffectedResearches} from "../classes/building/Research";
import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
import Ability from "../classes/Ability";
import DeathExplosion from "../classes/DeathExplosion";
@ -55,7 +55,7 @@ const StatsPaper = styled(Paper)(({ theme }) => ({
'&:last-child td, &:last-child th': { border: 0 },
},
'& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#e94560',
color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
fontWeight: 600,
},
}));
@ -132,7 +132,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
const SergeantShort = (props: sergeantProps) => {
return (
<span style={{fontSize: 20, color: isDark ? '#dee2e6' : '#000000', display: 'flex', alignItems: 'center'}}>
<span style={{fontSize: 20, color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', display: 'flex', alignItems: 'center'}}>
{props.icon && <img className="sergeantIcon" src={IconUrl + props.icon.replaceAll('\\', '/')}/> }
&nbsp; {props.name}
{props.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
@ -324,7 +324,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
{unit.sergeants.map(s =>
<SergeantAccordion key={s.id}>
<AccordionSummary
sx={{color: isDark ? '#dee2e6' : '#000000', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}>
<SergeantShort name={s.name} icon={s.icon} canDetect={s.detectRadius > 0}/>
</AccordionSummary>
<AccordionDetails sx={{color: theme.palette.text.primary}}>
@ -366,7 +366,7 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
</Grid2>
}
<Grid2 size={12}>
{renderAffectedResearches(unit.affectedResearches, mod.id, unit.race.id)}
<AffectedResearches researches={unit.affectedResearches} modId={mod.id} raceId={unit.race.id} />
</Grid2>
</Grid2>