drawMessageComponent = {
    mouseDown: function(e){
        mouseIsDown = true
        let x = e.x/2;
        let y = e.y/2;
    
        if(206 < x && x < WIDTH && 292 < y && y < 336){
            messages.unshift({
                type: 2,
                from: username,
                text: currentMessageText,
                pixels: currentMessagePixels
            })
            currentMessageText = ""
            currentMessagePixels = []
        } else if(206 < x && x < WIDTH && 338 < y && y < 382){
            currentMessageText = ""
            currentMessagePixels = []
        } else if(0 < x && x < WIDTH && 198 < y && y < 288){
            currentMessagePixels.push({x: x, y: y - 288})
        }
        checkKeyBoardClick(x, y)
    },
    mouseUp: function(e){
        mouseIsDown = false
    },
    mouseMove: function(e){
        let x = Math.floor(e.x/2);
        let y = Math.floor(e.y/2);
        if(mouseIsDown && 0 < x && x < WIDTH && 198 < y && y < 288){
            currentMessagePixels.push({x: x, y: y - 288})
        }
    },
}
function inBox(x, y, boxX, boxY, width, height){
    return boxX < x && x < boxX + width && boxY < y && y < boxY + height
}
var normalKeys = [
    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "="],
    ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
    ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
    ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]
]
var keys = normalKeys
function checkKeyBoardClick(mouseX, mouseY){   
    var d1 = Math.floor( (WIDTH-54) / 12) - 1
    var d2 = Math.ceil( (WIDTH-54) / 12) - 1
    for(var j = 0; j < keys.length; j++){
        var x = 6 + 8*j
        var y = HEIGHT / 4 * 3 + 5 + (d1+1)*j
        for(var i = 0; i < keys[j].length; i++){
            if(inBox(mouseX, mouseY, x, y, d1, d1)){
                var char = keys[j][i]
                if(capsOn || shiftOn){
                    char = char.toUpperCase()
                }
                shiftOn = false
                keyDown({
                    keyCode: 32, // any printable char code (yeah probably a bad idea)
                    key: char // the char
                })
            }
            x += d2
        }
    }
    // space
    if(inBox(mouseX, mouseY, 6, HEIGHT - 27, WIDTH-65, 24)){
        keyDown({
            keyCode: 32,
            key: " " 
        })
    }
    // shift
    if(inBox(mouseX, mouseY, 6, HEIGHT - 27 - d2, d1+8, d1)){
        shiftOn = true && !shiftOn
    }
    // caps
    if(inBox(mouseX, mouseY, 6, HEIGHT - 27 - 2 * d2, d1, d1)){
        capsOn = !capsOn
    }
    // enter
    if(inBox(mouseX, mouseY, d1*11+1, HEIGHT - 27 - 2 * d2, d1*2+1, d1)){
        keyDown({
            keyCode: 13
        })
    }
    // backspace
    if(inBox(mouseX, mouseY, d1*11.5+1.5, HEIGHT - 27 - 3 * d2, d1+8, d1)){
        keyDown({
            keyCode: 8
        })
    }
    
}