Some improvements to the scrolling functionality

minesweeper.js

@@ -129,8 +129,8 @@ function applyScaling() {
 }
 
 function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) {
-    const width = Math.ceil(field.x * zoom);
-    const height = Math.ceil(field.y * zoom);
+    const width = Math.ceil(field.x * zoom) + 1;
+    const height = Math.ceil(field.y * zoom) + 1;
 
     const offsetX = Math.floor(windowX * field.x);
     const offsetY = Math.floor(windowY * field.y);
@@ -195,6 +195,11 @@ function drawTile(x, y, animations = true) {
     const virtualX = renderingConfig.offsetX + x;
     const virtualY = renderingConfig.offsetY + y;
 
+    console.log(x, y);
+
+    if(virtualX >= fieldSize.x || virtualY >= fieldSize.y)
+        return;
+
     const content = field[virtualX][virtualY];
 
     const width = .8 * renderingConfig.sizeX;
@@ -219,13 +224,11 @@ function drawTile(x, y, animations = true) {
         if (content.tileValue !== 0) {
             text = content.tileValue;
             textColor = colors[content.tileValue];
-            // animateText(content.tileValue, (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, colors[content.tileValue]);
         }
     } else if (content.flagged) {
         color = "#ff0000";
         fontFamily = "FontAwesome";
         text = "";
-        // animateText("", (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, "white", "FontAwesome");
     }
 
     animateTile(drawX, drawY, 0, 0, width, height, 0, radius, new Date().getTime(), duration, color);
@@ -263,12 +266,14 @@ function getPosition(e) {
     const fieldX = Math.floor(x * fieldSize.x);
     const fieldY = Math.floor(y * fieldSize.y);
 
+    console.log(fieldX, fieldY);
+
     return {x: fieldX, y: fieldY};
 }
 
 function getSurroundingTiles(x, y) {
     const tiles = {};
-    if (x > 0) {
+    if (x > 1) {
         tiles["left"] = {tileValue: field[x - 1][y], x: x - 1, y: y};
         if (y > 0) {
             tiles["left-top"] = {tileValue: field[x - 1][y - 1], x: x - 1, y: y - 1};
@@ -360,6 +365,7 @@ function scaleCanvas() {
 function tileClickEvent(x, y) {
     if (gameOver)
         return;
+    console.log(x, y);
     uncoverTile(x, y);
     if (!field[x][y].flagged && field[x][y].tileValue === true) {
         gameOver = true;
@@ -383,6 +389,9 @@ function tileFlag(x, y) {
     field[x][y].flagged = !field[x][y].flagged;
     field[x][y].clicked = field[x][y].flagged;
 
+    x -= renderingConfig.offsetX;
+    y -= renderingConfig.offsetY;
+
     const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX;
     const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY;
 
@@ -404,7 +413,7 @@ function uncoverTile(x, y) {
         return;
     }
     field[x][y].clicked = true;
-    drawTile(x, y, );
+    drawTile(x - renderingConfig.offsetX, y - renderingConfig.offsetY);
     if (field[x][y].tileValue === true) {
         gameOverEvent();
     }
@@ -456,6 +465,9 @@ Object.prototype.countFlagged = function (val) {
 };
 
 overlay2Canvas.addEventListener("click", (e) => {
+    if(isDragging)
+        return;
+
     const pos = getPosition(e);
 
     if (isFirstClick) {
@@ -471,6 +483,9 @@ overlay2Canvas.addEventListener("click", (e) => {
 });
 
 overlay2Canvas.addEventListener("dblclick", (e) => {
+    if(isDragging)
+        return;
+
     const pos = getPosition(e);
 
     tileDoubleClick(pos.x, pos.y);
@@ -479,6 +494,9 @@ overlay2Canvas.addEventListener("dblclick", (e) => {
 });
 
 overlay2Canvas.addEventListener("contextmenu", (e) => {
+    if(isDragging)
+        return;
+
     e.preventDefault();
 
     const pos = getPosition(e);
@@ -516,57 +534,51 @@ window.addEventListener("keyup", (e) => {
     applyScaling();
 });
 
-// let startClientX = 0;
-// let startClientY = 0;
-//
-// let isDragging = false;
+let startClientX = 0;
+let startClientY = 0;
+let startWindowX = 0;
+let startWindowY = 0;
 
-/*document.addEventListener("mousedown", (e) => {
+let hasClicked = false;
+let isDragging = false;
+
+document.addEventListener("mousedown", (e) => {
     if(e.button === 0) {
-        isDragging = true;
+        hasClicked = true;
         startClientX = e.clientX;
         startClientY = e.clientY;
+        startWindowX = windowX;
+        startWindowY = windowY;
     }
 });
 
-document.addEventListener("mouseup", (e) => {
-    isDragging = false;
+document.addEventListener("mouseup", () => {
+    hasClicked = false;
+    if(isDragging) {
+        setTimeout(() => {
+            isDragging = false;
+        }, 10);
+    }
 });
 
 document.addEventListener("mousemove", (e) => {
-    if(isDragging) {
+    if(hasClicked) {
+        isDragging = true;
+
         const deltaX = e.clientX - startClientX;
         const deltaY = e.clientY - startClientY;
-        startClientX = e.clientX;
-        startClientY = e.clientY;
-        windowX -= 1 / deltaX / 10;
-        windowY -= 1 / deltaY / 10;
+
+        windowX = startWindowX - deltaX / W;
+        windowY = startWindowY - deltaY / H;
 
         windowX = Math.min(windowX, 1 - zoomFactor);
         windowY = Math.min(windowY, 1 - zoomFactor);
         windowX = Math.max(windowX, 0);
         windowY = Math.max(windowY, 0);
 
-        console.log(windowX, windowY);
-
-        // console.log(e, e.clientX - startClientX, e.clientY - startClientY);
-        // offsetX += (e.clientX - startClientX);
-        // offsetY += (e.clientY - startClientY);
-        // startClientX = e.clientX;
-        // startClientY = e.clientY;
         applyScaling();
     }
-});*/
-
-// document.addEventListener("dragstart", (e) => {
-//     console.log(e);
-//     startClientX = e.clientX;
-//     startClientY = e.clientY;
-// });
-//
-// overlay2Canvas.addEventListener("drag", (e) => {
-//     console.log(startClientX - e.clientX);
-// });
+});
 
 window.addEventListener("resize", () => {
     scaleCanvas();