// Run this code when an album is fully display at the end of the game 
(async () => {
    OffscreenCanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        this.beginPath();
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        this.closePath();
        return this;
    };

    const items = Array.from(document.getElementsByClassName('item'));

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const totalCanvasHeight = canvas.reduce((acc, cv) => acc + cv.height, 0);

    const answers = Array.from(document.getElementsByClassName('answer'));
    const textHeight = 30;
    const canvasMargin = 20;
    const blockPadding = canvasMargin;
    const canvasWidth = canvas[0].width;
    const mainCanvasWidth = canvasWidth + (canvasMargin * 2);
    const totalHeight = totalCanvasHeight + (answers.length * textHeight) + (canvasMargin * 2) + ((items.length - 1) * blockPadding);
    const textXStart = 10 + canvasMargin;

    const offscreenCanvas = new OffscreenCanvas(mainCanvasWidth, totalHeight);
    const ctx = offscreenCanvas.getContext('2d');

    var gradient = ctx.createLinearGradient(0, totalHeight, mainCanvasWidth * 1.15, 0 - totalHeight * 0.85);
    gradient.addColorStop(0, '#2ea3cf');
    gradient.addColorStop(1, '#6e1fcf');
    ctx.fillStyle = gradient;
    ctx.roundRect(0, 0, offscreenCanvas.width, offscreenCanvas.height, 8);
    ctx.fill();

    ctx.font = "18px Nunito-Black";
    ctx.textBaseline = "top";

    let yShift = canvasMargin;
    items.forEach((item) => {
        const isDrawing = item.children[0].className.includes('drawing');
        ctx.save();
        if (isDrawing) {
            const cv = item.getElementsByTagName('canvas')[0];
            ctx.roundRect(canvasMargin, yShift, canvasWidth, cv.height, 8);
            ctx.clip();
            ctx.drawImage(cv, canvasMargin, yShift);
            const nick = item.getElementsByClassName('nick')[0].textContent;
            ctx.fillStyle = "#333";
            ctx.fillText(`${nick}`, textXStart, yShift + 8);
            yShift += cv.height;
        } else {
            const nick = item.children[0].children[0].children[0].textContent;
            const text = item.getElementsByClassName('balloon')[0].textContent;
            ctx.fillStyle = "white";
            ctx.roundRect(canvasMargin, yShift, canvasWidth, textHeight, 8);
            ctx.fill();
            ctx.fillStyle = "#333";
            ctx.fillText(`${nick} : ${text}`, textXStart, yShift + 8);
            yShift += textHeight;
        }
        ctx.restore();
        yShift += blockPadding
    });

    const blob = await offscreenCanvas.convertToBlob();
    const pngUrl = URL.createObjectURL(blob);
    window.open(pngUrl);
})();