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

12
src/classes/Ability.tsx
View File

@ -1,6 +1,7 @@
import {AccordionDetails, AccordionSummary} from "@mui/material"; import {AccordionDetails, AccordionSummary} from "@mui/material";
import {ExpandMore} from "@mui/icons-material"; import {ExpandMore} from "@mui/icons-material";
import React from "react"; import React from "react";
import {useTheme} from "@mui/material/styles";
import {IAbilityShort} from "../types/IAbility"; import {IAbilityShort} from "../types/IAbility";
import {getIcon} from "./ModifiersProvideTable"; import {getIcon} from "./ModifiersProvideTable";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
@ -15,23 +16,26 @@ interface IAbilityProps {
} }
function Ability(props: 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 const ability = props.ability
return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}> return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
<AccordionSummary <AccordionSummary
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' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>} expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content" 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)}/>} {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', '')} &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> <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> ({ability.activationType})</i>
</span> </span>
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}> <AccordionDetails sx={{color: textColor}}>
<AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} /> <AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
</AccordionDetails> </AccordionDetails>
</StyledAccordion></div> </StyledAccordion></div>

32
src/classes/AbilityFull.tsx
View File

@ -1,21 +1,19 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
import {useTheme} from "@mui/material/styles";
import {AbilityUrl, AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api"; import {AbilityUrl, AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
import {IWeapon} from "../types/IUnit"; import {IWeapon} from "../types/IUnit";
import ArmorTypeNames from "../types/ArmorTypeValues"; import ArmorTypeNames from "../types/ArmorTypeValues";
import { import {
AccordionDetails, AccordionDetails,
Grid2, Grid2,
styled,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
tableCellClasses,
TableContainer, TableHead, TableContainer, TableHead,
TableRow, ToggleButton, ToggleButtonGroup TableRow, ToggleButton, ToggleButtonGroup
} from "@mui/material"; } from "@mui/material";
import ArmorType from "./ArmorType"; import ArmorType from "./ArmorType";
import Required from "./Required"; import Required from "./Required";
import {renderAffectedResearches} from "./building/Research";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace"; import {Irace} from "../types/Irace";
import {IRaceUnits} from "../types/IUnitShort"; import {IRaceUnits} from "../types/IUnitShort";
@ -28,36 +26,22 @@ import AbilitySpawnedObject from "./AbilitySpawnedObject";
import DpsTable from "./DpsTable"; import DpsTable from "./DpsTable";
import {DescriptionBox} from "../commons/DescriptionBox"; import {DescriptionBox} from "../commons/DescriptionBox";
import {StyledPaper} from "../commons/StyledPaper"; import {StyledPaper} from "../commons/StyledPaper";
import {StyledTableCell} from "../commons/StyledTableCell";
interface IAbilityFullState { interface IAbilityFullState {
ability?: IAbilityFill; ability?: IAbilityFill;
} }
export default function AbilityFull(props: { abilityId?: number, mod: IMod, race: Irace, isChild?: boolean, abilityFull?: 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>({ const [abilityFull, setAbilityFull] = useState<IAbilityFullState>({
ability: undefined, 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(() => { useEffect(() => {
if(props.abilityFull !== undefined){ 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) const showTargetTable = !showDpsTable && ability.abilityEnvironment == null && (ability.targetFilter.length > 0 || ability.radius !== 0)
return ( return (
<div style={{color: '#dee2e6'}}> <div style={{color: textColor}}>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
<Grid2 size={{xs: 12}}> <Grid2 size={{xs: 12}}>
{ability.initialDelayTime !== undefined && props.isChild === true && {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"}} <img style={{verticalAlign: "top"}}
src="/images/Time_icon.webp"/></center></b>} src="/images/Time_icon.webp"/></center></b>}
</Grid2> </Grid2>
@ -201,7 +185,7 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
</Grid2> </Grid2>
{showDpsTable ? {showDpsTable ?
<Grid2 size={12}> <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} <DpsTable mod={props.mod} minDamageValue={ability.minDamageValue} minDamage={ability.minDamage} maxDamage={ability.maxDamage} piercings={ability.piercings} targetFilter={ability.targetFilter} moraleDamage={ability.moraleDamage}
/> />
</Grid2> : showTargetTable ? </Grid2> : showTargetTable ?

37
src/classes/AbilitySpawnedObject.tsx
View File

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

27
src/classes/DeathExplosion.tsx
View File

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

35
src/classes/DpsTable.tsx
View File

@ -1,11 +1,8 @@
import React from "react"; import React from "react";
import ArmorTypeNames from "../types/ArmorTypeValues"; import ArmorTypeNames from "../types/ArmorTypeValues";
import { import {
styled,
Table, Table,
TableBody, TableBody,
TableCell,
tableCellClasses,
TableContainer, TableContainer,
TableHead, TableHead,
TableRow TableRow
@ -14,27 +11,10 @@ import ArmorType from "./ArmorType";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
import {IPiercing} from "../types/IPiercing"; import {IPiercing} from "../types/IPiercing";
import {IArmorType} from "../types/IArmorType"; 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 }) { 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 { function getPiercingK(armorType: string): number|null {
if(props.targetFilter.length > 0 && props.targetFilter.find(tf => tf.name == armorType) === undefined) return 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) 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> name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><ArmorType <StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingSuper}/></StyledTableCell> name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}} <StyledTableCell><ArmorType
src="/images/ARM_Morale.webp"/> name='Morale damage'/>
<div style={{width: 20, fontSize: 12, height: 50}}>
<i>Morale</i></div>
</StyledTableCell> </StyledTableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
@ -207,10 +185,9 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell> name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
<StyledTableCell><ArmorType <StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell> name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}} <StyledTableCell>
src="/images/ARM_Morale.webp"/> <ArmorType
<div style={{width: 20, fontSize: 12, height: 50}}> name='Morale damage'/>
<i>Morale</i></div>
</StyledTableCell> </StyledTableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>

17
src/classes/ModifiersProvideTable.tsx
View File

@ -1,5 +1,6 @@
import {Paper, Table, TableCell, TableContainer, TableRow} from "@mui/material"; import {Paper, Table, TableCell, TableContainer, TableRow} from "@mui/material";
import React from "react"; import React from "react";
import {useTheme} from "@mui/material/styles";
import {IModifier} from "../types/IModifier"; import {IModifier} from "../types/IModifier";
import {IconUrl} from "../core/api"; import {IconUrl} from "../core/api";
import {Irace} from "../types/Irace"; import {Irace} from "../types/Irace";
@ -142,6 +143,9 @@ function getChangeDescription(ref: String, v: number) {
} }
export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) { 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")) let noWeaponMods = props.modifiers.filter(m => !m.reference.includes("default_weapon_modifier_hardpoint"))
@ -152,8 +156,8 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
<TableRow <TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}} 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: textColor}}>{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}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}</TableCell>
</TableRow> </TableRow>
)} )}
</Table> </Table>
@ -162,6 +166,9 @@ export function ModifiersProvidesAddonTable(props: IModifiersProvidesTable) {
} }
export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) { 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 let mods = props.modifiers
@ -237,9 +244,9 @@ export function ModifiersProvidesTable(props: IModifiersProvidesResearchTable) {
<TableRow <TableRow
sx={{'&:last-child td, &:last-child th': {border: 0}}} 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: textColor}}>{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: textColor, 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}}>{getModIcon(m.reference)} {getChangeDescription(m.usageType, m.value)}
{m.maxLifeTime !== undefined && m.maxLifeTime > 0 && {m.maxLifeTime !== undefined && m.maxLifeTime > 0 &&
<span><img style={{verticalAlign: "top"}} src='/images/Time_icon.webp'/>{m.maxLifeTime}s <span><img style={{verticalAlign: "top"}} src='/images/Time_icon.webp'/>{m.maxLifeTime}s
</span>} </span>}

