maidraw 0.9.5 → 0.10.0

package/dist/mai/painter/index.js

@@ -0,0 +1,1431 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaimaiPainterModule = exports.MaimaiPainter = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const sharp_1 = __importDefault(require("sharp"));
+const color_1 = __importDefault(require("color"));
+const v4_1 = require("zod/v4");
+const canvas_1 = require("canvas");
+const type_1 = require("../type");
+const util_1 = require("../../lib/util");
+const painter_1 = require("../../lib/painter");
+const database_1 = require("../lib/database");
+const util_2 = require("../lib/util");
+class MaimaiPainter extends painter_1.Painter {
+    constructor({ theme: { schema, searchPaths, defaultTheme }, }) {
+        super({ theme: { schema, searchPaths, defaultTheme } });
+    }
+}
+exports.MaimaiPainter = MaimaiPainter;
+var MaimaiPainterModule;
+(function (MaimaiPainterModule) {
+    let Profile;
+    (function (Profile) {
+        Profile.schema = painter_1.ThemeManager.Element.extend({
+            type: v4_1.z.literal("profile"),
+            height: v4_1.z.number().min(1),
+            sprites: v4_1.z.object({
+                dxRating: v4_1.z.object({
+                    white: v4_1.z.string(),
+                    blue: v4_1.z.string(),
+                    green: v4_1.z.string(),
+                    yellow: v4_1.z.string(),
+                    red: v4_1.z.string(),
+                    purple: v4_1.z.string(),
+                    bronze: v4_1.z.string(),
+                    silver: v4_1.z.string(),
+                    gold: v4_1.z.string(),
+                    platinum: v4_1.z.string(),
+                    rainbow: v4_1.z.string(),
+                }),
+                dxRatingNumberMap: v4_1.z.string(),
+                profile: v4_1.z.object({
+                    nameplate: v4_1.z.string(),
+                    icon: v4_1.z.string(),
+                }),
+            }),
+        });
+        async function draw(ctx, theme, element, username, rating, profilePicture) {
+            const nameplate = new canvas_1.Image();
+            nameplate.src = theme.getFile(element.sprites.profile.nameplate);
+            ctx.drawImage(nameplate, element.x, element.y, element.height * 6.207, element.height);
+            /* Begin Profile Picture Draw */
+            {
+                ctx.save();
+                ctx.beginPath();
+                ctx.roundRect(element.x + element.height * 0.064, element.y + element.height * 0.064, element.height * 0.872, element.height * 0.872, (element.height * 0.872) / 16);
+                ctx.clip();
+                ctx.fillStyle = "white";
+                ctx.fill();
+                const icon = new canvas_1.Image();
+                try {
+                    (0, sharp_1.default)(profilePicture);
+                }
+                catch {
+                    // Unknown profile picture binary
+                    profilePicture = undefined;
+                }
+                const pfp = profilePicture ||
+                    theme.getFile(element.sprites.profile.icon);
+                const { dominant } = await (0, sharp_1.default)(pfp).stats();
+                icon.src = await (0, sharp_1.default)(pfp).png().toBuffer();
+                const cropSize = Math.min(icon.width, icon.height);
+                ctx.drawImage(icon, (icon.width - cropSize) / 2, (icon.height - cropSize) / 2, cropSize, cropSize, element.x + element.height * 0.064, element.y + element.height * 0.064, element.height * 0.872, element.height * 0.872);
+                if (profilePicture) {
+                    ctx.beginPath();
+                    ctx.roundRect(element.x + element.height * 0.064, element.y + element.height * 0.064, element.height * 0.872, element.height * 0.872, (element.height * 0.872) / 16);
+                    ctx.strokeStyle = color_1.default.rgb(dominant).darken(0.3).hex();
+                    ctx.lineWidth = element.height / 30;
+                    ctx.stroke();
+                }
+                ctx.restore();
+            }
+            /* End Profile Picture Draw */
+            /* Begin DX Rating Draw */
+            {
+                const dxRating = new canvas_1.Image();
+                let dxRatingImg;
+                switch (true) {
+                    case rating >= 15000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.rainbow);
+                        break;
+                    }
+                    case rating >= 14500: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.platinum);
+                        break;
+                    }
+                    case rating >= 14000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.gold);
+                        break;
+                    }
+                    case rating >= 13000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.silver);
+                        break;
+                    }
+                    case rating >= 12000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.bronze);
+                        break;
+                    }
+                    case rating >= 10000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.purple);
+                        break;
+                    }
+                    case rating >= 8000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.red);
+                        break;
+                    }
+                    case rating >= 6000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.yellow);
+                        break;
+                    }
+                    case rating >= 4000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.green);
+                        break;
+                    }
+                    case rating >= 2000: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.blue);
+                        break;
+                    }
+                    default: {
+                        dxRatingImg = theme.getFile(element.sprites.dxRating.white);
+                        break;
+                    }
+                }
+                dxRating.src = dxRatingImg;
+                ctx.drawImage(dxRating, element.x + element.height, element.y + element.height * 0.064, (element.height / 3) * 5.108, element.height / 3);
+            }
+            /* End DX Rating Draw */
+            /* Begin Username Draw */
+            {
+                ctx.beginPath();
+                ctx.roundRect(element.x + element.height * (1 + 1 / 32), element.y + element.height * (0.064 + 0.333 + 1 / 32), ((element.height / 3) * 5.108 * 6) / 5, (element.height * 7) / 24, element.height / 20);
+                ctx.fillStyle = "white";
+                ctx.strokeStyle = color_1.default.rgb(180, 180, 180).hex();
+                ctx.lineWidth = element.height / 32;
+                ctx.stroke();
+                ctx.fill();
+                const ratingImgBuffer = await getRatingNumber(rating, theme, element);
+                if (ratingImgBuffer) {
+                    const { width, height } = await (0, sharp_1.default)(ratingImgBuffer).metadata();
+                    if (width && height) {
+                        const aspectRatio = width / height;
+                        const image = new canvas_1.Image();
+                        image.src = ratingImgBuffer;
+                        const drawHeight = (element.height * 7) / 32;
+                        ctx.drawImage(image, element.x + element.height * 1.785, element.y + element.height * 0.12, drawHeight * aspectRatio * 0.8, drawHeight);
+                    }
+                }
+                util_1.Util.drawText(ctx, util_1.Util.HalfFullWidthConvert.toFullWidth(username), element.x + element.height * (1 + 1 / 16), element.y + element.height * (0.064 + 0.333 + 1 / 4), (element.height * 1) / 6, 0, ((element.height / 3) * 5.108 * 6) / 5, "left", "black", "black", "standard-font-username");
+            }
+            /* End Username Draw*/
+        }
+        Profile.draw = draw;
+        async function getRatingNumber(num, theme, element) {
+            async function getRatingDigit(map, digit, unitWidth, unitHeight) {
+                digit = Math.trunc(digit % 10);
+                return await (0, sharp_1.default)(map)
+                    .extract({
+                    left: (digit % 4) * unitWidth,
+                    top: Math.trunc(digit / 4) * unitHeight,
+                    width: unitWidth,
+                    height: unitHeight,
+                })
+                    .toBuffer();
+            }
+            const map = theme.getFile(element.sprites.dxRatingNumberMap);
+            const { width, height } = await (0, sharp_1.default)(map).metadata();
+            if (!(width && height))
+                return null;
+            const unitWidth = width / 4, unitHeight = height / 4;
+            let digits = [];
+            while (num > 0) {
+                digits.push(await getRatingDigit(map, num % 10, unitWidth, unitHeight));
+                num = Math.trunc(num / 10);
+            }
+            while (digits.length < 5)
+                digits.push(null);
+            digits = digits.reverse();
+            const canvas = new canvas_1.Canvas(unitWidth * digits.length, unitHeight);
+            const ctx = canvas.getContext("2d");
+            for (let i = 0; i < digits.length; ++i) {
+                const curDigit = digits[i];
+                if (!curDigit)
+                    continue;
+                const img = new canvas_1.Image();
+                img.src = curDigit;
+                ctx.drawImage(img, unitWidth * i * 0.88, 0);
+            }
+            return canvas.toBuffer();
+        }
+    })(Profile = MaimaiPainterModule.Profile || (MaimaiPainterModule.Profile = {}));
+    let Best50;
+    (function (Best50) {
+        let ScoreGrid;
+        (function (ScoreGrid) {
+            ScoreGrid.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("score-grid"),
+                horizontalSize: v4_1.z.number().min(1),
+                verticalSize: v4_1.z.number().min(1),
+                region: v4_1.z.enum(["new", "old"]),
+                index: v4_1.z.number().min(0),
+                scoreBubble: v4_1.z.object({
+                    width: v4_1.z.number().min(1),
+                    height: v4_1.z.number().min(1),
+                    margin: v4_1.z.number().min(0),
+                    gap: v4_1.z.number().min(0),
+                    color: v4_1.z.object({
+                        basic: util_1.Util.z.color(),
+                        advanced: util_1.Util.z.color(),
+                        expert: util_1.Util.z.color(),
+                        master: util_1.Util.z.color(),
+                        remaster: util_1.Util.z.color(),
+                        utage: util_1.Util.z.color(),
+                    }),
+                }),
+                sprites: v4_1.z.object({
+                    achievement: v4_1.z.object({
+                        d: v4_1.z.string(),
+                        c: v4_1.z.string(),
+                        b: v4_1.z.string(),
+                        bb: v4_1.z.string(),
+                        bbb: v4_1.z.string(),
+                        a: v4_1.z.string(),
+                        aa: v4_1.z.string(),
+                        aaa: v4_1.z.string(),
+                        s: v4_1.z.string(),
+                        sp: v4_1.z.string(),
+                        ss: v4_1.z.string(),
+                        ssp: v4_1.z.string(),
+                        sss: v4_1.z.string(),
+                        sssp: v4_1.z.string(),
+                    }),
+                    mode: v4_1.z.object({
+                        standard: v4_1.z.string(),
+                        dx: v4_1.z.string(),
+                    }),
+                    milestone: v4_1.z.object({
+                        ap: v4_1.z.string(),
+                        app: v4_1.z.string(),
+                        fc: v4_1.z.string(),
+                        fcp: v4_1.z.string(),
+                        fdx: v4_1.z.string(),
+                        fdxp: v4_1.z.string(),
+                        fs: v4_1.z.string(),
+                        fsp: v4_1.z.string(),
+                        sync: v4_1.z.string(),
+                        none: v4_1.z.string(),
+                    }),
+                }),
+            });
+            async function draw(ctx, theme, element, { x, y, index, score, scale, }) {
+                let curColor = "#FFFFFF";
+                switch (score.chart.difficulty) {
+                    case type_1.EDifficulty.BASIC:
+                        curColor = element.scoreBubble.color.basic;
+                        break;
+                    case type_1.EDifficulty.ADVANCED:
+                        curColor = element.scoreBubble.color.advanced;
+                        break;
+                    case type_1.EDifficulty.EXPERT:
+                        curColor = element.scoreBubble.color.expert;
+                        break;
+                    case type_1.EDifficulty.MASTER:
+                        curColor = element.scoreBubble.color.master;
+                        break;
+                    case type_1.EDifficulty.REMASTER:
+                        curColor = element.scoreBubble.color.remaster;
+                        break;
+                    case type_1.EDifficulty.UTAGE:
+                        curColor = element.scoreBubble.color.utage;
+                        break;
+                }
+                /** Begin Card Draw */
+                ctx.save();
+                ctx.fillStyle = new color_1.default(curColor).lighten(0.4).hexa();
+                ctx.beginPath();
+                ctx.roundRect(x, y, element.scoreBubble.width, element.scoreBubble.height, (element.scoreBubble.height * 0.806) / 7);
+                ctx.strokeStyle = new color_1.default(curColor).darken(0.3).hexa();
+                ctx.lineWidth = element.scoreBubble.margin / 4;
+                ctx.stroke();
+                ctx.fill();
+                ctx.beginPath();
+                ctx.roundRect(x, y, element.scoreBubble.width, element.scoreBubble.height, (element.scoreBubble.height * 0.806) / 7);
+                ctx.clip();
+                /** Begin Main Content Draw */
+                {
+                    const cardRoundCornerRadius = (element.scoreBubble.height * 0.806) / 7;
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.roundRect(x, y, element.scoreBubble.width, element.scoreBubble.height * 0.742, cardRoundCornerRadius);
+                    ctx.clip();
+                    ctx.fillStyle = curColor;
+                    ctx.fill();
+                    /** Begin score "Freshness" draw */
+                    if (scale !== undefined) {
+                        ctx.save();
+                        ctx.beginPath();
+                        /**
+                         * Get a color representing freshness.
+                         *
+                         * @param status From 0 to 1, 0 means most fresh, 1 means most dead.
+                         * @returns
+                         */
+                        function getStatusColor(status) {
+                            const FRESHNESS_COLOUR = "#94E436";
+                            const DEAD_COLOUR = "#F54932";
+                            const NEUTRAL_COLOUR = "#c2c2c2";
+                            if (status < 0.5) {
+                                return new color_1.default(FRESHNESS_COLOUR).mix(new color_1.default(NEUTRAL_COLOUR), status / 0.5);
+                            }
+                            else {
+                                return new color_1.default(NEUTRAL_COLOUR).mix(new color_1.default(DEAD_COLOUR), status / 0.5 - 1);
+                            }
+                        }
+                        ctx.fillStyle = getStatusColor(scale).hexa();
+                        ctx.roundRect(x +
+                            element.scoreBubble.width -
+                            cardRoundCornerRadius, y - cardRoundCornerRadius, cardRoundCornerRadius * 2, cardRoundCornerRadius * 2, cardRoundCornerRadius / 4);
+                        ctx.closePath();
+                        ctx.fill();
+                        ctx.restore();
+                    }
+                    /** End score "Freshness" draw */
+                    const jacketSize = Math.min(element.scoreBubble.width, element.scoreBubble.height * 0.742);
+                    const jacketMaskGrad = ctx.createLinearGradient(x + jacketSize / 2, y + jacketSize / 2, x + jacketSize, y + jacketSize / 2);
+                    jacketMaskGrad.addColorStop(0, new color_1.default(curColor).alpha(0).hexa());
+                    jacketMaskGrad.addColorStop(0.25, new color_1.default(curColor).alpha(0.2).hexa());
+                    jacketMaskGrad.addColorStop(1, new color_1.default(curColor).alpha(1).hexa());
+                    const jacketMaskGradDark = ctx.createLinearGradient(x + jacketSize / 2, y + jacketSize / 2, x + jacketSize, y + jacketSize / 2);
+                    jacketMaskGradDark.addColorStop(0, new color_1.default(curColor).darken(0.3).alpha(0).hexa());
+                    jacketMaskGradDark.addColorStop(0.25, new color_1.default(curColor).darken(0.3).alpha(0.2).hexa());
+                    jacketMaskGradDark.addColorStop(1, new color_1.default(curColor).darken(0.3).alpha(1).hexa());
+                    /** Begin Jacket Draw*/
+                    let jacket = await database_1.Database.fetchJacket(score.chart.id);
+                    if (!jacket)
+                        jacket = await database_1.Database.fetchJacket(0);
+                    if (jacket) {
+                        const img = new canvas_1.Image();
+                        img.src = jacket;
+                        ctx.drawImage(img, x, y, jacketSize, jacketSize);
+                    }
+                    else {
+                        ctx.fillStyle = "#b6ffab";
+                        ctx.fillRect(x, y, jacketSize, jacketSize);
+                    }
+                    /** End Jacket Draw*/
+                    /** Begin Jacket Gradient Mask Draw*/ {
+                        ctx.fillStyle = jacketMaskGrad;
+                        ctx.fillRect(x + jacketSize / 2, y, (jacketSize * 3) / 4, jacketSize);
+                    } /** End Jacket Gradient Mask Draw*/
+                    ctx.beginPath();
+                    ctx.roundRect(x + element.scoreBubble.margin, y + element.scoreBubble.margin, element.scoreBubble.width -
+                        element.scoreBubble.margin * 2, element.scoreBubble.height * 0.806 -
+                        element.scoreBubble.margin * 2, (element.scoreBubble.height * 0.806 -
+                        element.scoreBubble.margin * 2) /
+                        7);
+                    /** Begin Title Draw */ {
+                        util_1.Util.drawText(ctx, score.chart.name, x + (jacketSize * 7) / 8, y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height * 0.806 * 0.144, element.scoreBubble.height * 0.806 * 0.144, element.scoreBubble.height * 0.806 * 0.04, element.scoreBubble.width -
+                            (jacketSize * 7) / 8 -
+                            element.scoreBubble.margin, "left", "white", jacketMaskGradDark);
+                    } /** End Title Draw */
+                    /** Begin Separation Line Draw */ {
+                        ctx.beginPath();
+                        ctx.roundRect(x + (jacketSize * 13) / 16, y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.144 + 0.072), element.scoreBubble.width -
+                            (jacketSize * 13) / 16 -
+                            element.scoreBubble.margin * 2, element.scoreBubble.height * 0.806 * 0.02, element.scoreBubble.height * 0.806 * 0.16);
+                        ctx.fillStyle = jacketMaskGradDark;
+                        ctx.fill();
+                    } /** End Separation Line Draw */
+                    /** Begin Achievement Rate Draw */
+                    util_1.Util.drawText(ctx, `${util_1.Util.truncate(score.achievement, 4)}%`, x -
+                        element.scoreBubble.margin -
+                        element.scoreBubble.height * 0.806 * 0.02 +
+                        element.scoreBubble.width, y +
+                        element.scoreBubble.margin +
+                        element.scoreBubble.height *
+                            0.806 *
+                            (0.144 + 0.144 + 0.208 - 0.04), element.scoreBubble.height * 0.806 * 0.208, element.scoreBubble.height * 0.806 * 0.04, Infinity, "right", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    /** End Achievement Rate Draw */
+                    /** Begin Achievement Rank Draw */
+                    {
+                        let rankImg;
+                        switch (score.achievementRank) {
+                            case type_1.EAchievementTypes.D:
+                                rankImg = theme.getFile(element.sprites.achievement.d);
+                                break;
+                            case type_1.EAchievementTypes.C:
+                                rankImg = theme.getFile(element.sprites.achievement.c);
+                                break;
+                            case type_1.EAchievementTypes.B:
+                                rankImg = theme.getFile(element.sprites.achievement.b);
+                                break;
+                            case type_1.EAchievementTypes.BB:
+                                rankImg = theme.getFile(element.sprites.achievement.bb);
+                                break;
+                            case type_1.EAchievementTypes.BBB:
+                                rankImg = theme.getFile(element.sprites.achievement.bbb);
+                                break;
+                            case type_1.EAchievementTypes.A:
+                                rankImg = theme.getFile(element.sprites.achievement.a);
+                                break;
+                            case type_1.EAchievementTypes.AA:
+                                rankImg = theme.getFile(element.sprites.achievement.aa);
+                                break;
+                            case type_1.EAchievementTypes.AAA:
+                                rankImg = theme.getFile(element.sprites.achievement.aaa);
+                                break;
+                            case type_1.EAchievementTypes.S:
+                                rankImg = theme.getFile(element.sprites.achievement.s);
+                                break;
+                            case type_1.EAchievementTypes.SP:
+                                rankImg = theme.getFile(element.sprites.achievement.sp);
+                                break;
+                            case type_1.EAchievementTypes.SS:
+                                rankImg = theme.getFile(element.sprites.achievement.ss);
+                                break;
+                            case type_1.EAchievementTypes.SSP:
+                                rankImg = theme.getFile(element.sprites.achievement.ssp);
+                                break;
+                            case type_1.EAchievementTypes.SSS:
+                                rankImg = theme.getFile(element.sprites.achievement.sss);
+                                break;
+                            default:
+                                rankImg = theme.getFile(element.sprites.achievement.sssp);
+                        }
+                        const img = new canvas_1.Image();
+                        img.src = rankImg;
+                        ctx.drawImage(img, x + jacketSize, y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.144 + 0.144 + 0.208 + 0.02), element.scoreBubble.height * 0.806 * 0.3 * 2.133, element.scoreBubble.height * 0.806 * 0.3);
+                    }
+                    /** End Achievement Rank Draw */
+                    /** Begin Milestone Draw */
+                    {
+                        let comboImg, syncImg;
+                        switch (score.combo) {
+                            case type_1.EComboTypes.NONE:
+                                comboImg = theme.getFile(element.sprites.milestone.none);
+                                break;
+                            case type_1.EComboTypes.FULL_COMBO:
+                                comboImg = theme.getFile(element.sprites.milestone.fc);
+                                break;
+                            case type_1.EComboTypes.FULL_COMBO_PLUS:
+                                comboImg = theme.getFile(element.sprites.milestone.fcp);
+                                break;
+                            case type_1.EComboTypes.ALL_PERFECT:
+                                comboImg = theme.getFile(element.sprites.milestone.ap);
+                                break;
+                            case type_1.EComboTypes.ALL_PERFECT_PLUS:
+                                comboImg = theme.getFile(element.sprites.milestone.app);
+                                break;
+                        }
+                        switch (score.sync) {
+                            case type_1.ESyncTypes.NONE:
+                                syncImg = theme.getFile(element.sprites.milestone.none);
+                                break;
+                            case type_1.ESyncTypes.SYNC_PLAY:
+                                syncImg = theme.getFile(element.sprites.milestone.sync);
+                                break;
+                            case type_1.ESyncTypes.FULL_SYNC:
+                                syncImg = theme.getFile(element.sprites.milestone.fs);
+                                break;
+                            case type_1.ESyncTypes.FULL_SYNC_PLUS:
+                                syncImg = theme.getFile(element.sprites.milestone.fsp);
+                                break;
+                            case type_1.ESyncTypes.FULL_SYNC_DX:
+                                syncImg = theme.getFile(element.sprites.milestone.fdx);
+                                break;
+                            case type_1.ESyncTypes.FULL_SYNC_DX_PLUS:
+                                syncImg = theme.getFile(element.sprites.milestone.fdxp);
+                                break;
+                        }
+                        const combo = new canvas_1.Image();
+                        combo.src = comboImg;
+                        ctx.drawImage(combo, x +
+                            (jacketSize * 7) / 8 +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.32 * 2.133 + 0.06), y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.144 + 0.144 + 0.208 + 0.01), element.scoreBubble.height * 0.806 * 0.32, element.scoreBubble.height * 0.806 * 0.32);
+                        const sync = new canvas_1.Image();
+                        sync.src = syncImg;
+                        ctx.drawImage(sync, x +
+                            (jacketSize * 7) / 8 +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.32 * 2.133 + 0.04 + 0.32), y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.144 + 0.144 + 0.208 + 0.01), element.scoreBubble.height * 0.806 * 0.32, element.scoreBubble.height * 0.806 * 0.32);
+                    }
+                    /** End Milestone Draw */
+                    /** Begin Chart Mode Draw */
+                    {
+                        const mode = new canvas_1.Image();
+                        const chartModeBadgeImg = theme.getFile(score.chart.id > 10000
+                            ? element.sprites.mode.dx
+                            : element.sprites.mode.standard);
+                        const { width, height } = await (0, sharp_1.default)(chartModeBadgeImg).metadata();
+                        const aspectRatio = (width ?? 0) / (height ?? 1) || 3;
+                        mode.src = chartModeBadgeImg;
+                        const drawHeight = (jacketSize * 6) / 8;
+                        ctx.drawImage(mode, x + ((jacketSize * 7) / 8 - drawHeight) / 2, y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height * 0.806 * 0.02, drawHeight, drawHeight / aspectRatio);
+                    }
+                    /** End Chart Mode Draw */
+                    /** Begin Bests Index Draw */
+                    {
+                        util_1.Util.drawText(ctx, `#${index + 1}`, x + element.scoreBubble.margin * 2, y + jacketSize - element.scoreBubble.margin * 2, element.scoreBubble.height * 0.806 * 0.128, element.scoreBubble.height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    }
+                    /** End Bests Index Draw */
+                    ctx.restore();
+                }
+                /** End Main Content Draw */
+                /** Begin Difficulty & DX Rating Draw */
+                {
+                    util_1.Util.drawText(ctx, `${util_1.Util.truncate(score.chart.level, 1)}  ↑${util_1.Util.truncate(score.dxRating, 0)}`, x + element.scoreBubble.margin * 2, y +
+                        element.scoreBubble.height *
+                            (0.806 + (1 - 0.806) / 2), element.scoreBubble.height * 0.806 * 0.128, element.scoreBubble.height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    if (score.dxScore >= 0 && score.chart.maxDxScore > 0) {
+                        util_1.Util.drawText(ctx, `${score.dxScore}/${score.chart.maxDxScore}`, x +
+                            element.scoreBubble.width -
+                            element.scoreBubble.margin * 2, y +
+                            element.scoreBubble.height *
+                                (0.806 + (1 - 0.806) / 2), element.scoreBubble.height * 0.806 * 0.128, element.scoreBubble.height * 0.806 * 0.04, Infinity, "right", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    }
+                }
+                /** End Difficulty & DX Rating Draw */
+                ctx.restore();
+                /** End Card Draw */
+            }
+            ScoreGrid.draw = draw;
+        })(ScoreGrid = Best50.ScoreGrid || (Best50.ScoreGrid = {}));
+    })(Best50 = MaimaiPainterModule.Best50 || (MaimaiPainterModule.Best50 = {}));
+    let Chart;
+    (function (Chart) {
+        const DX_LATEST = 55;
+        const EX_LATEST = 50;
+        const CN_LATEST = 50;
+        const MAIMAI_VERSIONS = [
+            99, 95, 90, 85, 80, 70, 60, 50, 40, 30, 20, 10, 0,
+        ];
+        const MAIMAIDX_VERSIONS = [
+            55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0,
+        ];
+        const WUMENGDX_VERSIONS = [50, 40, 30, 20, 10, 0];
+        function findVersion(v, isDX, isCN) {
+            const target = isDX
+                ? isCN
+                    ? WUMENGDX_VERSIONS
+                    : MAIMAIDX_VERSIONS
+                : MAIMAI_VERSIONS;
+            for (const version of target) {
+                if (v >= version)
+                    return version;
+            }
+            return null;
+        }
+        let ChartGrid;
+        (function (ChartGrid) {
+            ChartGrid.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("chart-grid"),
+                width: v4_1.z.number().min(1),
+                height: v4_1.z.number().min(1),
+                margin: v4_1.z.number().min(0),
+                gap: v4_1.z.number().min(0),
+                bubble: v4_1.z.object({
+                    margin: v4_1.z.number().min(0),
+                    color: v4_1.z.object({
+                        basic: util_1.Util.z.color(),
+                        advanced: util_1.Util.z.color(),
+                        expert: util_1.Util.z.color(),
+                        master: util_1.Util.z.color(),
+                        remaster: util_1.Util.z.color(),
+                        utage: util_1.Util.z.color(),
+                    }),
+                }),
+                color: v4_1.z.object({
+                    card: util_1.Util.z.color(),
+                }),
+                sprites: v4_1.z.object({
+                    achievement: v4_1.z.object({
+                        d: v4_1.z.string(),
+                        c: v4_1.z.string(),
+                        b: v4_1.z.string(),
+                        bb: v4_1.z.string(),
+                        bbb: v4_1.z.string(),
+                        a: v4_1.z.string(),
+                        aa: v4_1.z.string(),
+                        aaa: v4_1.z.string(),
+                        s: v4_1.z.string(),
+                        sp: v4_1.z.string(),
+                        ss: v4_1.z.string(),
+                        ssp: v4_1.z.string(),
+                        sss: v4_1.z.string(),
+                        sssp: v4_1.z.string(),
+                    }),
+                    milestone: v4_1.z.object({
+                        ap: v4_1.z.string(),
+                        app: v4_1.z.string(),
+                        fc: v4_1.z.string(),
+                        fcp: v4_1.z.string(),
+                        fdx: v4_1.z.string(),
+                        fdxp: v4_1.z.string(),
+                        fs: v4_1.z.string(),
+                        fsp: v4_1.z.string(),
+                        sync: v4_1.z.string(),
+                        none: v4_1.z.string(),
+                    }),
+                    versions: v4_1.z.object({
+                        OLD: v4_1.z.object({
+                            "0": v4_1.z.string(),
+                            "10": v4_1.z.string(),
+                            "20": v4_1.z.string(),
+                            "30": v4_1.z.string(),
+                            "40": v4_1.z.string(),
+                            "50": v4_1.z.string(),
+                            "60": v4_1.z.string(),
+                            "70": v4_1.z.string(),
+                            "80": v4_1.z.string(),
+                            "85": v4_1.z.string(),
+                            "90": v4_1.z.string(),
+                            "95": v4_1.z.string(),
+                            "99": v4_1.z.string(),
+                        }),
+                        DX: v4_1.z.object({
+                            "0": v4_1.z.string(),
+                            "5": v4_1.z.string(),
+                            "10": v4_1.z.string(),
+                            "15": v4_1.z.string(),
+                            "20": v4_1.z.string(),
+                            "25": v4_1.z.string(),
+                            "30": v4_1.z.string(),
+                            "35": v4_1.z.string(),
+                            "40": v4_1.z.string(),
+                            "45": v4_1.z.string(),
+                            "50": v4_1.z.string(),
+                            "55": v4_1.z.string(),
+                        }),
+                        EX: v4_1.z.object({
+                            "10": v4_1.z.string(),
+                            "15": v4_1.z.string(),
+                        }),
+                        CN: v4_1.z.object({
+                            "0": v4_1.z.string(),
+                            "10": v4_1.z.string(),
+                            "20": v4_1.z.string(),
+                            "30": v4_1.z.string(),
+                            "40": v4_1.z.string(),
+                            "50": v4_1.z.string(),
+                        }),
+                    }),
+                }),
+            });
+            async function draw(ctx, theme, element, chartId, scores, region = "DX") {
+                /* Begin Background Draw */
+                ctx.roundRect(element.x, element.y, element.width, element.height, Math.min(theme.content.width, theme.content.height) *
+                    (3 / 128));
+                ctx.fillStyle = element.color.card;
+                ctx.strokeStyle = new color_1.default(element.color.card)
+                    .darken(0.6)
+                    .hex();
+                ctx.lineWidth =
+                    Math.min(theme.content.width, theme.content.height) *
+                        (3 / 512);
+                ctx.stroke();
+                ctx.fill();
+                /* End Background Draw */
+                const difficulties = [];
+                for (let i = type_1.EDifficulty.BASIC; i <= type_1.EDifficulty.REMASTER; ++i) {
+                    const chart = database_1.Database.getLocalChart(chartId, i);
+                    if (chart)
+                        difficulties.push(chart);
+                }
+                const cardWidth = element.width - element.margin * 2;
+                const cardHeight = (element.height - element.margin * 2 - element.gap * 3) / 4;
+                for (let y = element.y + element.margin, i = 0; i < difficulties.length; ++i, y += cardHeight + element.gap) {
+                    const chart = difficulties[i];
+                    if (chart)
+                        if (difficulties.length > 4 && i == 0) {
+                            await drawChartGridCard(ctx, theme, element, chart, i, element.x + element.margin, y, (cardWidth - element.margin) / 2, cardHeight, true, region, scores[i]);
+                            i++;
+                            const chartA = difficulties[i];
+                            if (chartA)
+                                await drawChartGridCard(ctx, theme, element, chartA, i, element.x +
+                                    element.margin +
+                                    (cardWidth + element.margin) / 2, y, (cardWidth - element.margin) / 2, cardHeight, true, region, scores[i]);
+                        }
+                        else {
+                            await drawChartGridCard(ctx, theme, element, chart, i, element.x + element.margin, y, cardWidth, cardHeight, false, region, scores[i]);
+                        }
+                }
+            }
+            ChartGrid.draw = draw;
+            async function drawChartGridCard(ctx, theme, element, chart, difficulty, x, y, width, height, isShort, targetRegion = "DX", score) {
+                let curColor = "#FFFFFF";
+                switch (difficulty) {
+                    case type_1.EDifficulty.BASIC:
+                        curColor = element.bubble.color.basic;
+                        break;
+                    case type_1.EDifficulty.ADVANCED:
+                        curColor = element.bubble.color.advanced;
+                        break;
+                    case type_1.EDifficulty.EXPERT:
+                        curColor = element.bubble.color.expert;
+                        break;
+                    case type_1.EDifficulty.MASTER:
+                        curColor = element.bubble.color.master;
+                        break;
+                    case type_1.EDifficulty.REMASTER:
+                        curColor = element.bubble.color.remaster;
+                        break;
+                    case type_1.EDifficulty.UTAGE:
+                        curColor = element.bubble.color.utage;
+                        break;
+                }
+                /** Begin Card Draw */
+                ctx.save();
+                ctx.fillStyle = new color_1.default(curColor).lighten(0.4).hexa();
+                ctx.beginPath();
+                ctx.roundRect(x, y, width, height, (height * 0.806) / 7);
+                ctx.strokeStyle = new color_1.default(curColor).darken(0.3).hexa();
+                ctx.lineWidth = element.bubble.margin / 4;
+                ctx.stroke();
+                ctx.fill();
+                ctx.beginPath();
+                ctx.roundRect(x, y, width, height, (height * 0.806) / 7);
+                ctx.clip();
+                /** Begin Main Content Draw */
+                {
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.rect(x, y, width, height);
+                    ctx.clip();
+                    ctx.fillStyle = curColor;
+                    ctx.fill();
+                    const titleSize = height * (47 / 256);
+                    /** Begin Difficulty Text & Separation Line Draw */
+                    {
+                        let difficultiy = "";
+                        switch (chart.difficulty) {
+                            case type_1.EDifficulty.BASIC:
+                                difficultiy = "BASIC";
+                                break;
+                            case type_1.EDifficulty.ADVANCED:
+                                difficultiy = "ADVANCED";
+                                break;
+                            case type_1.EDifficulty.EXPERT:
+                                difficultiy = "EXPERT";
+                                break;
+                            case type_1.EDifficulty.MASTER:
+                                difficultiy = "MASTER";
+                                break;
+                            case type_1.EDifficulty.REMASTER:
+                                difficultiy = "Re:MASTER";
+                                break;
+                            case type_1.EDifficulty.UTAGE:
+                                difficultiy = "U·TA·GE";
+                                break;
+                        }
+                        const levelTextSize = titleSize * (5 / 8);
+                        util_1.Util.drawText(ctx, difficultiy, x + element.bubble.margin, y +
+                            element.bubble.margin +
+                            titleSize -
+                            element.bubble.margin * (1 / 4), titleSize, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                        const difficultyTextWidth = util_1.Util.measureText(ctx, difficultiy, titleSize, Infinity).width;
+                        util_1.Util.drawText(ctx, `Lv. ${util_1.Util.truncate(chart.level, 1)}${score ? `　↑${util_1.Util.truncate(score.dxRating, 0)}` : ""}`, x + element.bubble.margin * 2 + difficultyTextWidth, y +
+                            element.bubble.margin +
+                            titleSize -
+                            element.bubble.margin * (1 / 4), levelTextSize, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                        ctx.beginPath();
+                        ctx.roundRect(x + element.bubble.margin, y +
+                            element.bubble.margin +
+                            titleSize +
+                            element.bubble.margin * (1 / 4), height * 2 - element.bubble.margin * 2, height * 0.806 * 0.02, height * 0.806 * 0.16);
+                        ctx.fillStyle = new color_1.default(curColor).darken(0.3).hex();
+                        ctx.fill();
+                    }
+                    /** End Difficulty Text & Separation Line Draw */
+                    /** Begin Achievement Rate Draw */
+                    {
+                        const scoreSize = height * 0.806 * 0.208;
+                        util_1.Util.drawText(ctx, score
+                            ? `${util_1.Util.truncate(score.achievement, 4)}%`
+                            : "NO RECORD", x +
+                            height * 2 -
+                            element.bubble.margin -
+                            height * 0.806 * 0.02, y +
+                            element.bubble.margin +
+                            titleSize +
+                            element.bubble.margin * (5 / 8) +
+                            scoreSize, scoreSize, height * 0.806 * 0.04, Infinity, "right", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    }
+                    /** End Achievement Rate Draw */
+                    /** Begin Achievement Rank Draw */
+                    {
+                        if (score) {
+                            let rankImg;
+                            switch (score.achievementRank) {
+                                case type_1.EAchievementTypes.D:
+                                    rankImg = theme.getFile(element.sprites.achievement.d);
+                                    break;
+                                case type_1.EAchievementTypes.C:
+                                    rankImg = theme.getFile(element.sprites.achievement.c);
+                                    break;
+                                case type_1.EAchievementTypes.B:
+                                    rankImg = theme.getFile(element.sprites.achievement.b);
+                                    break;
+                                case type_1.EAchievementTypes.BB:
+                                    rankImg = theme.getFile(element.sprites.achievement.bb);
+                                    break;
+                                case type_1.EAchievementTypes.BBB:
+                                    rankImg = theme.getFile(element.sprites.achievement.bbb);
+                                    break;
+                                case type_1.EAchievementTypes.A:
+                                    rankImg = theme.getFile(element.sprites.achievement.a);
+                                    break;
+                                case type_1.EAchievementTypes.AA:
+                                    rankImg = theme.getFile(element.sprites.achievement.aa);
+                                    break;
+                                case type_1.EAchievementTypes.AAA:
+                                    rankImg = theme.getFile(element.sprites.achievement.aaa);
+                                    break;
+                                case type_1.EAchievementTypes.S:
+                                    rankImg = theme.getFile(element.sprites.achievement.s);
+                                    break;
+                                case type_1.EAchievementTypes.SP:
+                                    rankImg = theme.getFile(element.sprites.achievement.sp);
+                                    break;
+                                case type_1.EAchievementTypes.SS:
+                                    rankImg = theme.getFile(element.sprites.achievement.ss);
+                                    break;
+                                case type_1.EAchievementTypes.SSP:
+                                    rankImg = theme.getFile(element.sprites.achievement.ssp);
+                                    break;
+                                case type_1.EAchievementTypes.SSS:
+                                    rankImg = theme.getFile(element.sprites.achievement.sss);
+                                    break;
+                                default:
+                                    rankImg = theme.getFile(element.sprites.achievement.sssp);
+                            }
+                            const img = new canvas_1.Image();
+                            img.src = rankImg;
+                            ctx.drawImage(img, x + element.bubble.margin * (1 / 4), y +
+                                element.bubble.margin +
+                                titleSize +
+                                element.bubble.margin * (1 / 2), height * 0.806 * 0.3 * 2.133, height * 0.806 * 0.3);
+                        }
+                    }
+                    /** End Achievement Rank Draw */
+                    /** Begin Milestone Draw */
+                    {
+                        if (score) {
+                            let comboImg, syncImg;
+                            switch (score.combo) {
+                                case type_1.EComboTypes.NONE:
+                                    comboImg = theme.getFile(element.sprites.milestone.none);
+                                    break;
+                                case type_1.EComboTypes.FULL_COMBO:
+                                    comboImg = theme.getFile(element.sprites.milestone.fc);
+                                    break;
+                                case type_1.EComboTypes.FULL_COMBO_PLUS:
+                                    comboImg = theme.getFile(element.sprites.milestone.fcp);
+                                    break;
+                                case type_1.EComboTypes.ALL_PERFECT:
+                                    comboImg = theme.getFile(element.sprites.milestone.ap);
+                                    break;
+                                case type_1.EComboTypes.ALL_PERFECT_PLUS:
+                                    comboImg = theme.getFile(element.sprites.milestone.app);
+                                    break;
+                            }
+                            switch (score.sync) {
+                                case type_1.ESyncTypes.NONE:
+                                    syncImg = theme.getFile(element.sprites.milestone.none);
+                                    break;
+                                case type_1.ESyncTypes.SYNC_PLAY:
+                                    syncImg = theme.getFile(element.sprites.milestone.sync);
+                                    break;
+                                case type_1.ESyncTypes.FULL_SYNC:
+                                    syncImg = theme.getFile(element.sprites.milestone.fs);
+                                    break;
+                                case type_1.ESyncTypes.FULL_SYNC_PLUS:
+                                    syncImg = theme.getFile(element.sprites.milestone.fsp);
+                                    break;
+                                case type_1.ESyncTypes.FULL_SYNC_DX:
+                                    syncImg = theme.getFile(element.sprites.milestone.fdx);
+                                    break;
+                                case type_1.ESyncTypes.FULL_SYNC_DX_PLUS:
+                                    syncImg = theme.getFile(element.sprites.milestone.fdxp);
+                                    break;
+                            }
+                            const combo = new canvas_1.Image();
+                            combo.src = comboImg;
+                            ctx.drawImage(combo, x +
+                                height *
+                                    0.806 *
+                                    (0.32 * 2.133 + 0.06 - 0.1), y +
+                                element.bubble.margin +
+                                titleSize +
+                                element.bubble.margin * (1 / 2), height * 0.806 * 0.32, height * 0.806 * 0.32);
+                            const sync = new canvas_1.Image();
+                            sync.src = syncImg;
+                            ctx.drawImage(sync, x +
+                                height *
+                                    0.806 *
+                                    (0.32 * 2.133 + 0.04 + 0.32 - 0.1), y +
+                                element.bubble.margin +
+                                titleSize +
+                                element.bubble.margin * (1 / 2), height * 0.806 * 0.32, height * 0.806 * 0.32);
+                        }
+                    }
+                    /** End Milestone Draw */
+                    /** Begin Version Draw */
+                    {
+                        let versions = [];
+                        for (let i = 0; i < 3; ++i) {
+                            versions[i] = {
+                                region: "DX",
+                                version: undefined,
+                                EXAppend: false,
+                            };
+                        }
+                        const VER_DX = chart.difficulty == type_1.EDifficulty.REMASTER
+                            ? chart.events.find((v) => v.type == "existence" &&
+                                v.version.region == "DX")?.version
+                            : chart.addVersion.DX;
+                        const VER_EX = chart.difficulty == type_1.EDifficulty.REMASTER
+                            ? chart.events.find((v) => v.type == "existence" &&
+                                v.version.region == "EX")?.version
+                            : chart.addVersion.EX;
+                        const VER_CN = chart.difficulty == type_1.EDifficulty.REMASTER
+                            ? chart.events.find((v) => v.type == "existence" &&
+                                v.version.region == "CN")?.version
+                            : chart.addVersion.CN;
+                        if (VER_DX) {
+                            const version = versions[0];
+                            version.version = VER_DX;
+                            version.region = "DX";
+                        }
+                        if (VER_EX) {
+                            for (let i = 0; i < 3; ++i) {
+                                const version = versions[i];
+                                if (version.version) {
+                                    if (!(version.version.gameVersion.isDX &&
+                                        version.version.gameVersion.minor >=
+                                            10 &&
+                                        version.version.gameVersion.minor <
+                                            20) &&
+                                        lodash_1.default.isEqual(versions[i].version?.gameVersion, VER_EX.gameVersion)) {
+                                        versions[i].EXAppend = true;
+                                        break;
+                                    }
+                                }
+                                else {
+                                    version.version = VER_EX;
+                                    version.region = "EX";
+                                    break;
+                                }
+                            }
+                        }
+                        if (VER_CN) {
+                            for (let i = 0; i < 3; ++i) {
+                                const version = versions[i];
+                                if (version.version) {
+                                    if (!version.version.gameVersion.isDX &&
+                                        lodash_1.default.isEqual(versions[i].version?.gameVersion, VER_CN.gameVersion)) {
+                                        break;
+                                    }
+                                }
+                                else {
+                                    version.version = VER_CN;
+                                    version.region = "CN";
+                                    break;
+                                }
+                            }
+                        }
+                        let counter = 0;
+                        for (const version of versions) {
+                            if (version.version) {
+                                counter++;
+                                if (!version.version.gameVersion.isDX)
+                                    version.region = "OLD";
+                            }
+                        }
+                        const versionImageHeight = (height - element.bubble.margin * 2) *
+                            (isShort ? 1 / 3 : 3 / 8);
+                        const versionImageWidth = (versionImageHeight / 160) * 332;
+                        const regionTextSize = versionImageHeight * (5 / 8);
+                        for (let i = 0, curx = x + width - element.bubble.margin, cury = y + element.bubble.margin; i < versions.length; ++i,
+                            cury =
+                                isShort ||
+                                    curx - versionImageWidth - regionTextSize <
+                                        x + height * 2
+                                    ? cury + versionImageHeight
+                                    : cury,
+                            curx =
+                                isShort ||
+                                    curx - versionImageWidth - regionTextSize <
+                                        x + height * 2
+                                    ? x + width - element.bubble.margin
+                                    : curx) {
+                            const version = versions[i];
+                            if (version.version) {
+                                let region = version.region;
+                                if (version.region == "EX" &&
+                                    !(version.version.gameVersion.minor >=
+                                        10 &&
+                                        version.version.gameVersion.minor < 20)) {
+                                    region = "DX";
+                                }
+                                const rawVersion = findVersion(version.version.gameVersion.minor, version.version.gameVersion.isDX, region == "CN");
+                                if (rawVersion) {
+                                    const versionImage = theme.getFile(element.sprites.versions[region][rawVersion]);
+                                    try {
+                                        (0, sharp_1.default)(versionImage);
+                                        if (versionImage) {
+                                            const versionImg = new canvas_1.Image();
+                                            versionImg.src = versionImage;
+                                            let text;
+                                            switch (version.region) {
+                                                case "DX":
+                                                    if (version.EXAppend)
+                                                        text = "🇯🇵🌏";
+                                                    else
+                                                        text = "🇯🇵";
+                                                    break;
+                                                case "EX":
+                                                    text = "🌏";
+                                                    break;
+                                                case "CN":
+                                                    text = "🇨🇳";
+                                                    break;
+                                                default:
+                                                    text = "";
+                                            }
+                                            ctx.drawImage(versionImg, (curx -= versionImageWidth), cury, versionImageWidth, versionImageHeight);
+                                            if (version.region != "OLD") {
+                                                await util_1.Util.drawEmojiOrGlyph(ctx, text, curx, cury +
+                                                    regionTextSize +
+                                                    (versionImageHeight -
+                                                        regionTextSize) /
+                                                        2, regionTextSize, Infinity, "right");
+                                                curx -=
+                                                    util_1.Util.visibleLength(text) *
+                                                        regionTextSize +
+                                                        element.bubble.margin;
+                                            }
+                                        }
+                                    }
+                                    catch { }
+                                }
+                            }
+                        }
+                        /** End Version Draw */
+                        /** Begin Note Count Draw */
+                        const noteCountTexts = Object.entries(chart.meta.notes).map(([k, v]) => `${util_1.Util.capitalize(k)}: ${v}`);
+                        const noteCountTextSize = (height - element.bubble.margin * 4) /
+                            noteCountTexts.length;
+                        let noteCountLength = 0;
+                        noteCountTexts.forEach((v, i) => {
+                            util_1.Util.drawText(ctx, v, x +
+                                element.bubble.margin * (3 / 2) +
+                                height * 2, y +
+                                element.bubble.margin +
+                                noteCountTextSize +
+                                (noteCountTextSize +
+                                    element.bubble.margin / 2) *
+                                    i, noteCountTextSize, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                            const length = util_1.Util.measureText(ctx, v, noteCountTextSize, Infinity).width;
+                            if (length > noteCountLength)
+                                noteCountLength = length;
+                        });
+                        /** End Note Count Draw */
+                        /** Begin Internal Level Trend Draw */
+                        if (!isShort) {
+                            const CURRENT_MINOR = (() => {
+                                switch (targetRegion) {
+                                    case "EX":
+                                        return EX_LATEST;
+                                    case "CN":
+                                        return CN_LATEST;
+                                    case "DX":
+                                    default:
+                                        return DX_LATEST;
+                                }
+                            })();
+                            const maxWidth = width -
+                                height * 2 -
+                                element.bubble.margin * 4 -
+                                noteCountLength;
+                            const maxFitTrendCount = Math.trunc(maxWidth / versionImageWidth);
+                            const trendEvents = chart.events.filter((v) => v.type == "existence" &&
+                                v.version.region == targetRegion);
+                            let actualEvents = lodash_1.default.uniqWith(trendEvents, (a, b) => {
+                                return lodash_1.default.isEqual(a.data.level, b.data.level);
+                            });
+                            if (actualEvents.length == maxFitTrendCount) {
+                            }
+                            else if (actualEvents.length > maxFitTrendCount) {
+                                while (actualEvents.length > maxFitTrendCount)
+                                    actualEvents.shift();
+                                actualEvents.shift();
+                                actualEvents.shift();
+                                actualEvents.unshift(trendEvents[0]);
+                                actualEvents.push(trendEvents[trendEvents.length - 1]);
+                            }
+                            else if (trendEvents.length > maxFitTrendCount) {
+                                actualEvents = lodash_1.default.filter(actualEvents, (v) => !(lodash_1.default.isEqual(v.version.gameVersion, trendEvents[0].version
+                                    .gameVersion) ||
+                                    lodash_1.default.isEqual(v.version.gameVersion, trendEvents[trendEvents.length - 1].version.gameVersion)));
+                                for (let i = trendEvents.length - 2; i > 0 &&
+                                    actualEvents.length < maxFitTrendCount - 2; --i) {
+                                    const event = trendEvents[i];
+                                    if (event)
+                                        actualEvents.push(event);
+                                    actualEvents = lodash_1.default.uniqWith(actualEvents, (a, b) => {
+                                        return (lodash_1.default.isEqual(a.version.gameVersion.major, b.version.gameVersion.major) &&
+                                            lodash_1.default.isEqual(a.version.gameVersion.minor, b.version.gameVersion.minor));
+                                    });
+                                }
+                                actualEvents.unshift(trendEvents[0]);
+                                actualEvents.push(trendEvents[trendEvents.length - 1]);
+                                actualEvents = lodash_1.default.uniqWith(actualEvents, (a, b) => {
+                                    return (lodash_1.default.isEqual(a.version.gameVersion.major, b.version.gameVersion.major) &&
+                                        lodash_1.default.isEqual(a.version.gameVersion.minor, b.version.gameVersion.minor));
+                                });
+                                actualEvents = lodash_1.default.sortBy(actualEvents, (v) => v.version.gameVersion.minor);
+                                if (trendEvents.length > 1) {
+                                    if (actualEvents.length >= maxFitTrendCount)
+                                        actualEvents.pop();
+                                    actualEvents.push(trendEvents[trendEvents.length - 1]);
+                                }
+                                const removalEvent = chart.events.find((v) => v.type == "removal" &&
+                                    v.version.region == targetRegion);
+                                if (removalEvent) {
+                                    actualEvents.pop();
+                                    actualEvents.push(removalEvent);
+                                }
+                            }
+                            else {
+                                actualEvents = [...trendEvents];
+                            }
+                            if (actualEvents[actualEvents.length - 1]?.version
+                                .gameVersion.minor < CURRENT_MINOR) {
+                                while (actualEvents.length >= maxFitTrendCount)
+                                    actualEvents.pop();
+                                actualEvents.push({
+                                    type: "removal",
+                                    version: util_2.MaimaiUtil.Version.toEventVersion(util_2.MaimaiUtil.Version.getNextVersion(trendEvents[trendEvents.length - 1]
+                                        .version)),
+                                });
+                            }
+                            actualEvents = lodash_1.default.uniqWith(actualEvents, (a, b) => {
+                                return (lodash_1.default.isEqual(a.version.gameVersion.major, b.version.gameVersion.major) &&
+                                    lodash_1.default.isEqual(a.version.gameVersion.minor, b.version.gameVersion.minor) &&
+                                    lodash_1.default.isEqual(a.type, b.type));
+                            });
+                            let positionAdjustment = 0;
+                            let addGap = (maxWidth -
+                                actualEvents.length * versionImageWidth) /
+                                (actualEvents.length - 1);
+                            if (addGap > maxWidth / 5) {
+                                addGap = maxWidth / 5;
+                                positionAdjustment =
+                                    (maxWidth -
+                                        (addGap * (actualEvents.length - 1) +
+                                            versionImageWidth *
+                                                actualEvents.length)) /
+                                        2;
+                            }
+                            for (let i = 0, curx = x +
+                                positionAdjustment +
+                                height * 2 +
+                                element.bubble.margin * (5 / 2) +
+                                noteCountLength, cury = y +
+                                element.bubble.margin * (3 / 2) +
+                                versionImageHeight; i < actualEvents.length; ++i) {
+                                const event = actualEvents[i];
+                                if (!event)
+                                    continue;
+                                let logoRegion = event.version.gameVersion.isDX
+                                    ? targetRegion
+                                    : "OLD";
+                                if (logoRegion == "EX") {
+                                    if (!(10 <=
+                                        event.version.gameVersion
+                                            .minor &&
+                                        event.version.gameVersion.minor < 20)) {
+                                        logoRegion = "DX";
+                                    }
+                                }
+                                const rawVersion = findVersion(event.version.gameVersion.minor, event.version.gameVersion.isDX, logoRegion == "CN");
+                                if (rawVersion) {
+                                    const versionImage = theme.getFile(element.sprites.versions[logoRegion][rawVersion]);
+                                    try {
+                                        (0, sharp_1.default)(versionImage);
+                                        if (versionImage) {
+                                            const versionImg = new canvas_1.Image();
+                                            versionImg.src = versionImage;
+                                            ctx.drawImage(versionImg, curx, cury, versionImageWidth, versionImageHeight);
+                                            if (event.type == "existence") {
+                                                let symbol = "";
+                                                if (i != 0) {
+                                                    const lastEvent = actualEvents[i - 1];
+                                                    if (lastEvent.type ==
+                                                        "existence") {
+                                                        if (lastEvent.data
+                                                            .level <
+                                                            event.data.level)
+                                                            symbol = "↑";
+                                                        else if (lastEvent.data
+                                                            .level >
+                                                            event.data.level)
+                                                            symbol = "↓";
+                                                        else if (lastEvent.data
+                                                            .level ==
+                                                            event.data.level)
+                                                            symbol = "→";
+                                                    }
+                                                }
+                                                util_1.Util.drawText(ctx, `${symbol}${util_1.Util.truncate(event.data.level, 1)}`, curx +
+                                                    versionImageWidth / 2, cury +
+                                                    versionImageHeight +
+                                                    noteCountTextSize, noteCountTextSize, height * 0.806 * 0.04, Infinity, "center", "white", new color_1.default(curColor)
+                                                    .darken(0.3)
+                                                    .hexa());
+                                            }
+                                            else if (event.type == "removal") {
+                                                util_1.Util.drawText(ctx, `❌`, curx +
+                                                    versionImageWidth / 2, cury +
+                                                    versionImageHeight +
+                                                    noteCountTextSize, noteCountTextSize, height * 0.806 * 0.04, Infinity, "center", "white", new color_1.default(curColor)
+                                                    .darken(0.3)
+                                                    .hexa());
+                                            }
+                                            curx += versionImageWidth + addGap;
+                                        }
+                                    }
+                                    catch { }
+                                }
+                            }
+                        }
+                    }
+                    /** End Internal Level Trend Draw */
+                    ctx.restore();
+                }
+                /** End Main Content Draw */
+                ctx.fillStyle = new color_1.default(curColor).lighten(0.4).hexa();
+                ctx.beginPath();
+                ctx.roundRect(x, y + height * 0.742, height * 2, height * (1 - 0.742), [0, (height * 0.806) / 7, 0, (height * 0.806) / 7]);
+                ctx.fill();
+                /** Begin Difficulty & DX Rating Draw */
+                {
+                    ctx.save();
+                    ctx.clip();
+                    util_1.Util.drawText(ctx, chart.designer.name || "-", x + element.bubble.margin, y + height * (0.806 + (1 - 0.806) / 2), height * 0.806 * 0.128, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                    ctx.restore();
+                    util_1.Util.drawText(ctx, `${score ? `${score.dxScore}/` : "MAX DX SCR: "}${chart.meta.maxDXScore}`, x + height * 2 - element.bubble.margin, y + height - element.bubble.margin * 3.1, height * 0.806 * 0.128, height * 0.806 * 0.04, Infinity, "right", "white", new color_1.default(curColor).darken(0.3).hexa());
+                }
+                /** End Difficulty & DX Rating Draw */
+                ctx.restore();
+                /** End Card Draw */
+            }
+        })(ChartGrid = Chart.ChartGrid || (Chart.ChartGrid = {}));
+        let DetailInfo;
+        (function (DetailInfo) {
+            DetailInfo.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("detail-info"),
+                width: v4_1.z.number().min(1),
+                height: v4_1.z.number().min(1),
+                margin: v4_1.z.number().min(0),
+                color: v4_1.z.object({
+                    card: util_1.Util.z.color(),
+                }),
+                sprites: v4_1.z.object({
+                    mode: v4_1.z.object({
+                        standard: v4_1.z.string(),
+                        dx: v4_1.z.string(),
+                    }),
+                }),
+            });
+            async function draw(ctx, theme, element, chartId) {
+                const jacketMargin = element.margin;
+                const textMargin = element.margin;
+                const chart = database_1.Database.getLocalChart(chartId, type_1.EDifficulty.BASIC);
+                const jacket = await database_1.Database.fetchJacket(chartId);
+                /* Begin Background Draw */
+                ctx.beginPath();
+                ctx.roundRect(element.x, element.y, element.width, element.height, Math.min(theme.content.width, theme.content.height) *
+                    (3 / 128));
+                ctx.fillStyle = element.color.card;
+                ctx.strokeStyle = new color_1.default(element.color.card)
+                    .darken(0.6)
+                    .hex();
+                ctx.lineWidth =
+                    Math.min(theme.content.width, theme.content.height) *
+                        (3 / 512);
+                ctx.stroke();
+                ctx.fill();
+                /* End Background Draw */
+                /* Begin jacket draw */
+                if (jacket) {
+                    const jacketImage = new canvas_1.Image();
+                    const roundRadius = Math.min(theme.content.width, theme.content.height) *
+                        (3 / 128);
+                    jacketImage.src = jacket;
+                    ctx.beginPath();
+                    ctx.roundRect(element.x + jacketMargin, element.y + jacketMargin, element.width - jacketMargin * 2, element.width - jacketMargin * 2, [roundRadius, roundRadius, 0, 0]);
+                    ctx.save();
+                    ctx.clip();
+                    ctx.drawImage(jacketImage, element.x + jacketMargin, element.y + jacketMargin, element.width - jacketMargin * 2, element.width - jacketMargin * 2);
+                    ctx.restore();
+                }
+                /* End jacket draw */
+                /* Begin Detail Draw */
+                if (chart) {
+                    const textSizeTitle = element.width * (1 / 16);
+                    const textSizeSecondary = element.width * (1 / 24);
+                    const { actualBoundingBoxAscent: ascent, actualBoundingBoxDescent: decent, } = util_1.Util.measureText(ctx, chart.name, textSizeTitle, Infinity);
+                    const titleActualHeight = Math.abs(ascent - decent);
+                    const mode = new canvas_1.Image();
+                    const chartModeBadgeImg = theme.getFile(chart.id > 10000
+                        ? element.sprites.mode.dx
+                        : element.sprites.mode.standard);
+                    const { width: modeWidth, height: modeHeight } = await (0, sharp_1.default)(chartModeBadgeImg).metadata();
+                    const aspectRatio = (modeWidth ?? 0) / (modeHeight ?? 1) || 3;
+                    const textLineWidth = element.width * (7 / 512);
+                    const textColor = new color_1.default(element.color.card)
+                        .darken(0.5)
+                        .hex();
+                    const textTitleMaxWidth = element.width -
+                        textMargin * 2 -
+                        textSizeTitle * aspectRatio;
+                    const titleMetrics = util_1.Util.measureText(ctx, chart.name, textSizeTitle, textTitleMaxWidth);
+                    util_1.Util.drawText(ctx, chart.name, element.x + textMargin, element.y +
+                        jacketMargin +
+                        textMargin * (1 / 2) +
+                        (element.width - jacketMargin * 2) +
+                        textSizeTitle, textSizeTitle, textLineWidth, textTitleMaxWidth, "left", "white", textColor);
+                    util_1.Util.drawText(ctx, chart.artist, element.x + textMargin, element.y +
+                        jacketMargin +
+                        textMargin * (1 / 2) +
+                        (element.width - jacketMargin * 2) +
+                        textSizeTitle * 2, textSizeSecondary, textLineWidth, element.width - textMargin * 2, "left", "white", textColor);
+                    util_1.Util.drawText(ctx, `#${chart.id} BPM: ${chart.bpm}`, element.x + textMargin, element.y +
+                        jacketMargin +
+                        textMargin * (1 / 2) +
+                        (element.width - jacketMargin * 2) +
+                        textSizeTitle * 3, textSizeSecondary, textLineWidth, element.width - textMargin * 2, "left", "white", textColor);
+                    const EVENT_DX = chart.events
+                        .filter((v) => v.version.region == "DX" &&
+                        v.version.gameVersion.minor >= DX_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_EX = chart.events
+                        .filter((v) => v.version.region == "EX" &&
+                        v.version.gameVersion.minor >= EX_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_CN = chart.events
+                        .filter((v) => v.version.region == "CN" &&
+                        v.version.gameVersion.minor >= CN_LATEST)
+                        .map((v) => v.type);
+                    const EXIST_DX = EVENT_DX.includes("existence") &&
+                        !EVENT_DX.includes("removal")
+                        ? "🇯🇵"
+                        : "";
+                    const EXIST_EX = EVENT_EX.includes("existence") &&
+                        !EVENT_EX.includes("removal")
+                        ? "🌏"
+                        : "";
+                    const EXIST_CN = EVENT_CN.includes("existence") &&
+                        !EVENT_CN.includes("removal")
+                        ? "🇨🇳"
+                        : "";
+                    const title = [];
+                    if (EXIST_DX)
+                        title.push(EXIST_DX);
+                    if (EXIST_EX)
+                        title.push(EXIST_EX);
+                    if (EXIST_CN)
+                        title.push(EXIST_CN);
+                    await util_1.Util.drawEmojiOrGlyph(ctx, title.join(" "), element.x + element.width - textMargin, element.y +
+                        jacketMargin +
+                        textMargin * (1 / 2) +
+                        (element.width - jacketMargin * 2) +
+                        textSizeTitle * 3, textSizeSecondary * (9 / 8), element.width - textMargin * 2, "right", "white", textColor);
+                    /** Begin Chart Mode Draw */
+                    {
+                        mode.src = chartModeBadgeImg;
+                        ctx.drawImage(mode, element.x +
+                            textMargin * (3 / 2) +
+                            titleMetrics.width, element.y +
+                            jacketMargin +
+                            textMargin * (1 / 2) +
+                            (element.width - jacketMargin * 2) -
+                            titleActualHeight / 2 +
+                            textSizeTitle / 2, textSizeTitle * aspectRatio, textSizeTitle);
+                    }
+                    /** End Chart Mode Draw */
+                }
+                /* End Detail Draw */
+            }
+            DetailInfo.draw = draw;
+        })(DetailInfo = Chart.DetailInfo || (Chart.DetailInfo = {}));
+    })(Chart = MaimaiPainterModule.Chart || (MaimaiPainterModule.Chart = {}));
+})(MaimaiPainterModule || (exports.MaimaiPainterModule = MaimaiPainterModule = {}));
+//# sourceMappingURL=index.js.map