schaf.dev/static/pp/pp.js

(function() {
    var canvas = document.getElementById("pp-canvas");
    var ctx = canvas.getContext("2d");

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var radius = Math.min(w, h) * 2;
    var radiusPeople = radius / 6;

    canvas.width = w;
    canvas.height = h;

    ctx.translate(w / 2, h / 2);

    var sliceToColor = [
        '#ECEAE0',
        '#AC2832',
        '#CB8C1D',
    ];

    var sliceToRoom = [
        'BAD',
        'WOHNI',
        'KÜCHE',
    ]

    var imageSrc = [
        './felix.png',
        './tobias.png',
        './andre.png',
    ];
    // Bad, Küche, Wohni
    var pathRooms = [];

    function drawBackground(ctx, radius) {
        sliceToColor.forEach(function (color, index) {
            drawSlice(index, sliceToColor.length, color);
        });
    }

    function drawSlice(num, total, color) {
        var sliceSize = 360 / total;
        var start = Math.PI * 2 * (((num - 1) * sliceSize) / 360);
        var end = Math.PI * 2 * ((num * sliceSize) / 360);
        let path = new Path2D();
        ctx.beginPath(path)
        path.moveTo(0, 0);
        path.arc(0, 0, radius, start + 0.52, end + 0.52, false);
        path.lineTo(0, 0);
        ctx.fillStyle = color;
        path.closePath();

        if (pathRooms.length < total) {
            pathRooms.push(path);
        }

        ctx.fill(path);
    }

    var secondsLoop = 3 * 7 * 24 * 60 * 60;

    function degrees_to_radians(degrees) {
        var pi = Math.PI;
        return degrees * (pi/180);
    }

    function drawPeople() {
        var now = Date.now() / 1000 - 4 * 60 * 60 * 24;
        var part = now % secondsLoop;
        var ang;
        var num;
        ctx.font = radiusPeople*0.15 + "px arial";
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.fillStyle = 'black';
        var sliceSize = 360 / sliceToColor.length;

        for(num = 0; num < sliceToColor.length; num++){
            ang = Math.PI * 2 * ((num * sliceSize) / 360);
            ang += degrees_to_radians((360 / secondsLoop) * part);

            ctx.rotate(ang);
            ctx.translate(0, -radiusPeople*0.85);
            ctx.rotate(-ang);
            ctx.drawImage(images[num], 0 - images[num].width / 2, 0 - images[num].height / 2, images[num].width, images[num].height);
            ctx.rotate(ang);
            ctx.translate(0, radiusPeople*0.85);
            ctx.rotate(-ang);
        }
    }

    function drawRoomNames() {
        var ang;
        var num;
        var radiusCaptions = radiusPeople * 1.3;
        ctx.font = radiusCaptions*0.15 + "px arial";
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        ctx.fillStyle = 'black';
        var sliceSize = 360 / sliceToColor.length;

        for(num = 0; num < sliceToColor.length; num++){
            ang = Math.PI * 2 * ((num * sliceSize + sliceSize / 2) / 360);

            ctx.rotate(ang);
            ctx.translate(0, -radiusCaptions*0.85);
            ctx.rotate(-ang);
            ctx.fillText(sliceToRoom[num], 0, 0);
            ctx.rotate(ang);
            ctx.translate(0, radiusCaptions*0.85);
            ctx.rotate(-ang);
        }
    }

    function init() {
        if (!isImgLoaded) {
            return;
        }

        w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        radius = Math.min(w, h) * 2;
        radiusPeople = radius / 6;
        canvas.width = w;
        canvas.height = h;
        ctx.translate(w / 2, h / 2);
        isInitialized = true;
        drawBackground();
        drawRoomNames();
        drawPeople();

        canvas.addEventListener('mousemove', e => {
            let bound = canvas.getBoundingClientRect();
            let x = e.pageX - bound.top;
            let y = e.pageY - bound.left;
            activeRoom = false;
            pathRooms.forEach((path, index) => {
                if (ctx.isPointInPath(path, x, y)) {
                    activeRoom = index;
                }
            });
        });
    }

    window.onresize = init;

    var isInitialized = false;
    var isImgLoaded = false;
    var images = imageSrc.map(function(){return false;});

    function preloadImages() {
        imageSrc.forEach(function(imgSrc, index) {
            var newImg = new Image();
            newImg.indexSrc = index;

            newImg.onload = function() {
                var factor = (newImg.width / radius) * 13;
                newImg.width = newImg.width / factor;
                newImg.height = newImg.height / factor;
                images[index] = newImg;

                isImgLoaded = images.reduce(function(acc, cur) {
                    return acc && cur;
                }, true)
                init();
            };

            newImg.src = imgSrc;
        });
    }

    preloadImages();

    setInterval(function() {
        if (!isInitialized) {
            return;
        }
        drawBackground();
        drawRoomNames();
        drawPeople();
    }, 1000);
})();