2022-01-06 13:04:03 +01:00
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import { Box } from "@mui/material";
|
|
|
|
|
|
|
|
import { Achievement } from "./Achievements";
|
2022-04-07 01:30:08 +02:00
|
|
|
import { Settings } from "../Settings/Settings";
|
2022-01-06 13:04:03 +01:00
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
achievement: Achievement;
|
|
|
|
unlocked: boolean;
|
|
|
|
colorFilters: string;
|
|
|
|
size: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function AchievementIcon({ achievement, unlocked, colorFilters, size }: IProps): JSX.Element {
|
|
|
|
const [imgLoaded, setImgLoaded] = useState(false);
|
|
|
|
const mainColor = unlocked ? Settings.theme.primarydark : Settings.theme.secondarydark;
|
|
|
|
|
2022-04-07 01:30:08 +02:00
|
|
|
if (!achievement.Icon) return <></>;
|
2022-01-06 13:04:03 +01:00
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
border: `1px solid ${mainColor}`,
|
2022-04-07 01:30:08 +02:00
|
|
|
width: size,
|
|
|
|
height: size,
|
2022-01-06 13:04:03 +01:00
|
|
|
m: 1,
|
2022-04-07 01:30:08 +02:00
|
|
|
visibility: imgLoaded ? "visible" : "hidden",
|
2022-01-06 13:04:03 +01:00
|
|
|
}}
|
|
|
|
>
|
2022-04-07 01:30:08 +02:00
|
|
|
<img
|
|
|
|
src={`dist/icons/achievements/${encodeURI(achievement.Icon)}.svg`}
|
2022-01-06 13:04:03 +01:00
|
|
|
style={{ filter: colorFilters, width: size, height: size }}
|
|
|
|
onLoad={() => setImgLoaded(true)}
|
2022-04-07 01:30:08 +02:00
|
|
|
alt={achievement.Name}
|
|
|
|
/>
|
2022-01-06 13:04:03 +01:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|