52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
import {Accordion, AccordionDetails, AccordionSummary} from "@mui/material";
|
|
import {ExpandMore} from "@mui/icons-material";
|
|
import React from "react";
|
|
import {IAbilityShort} from "../types/IAbility";
|
|
import {getIcon} from "./ModifiersProvideTable";
|
|
import {IMod} from "../types/Imod";
|
|
import AbilityFull from "./AbilityFull";
|
|
import {Irace} from "../types/Irace";
|
|
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' },
|
|
}));
|
|
|
|
interface IAbilityProps {
|
|
ability: IAbilityShort,
|
|
race: Irace,
|
|
mod: IMod,
|
|
}
|
|
|
|
function Ability(props: IAbilityProps){
|
|
|
|
const ability = props.ability
|
|
|
|
return <div className='addon-research-accordion' id={"research-" + ability.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'}}>
|
|
{ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.gif"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
|
|
{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: 'rgba(255,255,255,0.85)'}}>
|
|
<AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
|
|
</AccordionDetails>
|
|
</StyledAccordion></div>
|
|
|
|
}
|
|
|
|
|
|
export default Ability;
|
|
|