import scss from "@/components/AvatarDrawing.module.scss"; import { getDefaultAvatarID } from "@/utilities/Utility"; import { wwwAPIPath } from "@/utilities/wwwAPI"; import Image from "next/image"; const EDGE_MARGIN = 1.25; const EDGE_XY = (EDGE_MARGIN - 1.0) / 2; export default function AvatarDrawing({ avatarID, drawingLength = 48, drawingHeight = 48, }: { avatarID: string; drawingLength?: number; drawingHeight?: number; }) { return ( <div className={scss.drawing} style={{ width: drawingLength * EDGE_MARGIN, height: drawingHeight * EDGE_MARGIN, }} > <Image alt="" src={`${wwwAPIPath}/drawing?avatarID=${getDefaultAvatarID( avatarID, )}&drawingVariety=0`} className={scss.avatar} width={drawingLength} height={drawingHeight} style={{ left: drawingLength * EDGE_XY, top: drawingHeight * EDGE_XY, }} /> <Image alt="" src={`${wwwAPIPath}/drawing?avatarID=${getDefaultAvatarID( avatarID, )}&drawingVariety=2`} className={scss.edge} width={drawingLength * EDGE_MARGIN} height={drawingHeight * EDGE_MARGIN} onError={(e) => (e.currentTarget.hidden = true)} /> </div> ); }