basic stuff

static/map.js

@@ -0,0 +1,121 @@
+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);