www.franconian.net/static/bauchbinde/assets/script.js

(() => {
    const mainTrackRooms = ['rc1', 'rc2', 'chaosstudio-hamburg', 'restrealitaet'];
    const mainTrackUrl = 'https://fahrplan.events.ccc.de/rc3/2020/Fahrplan/schedule.json';
    const assemblyUrl = 'https://pretalx.rc3.studio/rc3-channels-2020/schedule/export/schedule.json';

    let textEl;
    let headline = '¯\\_(ツ)_/¯';
    let speaker = '';
    let isIntro = false;
    let holdDuration = 4000;
    let room = null;
    let time = null;

    async function getCurrentTalkByRoomName(roomName) {
        let now = Date.now();
        if (time) {
            now = Date.parse(time)
        }
        let url;
        if (mainTrackRooms.includes(roomName)) {
            url = mainTrackUrl;
        } else {
            url = assemblyUrl;
        }

        const response = await fetch(url);
        const data = await response.json();
        const days = data.schedule.conference.days;
        const today = days.find(day => {
            const start = Date.parse(day.day_start);
            const end = Date.parse(day.day_end);
            return now >= start && now <= end;
        });
        if (!today) return false;

        const room = today.rooms[roomName];
        if (!room) return false;

        const talk = room.find(talk => {
            const start = Date.parse(talk.date);
            const [hours, minutes] = talk.duration.split(':');
            const duration = (hours * 60 + minutes) * 60 * 1000;
            const end = start + duration;
            return now >= start && now <= end;
        })
        if (!talk) return false;
        return talk;
    }

    async function init() {
        textEl = document.querySelector('.text');
        textEl.innerHTML = '';

        if (window.location.search) {
            const pairs = window.location.search.slice(1).split('&').map(x => x.split('='));
            for (let pair of pairs) {
                const key = pair.shift();
                const value = decodeURIComponent(pair.join('='));

                if (key === 'headline') {
                    headline = value + ',';
                }
                if (key === 'speaker') {
                    speaker = value;
                }
                if (key === 'intro') {
                    isIntro = !!parseInt(value, 10)
                }
                if (key === 'hold') {
                    holdDuration = parseInt(value, 10);
                }
                if (key === 'theme') {
                    const root = document.querySelector('html');
                    root.className = '';
                    root.classList.add(`theme-${value}`)
                }
                if (key === 'theme') {
                    const root = document.querySelector('html');
                    root.className = '';
                    root.classList.add(`theme-${value}`)
                }
                if (key === 'room') {
                    room = value;
                }
                if (key === 'time') {
                    time = value;
                }
            }
        }

        if (room) {
            const talk = await getCurrentTalkByRoomName(room);
            if (!talk) {
                headline = '¯\\_(ツ)_/¯';
                speaker = '';
            } else {
                headline = talk.title;
                if (talk.persons) {
                    speaker = talk.persons.map(person => person.public_name).join(' / ');
                }
            }
        }

        const headlineEl = document.createElement('span');
        headlineEl.classList.add('headline');
        const speakerEl = document.createElement('span');
        speakerEl.classList.add('speaker');

        Array.from(headline).forEach(letter => {
            const letterEl = document.createElement('span');
            letterEl.classList.add('letter');
            letterEl.innerText = letter;
            headlineEl.appendChild(letterEl);
        })
        Array.from(speaker).forEach(letter => {
            const letterEl = document.createElement('span');
            letterEl.classList.add('letter');
            letterEl.innerText = letter;
            speakerEl.appendChild(letterEl);
        })

        textEl.appendChild(headlineEl);
        textEl.appendChild(document.createTextNode(' '));
        textEl.appendChild(speakerEl);

        const mainTilesEl = document.querySelector('.background .main-tiles');
        mainTilesEl.innerHTML = '';

        for (let i = 0; i < 16; i++) {
            const tile = document.createElement('div');
            tile.classList.add('tile', 'large');
            mainTilesEl.appendChild(tile);
        }

        const secondaryTilesEl = document.querySelector('.background .secondary-tiles');
        secondaryTilesEl.innerHTML = '';

        for (let i = 0; i < 17; i++) {
            const tile = document.createElement('div');
            tile.classList.add('tile');
            if (i === 0 || Math.random() > 0.5) {
                tile.classList.add('medium');
            } else {
                tile.classList.add('small');
            }
            secondaryTilesEl.appendChild(tile);
        }
    }

    async function animate() {
        if (isIntro) {
            await Promise.all([
                slideIn(),
                fadeInText(),
            ]);
        } else {
            await Promise.all([
                fadeIn(),
                fadeInText(),
            ]);
        }
        await new Promise(r => setTimeout(r, holdDuration));
        await Promise.all([
            fadeOut(),
            fadeOutText(),
        ])
    }

    async function slideIn() {
        const tiles = document.querySelectorAll('.tile');

        for (const tile of tiles) {
            tile.style.animationName = `slide-in-${Math.floor(Math.random() * 10)}`;
            tile.style.animationDelay = `${Math.random() * 0.4}s`;
            tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            tile.style.animationIterationCount = '1';
            tile.style.animationTimingFunction = 'ease-in';
        }
        await new Promise(r => setTimeout(r, 600));
        for (const tile of tiles) {
            tile.classList.add('visible');
        }
        await new Promise(r => setTimeout(r, 1000));
    }

    async function fadeIn() {
        const tiles = document.querySelectorAll('.tile');

        for (const tile of tiles) {
            tile.style.animationName = `fade-in`;
            tile.style.animationDelay = `${Math.random() * 0.4}s`;
            tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            tile.style.animationIterationCount = '1';
            tile.style.animationTimingFunction = 'ease-in';
        }
        await new Promise(r => setTimeout(r, 600));
        for (const tile of tiles) {
            tile.classList.add('visible');
        }
        await new Promise(r => setTimeout(r, 1000));
    }

    async function fadeOut() {
        const tiles = document.querySelectorAll('.tile');

        for (const tile of tiles) {
            tile.style.animationName = `fade-out`;
            tile.style.animationDelay = `${Math.random() * 0.4}s`;
            tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            tile.style.animationIterationCount = '1';
            tile.style.animationTimingFunction = 'ease-in';
        }
        await new Promise(r => setTimeout(r, 600));
        for (const tile of tiles) {
            tile.classList.remove('visible');
        }
        await new Promise(r => setTimeout(r, 1000));
    }

    async function fadeInText() {
        const letters = document.querySelectorAll('.letter');

        for (const letter of letters) {
            letter.style.animationName = `fade-in`;
            letter.style.animationDelay = `${Math.random() * 0.4}s`;
            letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            letter.style.animationIterationCount = 1;
            letter.style.animationTimingFunction = 'ease-in';
        }
        await new Promise(r => setTimeout(r, 600));
        for (const tile of letters) {
            tile.classList.add('visible');
        }
        await new Promise(r => setTimeout(r, 1000));
    }

    async function fadeOutText() {
        const letters = document.querySelectorAll('.letter');

        for (const letter of letters) {
            letter.style.animationName = `fade-out`;
            letter.style.animationDelay = `${Math.random() * 0.4}s`;
            letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
            letter.style.animationIterationCount = '1';
            letter.style.animationTimingFunction = 'ease-in';
        }
        await new Promise(r => setTimeout(r, 600));
        for (const tile of letters) {
            tile.classList.remove('visible');
        }
        await new Promise(r => setTimeout(r, 1000));
    }

    window.addEventListener('load', async () => {
        await init();
        await new Promise(r => setTimeout(r, 1000));
        await animate();
    });
})();