import './sass/hack.scss';

let container = document.getElementById('main');
window.onload=function(){
    let c = document.createElement('canvas');

    //full of screen display
    c.height = window.innerHeight;
    c.width = window.innerWidth;
    container.appendChild(c);

    let ctx = c.getContext("2d");

    // add click event listener
    c.addEventListener('click', e => {   
        location.href="./welcome.html";
    }, false);
    
    // text display in screen
    let txts = "052あ7B8い幸SAGIT运う1え9おかきくけこEFCADGHIJKLMNOPQRSTUVWXYZEFCADGHIJKLM";
    txts = txts.split("");
    let font_size = 20;
    let columns = c.width/font_size;

    //the characters of each row shows
    let drops = Array(parseInt(columns)).fill(1);
    //the color of random character
    let wh_color = ["#57CE13","#50BF7F","#50BF7F"];
        
    //draw character
    function draw(){
        //black background and transparent display
        ctx.fillStyle = "rgba(0, 0, 0, 0.09)";
        ctx.fillRect(0, 0, c.width, c.height);
        
        //ctx.fillStyle = "#50BF7F";
        ctx.fillStyle = wh_color[parseInt(Math.random()*100+1)%3];
        ctx.font = font_size + "px arial";
        
        //drops loop
        drops.forEach( (v,i,a) => {
            //random print character
            let text = txts[Math.floor(Math.random() * txts.length)];
            
            //x = i*font_size
            //y = value of drops[i]*font_size
            ctx.fillText(text, i*font_size, drops[i]*font_size);
            
            if(v * font_size > c.height || Math.random() > 0.95)
                a[i] = 0;
            
            //y grow
            a[i]++;
        });
    } 

    setInterval(draw, 50);
}