91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import {IMod} from "../../types/Imod";
|
|
import {IResearch} from "../../types/IResearch";
|
|
import {
|
|
Accordion,
|
|
AccordionDetails,
|
|
AccordionSummary,
|
|
Grid2,
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableRow
|
|
} 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 {IBuilding} from "../../types/IBuilding";
|
|
import {IResearchShort} from "../../types/IResearchShort";
|
|
import ResearchFull from "./ResearchFull";
|
|
import {styled} from '@mui/material/styles';
|
|
|
|
const StyledAccordion = styled(Accordion)(({ theme }) => ({
|
|
background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '12px',
|
|
'&:before': { display: 'none' },
|
|
'&.Mui-expanded': { margin: '0 0 8px 0' },
|
|
}));
|
|
|
|
const StyledLink = styled('a')(({ theme }) => ({
|
|
color: '#e94560',
|
|
textDecoration: 'none',
|
|
'&:hover': {
|
|
color: '#ff6b6b',
|
|
textDecoration: 'underline',
|
|
},
|
|
}));
|
|
|
|
|
|
interface IResearchProps {
|
|
research: IResearchShort,
|
|
building: IBuilding,
|
|
mod: IMod,
|
|
}
|
|
|
|
function Research(props: IResearchProps){
|
|
|
|
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
|
|
expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
|
|
aria-controls="panel1-content"
|
|
sx={{color: '#ffffff'}}
|
|
>
|
|
<span style={{fontSize: 20, color: '#ffffff'}}>
|
|
<img className="sergeantIcon" src={getIcon(research.icon)}/>
|
|
{research.name}
|
|
</span>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
|
|
<ResearchFull id={research.id} building={building}/>
|
|
</AccordionDetails>
|
|
</StyledAccordion></div>
|
|
|
|
}
|
|
|
|
export function renderAffectedResearches(researches: IResearchShort[], modId: number, raceId: string) {
|
|
|
|
function researchLink(rs: IResearchShort) {
|
|
return <span><img style={{verticalAlign: "top", height: 25}}
|
|
src={getIcon(rs.icon)}/>
|
|
<StyledLink href={`/mod/${modId}/race/${raceId}/building/${rs.buildingId}#research-${rs.id}`}>
|
|
{rs.name}
|
|
</StyledLink></span>
|
|
}
|
|
|
|
return <div style={{color: 'rgba(255, 255, 255, 0.85)'}}> {researches.map(rs =>
|
|
rs.buildingId == null ? <span key={rs.id}></span> :
|
|
<span key={rs.id}>Research affect: {researchLink(rs)}<br/></span>
|
|
)}</div>
|
|
}
|
|
|
|
|
|
export default Research;
|
|
|