maidraw 0.9.4 → 0.10.0

package/dist/chu/painter/index.js

@@ -0,0 +1,1105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChunithmPainterModule = exports.ChunithmPainter = 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 database_1 = require("../lib/database");
+const util_1 = require("../lib/util");
+const type_1 = require("../type");
+const util_2 = require("../../lib/util");
+const painter_1 = require("../../lib/painter");
+class ChunithmPainter extends painter_1.Painter {
+    constructor({ theme: { schema, searchPaths, defaultTheme }, }) {
+        super({ theme: { schema, searchPaths, defaultTheme } });
+    }
+}
+exports.ChunithmPainter = ChunithmPainter;
+var ChunithmPainterModule;
+(function (ChunithmPainterModule) {
+    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({
+                ratingNumberMap: 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 * 2.526, element.height);
+            /* Begin Profile Picture Draw */
+            {
+                ctx.save();
+                ctx.beginPath();
+                ctx.roundRect(element.x + element.height * 2.0, element.y + element.height * 0.3, element.height * 0.45, element.height * 0.45, 0);
+                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 * 2.0, element.y + element.height * 0.3, element.height * 0.45, element.height * 0.45);
+                if (profilePicture) {
+                    ctx.beginPath();
+                    ctx.roundRect(element.x + element.height * 2.0, element.y + element.height * 0.3, element.height * 0.45, element.height * 0.45, 0);
+                    ctx.strokeStyle = color_1.default.rgb(dominant).darken(0.3).hex();
+                    ctx.lineWidth = element.height / 128;
+                    ctx.stroke();
+                }
+                ctx.restore();
+            }
+            /* End Profile Picture Draw */
+            /* Begin Username Draw */
+            {
+                ctx.beginPath();
+                ctx.roundRect(element.x + element.height * (21 / 32), element.y + element.height * (11 / 32), element.height * (85 / 64), element.height * (13 / 32), 0);
+                ctx.fillStyle = "rgba(255, 255, 255, 0.45)";
+                ctx.fill();
+                // const ratingImgBuffer = await this.getRatingNumber(rating, theme);
+                // if (ratingImgBuffer) {
+                //     const { width, height } =
+                //         await sharp(ratingImgBuffer).metadata();
+                //     if (width && height) {
+                //         const aspectRatio = width / height;
+                //         const image = new Image();
+                //         image.src = ratingImgBuffer;
+                //         const drawHeight = (element.height * 7) / 32;
+                //         ctx.drawImage(
+                //             image,
+                //             element.x + element.height * 2.0,
+                //             element.y + element.height * 0.3,
+                //             drawHeight * aspectRatio * 0.8,
+                //             drawHeight
+                //         );
+                //     }
+                // }
+                util_2.Util.drawText(ctx, "Lv.", element.x + element.height * (43 / 64), element.y + element.height * (0.3 + 1 / 4), (element.height * 1) / 16, 0, ((element.height / 3) * 5.108 * 3.1) / 5, "left", "black", "black", "standard-font-username");
+                util_2.Util.drawText(ctx, "99", element.x + element.height * (49 / 64), element.y + element.height * (0.3 + 1 / 4), (element.height * 1) / 11, 0, ((element.height / 3) * 5.108 * 3.1) / 5, "left", "black", "black", "standard-font-username");
+                util_2.Util.drawText(ctx, util_2.Util.HalfFullWidthConvert.toFullWidth(username), element.x + element.height * (56 / 64), element.y + element.height * (0.3 + 1 / 4), (element.height * 1) / 8, 0, element.height * (65 / 64), "left", "black", "black", "standard-font-username");
+                util_2.Util.drawText(ctx, "RATING", element.x + element.height * (43 / 64), element.y + element.height * (47 / 64), (element.height * 7) / 88, 0, ((element.height / 3) * 5.108 * 3.1) / 5, "left", "black", "black", "standard-font-username");
+                util_2.Util.drawText(ctx, util_2.Util.truncate(rating, 2), element.x + element.height * (67 / 64), element.y + element.height * (47 / 64), (element.height * 5) / 44, 0, ((element.height / 3) * 5.108 * 3.1) / 5, "left", "black", "black", "standard-font-username");
+            }
+            /* End Username Draw*/
+        }
+        Profile.draw = draw;
+    })(Profile = ChunithmPainterModule.Profile || (ChunithmPainterModule.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_2.Util.z.color(),
+                        advanced: util_2.Util.z.color(),
+                        expert: util_2.Util.z.color(),
+                        master: util_2.Util.z.color(),
+                        ultima: util_2.Util.z.color(),
+                        worldsEnd: util_2.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({
+                        aj: v4_1.z.string(),
+                        ajc: v4_1.z.string(),
+                        fc: v4_1.z.string(),
+                        none: v4_1.z.string(),
+                    }),
+                }),
+            });
+            async function draw(ctx, theme, element, score, index, x, y) {
+                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.ULTIMA:
+                        curColor = element.scoreBubble.color.ultima;
+                        break;
+                    case type_1.EDifficulty.WORLDS_END:
+                        curColor = element.scoreBubble.color.worldsEnd;
+                        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 */
+                {
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.roundRect(x, y, element.scoreBubble.width, element.scoreBubble.height * 0.742, (element.scoreBubble.height * 0.806) / 7);
+                    ctx.clip();
+                    ctx.fillStyle = curColor;
+                    ctx.fill();
+                    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(-1);
+                    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_2.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_2.Util.drawText(ctx, util_2.Util.truncate(score.score, 0), 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.rank) {
+                            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 * (13 / 16), y +
+                            element.scoreBubble.margin +
+                            element.scoreBubble.height *
+                                0.806 *
+                                (0.144 + 0.144 - 0.01), element.scoreBubble.height * 0.806 * 0.2 * 3, element.scoreBubble.height * 0.806 * 0.2);
+                    }
+                    /** End Achievement Rank Draw */
+                    /** Begin Milestone Draw */
+                    {
+                        let comboImg;
+                        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.ALL_JUSTICE:
+                                comboImg = theme.getFile(element.sprites.milestone.aj);
+                                break;
+                            case type_1.EComboTypes.ALL_JUSTICE_CRITICAL:
+                                comboImg = theme.getFile(element.sprites.milestone.ajc);
+                                break;
+                        }
+                        ctx.fillStyle = "#e8eaec";
+                        ctx.roundRect(x -
+                            element.scoreBubble.height * 0.806 * 0.32 * 3 -
+                            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.1), element.scoreBubble.height * 0.806 * 0.32 * 3, (element.scoreBubble.height * 0.806 * 0.32 * 3) /
+                            6.7, (element.scoreBubble.height * 0.806 * 0.32 * 3) / 56);
+                        ctx.fill();
+                        const combo = new canvas_1.Image();
+                        combo.src = comboImg;
+                        ctx.drawImage(combo, x -
+                            element.scoreBubble.height * 0.806 * 0.32 * 3 -
+                            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.1), element.scoreBubble.height * 0.806 * 0.32 * 3, (element.scoreBubble.height * 0.806 * 0.32 * 3) /
+                            6.7);
+                    }
+                    /** End Milestone Draw */
+                    /** Begin Bests Index Draw */
+                    {
+                        util_2.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 & Rating Draw */
+                {
+                    util_2.Util.drawText(ctx, `lv. ${util_2.Util.truncate(score.chart.level, 1)}`, 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());
+                    util_2.Util.drawText(ctx, `+${util_2.Util.truncate(score.rating, 2)}`, 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 & Rating Draw */
+                ctx.restore();
+                /** End Card Draw */
+            }
+            ScoreGrid.draw = draw;
+        })(ScoreGrid = Best50.ScoreGrid || (Best50.ScoreGrid = {}));
+    })(Best50 = ChunithmPainterModule.Best50 || (ChunithmPainterModule.Best50 = {}));
+    let Chart;
+    (function (Chart) {
+        const JPN_LATEST = 230;
+        const INT_LATEST = 140;
+        const CHN_LATEST = 120;
+        const CHUNITHM_VERSIONS = [
+            240, 230, 225, 220, 215, 210, 205, 200, 150, 145, 140, 135, 130,
+            125, 120, 115, 110, 105, 100,
+        ];
+        const CHUNITHM_INT_VERSIONS = [
+            140, 135, 130, 125, 120, 115, 110, 105, 100,
+        ];
+        const ZHONGERJIEZOU_VERSIONS = [120, 110, 100];
+        function findVersion(v, region) {
+            const target = (() => {
+                switch (region) {
+                    case "INT":
+                        return CHUNITHM_INT_VERSIONS;
+                    case "CHN":
+                        return ZHONGERJIEZOU_VERSIONS;
+                    case "JPN":
+                    default:
+                        return CHUNITHM_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_2.Util.z.color(),
+                        advanced: util_2.Util.z.color(),
+                        expert: util_2.Util.z.color(),
+                        master: util_2.Util.z.color(),
+                        ultima: util_2.Util.z.color(),
+                        worldsEnd: util_2.Util.z.color(),
+                    }),
+                }),
+                color: v4_1.z.object({
+                    card: util_2.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({
+                        aj: v4_1.z.string(),
+                        ajc: v4_1.z.string(),
+                        fc: v4_1.z.string(),
+                        none: v4_1.z.string(),
+                    }),
+                    versions: v4_1.z.object({
+                        JPN: v4_1.z.object({
+                            "100": v4_1.z.string(),
+                            "105": v4_1.z.string(),
+                            "110": v4_1.z.string(),
+                            "115": v4_1.z.string(),
+                            "120": v4_1.z.string(),
+                            "125": v4_1.z.string(),
+                            "130": v4_1.z.string(),
+                            "135": v4_1.z.string(),
+                            "140": v4_1.z.string(),
+                            "145": v4_1.z.string(),
+                            "150": v4_1.z.string(),
+                            "155": v4_1.z.string(),
+                            "200": v4_1.z.string(),
+                            "205": v4_1.z.string(),
+                            "210": v4_1.z.string(),
+                            "215": v4_1.z.string(),
+                            "220": v4_1.z.string(),
+                            "225": v4_1.z.string(),
+                            "230": v4_1.z.string(),
+                            "240": v4_1.z.string(),
+                        }),
+                        INT: v4_1.z.object({
+                            "100": v4_1.z.string(),
+                            "105": v4_1.z.string(),
+                            "110": v4_1.z.string(),
+                            "115": v4_1.z.string(),
+                            "120": v4_1.z.string(),
+                            "125": v4_1.z.string(),
+                            "130": v4_1.z.string(),
+                            "135": v4_1.z.string(),
+                            "140": v4_1.z.string(),
+                        }),
+                        CHN: v4_1.z.object({
+                            "100": v4_1.z.string(),
+                            "110": v4_1.z.string(),
+                            "120": v4_1.z.string(),
+                            "130": v4_1.z.string(),
+                        }),
+                    }),
+                }),
+            });
+            async function draw(ctx, theme, element, chartId, scores, region = "JPN") {
+                /* 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.ULTIMA; ++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 = "JPN", 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.ULTIMA:
+                        curColor = element.bubble.color.ultima;
+                        break;
+                    case type_1.EDifficulty.WORLDS_END:
+                        curColor = element.bubble.color.worldsEnd;
+                        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.ULTIMA:
+                                difficultiy = "ULTIMA";
+                                break;
+                            case type_1.EDifficulty.WORLDS_END:
+                                difficultiy = "WORLD'S END";
+                                break;
+                        }
+                        const levelTextSize = titleSize * (5 / 8);
+                        util_2.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_2.Util.measureText(ctx, difficultiy, titleSize, Infinity).width;
+                        util_2.Util.drawText(ctx, `Lv. ${util_2.Util.truncate(chart.events
+                            .filter((v) => v.version.region == targetRegion)
+                            .reverse()
+                            .find((v) => v.type == "existence")?.data
+                            .level || 0, 1)}${score ? `　+${util_2.Util.truncate(score.rating, 1)}` : ""}`, 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_2.Util.drawText(ctx, score ? util_2.Util.truncate(score.score, 0) : "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.rank) {
+                                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 blockHeight = height * 0.806 * 0.3 * 0.85, blockWidth = blockHeight * (540 / 180);
+                            const img = new canvas_1.Image();
+                            img.src = rankImg;
+                            ctx.drawImage(img, x + element.bubble.margin * (1 / 2), y +
+                                element.bubble.margin +
+                                titleSize +
+                                element.bubble.margin * (1 / 2), blockWidth, blockHeight);
+                        }
+                    }
+                    /** End Achievement Rank Draw */
+                    /** Begin Milestone Draw */
+                    {
+                        const blockWidth = height * 0.806 * 0.32 * 3, blockHeight = (blockWidth * 40) / 268;
+                        const curX = x -
+                            blockWidth +
+                            height * 2 -
+                            element.bubble.margin, curY = y + element.bubble.margin * 2 + titleSize * 2;
+                        ctx.fillStyle = "#e8eaec";
+                        ctx.roundRect(curX, curY, blockWidth, blockHeight, blockWidth / 56);
+                        ctx.fill();
+                        if (score) {
+                            let comboImg;
+                            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.ALL_JUSTICE:
+                                    comboImg = theme.getFile(element.sprites.milestone.aj);
+                                    break;
+                                case type_1.EComboTypes.ALL_JUSTICE_CRITICAL:
+                                    comboImg = theme.getFile(element.sprites.milestone.ajc);
+                                    break;
+                            }
+                            const combo = new canvas_1.Image();
+                            combo.src = comboImg;
+                            ctx.drawImage(combo, curX, curY, blockWidth, blockHeight);
+                        }
+                    }
+                    /** End Milestone Draw */
+                    /** Begin Version Draw */
+                    {
+                        const version = {
+                            region: "JPN",
+                            version: undefined,
+                        };
+                        const VER = chart.difficulty == type_1.EDifficulty.ULTIMA
+                            ? chart.events.find((v) => v.type == "existence" &&
+                                v.version.region == targetRegion)?.version
+                            : chart.addVersion;
+                        version.version = VER;
+                        version.region = targetRegion;
+                        const versionImageHeight = (height - element.bubble.margin * 2) *
+                            (isShort ? 9 / 16 : 1 / 2);
+                        const versionImageWidth = (versionImageHeight / 160) * 201;
+                        const curx = x + width - element.bubble.margin, cury = y + element.bubble.margin;
+                        if (version.version) {
+                            const rawVersion = findVersion(util_1.ChunithmUtil.getNumberVersion(version.version), targetRegion);
+                            if (rawVersion) {
+                                const versionImage = theme.getFile(element.sprites.versions[version.region][rawVersion]);
+                                try {
+                                    (0, sharp_1.default)(versionImage);
+                                    if (versionImage) {
+                                        const versionImg = new canvas_1.Image();
+                                        versionImg.src = versionImage;
+                                        ctx.drawImage(versionImg, curx - versionImageWidth, cury, versionImageWidth, versionImageHeight);
+                                    }
+                                }
+                                catch { }
+                            }
+                        }
+                        /** End Version Draw */
+                        /** Begin Note Count Draw */
+                        const noteCountTexts = Object.entries(chart.meta.notes).map(([k, v]) => `${util_2.Util.capitalize(k)}: ${v}`);
+                        const noteCountTextSize = (height - element.bubble.margin * 4) /
+                            noteCountTexts.length;
+                        let noteCountLength = 0;
+                        noteCountTexts.forEach((v, i) => {
+                            util_2.Util.drawText(ctx, v, x +
+                                element.bubble.margin * (3 / 2) +
+                                height * 2, y +
+                                element.bubble.margin +
+                                noteCountTextSize +
+                                (noteCountTextSize +
+                                    (element.bubble.margin * 2) /
+                                        (noteCountTexts.length - 1)) *
+                                    i, noteCountTextSize, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                            const length = util_2.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_VER = (() => {
+                                switch (targetRegion) {
+                                    case "INT":
+                                        return INT_LATEST;
+                                    case "CHN":
+                                        return CHN_LATEST;
+                                    case "JPN":
+                                    default:
+                                        return JPN_LATEST;
+                                }
+                            })();
+                            const maxWidth = width -
+                                height * 2 -
+                                element.bubble.margin * 4 -
+                                noteCountLength -
+                                versionImageWidth;
+                            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) => util_1.ChunithmUtil.getNumberVersion(v.version));
+                                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 (util_1.ChunithmUtil.getNumberVersion(actualEvents[actualEvents.length - 1]
+                                .version) < CURRENT_VER) {
+                                while (actualEvents.length >= maxFitTrendCount)
+                                    actualEvents.pop();
+                                actualEvents.push({
+                                    type: "removal",
+                                    version: util_1.ChunithmUtil.Version.toEventVersion(util_1.ChunithmUtil.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 +
+                                versionImageHeight * (1 / 2); i < actualEvents.length; ++i) {
+                                const event = actualEvents[i];
+                                const rawVersion = findVersion(util_1.ChunithmUtil.getNumberVersion(event.version), targetRegion);
+                                if (rawVersion) {
+                                    const versionImage = theme.getFile(element.sprites.versions[targetRegion][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_2.Util.drawText(ctx, `${symbol}${util_2.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_2.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_2.Util.drawText(ctx, chart.designer || "-", 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.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(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_2.Util.z.color(),
+                }),
+            });
+            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_2.Util.measureText(ctx, chart.name, textSizeTitle, Infinity);
+                    const titleActualHeight = Math.abs(ascent - decent);
+                    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;
+                    const titleMetrics = util_2.Util.measureText(ctx, chart.name, textSizeTitle, textTitleMaxWidth);
+                    util_2.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_2.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);
+                    function getBpmRange(bpms) {
+                        const uniqueBpms = lodash_1.default.uniq(bpms);
+                        if (uniqueBpms.length <= 0)
+                            return "0";
+                        else if (uniqueBpms.length == 1)
+                            return `${uniqueBpms[0]}`;
+                        else {
+                            const minBpm = Math.min(...uniqueBpms);
+                            const maxBpm = Math.max(...uniqueBpms);
+                            return `${minBpm}-${maxBpm}`;
+                        }
+                    }
+                    util_2.Util.drawText(ctx, `#${chart.id} BPM: ${getBpmRange(chart.bpms)}`, 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_JPN = chart.events
+                        .filter((v) => v.version.region == "JPN" &&
+                        util_1.ChunithmUtil.getNumberVersion(v.version) >=
+                            JPN_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_INT = chart.events
+                        .filter((v) => v.version.region == "INT" &&
+                        util_1.ChunithmUtil.getNumberVersion(v.version) >=
+                            INT_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_CHN = chart.events
+                        .filter((v) => v.version.region == "CHN" &&
+                        util_1.ChunithmUtil.getNumberVersion(v.version) >=
+                            CHN_LATEST)
+                        .map((v) => v.type);
+                    const EXIST_JPN = EVENT_JPN.includes("existence") &&
+                        !EVENT_JPN.includes("removal")
+                        ? "🇯🇵"
+                        : "";
+                    const EXIST_INT = EVENT_INT.includes("existence") &&
+                        !EVENT_INT.includes("removal")
+                        ? "🌏"
+                        : "";
+                    const EXIST_CHN = EVENT_CHN.includes("existence") &&
+                        !EVENT_CHN.includes("removal")
+                        ? "🇨🇳"
+                        : "";
+                    const title = [];
+                    if (EXIST_JPN)
+                        title.push(EXIST_JPN);
+                    if (EXIST_INT)
+                        title.push(EXIST_INT);
+                    if (EXIST_CHN)
+                        title.push(EXIST_CHN);
+                    await util_2.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);
+                }
+                /* End Detail Draw */
+            }
+            DetailInfo.draw = draw;
+        })(DetailInfo = Chart.DetailInfo || (Chart.DetailInfo = {}));
+    })(Chart = ChunithmPainterModule.Chart || (ChunithmPainterModule.Chart = {}));
+})(ChunithmPainterModule || (exports.ChunithmPainterModule = ChunithmPainterModule = {}));
+//# sourceMappingURL=index.js.map