The Deal

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      html,
      body,
      #canvas {
        display: block;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 1293px;
        height: 100%;
        max-height: 1293px;
        object-fit: contain;
      }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const urls = {
            loading: "/content/10d494b28303b753fd648ae85619a2f336b8d0f0b261b26a418dfce3030a607ei0",
            imageA: "/content/a5f8cbfe9791cda2116df3ecf26e92341a4725a538bfff729ba2620ec1e8a962i0",
            imageB: "/content/57833da2f34619239a4b86d53e2b7b1f00243376fc3c5e38ef193448c3203afci0"
        };

        let lastBlockHeight = null;
        let currentImage = null;
        let nextImage = null;
        let images = {};

        async function loadImage(src) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = src;
            });
        }

        async function loadAllImages() {
            const [loadingImage, imageA, imageB] = await Promise.all(
                Object.values(urls).map(url => loadImage(url))
            );
            images = { loadingImage, imageA, imageB };
            currentImage = loadingImage;
        }

        async function blendImages(img1, img2, alpha) {
            canvas.width = img1.width;
            canvas.height = img1.height;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.globalAlpha = 1 - alpha;
            ctx.drawImage(img1, 0, 0);
            ctx.globalAlpha = alpha;
            ctx.drawImage(img2, 0, 0);
        }

        async function fetchBlockHeight() {
            const response = await fetch("/blockheight");
            const blockHeight = parseInt(await response.text(), 10);
            return blockHeight;
        }

        async function startTransition(blockHeight) {
            nextImage = blockHeight % 2 === 0 ? images.imageA : images.imageB;
            
            let alpha = 0;
            const interval = setInterval(() => {
                blendImages(currentImage, nextImage, alpha);
                alpha += 0.1;
                if (alpha >= 1) {
                    clearInterval(interval);
                    currentImage = nextImage;
                }
            }, 50);
        }

        const initialLoadingImage = loadImage(urls.loading);
        initialLoadingImage.then(loadingImage => {
            canvas.width = loadingImage.width;
            canvas.height = loadingImage.height;
            ctx.drawImage(loadingImage, 0, 0);
        });

        loadAllImages().then(() => {
            const timerPromise = new Promise(resolve => setTimeout(resolve, 1500));
            const blockHeightPromise = fetchBlockHeight();

            Promise.all([timerPromise, blockHeightPromise])
                .then(([, blockHeight]) => {
                    if (blockHeight !== lastBlockHeight) {
                        startTransition(blockHeight);
                        lastBlockHeight = blockHeight;
                    }
                    setInterval(async () => {
                        const blockHeight = await fetchBlockHeight();
                        if (blockHeight !== lastBlockHeight) {
                            startTransition(blockHeight);
                            lastBlockHeight = blockHeight;
                        }
                    }, 30000);
                });
        });
    </script>
</body>

</html>


Action	Price	From	To	Time
TRANSFER	- -	u850	agk9	8 months
TRANSFER	- -	58yd	u850	8 months
INSCRIBED	- -	-	58yd	9 months

Inscription #35247170

More from this Collection