Grid works

client/src/services/Windows.js

@@ -74,7 +74,7 @@ const reload = ref(0);
 let ReloadRef = () => { return reload };
 let Windows = () => { return windows };
 
-let currentIndex = 1;
+let currentIndex = 10;
 
 function SetupHandle(id, handle){
 

client/src/views/managers/GameManager.vue

@@ -3,37 +3,46 @@ import { onMounted, ref, watch } from 'vue';
 import { InGameRef } from '../../services/Game';
 import IconButton from '../partials/game/IconButton.vue';
 import { AddSound } from '../../services/Sound';
+import TileMap from './TileMap.vue';
 
 const game = ref(null);
 const in_game = InGameRef();
 
 watch(game, () => {
-    if(game) AddSound(game.value);
-})
+    if(game){
+        AddSound(game.value);
+    }
+});
 
 </script>
 
 
 <template>
     <div class="game-root" ref="game" v-if="in_game">
+        <!-- Aquests dos son absolute -->
+        
         <div class="vertical-button">
             <IconButton icon="icons/iconoir/regular/menu.svg"></IconButton>
             <IconButton icon="icons/iconoir/regular/cursor-pointer.svg"></IconButton>
             <IconButton icon="icons/game-icons/000000/delapouite/rolling-dice-cup.svg"></IconButton>
         </div>
         <div class="horizontal-button">
-
+            
         </div>
+
+        <!-- Tilemap -->
+        <TileMap></TileMap>
     </div>
 </template>
 
-
 <style scoped lang="scss">
+
 .vertical-button {
     position: absolute;
     top: 10px;
     left: 10px;
     display: flex;
     flex-direction: column;
+    z-index: 1;
 }
 </style>

client/src/views/managers/TileMap.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { onMounted } from 'vue';
+
+
+let offsetX = 0;
+let offsetY = 0;
+let scale = 1;
+
+let mouseX = 0;
+let mouseY = 0;
+
+
+// Map coords -> Real coords
+function toMapX(xReal) {
+    return (xReal + offsetX) * scale;
+}
+
+function toMapY(yReal){
+    return (yReal + offsetY) * scale;
+}
+
+// Real coords -> Map coords
+function toRealX(xVirt){
+    return xVirt / scale - offsetX;
+}
+
+function toRealY(yVirt){
+    return yVirt / scale - offsetY;
+}
+
+function zoom(amount){
+    let dx = ((mouseX) / scale - offsetX) - ((mouseX) / (scale * amount) - offsetX)
+    let dy = ((mouseY) / scale - offsetY) - ((mouseY) / (scale * amount) - offsetY)
+    scale *= amount;
+    offsetX -= dx;
+    offsetY -= dy;
+    console.log(scale);
+    draw();
+}
+
+function drawGrid(){
+    let canvas = document.getElementById('tilemap');
+
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+
+    let ctx = canvas.getContext("2d");
+
+    let cellSize = 30;
+
+    ctx.strokeStyle = "#434343";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+
+    /* Vertical lines spanning the full width */
+    for (let x = (offsetX % cellSize) * scale; x <= width; x += cellSize * scale) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+    }
+
+    /* Horizontal lines spanning the full height */
+    for (let y = (offsetY % cellSize) * scale; y <= height; y += cellSize * scale) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+    }
+
+    ctx.stroke();
+
+    ctx.strokeStyle = "red";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.rect(toMapX(-10), toMapY(-10), 10 * scale, 10 * scale);
+    ctx.stroke();
+}
+
+function draw(){
+    let canvas = document.getElementById('tilemap');
+    let ctx = canvas.getContext("2d");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawGrid();
+}
+
+onMounted(() => {
+    let tilemap = document.getElementById("tilemap");
+    tilemap.addEventListener("wheel", (event) => {
+        let direction = 0;
+        if(event.deltaY > 0) direction = 0.95;
+        else if(event.deltaY < 0) direction = 1.05;
+
+        zoom(direction);
+    })
+
+    let mouseDown = false;
+    let startX = 0, startY = 0;
+    let oldOffsetX = offsetX, oldOffsetY = offsetY;
+
+    tilemap.addEventListener("mousedown", (event) => {
+        mouseDown = true
+        startX = event.clientX;
+        startY = event.clientY;
+        oldOffsetX = offsetX;
+        oldOffsetY = offsetY;
+    });
+
+    tilemap.addEventListener("mousemove", (event) => {
+        mouseX = event.clientX;
+        mouseY = event.clientY;
+
+        if(!mouseDown) return;
+        offsetX = oldOffsetX + ((event.clientX - startX) * (1 / scale));
+        offsetY = oldOffsetY + ((event.clientY - startY) * (1 / scale));
+
+        draw();
+        console.log("x: " + offsetX + ", y: " + offsetY);
+    });
+
+    tilemap.addEventListener("mouseup", () => mouseDown = false);
+
+    addEventListener("resize", draw)
+    draw();
+});
+
+</script>
+
+<template>
+    <canvas class="tilemap" id="tilemap"></canvas>
+</template>
+
+<style scoped lang="scss">
+.tilemap {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 0;
+}
+</style>