koishi-plugin-beatsaber-bot
Version:
一个 用于 BeatSaber 的 koishi Bot 插件
50 lines (49 loc) • 4.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const getPoint = (center, edgePoint, edgeFactor, pointFactor) => {
const factorY = (center.y - edgePoint.y) / edgeFactor;
const factorX = (center.x - edgePoint.x) / edgeFactor;
return {
x: center.x - pointFactor * factorX,
y: center.y - pointFactor * factorY
};
};
function SkillGraph({ factorA = 0.4, factorB = 0.2, factorC = 0.2 }) {
const base = 0.4;
const sqrt3 = Math.sqrt(3);
const centerPoint = {
x: 60,
y: 80 / sqrt3 + 10
};
const edgePointA = {
x: 20,
y: 40 / sqrt3 + 10,
};
const edgePointB = {
x: 100,
y: 40 / sqrt3 + 10,
};
const edgePointC = {
x: 60,
y: 160 / sqrt3 + 10,
};
const PA = getPoint(centerPoint, edgePointA, base, factorA);
const PB = getPoint(centerPoint, edgePointB, base, factorB);
const PC = getPoint(centerPoint, edgePointC, base, factorC);
// 50,78 90,10 10,10
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("svg", { height: "145", viewBox: `0 0 125 125`, xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("circle", { cx: centerPoint.x, cy: centerPoint.y, r: 80 / sqrt3, className: "fill-gray-100/30", filter: "url(#blur)" }), (0, jsx_runtime_1.jsx)("circle", { cx: PA.x, cy: PA.y }), (0, jsx_runtime_1.jsx)("text", { x: edgePointA.x - 10, y: edgePointA.y, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: "Acc" }), (0, jsx_runtime_1.jsxs)("text", { x: edgePointA.x - 20, y: edgePointA.y + 10, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: [(factorA * 100).toFixed(2), "%"] }), (0, jsx_runtime_1.jsx)("text", { x: edgePointB.x - 6, y: edgePointB.y, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: "Tech" }), (0, jsx_runtime_1.jsxs)("text", { x: edgePointB.x - 6, y: edgePointB.y + 8, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: [(factorB * 100).toFixed(2), "%"] }), (0, jsx_runtime_1.jsx)("text", { x: edgePointC.x - 6, y: edgePointC.y + 2, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: "Pass" }), (0, jsx_runtime_1.jsxs)("text", { x: edgePointC.x - 8, y: edgePointC.y + 12, fill: "url(#gradient1)", className: "text-[8px] font-bold text-white", children: [(factorC * 100).toFixed(2), "%"] }), (0, jsx_runtime_1.jsx)("circle", { cx: PB.x, cy: PB.y }), (0, jsx_runtime_1.jsx)("circle", { cx: PC.x, cy: PC.y }), (0, jsx_runtime_1.jsx)("line", { x1: PA.x, y1: PA.y, x2: PC.x, y2: PC.y }), (0, jsx_runtime_1.jsx)("line", { x1: PA.x, y1: PA.y, x2: PB.x, y2: PB.y }), (0, jsx_runtime_1.jsx)("line", { x1: PC.x, y1: PC.y, x2: PB.x, y2: PB.y }), (0, jsx_runtime_1.jsx)("polygon", { points: `${PA.x},${PA.y} ${PB.x},${PB.y} ${PC.x},${PC.y}`, fill: "url(#gradient)" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "gradient1", x1: "0%", y1: "0%", x2: "100%", y2: "100%", opacity: 0, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", style: {
stopColor: 'rgb(252 165 165)',
stopOpacity: 1
} }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", style: {
stopColor: "rgb(147 197 253)",
stopOpacity: 1
} })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", opacity: 0, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", style: {
stopColor: "red",
stopOpacity: 0.3
} }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", style: {
stopColor: "blue",
stopOpacity: 0.4
} })] }), (0, jsx_runtime_1.jsx)("filter", { id: "blur", children: (0, jsx_runtime_1.jsx)("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1" }) })] })] }) }));
}
exports.default = SkillGraph;