maidraw 0.10.4 → 0.11.0

package/dist/geki/painter/index.js

@@ -4,14 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OngekiPainterModule = exports.OngekiPainter = 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 linebreak_1 = __importDefault(require("linebreak"));
 const canvas_1 = require("canvas");
 const database_1 = require("../lib/database");
 const type_1 = require("../type");
 const util_1 = require("../../lib/util");
 const painter_1 = require("../../lib/painter");
+const util_2 = require("../lib/util");
 class OngekiPainter extends painter_1.Painter {
     constructor({ theme: { schema, searchPaths, defaultTheme }, }) {
         super({ theme: { schema, searchPaths, defaultTheme } });
@@ -264,12 +267,6 @@ var OngekiPainterModule;
                         ctx.fillStyle = jacketMaskGrad;
                         ctx.fillRect(x + jacketSize / 2, y, (jacketSize * 3) / 4, jacketSize);
                     } /** End Jacket Gradient Mask Draw*/
-                    ctx.beginPath();
-                    ctx.roundRect(x + element.scoreBubble.margin, y + element.scoreBubble.margin, element.scoreBubble.width -
-                        element.scoreBubble.margin * 2, element.scoreBubble.height * 0.806 -
-                        element.scoreBubble.margin * 2, (element.scoreBubble.height * 0.806 -
-                        element.scoreBubble.margin * 2) /
-                        7);
                     /** Begin Title Draw */ {
                         util_1.Util.drawText(ctx, score.chart.name, x + (jacketSize * 7) / 8, y +
                             element.scoreBubble.margin +
@@ -285,7 +282,7 @@ var OngekiPainterModule;
                                 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);
+                            element.scoreBubble.margin, element.scoreBubble.height * 0.806 * 0.02, (element.scoreBubble.height * 0.806 * 0.02) / 2);
                         ctx.fillStyle = jacketMaskGradDark;
                         ctx.fill();
                     } /** End Separation Line Draw */
@@ -376,6 +373,7 @@ var OngekiPainterModule;
                         const comboBackground = comboWidth * 0.9;
                         const comboBgRatio = 64 / 272;
                         const sizeDiff = comboWidth - comboBackground;
+                        ctx.beginPath();
                         ctx.fillStyle = "#e8eaec";
                         ctx.roundRect(x +
                             sizeDiff / 2 +
@@ -444,5 +442,812 @@ var OngekiPainterModule;
             ScoreGrid.draw = draw;
         })(ScoreGrid = Best50.ScoreGrid || (Best50.ScoreGrid = {}));
     })(Best50 = OngekiPainterModule.Best50 || (OngekiPainterModule.Best50 = {}));
