maidraw 0.7.0 → 0.7.2

package/dist/mai/chart/index.js

@@ -22,10 +22,1159 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = void 0;
+const sharp_1 = __importDefault(require("sharp"));
+const type_1 = require("../type");
 const database = __importStar(require("./database"));
-var Chart;
+const util_1 = require("../../lib/util");
+const canvas_1 = require("canvas");
+const color_1 = __importDefault(require("color"));
+const glob_1 = require("glob");
+const upath_1 = __importDefault(require("upath"));
+const fs_1 = __importDefault(require("fs"));
+const best50_1 = require("../best50");
+const string_template_1 = __importDefault(require("string-template"));
+const lodash_1 = __importDefault(require("lodash"));
+class Chart {
+    static DEFAULT_THEME = "jp-prism";
+    static primaryTheme = null;
+    static get assetsPath() {
+        return upath_1.default.join(__dirname, "..", "..", "..", "assets");
+    }
+    static themes = {};
+    static hasTheme(name) {
+        return !!this.themes[name];
+    }
+    static {
+        const manifests = (0, glob_1.globSync)(upath_1.default.join(this.assetsPath, "themes", "maimai", "**", "manifest.json"));
+        for (const manifestPath of manifests) {
+            const manifest = JSON.parse(fs_1.default.readFileSync(manifestPath, "utf-8"));
+            if (this.validateManifest(manifest, upath_1.default.dirname(manifestPath))) {
+                this.themes[manifest.name] = upath_1.default.dirname(manifestPath);
+            }
+        }
+        const loadThemeResult = this.loadTheme(this.DEFAULT_THEME);
+        if (!loadThemeResult) {
+            console.error("Failed to load default theme.");
+        }
+        (0, canvas_1.registerFont)(upath_1.default.join(this.assetsPath, "fonts", "gen-jyuu-gothic", "GenJyuuGothic-Bold.ttf"), {
+            family: "standard-font-title-jp",
+        });
+        (0, canvas_1.registerFont)(upath_1.default.join(this.assetsPath, "fonts", "comfortaa", "Comfortaa-Bold.ttf"), {
+            family: "standard-font-title-latin",
+            weight: "regular",
+        });
+        (0, canvas_1.registerFont)(upath_1.default.join(this.assetsPath, "fonts", "seurat-db", "FOT-Seurat Pro DB.otf"), {
+            family: "standard-font-username",
+            weight: "regular",
+        });
+    }
+    static validateManifest(payload, path) {
+        function isFileExist(p) {
+            if (isString(p))
+                return fs_1.default.existsSync(upath_1.default.join(path, p));
+            else
+                return false;
+        }
+        function isOneOf(p, ...args) {
+            return args.includes(p);
+        }
+        function isString(p) {
+            return typeof p == "string";
+        }
+        function isNumber(p) {
+            return typeof p == "number";
+        }
+        function isArray(p) {
+            return Array.isArray(p);
+        }
+        function isObject(p) {
+            return typeof p == "object";
+        }
+        function isHexColor(p) {
+            if (isString(p))
+                return /^(?:#[0-9A-F]{6}|#[0-9A-F]{8})$/i.test(p);
+            else
+                return false;
+        }
+        function isUndefined(p) {
+            return typeof p == "undefined";
+        }
+        function isBoolean(p) {
+            return typeof p == "boolean";
+        }
+        if (isString(payload.displayName) &&
+            isString(payload.name) &&
+            isNumber(payload.width) &&
+            isNumber(payload.height) &&
+            isObject(payload.sprites) &&
+            isObject(payload.sprites.achievement) &&
+            isFileExist(payload.sprites.achievement.d) &&
+            isFileExist(payload.sprites.achievement.c) &&
+            isFileExist(payload.sprites.achievement.b) &&
+            isFileExist(payload.sprites.achievement.bb) &&
+            isFileExist(payload.sprites.achievement.bbb) &&
+            isFileExist(payload.sprites.achievement.a) &&
+            isFileExist(payload.sprites.achievement.aa) &&
+            isFileExist(payload.sprites.achievement.aaa) &&
+            isFileExist(payload.sprites.achievement.s) &&
+            isFileExist(payload.sprites.achievement.sp) &&
+            isFileExist(payload.sprites.achievement.ss) &&
+            isFileExist(payload.sprites.achievement.ssp) &&
+            isFileExist(payload.sprites.achievement.sss) &&
+            isFileExist(payload.sprites.achievement.sssp) &&
+            isObject(payload.sprites.mode) &&
+            isFileExist(payload.sprites.mode.standard) &&
+            isFileExist(payload.sprites.mode.dx) &&
+            isObject(payload.sprites.milestone) &&
+            isFileExist(payload.sprites.milestone.ap) &&
+            isFileExist(payload.sprites.milestone.app) &&
+            isFileExist(payload.sprites.milestone.fc) &&
+            isFileExist(payload.sprites.milestone.fcp) &&
+            isFileExist(payload.sprites.milestone.fdx) &&
+            isFileExist(payload.sprites.milestone.fdxp) &&
+            isFileExist(payload.sprites.milestone.fs) &&
+            isFileExist(payload.sprites.milestone.fsp) &&
+            isFileExist(payload.sprites.milestone.sync) &&
+            isFileExist(payload.sprites.milestone.none) &&
+            isObject(payload.sprites.dxRating) &&
+            isFileExist(payload.sprites.dxRating.white) &&
+            isFileExist(payload.sprites.dxRating.blue) &&
+            isFileExist(payload.sprites.dxRating.green) &&
+            isFileExist(payload.sprites.dxRating.yellow) &&
+            isFileExist(payload.sprites.dxRating.red) &&
+            isFileExist(payload.sprites.dxRating.purple) &&
+            isFileExist(payload.sprites.dxRating.bronze) &&
+            isFileExist(payload.sprites.dxRating.silver) &&
+            isFileExist(payload.sprites.dxRating.gold) &&
+            isFileExist(payload.sprites.dxRating.platinum) &&
+            isFileExist(payload.sprites.dxRating.rainbow) &&
+            isObject(payload.sprites.profile) &&
+            isFileExist(payload.sprites.profile.icon) &&
+            isFileExist(payload.sprites.profile.nameplate) &&
+            isFileExist(payload.sprites.dxRatingNumberMap) &&
+            isObject(payload.sprites.versions) &&
+            isObject(payload.sprites.versions.OLD) &&
+            isFileExist(payload.sprites.versions.OLD[0]) &&
+            isFileExist(payload.sprites.versions.OLD[10]) &&
+            isFileExist(payload.sprites.versions.OLD[20]) &&
+            isFileExist(payload.sprites.versions.OLD[30]) &&
+            isFileExist(payload.sprites.versions.OLD[40]) &&
+            isFileExist(payload.sprites.versions.OLD[50]) &&
+            isFileExist(payload.sprites.versions.OLD[60]) &&
+            isFileExist(payload.sprites.versions.OLD[70]) &&
+            isFileExist(payload.sprites.versions.OLD[80]) &&
+            isFileExist(payload.sprites.versions.OLD[85]) &&
+            isFileExist(payload.sprites.versions.OLD[90]) &&
+            isFileExist(payload.sprites.versions.OLD[95]) &&
+            isFileExist(payload.sprites.versions.OLD[99]) &&
+            isObject(payload.sprites.versions.DX) &&
+            isFileExist(payload.sprites.versions.DX[0]) &&
+            isFileExist(payload.sprites.versions.DX[5]) &&
+            isFileExist(payload.sprites.versions.DX[10]) &&
+            isFileExist(payload.sprites.versions.DX[15]) &&
+            isFileExist(payload.sprites.versions.DX[20]) &&
+            isFileExist(payload.sprites.versions.DX[25]) &&
+            isFileExist(payload.sprites.versions.DX[30]) &&
+            isFileExist(payload.sprites.versions.DX[35]) &&
+            isFileExist(payload.sprites.versions.DX[40]) &&
+            isFileExist(payload.sprites.versions.DX[45]) &&
+            isFileExist(payload.sprites.versions.DX[50]) &&
+            isFileExist(payload.sprites.versions.DX[55]) &&
+            isObject(payload.sprites.versions.EX) &&
+            isFileExist(payload.sprites.versions.DX[10]) &&
+            isFileExist(payload.sprites.versions.DX[15]) &&
+            isObject(payload.sprites.versions.CN) &&
+            isFileExist(payload.sprites.versions.DX[0]) &&
+            isFileExist(payload.sprites.versions.DX[10]) &&
+            isFileExist(payload.sprites.versions.DX[20]) &&
+            isFileExist(payload.sprites.versions.DX[30]) &&
+            isFileExist(payload.sprites.versions.DX[40]) &&
+            isArray(payload.elements)) {
+            for (const element of payload.elements) {
+                if (isNumber(element.x) && isNumber(element.y)) {
+                    switch (element.type) {
+                        case "image": {
+                            if (isNumber(element.width) &&
+                                isNumber(element.height) &&
+                                isFileExist(element.path)) {
+                                continue;
+                            }
+                            else
+                                return false;
+                        }
+                        case "chart-grid": {
+                            if (isNumber(element.width) &&
+                                isNumber(element.height) &&
+                                isNumber(element.margin) &&
+                                isNumber(element.gap) &&
+                                isObject(element.bubble) &&
+                                isHexColor(element.bubble.color.basic) &&
+                                isHexColor(element.bubble.color.advanced) &&
+                                isHexColor(element.bubble.color.expert) &&
+                                isHexColor(element.bubble.color.master) &&
+                                isHexColor(element.bubble.color.remaster) &&
+                                isHexColor(element.bubble.color.utage) &&
+                                isObject(element.color) &&
+                                isHexColor(element.color.card)) {
+                                continue;
+                            }
+                            else
+                                return false;
+                        }
+                        case "profile": {
+                            if (isNumber(element.height)) {
+                                continue;
+                            }
+                            else
+                                return false;
+                        }
+                        case "detail-info": {
+                            if (isNumber(element.width) &&
+                                isNumber(element.height) &&
+                                isNumber(element.margin) &&
+                                isObject(element.color) &&
+                                isHexColor(element.color.card) &&
+                                (isUndefined(element.font) ||
+                                    isString(element.font))) {
+                                continue;
+                            }
+                            else
+                                return false;
+                        }
+                        case "text": {
+                            if (isNumber(element.size) &&
+                                isString(element.content) &&
+                                (isUndefined(element.width) ||
+                                    isNumber(element.width)) &&
+                                (isUndefined(element.height) ||
+                                    isNumber(element.height)) &&
+                                (isUndefined(element.linebreak) ||
+                                    isBoolean(element.linebreak)) &&
+                                (isUndefined(element.align) ||
+                                    isOneOf(element.align, "left", "center", "right")) &&
+                                (isUndefined(element.color) ||
+                                    isString(element.color)) &&
+                                (isUndefined(element.borderColor) ||
+                                    isString(element.borderColor)) &&
+                                (isUndefined(element.font) ||
+                                    isString(element.font))) {
+                                continue;
+                            }
+                            else
+                                return false;
+                        }
+                        default:
+                            return false;
+                    }
+                }
+            }
+            return true;
+        }
+        else
+            return false;
+    }
+    static loadTheme(path) {
+        const theme = this.getTheme(path);
+        if (theme) {
+            this.primaryTheme = theme;
+            return true;
+        }
+        else
+            return false;
+    }
+    static getTheme(path) {
+        if (!fs_1.default.existsSync(upath_1.default.join(path, "manifest.json"))) {
+            path = this.themes[path] ?? "";
+        }
+        else
+            path = upath_1.default.join(this.assetsPath, path);
+        if (fs_1.default.existsSync(upath_1.default.join(path, "manifest.json"))) {
+            const manifest = JSON.parse(fs_1.default.readFileSync(upath_1.default.join(path, "manifest.json"), "utf-8"));
+            if (this.validateManifest(manifest, path)) {
+                return { manifest, path };
+            }
+        }
+        return null;
+    }
+    static getThemeFile(path, themePath) {
+        if (typeof path == "string" &&
+            fs_1.default.existsSync(upath_1.default.join(themePath ?? this.primaryTheme?.path ?? "", path)))
+            return fs_1.default.readFileSync(upath_1.default.join(themePath ?? this.primaryTheme?.path, path));
+        else
+            return Buffer.from([]);
+    }
+    /* Begin Draw Tools*/
+    static async drawImageModule(ctx, theme, element) {
+        const img = new canvas_1.Image();
+        img.src = this.getThemeFile(element.path, theme.path);
+        ctx.drawImage(img, element.x, element.y, element.width, element.height);
+    }
+    static async drawChartGridCard(ctx, theme, element, chart, difficulty, x, y, width, height, isShort, 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. ${chart.level.toFixed(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_1.Util.drawText(ctx, score ? `${score.achievement.toFixed(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 best50_1.Best50.EAchievementTypes.D:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.d, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.C:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.c, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.B:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.b, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.BB:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.bb, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.BBB:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.bbb, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.A:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.a, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.AA:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.aa, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.AAA:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.aaa, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.S:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.s, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.SP:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.sp, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.SS:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.ss, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.SSP:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.ssp, theme.path);
+                            break;
+                        case best50_1.Best50.EAchievementTypes.SSS:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.sss, theme.path);
+                            break;
+                        default:
+                            rankImg = this.getThemeFile(theme.manifest.sprites.achievement.sssp, theme.path);
+                    }
+                    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 best50_1.Best50.EComboTypes.NONE:
+                            comboImg = this.getThemeFile(theme.manifest.sprites.milestone.none, theme.path);
+                            break;
+                        case best50_1.Best50.EComboTypes.FULL_COMBO:
+                            comboImg = this.getThemeFile(theme.manifest.sprites.milestone.fc, theme.path);
+                            break;
+                        case best50_1.Best50.EComboTypes.FULL_COMBO_PLUS:
+                            comboImg = this.getThemeFile(theme.manifest.sprites.milestone.fcp, theme.path);
+                            break;
+                        case best50_1.Best50.EComboTypes.ALL_PERFECT:
+                            comboImg = this.getThemeFile(theme.manifest.sprites.milestone.ap, theme.path);
+                            break;
+                        case best50_1.Best50.EComboTypes.ALL_PERFECT_PLUS:
+                            comboImg = this.getThemeFile(theme.manifest.sprites.milestone.app, theme.path);
+                            break;
+                    }
+                    switch (score.sync) {
+                        case best50_1.Best50.ESyncTypes.NONE:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.none, theme.path);
+                            break;
+                        case best50_1.Best50.ESyncTypes.SYNC_PLAY:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.sync, theme.path);
+                            break;
+                        case best50_1.Best50.ESyncTypes.FULL_SYNC:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.fs, theme.path);
+                            break;
+                        case best50_1.Best50.ESyncTypes.FULL_SYNC_PLUS:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.fsp, theme.path);
+                            break;
+                        case best50_1.Best50.ESyncTypes.FULL_SYNC_DX:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.fdx, theme.path);
+                            break;
+                        case best50_1.Best50.ESyncTypes.FULL_SYNC_DX_PLUS:
+                            syncImg = this.getThemeFile(theme.manifest.sprites.milestone.fdxp, theme.path);
+                            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 / 4 : 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 =
+                        curx - versionImageWidth - regionTextSize <
+                            x + height * 2
+                            ? cury + versionImageHeight
+                            : cury,
+                    curx =
+                        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 versionImage = this.getThemeFile(theme.manifest.sprites.versions[region][version.version.gameVersion
+                            .minor]);
+                        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;
+                            }
+                        }
+                    }
+                }
+                /** End Version Draw */
+                /** Begin Note Count Draw */
+                const noteCountTexts = Object.entries(chart.meta.notes).map(([k, v]) => `${util_1.Util.capitalize(k)}: ${v}`);
+                const shortCompensation = isShort
+                    ? versionImageHeight + element.bubble.margin / 2
+                    : 0;
+                const noteCountTextSize = (height - shortCompensation - 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 +
+                        shortCompensation +
+                        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_DX_MINOR = 55;
+                    const maxWidth = width -
+                        height * 2 -
+                        element.bubble.margin * 4 -
+                        noteCountLength;
+                    const maxFitTrendCount = Math.floor(maxWidth / versionImageWidth);
+                    const trendEvents = chart.events.filter((v) => v.type == "existence" && v.version.region == "DX");
+                    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, b.version.gameVersion);
+                            });
+                        }
+                        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, b.version.gameVersion);
+                        });
+                        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]);
+                        }
+                    }
+                    else {
+                        actualEvents = [...trendEvents];
+                    }
+                    const addGap = (maxWidth - actualEvents.length * versionImageWidth) /
+                        (actualEvents.length - 1);
+                    for (let i = 0, curx = x +
+                        height * 2 +
+                        element.bubble.margin * (5 / 2) +
+                        noteCountLength, cury = y +
+                        element.bubble.margin * (3 / 2) +
+                        versionImageHeight; i < maxFitTrendCount; ++i) {
+                        const event = actualEvents[i];
+                        if (!event)
+                            continue;
+                        const region = event.version.gameVersion.isDX
+                            ? "DX"
+                            : "OLD";
+                        const versionImage = this.getThemeFile(theme.manifest.sprites.versions[region][event.version.gameVersion
+                            .minor]);
+                        if (versionImage) {
+                            const versionImg = new canvas_1.Image();
+                            versionImg.src = versionImage;
+                            ctx.drawImage(versionImg, curx, cury, versionImageWidth, versionImageHeight);
+                            let symbol = "";
+                            if (i != 0) {
+                                const lastEvent = actualEvents[i - 1];
+                                if (lastEvent) {
+                                    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}${event.data.level.toFixed(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());
+                            curx += versionImageWidth + addGap;
+                        }
+                    }
+                }
+            }
+            /** 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 */
+        {
+            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());
+            util_1.Util.drawText(ctx, `${score?.dxScore || "MAX DX SCR"}/${chart.meta.maxDXScore}`, x + height * 2 - element.bubble.margin, y + height * (0.806 + (1 - 0.806) / 2), 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 */
+    }
+    static async drawDetailInfoModule(ctx, theme, element, chartId) {
+        const jacketMargin = element.margin;
+        const textMargin = element.margin;
+        const chart = Chart.Database.getLocalChart(chartId, type_1.EDifficulty.BASIC);
+        const jacket = await Chart.Database.fecthJacket(chartId);
+        /* Begin Background Draw */
+        ctx.beginPath();
+        ctx.roundRect(element.x, element.y, element.width, element.height, Math.min(theme.manifest.width, theme.manifest.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.manifest.width, theme.manifest.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.manifest.width, theme.manifest.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 = this.getThemeFile(chart.id > 10000
+                ? theme.manifest.sprites.mode.dx
+                : theme.manifest.sprites.mode.standard, theme.path);
+            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, `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 DX_LATEST = 55, EX_LATEST = 50, CN_LATEST = 40;
+            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 */
+    }
+    static async drawChartGridModule(ctx, theme, element, chartId, scores) {
+        /* Begin Background Draw */
+        ctx.roundRect(element.x, element.y, element.width, element.height, Math.min(theme.manifest.width, theme.manifest.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.manifest.width, theme.manifest.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 = Chart.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 this.drawChartGridCard(ctx, theme, element, chart, i, element.x + element.margin, y, (cardWidth - element.margin) / 2, cardHeight, true, scores[i]);
+                    i++;
+                    const chartA = difficulties[i];
+                    if (chartA)
+                        await this.drawChartGridCard(ctx, theme, element, chartA, i, element.x +
+                            element.margin +
+                            (cardWidth + element.margin) / 2, y, (cardWidth - element.margin) / 2, cardHeight, true, scores[i]);
+                }
+                else {
+                    await this.drawChartGridCard(ctx, theme, element, chart, i, element.x + element.margin, y, cardWidth, cardHeight, false, scores[i]);
+                }
+        }
+    }
+    static async drawProfileModule(ctx, theme, element, username, rating, profilePicture) {
+        const nameplate = new canvas_1.Image();
+        nameplate.src = this.getThemeFile(theme.manifest.sprites.profile.nameplate, theme.path);
+        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 ||
+                this.getThemeFile(theme.manifest.sprites.profile.icon, theme.path);
+            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 = this.getThemeFile(theme.manifest.sprites.dxRating.rainbow, theme.path);
+                    break;
+                }
+                case rating >= 14500: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.platinum, theme.path);
+                    break;
+                }
+                case rating >= 14000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.gold, theme.path);
+                    break;
+                }
+                case rating >= 13000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.silver, theme.path);
+                    break;
+                }
+                case rating >= 12000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.bronze, theme.path);
+                    break;
+                }
+                case rating >= 10000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.purple, theme.path);
+                    break;
+                }
+                case rating >= 8000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.red, theme.path);
+                    break;
+                }
+                case rating >= 6000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.yellow, theme.path);
+                    break;
+                }
+                case rating >= 4000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.green, theme.path);
+                    break;
+                }
+                case rating >= 2000: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.blue, theme.path);
+                    break;
+                }
+                default: {
+                    dxRatingImg = this.getThemeFile(theme.manifest.sprites.dxRating.white, theme.path);
+                    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 this.getRatingNumber(rating, theme);
+            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*/
+    }
+    static async drawTextModule(ctx, theme, element, variables = {}) {
+        let naiveLines = (0, string_template_1.default)(element.content, variables).split("\n");
+        let lines = [];
+        if (element.linebreak) {
+            for (let originalContent of naiveLines) {
+                while (originalContent.length) {
+                    const line = util_1.Util.findMaxFitString(ctx, originalContent, element.width || Infinity, "");
+                    originalContent = originalContent.replace(line, "").trim();
+                    lines.push(line.trim());
+                }
+            }
+        }
+        else {
+            for (const originalContent of naiveLines) {
+                lines.push(util_1.Util.findMaxFitString(ctx, originalContent, element.width || Infinity));
+            }
+        }
+        for (let i = 0; i < lines.length; ++i) {
+            const line = lines[i];
+            util_1.Util.drawText(ctx, line, element.x, element.y + i * element.size * 1.3, element.size, element.size / 3.5, element.width || Infinity, element.align, element.color || "#FFFFFF", element.borderColor
+                ? element.borderColor
+                : color_1.default.rgb(element.color || "#FFFFFF")
+                    .darken(0.3)
+                    .hex(), element.font, element.linebreak ? "" : "...");
+        }
+    }
+    /* End Draw Tools*/
+    static async draw(name, rating, chartId, scores, options) {
+        let currentTheme = this.primaryTheme;
+        if (options?.theme) {
+            const theme = this.getTheme(options.theme);
+            if (theme) {
+                currentTheme = theme;
+            }
+        }
+        if (currentTheme) {
+            await Chart.Database.cacheJackets([chartId]);
+            const canvas = new canvas_1.Canvas(currentTheme.manifest.width * (options?.scale ?? 1), currentTheme.manifest.height * (options?.scale ?? 1));
+            const ctx = canvas.getContext("2d");
+            if (options?.scale)
+                ctx.scale(options.scale, options.scale);
+            ctx.imageSmoothingEnabled = true;
+            for (const element of currentTheme.manifest.elements) {
+                switch (element.type) {
+                    case "image": {
+                        await this.drawImageModule(ctx, currentTheme, element);
+                        break;
+                    }
+                    case "chart-grid": {
+                        await this.drawChartGridModule(ctx, currentTheme, element, chartId, scores);
+                        break;
+                    }
+                    case "detail-info": {
+                        await this.drawDetailInfoModule(ctx, currentTheme, element, chartId);
+                        break;
+                    }
+                    case "profile": {
+                        await this.drawProfileModule(ctx, currentTheme, element, name, rating, options?.profilePicture);
+                        break;
+                    }
+                    case "text": {
+                        await this.drawTextModule(ctx, currentTheme, element, {
+                            username: util_1.Util.HalfFullWidthConvert.toFullWidth(name),
+                            rating: rating.toFixed(0),
+                        });
+                        break;
+                    }
+                }
+            }
+            return canvas.toBuffer();
+        }
+        else
+            return null;
+    }
+    static async drawWithScoreSource(source, username, chartId, options) {
+        const profile = await source.getPlayerInfo(username);
+        const score = await source.getPlayerScore(username, chartId);
+        if (!profile || !score)
+            return null;
+        return this.draw(profile.name, profile.rating, chartId, [
+            score.basic,
+            score.advanced,
+            score.expert,
+            score.master,
+            score.remaster,
+            score.utage,
+        ], {
+            ...options,
+            profilePicture: options?.profilePicture === null
+                ? undefined
+                : options?.profilePicture ||
+                    (await source.getPlayerProfilePicture(username)) ||
+                    undefined,
+        });
+    }
+    static async getRatingNumber(num, theme) {
+        async function getRaingDigit(map, digit, unitWidth, unitHeight) {
+            digit = Math.floor(digit % 10);
+            return await (0, sharp_1.default)(map)
+                .extract({
+                left: (digit % 4) * unitWidth,
+                top: Math.floor(digit / 4) * unitHeight,
+                width: unitWidth,
+                height: unitHeight,
+            })
+                .toBuffer();
+        }
+        if (theme.manifest) {
+            const map = this.getThemeFile(theme.manifest.sprites.dxRatingNumberMap, theme.path);
+            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 getRaingDigit(map, num % 10, unitWidth, unitHeight));
+                num = Math.floor(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();
+        }
+        return null;
+    }
+}
+exports.Chart = Chart;
 (function (Chart) {
     Chart.Database = database.Database;
 })(Chart || (exports.Chart = Chart = {}));