const container = document.querySelector<HTMLDivElement>('div.layout-content')!
const messages = [
    'ERROR: REALITY NOT FOUND',
    'YOU HAVE FALLEN OUT OF YOUR UNIVERSE.',
    '<br>',
    'DONT PANIC! WE CAN SENSE YOU!',
    'WE ARE BRINGING YOU INTO OURS FOR NOW.',
    '<br>',
    'REDIRECTING IN:',
    '3...',
    '2...',
    '1...',
    '<br>',
]

let timer = setInterval(tick, 1000)
let line = 0

function tick() {
    // Render Messages
    container.innerHTML = messages
        .filter((_, i) => line > i)
        .map((_, i) => {
            const me = line - 1 === i
            const styleP = me ? 'animation-scrollin' : ''
            const styleS = me ? 'inline-block' : 'none'
            return `<p class="${styleP}">${messages[i]} <span class="animation-blink" style="display: ${styleS}">_</span> </p>`
        })
        .join('')

    // Messages complete, redirect to homepage!
    if (line === messages.length) {
        window.location.replace('/')
        clearInterval(timer)
    }

    line++
}