2025-05-28 15:36:51 -07:00

81 lines
2.0 KiB
TypeScript

import { visuallyHidden } from "@mui/utils";
import React from "react";
import {
BeveledBoxSvg94x89,
BoxBackground,
} from "@dndbeyond/character-components/es";
import {
CharacterPreferences,
CharacterTheme,
RuleData,
RuleDataUtils,
SpeedInfo,
} from "@dndbeyond/character-rules-engine/es";
import { NumberDisplay } from "~/components/NumberDisplay";
interface Props {
speeds: SpeedInfo;
preferences: CharacterPreferences;
theme: CharacterTheme;
ruleData: RuleData;
onClick?: () => void;
}
export default class SpeedBox extends React.PureComponent<Props> {
handleSpeedsClick = (evt: React.MouseEvent): void => {
const { onClick } = this.props;
if (onClick) {
evt.stopPropagation();
evt.nativeEvent.stopImmediatePropagation();
onClick();
}
};
render() {
const { preferences, speeds, theme, ruleData } = this.props;
const displaySpeedValue: number =
speeds[
RuleDataUtils.getSpeedMovementKeyById(preferences.primaryMovement)
];
const displaySpeedLabel = RuleDataUtils.getMovementDescription(
preferences.primaryMovement,
ruleData
);
return (
<section className="ct-speed-box" onClick={this.handleSpeedsClick}>
<h2 style={visuallyHidden}>Speed</h2>
<BoxBackground StyleComponent={BeveledBoxSvg94x89} theme={theme} />
<div
className={`ct-speed-box__heading ${
theme.isDarkMode ? "ct-speed-box__heading--dark-mode" : ""
}`}
>
{displaySpeedLabel}
</div>
<div
className={`ct-speed-box__box-value ${
theme.isDarkMode ? "ct-speed-box__box-value--dark-mode" : ""
}`}
>
<NumberDisplay
type="distanceInFt"
number={displaySpeedValue}
size={"large"}
/>
</div>
<div
className={`ct-speed-box__label ${
theme.isDarkMode ? "ct-speed-box__label--dark-mode" : ""
}`}
>
Speed
</div>
</section>
);
}
}