+    let Chart;
+    (function (Chart) {
+        const JPN_LATEST = 150;
+        const INT_LATEST = 0;
+        const CHN_LATEST = 0;
+        const ONGEKI_VERSIONS = [
+            150, 145, 140, 135, 130, 125, 120, 115, 110, 105, 100,
+        ];
+        const ONGEKI_INT_VERSIONS = [];
+        const YINJI_VERSIONS = [];
+        function findVersion(v, region) {
+            const target = (() => {
+                switch (region) {
+                    case "INT":
+                        return ONGEKI_INT_VERSIONS;
+                    case "CHN":
+                        return YINJI_VERSIONS;
+                    case "JPN":
+                    default:
+                        return ONGEKI_VERSIONS;
+                }
+            })();
+            for (const version of target) {
+                if (v >= version)
+                    return version;
+            }
+            return null;
+        }
+        let ChartGrid;
+        (function (ChartGrid) {
+            ChartGrid.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("chart-grid"),
+                width: v4_1.z.number().min(1),
+                height: v4_1.z.number().min(1),
+                margin: v4_1.z.number().min(0),
+                gap: v4_1.z.number().min(0),
+                bubble: v4_1.z.object({
+                    margin: v4_1.z.number().min(0),
+                    color: v4_1.z.object({
+                        basic: util_1.Util.z.color(),
+                        advanced: util_1.Util.z.color(),
+                        expert: util_1.Util.z.color(),
+                        master: util_1.Util.z.color(),
+                        lunatic: util_1.Util.z.color(),
+                    }),
+                }),
+                color: v4_1.z.object({
+                    card: util_1.Util.z.color(),
+                }),
+                sprites: v4_1.z.object({
+                    achievement: v4_1.z.object({
+                        d: v4_1.z.string(),
+                        c: v4_1.z.string(),
+                        b: v4_1.z.string(),
+                        bb: v4_1.z.string(),
+                        bbb: v4_1.z.string(),
+                        a: v4_1.z.string(),
+                        aa: v4_1.z.string(),
+                        aaa: v4_1.z.string(),
+                        s: v4_1.z.string(),
+                        ss: v4_1.z.string(),
+                        sss: v4_1.z.string(),
+                        sssp: v4_1.z.string(),
+                    }),
+                    milestone: v4_1.z.object({
+                        ab: v4_1.z.string(),
+                        abp: v4_1.z.string(),
+                        fc: v4_1.z.string(),
+                        fb: v4_1.z.string(),
+                        none: v4_1.z.string(),
+                    }),
+                    versions: v4_1.z.object({
+                        JPN: v4_1.z.record(v4_1.z.string(), 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.LUNATIC; ++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, 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, 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, element.x + element.margin, y, cardWidth, cardHeight, false, region, scores[i]);
+                        }
+                }
+            }
+            ChartGrid.draw = draw;
+            async function drawChartGridCard(ctx, theme, element, chart, x, y, width, height, isShort, targetRegion = "JPN", score) {
+                let curColor = "#FFFFFF";
+                switch (chart.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.LUNATIC:
+                        curColor = element.bubble.color.lunatic;
+                        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.LUNATIC:
+                                difficultiy = "LUNATIC";
+                                break;
+                        }
+                        const levelTextSize = titleSize * (5 / 8);
+                        util_1.Util.drawText(ctx, difficultiy, x + element.bubble.margin, y +
+                            element.bubble.margin +
+                            titleSize -
+                            element.bubble.margin * (1 / 4), titleSize, height * 0.806 * 0.04, Infinity, "left", "white", new color_1.default(curColor).darken(0.3).hexa());
+                        const difficultyTextWidth = util_1.Util.measureText(ctx, difficultiy, titleSize, Infinity).width;
+                        util_1.Util.drawText(ctx, `Lv. ${util_1.Util.truncate(chart.events
+                            .filter((v) => v.version.region == targetRegion)
+                            .reverse()
+                            .find((v) => v.type == "existence")?.data
+                            .level || 0, 1)}${score ? `　↑${util_1.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_1.Util.drawText(ctx, score ? util_1.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.SS:
+                                    rankImg = theme.getFile(element.sprites.achievement.ss);
+                                    break;
+                                case type_1.EAchievementTypes.SSS:
+                                    rankImg = theme.getFile(element.sprites.achievement.sss);
+                                    break;
+                                default:
+                                    rankImg = theme.getFile(element.sprites.achievement.sssp);
+                            }
+                            const achievementRankHeight = height * 0.806 * 0.3 * 0.85;
+                            const achievementRankWidth = achievementRankHeight * (286 / 143);
+                            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), achievementRankWidth, achievementRankHeight);
+                            /** End Achievement Rank Draw */
+                            /** Begin Milestone Draw */
+                            const comboImgRatio = 84 / 290;
+                            const comboBgRatio = 64 / 272;
+                            const comboWidth = achievementRankHeight / comboImgRatio;
+                            const comboBackground = comboWidth * 0.9;
+                            const sizeDiff = comboWidth - comboBackground;
+                            const curX = x +
+                                element.bubble.margin * (1 / 2) +
+                                achievementRankWidth, curY = y +
+                                element.bubble.margin * (3 / 2) +
+                                titleSize;
+                            ctx.beginPath();
+                            ctx.fillStyle = "#e8eaec";
+                            ctx.roundRect(curX + sizeDiff / 2, curY + ((sizeDiff * 3) / 2) * comboBgRatio, comboBackground, comboBackground * comboBgRatio, (comboBackground * comboBgRatio) / 2);
+                            ctx.roundRect(curX + sizeDiff / 2, curY +
+                                comboWidth * comboImgRatio +
+                                sizeDiff * (1 / 2) * comboBgRatio, comboBackground, comboBackground * comboBgRatio, (comboBackground * comboBgRatio) / 2);
+                            ctx.fill();
+                            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_BREAK:
+                                    comboImg = theme.getFile(element.sprites.milestone.ab);
+                                    break;
+                                case type_1.EComboTypes.ALL_BREAK_PLUS:
+                                    comboImg = theme.getFile(element.sprites.milestone.abp);
+                                    break;
+                            }
+                            let bellImg;
+                            switch (score.bell) {
+                                case type_1.EBellTypes.NONE:
+                                    bellImg = theme.getFile(element.sprites.milestone.none);
+                                    break;
+                                case type_1.EBellTypes.FULL_BELL:
+                                    bellImg = theme.getFile(element.sprites.milestone.fb);
+                                    break;
+                            }
+                            const combo = new canvas_1.Image();
+                            combo.src = comboImg;
+                            const bell = new canvas_1.Image();
+                            bell.src = bellImg;
+                            ctx.drawImage(combo, curX, curY, comboWidth, comboWidth * comboImgRatio);
+                            ctx.drawImage(bell, curX, curY +
+                                comboWidth * comboImgRatio -
+                                sizeDiff * comboBgRatio, comboWidth, comboWidth * comboImgRatio);
+                        }
+                    }
+                    /** End Milestone Draw */
+                    /** Begin Version Draw */
+                    {
+                        const version = {
+                            region: "JPN",
+                            version: undefined,
+                        };
+                        const VER = chart.difficulty == type_1.EDifficulty.LUNATIC
+                            ? 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 ? 5 / 8 : 1 / 2);
+                        const versionImageWidth = (versionImageHeight / 270) * 360;
+                        const curx = x + width - element.bubble.margin, cury = y + element.bubble.margin;
+                        if (version.version) {
+                            const rawVersion = findVersion(util_2.OngekiUtil.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_1.Util.capitalize(k)}: ${v}`);
+                        const noteCountTextSize = (height - element.bubble.margin * 4) /
+                            noteCountTexts.length;
+                        let noteCountLength = 0;
+                        noteCountTexts.forEach((v, i) => {
+                            util_1.Util.drawText(ctx, v, x +
+                                element.bubble.margin * (3 / 2) +
+                                height * 2, y +
+                                element.bubble.margin +
+                                noteCountTextSize +
+                                (noteCountTextSize +
+                                    (element.bubble.margin * 2) /
+                                        (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_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_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_2.OngekiUtil.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_2.OngekiUtil.getNumberVersion(actualEvents[actualEvents.length - 1]
+                                .version) < CURRENT_VER) {
+                                while (actualEvents.length >= maxFitTrendCount)
+                                    actualEvents.pop();
+                                actualEvents.push({
+                                    type: "removal",
+                                    version: util_2.OngekiUtil.Version.toEventVersion(util_2.OngekiUtil.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_2.OngekiUtil.getNumberVersion(event.version), targetRegion);
+                                if (rawVersion) {
+                                    const versionImage = theme.getFile(element.sprites.versions[targetRegion][rawVersion]);
+                                    try {
+                                        if (!versionImage)
+                                            throw "No versionImage";
+                                        (0, sharp_1.default)(versionImage);
+                                        const versionImg = new canvas_1.Image();
+                                        versionImg.src = versionImage;
+                                        ctx.drawImage(versionImg, curx, cury, versionImageWidth, versionImageHeight);
+                                    }
+                                    catch {
+                                        const str = `${event.version.gameVersion.major}.${event.version.gameVersion.minor}`;
+                                        const measurement = util_1.Util.measureText(ctx, str, noteCountTextSize * 1.2, Infinity);
+                                        util_1.Util.drawText(ctx, str, curx + versionImageWidth / 2, cury +
+                                            versionImageHeight / 2 -
+                                            (measurement.actualBoundingBoxDescent -
+                                                measurement.actualBoundingBoxAscent) /
+                                                2, noteCountTextSize * 1.2, height * 0.806 * 0.04, Infinity, "center", "white", new color_1.default(curColor)
+                                            .darken(0.3)
+                                            .hexa());
+                                    }
+                                    if (event.type == "existence") {
+                                        let symbol = "";
+                                        if (i != 0) {
+                                            const lastEvent = actualEvents[i - 1];
+                                            if (lastEvent.type == "existence") {
+                                                if (lastEvent.data.level <
+                                                    event.data.level)
+                                                    symbol = "↑";
+                                                else if (lastEvent.data.level >
+                                                    event.data.level)
+                                                    symbol = "↓";
+                                                else if (lastEvent.data.level ==
+                                                    event.data.level)
+                                                    symbol = "→";
+                                            }
+                                        }
+                                        util_1.Util.drawText(ctx, `${symbol}${util_1.Util.truncate(event.data.level, 1)}`, curx + versionImageWidth / 2, cury +
+                                            versionImageHeight +
+                                            noteCountTextSize, noteCountTextSize, height * 0.806 * 0.04, Infinity, "center", "white", new color_1.default(curColor)
+                                            .darken(0.3)
+                                            .hexa());
+                                    }
+                                    else if (event.type == "removal") {
+                                        util_1.Util.drawText(ctx, `❌`, curx + versionImageWidth / 2, cury +
+                                            versionImageHeight +
+                                            noteCountTextSize, noteCountTextSize, height * 0.806 * 0.04, Infinity, "center", "white", new color_1.default(curColor)
+                                            .darken(0.3)
+                                            .hexa());
+                                    }
+                                    curx += versionImageWidth + addGap;
+                                }
+                            }
+                        }
+                    }
+                    /** 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 & Platinum Rating Draw */
+                {
+                    ctx.save();
+                    ctx.clip();
+                    util_1.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_1.Util.drawText(ctx, `${score ? `${score.platinumScore}/` : "MAX PT SCR: "}${chart.meta.maxPlatinumScore}`, x + height * 2 - element.bubble.margin, y + height - element.bubble.margin * 3.1, height * 0.806 * 0.128, height * 0.806 * 0.04, Infinity, "right", "white", new color_1.default(curColor).darken(0.3).hexa());
+                }
+                /** End Difficulty & Platinum Rating Draw */
+                ctx.restore();
+                /** End Card Draw */
+            }
+        })(ChartGrid = Chart.ChartGrid || (Chart.ChartGrid = {}));
+        let DetailInfo;
+        (function (DetailInfo) {
+            DetailInfo.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("detail-info"),
+                width: v4_1.z.number().min(1),
+                height: v4_1.z.number().min(1),
+                margin: v4_1.z.number().min(0),
+                color: v4_1.z.object({
+                    card: util_1.Util.z.color(),
+                }),
+            });
+            async function draw(ctx, theme, element, chartId) {
+                const jacketMargin = element.margin;
+                const textMargin = element.margin;
+                const backGroundBorderRadius = Math.min(theme.content.width, theme.content.height) *
+                    (3 / 128);
+                let chart = null;
+                for (let i = type_1.EDifficulty.BASIC; i <= type_1.EDifficulty.LUNATIC; ++i) {
+                    chart = database_1.Database.getLocalChart(chartId, i);
+                    if (chart !== null)
+                        break;
+                }
+                const jacket = await database_1.Database.fetchJacket(chartId);
+                /* Begin Background Draw */
+                ctx.beginPath();
+                ctx.roundRect(element.x, element.y, element.width, element.height, backGroundBorderRadius);
+                ctx.fillStyle = element.color.card;
+                ctx.strokeStyle = new color_1.default(element.color.card)
+                    .darken(0.6)
+                    .hex();
+                ctx.lineWidth = backGroundBorderRadius / 4;
+                ctx.stroke();
+                ctx.fill();
+                /* End Background Draw */
+                /* Begin jacket draw */
+                if (jacket) {
+                    const jacketImage = new canvas_1.Image();
+                    const jacketBorderRadius = backGroundBorderRadius / 2;
+                    jacketImage.src = jacket;
+                    ctx.beginPath();
+                    ctx.roundRect(element.x + jacketMargin, element.y + jacketMargin, element.width - jacketMargin * 2, element.width - jacketMargin * 2, jacketBorderRadius);
+                    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 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_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);
+                    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_1.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_2.OngekiUtil.getNumberVersion(v.version) >=
+                            JPN_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_INT = chart.events
+                        .filter((v) => 
+                    // @ts-expect-error
+                    v.version.region == "INT" &&
+                        util_2.OngekiUtil.getNumberVersion(v.version) >=
+                            INT_LATEST)
+                        .map((v) => v.type);
+                    const EVENT_CHN = chart.events
+                        .filter((v) => 
+                    // @ts-expect-error
+                    v.version.region == "CHN" &&
+                        util_2.OngekiUtil.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_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);
+                }
+                /* End Detail Draw */
+            }
+            DetailInfo.draw = draw;
+        })(DetailInfo = Chart.DetailInfo || (Chart.DetailInfo = {}));
+        let CharacterInfo;
+        (function (CharacterInfo) {
+            CharacterInfo.schema = painter_1.ThemeManager.Element.extend({
+                type: v4_1.z.literal("character-info"),
+                width: v4_1.z.number().min(1),
+                height: v4_1.z.number().min(1),
+                margin: v4_1.z.number().min(0),
+                color: v4_1.z.object({
+                    card: util_1.Util.z.color(),
+                }),
+            });
+            async function draw(ctx, theme, element, character) {
+                const jacketMargin = element.margin;
+                const textMargin = element.margin;
+                const backGroundBorderRadius = Math.min(theme.content.width, theme.content.height) *
+                    (3 / 128);
+                const characterImg = character
+                    ? await database_1.Database.getCardImage(character.card.id)
+                    : null;
+                /* Begin Background Draw */
+                ctx.beginPath();
+                ctx.roundRect(element.x, element.y, element.width, element.height, backGroundBorderRadius);
+                ctx.fillStyle = element.color.card;
+                ctx.strokeStyle = new color_1.default(element.color.card)
+                    .darken(0.6)
+                    .hex();
+                ctx.lineWidth = backGroundBorderRadius / 4;
+                ctx.stroke();
+                ctx.fill();
+                /* End Background Draw */
+                ctx.save();
+                ctx.clip();
+                /* Begin character draw */
+                const characterImgRatio = 768 / 1052;
+                const characterImage = new canvas_1.Image();
+                const characterBorderRadius = backGroundBorderRadius / 2;
+                const characterImgHeight = element.height - jacketMargin * 2;
+                const characterImgWidth = characterImgHeight * characterImgRatio;
+                if (characterImg) {
+                    characterImage.src = characterImg;
+                    ctx.beginPath();
+                    ctx.roundRect(element.x, element.y +
+                        jacketMargin * 2 +
+                        characterImgHeight * (30 / 100), characterImgWidth, characterImgHeight * (70 / 100), [characterImgWidth / 2, characterImgWidth / 2, 0, 0]);
+                    ctx.fillStyle = new color_1.default(element.color.card)
+                        .lighten(0.1)
+                        .hex();
+                    ctx.strokeStyle = new color_1.default(element.color.card)
+                        .darken(0.3)
+                        .hex();
+                    ctx.lineWidth = backGroundBorderRadius / 4;
+                    ctx.fill();
+                    ctx.beginPath();
+                    ctx.roundRect(element.x, element.y + jacketMargin * 2, characterImgWidth, characterImgHeight, [0, characterBorderRadius, 0, 0]);
+                    ctx.save();
+                    ctx.clip();
+                    ctx.drawImage(characterImage, element.x, element.y + jacketMargin * 2, characterImgWidth, characterImgHeight);
+                    ctx.restore();
+                }
+                /* End character draw */
+                /* Begin Detail Draw */
+                const textSizeSecondary = jacketMargin;
+                const textLineWidth = element.width * (7 / 512);
+                const textColor = new color_1.default(element.color.card)
+                    .darken(0.5)
+                    .hex();
+                if (character) {
+                    const characterNameMetrics = util_1.Util.measureText(ctx, `Lv.${character.level} ${character.character.name}`, textSizeSecondary, Infinity);
+                    const characterNameActualHeight = Math.abs(characterNameMetrics.actualBoundingBoxAscent -
+                        characterNameMetrics.actualBoundingBoxDescent);
+                    util_1.Util.drawText(ctx, `Lv.${character.level} ${character.character.name}`, element.x + characterImgWidth / 2, element.y + jacketMargin + characterNameActualHeight, textSizeSecondary, textLineWidth, Infinity, "center", "white", textColor);
+                    if (character.character.comment) {
+                        const card = database_1.Database.getLocalCard(character.card.id);
+                        if (card) {
+                            const chara = database_1.Database.getLocalCharacter(card?.characterId);
+                            if (chara) {
+                                function getRandomFromArray(arr) {
+                                    return arr[Math.floor(Math.random() * arr.length)];
+                                }
+                                if (chara.voiceLines.length > 0) {
+                                    const curX = element.x +
+                                        characterImgWidth -
+                                        jacketMargin * 3, curY = element.y +
+                                        jacketMargin * 2 +
+                                        characterImgHeight * (35 / 100) +
+                                        characterNameActualHeight / 2;
+                                    ctx.save();
+                                    ctx.translate(curX, curY);
+                                    ctx.rotate((4 * Math.PI) / 180);
+                                    const content = `「${getRandomFromArray(chara.voiceLines)}」`;
+                                    const lines = [];
+                                    const breaker = new linebreak_1.default(content);
+                                    let lastPossibleBreak = 0, lastBreak = 0;
+                                    for (let bk = breaker.nextBreak(); bk; lastPossibleBreak = bk.position,
+                                        bk = breaker.nextBreak()) {
+                                        const cur = content.substring(lastBreak, bk.position);
+                                        if (cur.length > 8) {
+                                            lines.push(content
+                                                .substring(lastBreak, lastPossibleBreak)
+                                                .trim());
+                                            lastBreak = lastPossibleBreak;
+                                        }
+                                    }
+                                    lines.push(content.substring(lastBreak).trim());
+                                    for (let i = 0; i < lines.length; ++i) {
+                                        const line = lines[i];
+                                        const secondaryMetrics = util_1.Util.measureText(ctx, lines[i - 1] || "", textSizeSecondary, Infinity);
+                                        const textHeight = Math.abs(secondaryMetrics.actualBoundingBoxAscent -
+                                            secondaryMetrics.actualBoundingBoxDescent);
+                                        util_1.Util.drawText(ctx, line, 0, textHeight * (3 / 2) * i, textSizeSecondary, textLineWidth, Infinity, "left", "white", textColor);
+                                    }
+                                    ctx.restore();
+                                }
+                            }
+                        }
+                    }
+                }
+                /* End Detail Draw */
+                ctx.restore();
+            }
+            CharacterInfo.draw = draw;
+        })(CharacterInfo = Chart.CharacterInfo || (Chart.CharacterInfo = {}));
+    })(Chart = OngekiPainterModule.Chart || (OngekiPainterModule.Chart = {}));
 })(OngekiPainterModule || (exports.OngekiPainterModule = OngekiPainterModule = {}));
 //# sourceMappingURL=index.js.map