67 lines
2.9 KiB
TypeScript
67 lines
2.9 KiB
TypeScript
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";
|
|
import {Irace} from "../types/Irace";
|
|
import WeaponFull from "./WeaponFull";
|
|
import {StyledAccordion} from "../commons/StyledAccordion";
|
|
|
|
interface IWeaponProps {
|
|
weapon: IShortWeapon,
|
|
isDefault: Boolean,
|
|
renderRequired: Boolean,
|
|
mod: IMod,
|
|
race: Irace,
|
|
haveReinforceMenu: Boolean,
|
|
}
|
|
|
|
class Weapon extends React.Component<IWeaponProps, any> {
|
|
|
|
public static defaultProps = {
|
|
isDefault: false,
|
|
renderRequired: true,
|
|
};
|
|
|
|
humanReadableName(unit: string) {
|
|
const firstUpper = String(unit).charAt(0).toUpperCase() + String(unit).slice(1);
|
|
return firstUpper.replaceAll('_', ' ').replace('.rgd', '');
|
|
}
|
|
|
|
|
|
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: textColor}}/>}
|
|
aria-controls="panel1-content"
|
|
id="panel1-header"
|
|
sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
|
|
>
|
|
<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"/> :
|
|
<img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
|
|
)} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
|
|
{this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>(default)</i>}
|
|
</span>
|
|
</AccordionSummary>
|
|
<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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(Weapon);
|