34
src/classes/Required.tsx
View File

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

10
src/classes/Sergeant.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import {useTheme} from "@mui/material/styles";
import {ISergeant, IShortWeapon} from "../types/IUnit"; import {ISergeant, IShortWeapon} from "../types/IUnit";
import {Grid2, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material"; import {Grid2, Table, TableBody, TableCell, TableContainer, TableRow, Tooltip, Typography} from "@mui/material";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer"; import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
@ -6,7 +7,7 @@ import ArmorType from "./ArmorType";
import WeaponSlot from "./WeaponSlot"; import WeaponSlot from "./WeaponSlot";
import Vision from "./Vision"; import Vision from "./Vision";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
import {renderAffectedResearches} from "./building/Research"; import {AffectedResearches} from "./building/Research";
import {Irace} from "../types/Irace"; import {Irace} from "../types/Irace";
import Required from "./Required"; import Required from "./Required";
import {ModifiersProvidesTable} from "./ModifiersProvideTable"; import {ModifiersProvidesTable} from "./ModifiersProvideTable";
@ -30,6 +31,9 @@ export interface SergeantProps {
} }
const Sergeant = (props: 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 const sergeant = props.sergeant
@ -47,7 +51,7 @@ const Sergeant = (props: SergeantProps) => {
}) })
return ( return (
<div style={{color: '#dee2e6'}}> <div style={{color: textColor}}>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
<Grid2 size= {{xs: 12, md: 4}}> <Grid2 size= {{xs: 12, md: 4}}>
<TableContainer component={StyledPaper} elevation={0}> <TableContainer component={StyledPaper} elevation={0}>
@ -189,7 +193,7 @@ const Sergeant = (props: SergeantProps) => {
</Grid2> </Grid2>
} }
<Grid2 size={12}> <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>
</Grid2> </Grid2>
<b className="hotkey" >Hotkey: {sergeant.hotkey}</b> <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 }) => ({ const StyledTable = styled(Table)(({ theme }) => ({
'& .MuiTableCell-head': { '& .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, fontWeight: 700,
fontSize: '1rem', 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': { '& .MuiTableCell-body': {
color: theme.palette.text.primary, color: theme.palette.text.primary,
@ -20,7 +20,7 @@ const StyledTable = styled(Table)(({ theme }) => ({
fontSize: '0.9rem', fontSize: '0.9rem',
}, },
'& .MuiTableRow-hover:hover': { '& .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, fontWeight: 700,
fontSize: '1.1rem', fontSize: '1.1rem',
'&:hover': { '&: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; return 3;
case 'Demon Medium': case 'Demon Medium':
return 4; return 4;
case 'Infantry Heavy Medium': case 'Infantry H.Med.':
return 5; return 5;
case 'Infantry Heavy High': case 'Infantry H.High':
return 6; return 6;
case 'Commander': case 'Infantry Com.':
return 7; return 7;
case 'Vehicle Low': case 'Vehicle Low':
return 8; return 8;
@ -109,7 +109,7 @@ export default function UnitsTable(prop: {modId: number}) {
return 10; return 10;
case 'Demon High': case 'Demon High':
return 11; return 11;
case 'Air': case 'Vehicle Air':
return 12; return 12;
case 'Building Low': case 'Building Low':
return 13; return 13;
@ -131,7 +131,7 @@ export default function UnitsTable(prop: {modId: number}) {
} }
function generateRaceUnitTable(racesUnitsPart: IRaceUnits[], racesBuildings: IRaceBuildings[]){ 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"> {<StyledTable sx={{minWidth: 650}} size="small" aria-label="a dense table">
<TableHead> <TableHead>
<TableRow> <TableRow>

14
src/classes/Weapon.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import {IShortWeapon, IWeapon} from "../types/IUnit"; import {IShortWeapon, IWeapon} from "../types/IUnit";
import {AccordionDetails, AccordionSummary} from "@mui/material"; import {AccordionDetails, AccordionSummary} from "@mui/material";
import {withTheme} from "../core/api";
import {IconUrl} from "../core/api"; import {IconUrl} from "../core/api";
import {ExpandMore} from "@mui/icons-material"; import {ExpandMore} from "@mui/icons-material";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
@ -31,18 +32,21 @@ class Weapon extends React.Component<IWeaponProps, any> {
render() { 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 const weapon = this.props.weapon
return ( return (
<div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}> <div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>} expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content" aria-controls="panel1-content"
id="panel1-header" 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('\\', '/')}/> : ( <img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
weapon.isMeleeWeapon ? weapon.isMeleeWeapon ?
<img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> : <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>} {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
</span> </span>
</AccordionSummary> </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}/> <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
</AccordionDetails> </AccordionDetails>
</StyledAccordion></div> </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 React, {useEffect, useState} from "react";
import {useTheme} from "@mui/material/styles";
import {AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api"; import {AvailableBuildings, AvailableUnits, UserUrl, WeaponUrl} from "../core/api";
import {IWeapon} from "../types/IUnit"; import {IWeapon} from "../types/IUnit";
import ArmorTypeNames from "../types/ArmorTypeValues"; import ArmorTypeNames from "../types/ArmorTypeValues";
import { import {
AccordionDetails, AccordionDetails,
Grid2, Grid2,
styled,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
tableCellClasses,
TableContainer, TableHead, TableContainer, TableHead,
TableRow, ToggleButton, ToggleButtonGroup TableRow, ToggleButton, ToggleButtonGroup
} from "@mui/material"; } from "@mui/material";
import ArmorType from "./ArmorType"; import ArmorType from "./ArmorType";
import Required from "./Required"; import Required from "./Required";
import {renderAffectedResearches} from "./building/Research"; import {AffectedResearches} from "./building/Research";
import {IMod} from "../types/Imod"; import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace"; import {Irace} from "../types/Irace";
import {IRaceUnits} from "../types/IUnitShort"; import {IRaceUnits} from "../types/IUnitShort";
@ -23,6 +22,7 @@ import {IRaceBuildings} from "../types/IBuildingShort";
import {ModifiersProvidesTable} from "./ModifiersProvideTable"; import {ModifiersProvidesTable} from "./ModifiersProvideTable";
import {DescriptionBox} from "../commons/DescriptionBox"; import {DescriptionBox} from "../commons/DescriptionBox";
import {StyledPaper} from "../commons/StyledPaper"; import {StyledPaper} from "../commons/StyledPaper";
import {StyledTableCell} from "../commons/StyledTableCell";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer"; import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
interface IWeaponFull { interface IWeaponFull {
@ -31,29 +31,15 @@ interface IWeaponFull {
} }
export default function WeaponFull(props: {weaponId: number, isDefault: Boolean, mod: IMod, race: Irace, haveReinforceMenu: Boolean}) { 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>({ const [weaoponFull, setWeaponFull] = useState<IWeaponFull>({
currentTable: "dps", currentTable: "dps",
weapon: undefined, 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(() => { useEffect(() => {
fetch(WeaponUrl + "/" + props.mod.id + "/" + props.weaponId) fetch(WeaponUrl + "/" + props.mod.id + "/" + props.weaponId)
@ -137,7 +123,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
return ( return (
<div style={{color: '#dee2e6'}}> <div style={{color: textColor}}>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
{!props.isDefault && <Grid2 size={12}> {!props.isDefault && <Grid2 size={12}>
<DescriptionBox> <DescriptionBox>
@ -248,8 +234,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
onChange={handleChange} onChange={handleChange}
sx={{ mb: 2 }} 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="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: '#dee2e6', '&.Mui-selected': {borderColor: '#dee2e6', color: '#dee2e6', backgroundColor: 'rgba(255, 255, 255, 0.15)' } }}>One hit average damage</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> </ToggleButtonGroup>
<TableContainer> <TableContainer>
{ props.mod !== undefined && props.mod.technicalName === 'UltimateApocalypse' ? { props.mod !== undefined && props.mod.technicalName === 'UltimateApocalypse' ?
@ -313,7 +299,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
name={ArmorTypeNames.BuildingSuper}/></StyledTableCell> name={ArmorTypeNames.BuildingSuper}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}} <StyledTableCell><img style={{verticalAlign: "top"}}
src="/images/ARM_Morale.webp"/> 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> <i>Morale</i></div>
</StyledTableCell> </StyledTableCell>
</TableRow> </TableRow>
@ -365,10 +351,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
name={ArmorTypeNames.BuildingMedium}/></StyledTableCell> name={ArmorTypeNames.BuildingMedium}/></StyledTableCell>
<StyledTableCell><ArmorType <StyledTableCell><ArmorType
name={ArmorTypeNames.BuildingHigh}/></StyledTableCell> name={ArmorTypeNames.BuildingHigh}/></StyledTableCell>
<StyledTableCell><img style={{verticalAlign: "top"}} <StyledTableCell><ArmorType
src="/images/ARM_Morale.webp"/> name='Morale damage'/>
<div style={{width: 20, fontSize: 12, height: 50, color: '#dee2e6'}}>
<i>Morale</i></div>
</StyledTableCell> </StyledTableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
@ -399,7 +383,7 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
</Grid2> </Grid2>
{weapon.modifiers.length > 0 && <Grid2 size={12}> {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}/> <ModifiersProvidesTable modifiers={weapon.modifiers} modId={props.mod.id} race={props.race} affectedData={null}/>
</Grid2>} </Grid2>}
{weapon.requirements !== null && !props.isDefault && props.haveReinforceMenu && {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}/> <Required requirement={weapon.requirements} modId={props.mod.id} raceId={props.race.id}/>
</Grid2>} </Grid2>}
<Grid2 size={12}> <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>
</Grid2> </Grid2>
{!props.isDefault && props.haveReinforceMenu && <b className="hotkey" >Hotkey: {weapon.hotkey}</b>} {!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 React from "react";
import {useTheme} from "@mui/material/styles";
import { import {
AccordionDetails, AccordionDetails,
AccordionSummary, AccordionSummary,
@ -29,6 +30,9 @@ interface IBuildingAddonProps {
} }
function BuildingAddon(props: 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 addon = props.addon
const building = props.building const building = props.building
@ -37,16 +41,16 @@ function BuildingAddon(props: IBuildingAddonProps){
return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion> return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
<AccordionSummary <AccordionSummary
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' }}}
expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>} expandIcon={<ExpandMore sx={{color: textColor}}/>}
aria-controls="panel1-content" 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)}/> <img className="sergeantIcon" src={getIcon(addon.icon)}/>
&nbsp; {addon.name} &nbsp; {addon.name}
</span> </span>
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{color: '#dee2e6'}}> <AccordionDetails sx={{color: textColor}}>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
<Grid2 size={{xs: 12, md: 4}}> <Grid2 size={{xs: 12, md: 4}}>
<TableContainer component={StyledPaper} elevation={0}> <TableContainer component={StyledPaper} elevation={0}>

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

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

15
src/commons/BackButton.tsx
View File

@ -1,14 +1,17 @@
import {Button, Link} from "@mui/material"; import {Button, Link} from "@mui/material";
import {styled} from '@mui/material/styles'; import {styled} from '@mui/material/styles';
export const BackButton = styled(Button)(({ theme }) => ({ export const BackButton = styled(Button)(({ theme }) => {
const isDark = theme.palette.mode === 'dark';
return {
marginBottom: theme.spacing(3), marginBottom: theme.spacing(3),
color: '#FFD700', color: isDark ? '#FFD700' : '#1976d2',
borderColor: 'rgba(255, 215, 0, 0.5)', borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
textTransform: 'none', textTransform: 'none',
fontWeight: 600, fontWeight: 600,
'&:hover': { '&:hover': {
borderColor: '#FFD700', borderColor: isDark ? '#FFD700' : '#1976d2',
backgroundColor: 'rgba(255, 215, 0, 0.1)', 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'; import {styled} from '@mui/material/styles';
export const StyledLink = styled(Link)(({ theme }) => ({ export const StyledLink = styled(Link)(({ theme }) => ({
color: theme.palette.mode === 'dark' ? '#abc3ff' : '#e94560BB', color: theme.palette.mode === 'dark' ? '#abc3ff' : '#1976d2',
textDecoration: 'none', textDecoration: 'none',
transition: 'all 0.2s ease', transition: 'all 0.2s ease',
'&:hover': { '&:hover': {
color: theme.palette.mode === 'dark' ? '#ffffff' : '#ff6b6bBB', color: theme.palette.mode === 'dark' ? '#ffffff' : '#1565c0',
textDecoration: 'underline', textDecoration: 'underline',
}, },
})); }));

2
src/commons/StyledPaper.tsx
View File

@ -12,7 +12,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
'& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': { '& .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, 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 Vision from "../classes/Vision";
import BuildingAddon from "../classes/building/BuildingAddon"; import BuildingAddon from "../classes/building/BuildingAddon";
import {IUnitShort} from "../types/IUnitShort"; 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 Required from "../classes/Required";
import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable"; import {ModifiersProvidesTable} from "../classes/ModifiersProvideTable";
import Ability from "../classes/Ability"; import Ability from "../classes/Ability";
@ -57,7 +57,7 @@ const StatsPaper = styled(Paper)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
'& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': { '& .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, fontWeight: 600,
}, },
})); }));
@ -83,7 +83,7 @@ const BuildingSubtitle = styled(Typography)(({ theme }) => ({
const UnitLink = styled(Link)(({ theme }) => ({ const UnitLink = styled(Link)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
textDecoration: 'none', 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 }) => ({ 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}/>)} }).map(h => <WeaponSlot race={building.race} mod={mod} unitWeapons={mapBuildingWeapons.get(h)} hardpoint={h}/>)}
</Grid2> </Grid2>
<Grid2 size={12}> <Grid2 size={12}>
{renderAffectedResearches(building.affectedResearches, mod.id, building.race.id)} <AffectedResearches researches={building.affectedResearches} modId={mod.id} raceId={building.race.id} />
</Grid2> </Grid2>
<b className="hotkey" >Hotkey: {building.hotkey}</b> <b className="hotkey" >Hotkey: {building.hotkey}</b>
</Grid2> </Grid2>

10
src/pages/ModPage.tsx
View File

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

45
src/pages/ModsPage.tsx
View File

@ -62,13 +62,13 @@ const ModCard = styled(Card)(({ theme }) => ({
height: '3px', height: '3px',
background: theme.palette.mode === 'dark' background: theme.palette.mode === 'dark'
? 'linear-gradient(90deg, #dee2e6 0%, #cccccc 100%)' ? 'linear-gradient(90deg, #dee2e6 0%, #cccccc 100%)'
: 'linear-gradient(90deg, #e94560 0%, #ff6b6b 100%)', : 'linear-gradient(90deg, #000000 0%, #333333 100%)',
transform: 'scaleX(0)', transform: 'scaleX(0)',
transition: 'transform 0.3s ease', transition: 'transform 0.3s ease',
}, },
'&:hover': { '&:hover': {
boxShadow: theme.palette.mode === 'dark' ? '0 20px 40px rgba(255, 255, 255, 0.1)' : '0 20px 40px rgba(233, 69, 96, 0.2)', 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(233, 69, 96, 0.3)', borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)',
'&::before': { '&::before': {
transform: 'scaleX(1)', transform: 'scaleX(1)',
}, },
@ -87,8 +87,8 @@ const VersionLink = styled(NavLink)(({ theme }) => ({
transition: 'all 0.2s ease', transition: 'all 0.2s ease',
border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`, border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
'&:hover': { '&:hover': {
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.15)', 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(233, 69, 96, 0.3)', 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, mb: 1,
background: theme.palette.mode === 'dark' background: theme.palette.mode === 'dark'
? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)' ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
: 'linear-gradient(135deg, #000000 0%, #333333 100%)', : 'none',
WebkitBackgroundClip: theme.palette.mode === 'dark' ? 'text' : 'initial', WebkitBackgroundClip: theme.palette.mode === 'dark' ? 'text' : 'initial',
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : '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 }) => ({ const ModDescription = styled(Typography)(({ theme }) => ({
@ -109,8 +109,8 @@ const ModDescription = styled(Typography)(({ theme }) => ({
})); }));
const VersionsChip = styled(Chip)(({ theme }) => ({ const VersionsChip = styled(Chip)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(233, 69, 96, 0.2)', backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
color: theme.palette.mode === 'dark' ? '#dee2e6' : '#ff6b6b', color: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
fontWeight: 600, fontWeight: 600,
})); }));
@ -140,21 +140,24 @@ const BetaVersionsLabel = styled(Typography)(({ theme }) => ({
mb: 1, mb: 1,
})); }));
const OpenLatestButton = styled(Button)(({ theme }) => ({ const OpenLatestButton = styled(Button)(({ theme }) => {
const isDark = theme.palette.mode === 'dark';
return {
width: '100%', width: '100%',
color: '#FFD700', color: isDark ? '#FFD700' : '#1976d2',
borderColor: 'rgba(255, 215, 0, 0.5)', borderColor: isDark ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
fontWeight: 600, fontWeight: 600,
borderRadius: '10px', borderRadius: '10px',
textTransform: 'none', textTransform: 'none',
fontSize: '1rem', fontSize: '1rem',
py: 1.5, py: 1.5,
'&:hover': { '&:hover': {
borderColor: '#FFD700', borderColor: isDark ? '#FFD700' : '#1976d2',
backgroundColor: 'rgba(255, 215, 0, 0.1)', backgroundColor: isDark ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)', boxShadow: isDark ? '0 8px 20px rgba(255, 215, 0, 0.2)' : '0 8px 20px rgba(25, 118, 210, 0.2)',
}, },
})); };
});
interface ModsProps { interface ModsProps {
mods: IMod[]; mods: IMod[];
@ -254,17 +257,17 @@ function Mods({ mods }: ModsProps) {
state={latest?.id} state={latest?.id}
sx={{ sx={{
width: '100%', width: '100%',
color: '#FFD700', color: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
borderColor: 'rgba(255, 215, 0, 0.5)', borderColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.5)' : 'rgba(25, 118, 210, 0.5)',
fontWeight: 600, fontWeight: 600,
borderRadius: '10px', borderRadius: '10px',
textTransform: 'none', textTransform: 'none',
fontSize: '1rem', fontSize: '1rem',
py: 1.5, py: 1.5,
'&:hover': { '&:hover': {
borderColor: '#FFD700', borderColor: theme.palette.mode === 'dark' ? '#FFD700' : '#1976d2',
backgroundColor: 'rgba(255, 215, 0, 0.1)', backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(25, 118, 210, 0.1)',
boxShadow: '0 8px 20px rgba(255, 215, 0, 0.2)', 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 }) => ({ const UnitCard = styled(Paper)(({ theme }) => ({
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)', background: theme.palette.mode === 'dark'
border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'}`, ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
borderRadius: '10px', : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
padding: theme.spacing(1.5, 2), border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
transition: 'all 0.2s ease', borderRadius: '16px',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': { '&:hover': {
background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(233, 69, 96, 0.1)', 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(233, 69, 96, 0.3)', 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 }) => ({ const UnitLink = styled(Link)(({ theme }) => ({
color: theme.palette.text.primary, color: theme.palette.text.primary,
textDecoration: 'none', textDecoration: 'none',
display: 'block', 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 }) => ({ 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}> <UnitLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
<ListItem sx={{ <ListItem sx={{
color: theme.palette.text.primary, color: theme.palette.text.primary,
padding: '6px 12px', padding: '1.5rem 2rem',
background: bgColor, marginBottom: '0.5rem',
borderRadius: '8px', background: isDark
border: `1px solid ${borderColor}`, ? 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)'
transition: 'all 0.2s ease', : 'linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%)',
'&: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)' } 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.icon && <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>}
{unit.name} {unit.name}
@ -95,14 +104,14 @@ function UnitSmall(unit: IUnitShort, modId: number, raceId: String) {
var unitName = "" var unitName = ""
if (unit.name.length > 21) { if (unit.name.length > 21) {
unitName = unit.name.substring(0, 20) + "..."; unitName = unit.name.substring(0, 19) + "...";
} else { } else {
unitName = unit.name; unitName = unit.name;
} }
return (<StyledLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} > return (<StyledLink href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id} >
{unit.icon && <img className="unitIconSmall" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>} {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 {unit.canDetect && <span>&nbsp;<img
src="/images/DETECT_YES.webp"/></span>}<br/></StyledLink>) 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={{ <Link href={"/mod/" + modId + "/race/" + raceId + "/building/" + building.id} sx={{
textDecoration: 'none', textDecoration: 'none',
display: 'block', display: 'block',
'&:hover': { color: isDark ? '#dee2e6' : '#e94560' } '&:hover': { color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)' }
}}> }}>
<BuildingCard elevation={0}> <BuildingCard elevation={0}>
<ListItem sx={{ <ListItem sx={{}}>
padding: '8px 12px',
}}>
{building.icon && <img className="unitIcon" src={IconUrl + building.icon.replaceAll('\\', '/')}/>} {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"}} {building.canDetect && <span>&nbsp;<img style={{verticalAlign: "top"}}
src="/images/DETECT_YES.webp"/></span>} src="/images/DETECT_YES.webp"/></span>}
</ListItem> </ListItem>
@ -208,27 +215,27 @@ class Units extends React.Component<UnitsProps & { theme: Theme }, UnitsState> {
<Box sx={{ mt: 3 }}> <Box sx={{ mt: 3 }}>
<Accordion sx={accordionSx}> <Accordion sx={accordionSx}>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : '#000000'}}/>} expandIcon={<ExpandMore sx={{color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)'}}/>}
aria-controls="units-accordion" aria-controls="units-accordion"
id="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> <SectionTitle sx={{ mb: 0, display: 'flex', alignItems: 'center' }}>All units</SectionTitle>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
<Grid2 size={{xs: 12, md: 4}}> <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))} {this.state.units.infantry.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</Grid2> </Grid2>
<Grid2 size={{xs: 12, md: 4}}> <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> <List>
{this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))} {this.state.units.tech.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</List> </List>
</Grid2> </Grid2>
<Grid2 size={{xs: 12, md: 4}}> <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> <List>
{this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))} {this.state.units.support.map(unit => Unit(unit, this.props.modId, this.props.raceId, theme))}
</List> </List>
@ -263,6 +270,8 @@ class RacePageFast extends React.Component<any, RacePageState> {
mod: modData mod: modData
}); });
document.title = `${modData.name} (${modData.version})`;
const response = await fetch(AvailableRacesPart + "/" + this.props.match.params.raceId); const response = await fetch(AvailableRacesPart + "/" + this.props.match.params.raceId);
const racesData: Irace = await response.json(); const racesData: Irace = await response.json();
@ -294,10 +303,10 @@ class RacePageFast extends React.Component<any, RacePageState> {
mb: 1, mb: 1,
background: isDark background: isDark
? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)' ? 'linear-gradient(135deg, #dee2e6 0%, #e0e0e0 100%)'
: 'linear-gradient(135deg, #000000 0%, #333333 100%)', : 'none',
WebkitBackgroundClip: isDark ? 'text' : 'initial', WebkitBackgroundClip: isDark ? 'text' : 'initial',
WebkitTextFillColor: isDark ? '#dee2e6' : 'initial', WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
color: isDark ? '#dee2e6' : '#000000', color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
}}> }}>
{this.state.race.name} {this.state.race.name}
</Typography> </Typography>

10
src/pages/UnitPage.tsx
View File

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