const mapWidth = 10000;
const mapHeight = 10000;

let assets = [
    'base.png',
    'pol.svg'
]

let imgA = [];

let map = document.querySelector('.map');
let ctx = map.getContext('2d');

let coords = document.querySelector('.coords');

let pos = [];
let mpos = [0, 0];
let keys = [];
let vel = [0, 0];
let center = [0, 0];
let lastPos = [0, 0];
let isMouse = false;
let zoom = 0.8;

let id = '';

function fixEvent(e) {
    let r = map.getBoundingClientRect();
    e = { clientX: e.clientX, clientY: e.clientY };

    e.clientX -= r.x;
    e.clientY -= r.y;

    e.clientX /= r.width / map.width;
    e.clientY /= r.height / map.height;

    return e;
}

function down(e) {
    keys[e.key.toLowerCase()] = true;
};

function up(e) {
    keys[e.key.toLowerCase()] = false;
};

function mouseMove(e) {
    e = fixEvent(e);

    lastPos = [e.clientX, e.clientY];
    if (!isMouse) return;
    mpos[0] += e.clientX - center[0];
    mpos[1] += e.clientY - center[1];
    center = lastPos;
}

function mouseUp(e) {
    isMouse = false;
}

function mouseDown(e) {
    e = fixEvent(e);
    if (e.button == '2') return;
    isMouse = true;
    center = [e.clientX, e.clientY];
}

function wheel(e) {
    mpos[0] -= lastPos[0];
    mpos[1] -= lastPos[1];

    mpos[0] *= (1.005 ** -e.deltaY)
    mpos[1] *= (1.005 ** -e.deltaY)

    mpos[0] += lastPos[0];
    mpos[1] += lastPos[1];

    zoom *= (1.005 ** -e.deltaY)
}

function move() {
    var isShift = keys['q'];
    vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
    vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);

    vel[0] *= 0.9;
    vel[1] *= 0.9;

    mpos[0] += vel[0];
    mpos[1] += vel[1];

    ctx.clearRect(0, 0, map.width, map.height);

    for (let img of imgA) {
        let w = img.width * zoom;
        let h = img.height * zoom;
        ctx.drawImage(img, mpos[0], mpos[1], w, h)
    }

    off = [-(imgA[0].width * zoom - map.width) / 2, -(imgA[0].height * zoom - map.height) / 2];
    coords.textContent = `X: ${(mpos[0] - off[0]) * mapWidth / imgA[0].width / -zoom}\nZ: ${(mpos[1] - off[1]) * mapHeight / imgA[0].height / -zoom}`;
}

for (let asset of assets) {
    let img = new Image();
    img.src = `/static/${asset}`;
    imgA.push(img);
}

let off = [-(imgA[0].width * zoom - map.width) / 2, -(imgA[0].height * zoom - map.height) / 2];
mpos = [off[0], off[1]];

setInterval(move, 10);

window.addEventListener('keydown', down);
window.addEventListener('keyup', up);
map.addEventListener('wheel', wheel);
window.addEventListener('mousemove', mouseMove);
window.addEventListener('mousedown', mouseDown);
window.addEventListener('mouseup', mouseUp);