Merge pull request #2 from KingOfDog/canvas-scaling

Animation fixes

.gitignore

@@ -0,0 +1 @@
+.idea/*

animations/click.js

@@ -7,9 +7,9 @@ window.requestAnimFrame = (function (callback) {
 const overlayCanvas = document.getElementById('minesweeper-overlay');
 const overlayCtx = overlayCanvas.getContext('2d');
 
-const particlesPerExplosion = 20;
+const particlesPerExplosion = 10;
 const particlesMinSpeed     = 3;
-const particlesMaxSpeed     = 6;
+const particlesMaxSpeed     = 5;
 const particlesMinSize      = 3;
 const particlesMaxSize      = 6;
 const explosions            = [];
@@ -28,10 +28,13 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga
 let play = true;
 
 // Draw
-function draw() {
+function drawClickAnimation() {
     // Loop
     if(play)
-        requestAnimationFrame(draw);
+        requestAnimationFrame(drawClickAnimation);
+
+    if(explosions.length === 0)
+        return;
 
     // Set NOW and DELTA
     now   = Date.now();
@@ -47,14 +50,11 @@ function draw() {
 
         // Our animation
         drawExplosion();
-
     }
-
 }
 
 // Draw explosion(s)
 function drawExplosion() {
-
     if (explosions.length === 0) {
         return;
     }
@@ -138,9 +138,9 @@ function particle(x, y) {
     this.xv   = randInt(particlesMinSpeed, particlesMaxSpeed, false);
     this.yv   = randInt(particlesMinSpeed, particlesMaxSpeed, false);
     this.size = randInt(particlesMinSize, particlesMaxSize, true);
-    this.r    = randInt(113, 222);
+    this.r    = randInt(2, 36);
-    this.g    = '00';
+    this.g    = randInt(135, 150);
-    this.b    = randInt(105, 255);
+    this.b    = randInt(190, 255);
 }
 
 // Returns an random integer, positive or negative
@@ -159,4 +159,4 @@ function randInt(min, max, positive) {
 
 }
 
-draw();
+drawClickAnimation();

animations/victory.js

@@ -59,7 +59,7 @@ function drawVictory() {
     }
 }
 
-function animate() {
+function animateVictory() {
-    requestAnimFrame(animate);
+    requestAnimFrame(animateVictory);
     drawVictory();
 }

minesweeper.js

@@ -80,8 +80,6 @@ function animateTile(x, y, curWidth, curHeight, finalWidth, finalHeight, curRadi
     else
         curRadius = finalRadius;
 
-    // drawRoundedRect(ctx, x + 1, y + 1, finalWidth - 2, finalHeight - 2, finalRadius, getColor(x, y));
-
     drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color);
 
     requestAnimFrame(() => {
@@ -129,8 +127,8 @@ function applyScaling() {
 }
 
 function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) {
-    const width = Math.ceil(field.x * zoom);
+    const width = Math.ceil(field.x * zoom) + 1;
-    const height = Math.ceil(field.y * zoom);
+    const height = Math.ceil(field.y * zoom) + 1;
 
     const offsetX = Math.floor(windowX * field.x);
     const offsetY = Math.floor(windowY * field.y);
@@ -195,6 +193,9 @@ function drawTile(x, y, animations = true) {
     const virtualX = renderingConfig.offsetX + x;
     const virtualY = renderingConfig.offsetY + y;
 
+    if(virtualX >= fieldSize.x || virtualY >= fieldSize.y)
+        return;
+
     const content = field[virtualX][virtualY];
 
     const width = .8 * renderingConfig.sizeX;
@@ -216,16 +217,19 @@ function drawTile(x, y, animations = true) {
 
     if (!content.flagged && content.clicked) {
         color = "#ddd";
-        if (content.tileValue !== 0) {
+        if(content.tileValue === true) {
+            text = "";
+            fontFamily = "FontAwesome";
+            textColor = "#aa2211";
+            color = "#333";
+        } else 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);
@@ -252,9 +256,9 @@ function easeInOutCubic(t, b, c, d) {
 }
 
 function gameOverEvent() {
-    console.log("Game Over");
+    play = false;
     animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
-    animateText("Game Over", canvas.width / 2, canvas.height / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
+    animateText("Game Over", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
 }
 
 function getPosition(e) {
@@ -263,6 +267,8 @@ 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};
 }
 
@@ -358,8 +364,9 @@ function scaleCanvas() {
 }
 
 function tileClickEvent(x, y) {
-    if (gameOver)
+    if (gameOver || victory)
         return;
+    console.log(x, y);
     uncoverTile(x, y);
     if (!field[x][y].flagged && field[x][y].tileValue === true) {
         gameOver = true;
@@ -383,6 +390,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 +414,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();
     }
@@ -423,12 +433,13 @@ function victoryCheck() {
 }
 
 function victoryEvent() {
-    console.log("Win!");
+    if(victory) {
-    animate();
+        animateVictory();
         play = false;
         const fontSize = tileSize.y * 1.33;
         animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
-    animateText("Victory!", W / 2, H / 2 - fontSize / 2, 0, fontSize, new Date().getTime(), 200, "green", "Roboto", overlay2Ctx);
+        animateText("Victory!", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto", overlay2Ctx);
+    }
 }
 
 Object.prototype.count = function (val) {
@@ -456,6 +467,9 @@ Object.prototype.countFlagged = function (val) {
 };
 
 overlay2Canvas.addEventListener("click", (e) => {
+    if(isDragging)
+        return;
+
     const pos = getPosition(e);
 
     if (isFirstClick) {
@@ -471,6 +485,9 @@ overlay2Canvas.addEventListener("click", (e) => {
 });
 
 overlay2Canvas.addEventListener("dblclick", (e) => {
+    if(isDragging)
+        return;
+
     const pos = getPosition(e);
 
     tileDoubleClick(pos.x, pos.y);
@@ -479,6 +496,9 @@ overlay2Canvas.addEventListener("dblclick", (e) => {
 });
 
 overlay2Canvas.addEventListener("contextmenu", (e) => {
+    if(isDragging)
+        return;
+
     e.preventDefault();
 
     const pos = getPosition(e);
@@ -516,57 +536,51 @@ window.addEventListener("keyup", (e) => {
     applyScaling();
 });
 
-// let startClientX = 0;
+let startClientX = 0;
-// let startClientY = 0;
+let startClientY = 0;
-//
+let startWindowX = 0;
-// let isDragging = false;
+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) => {
+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 = startWindowX - deltaX / W;
-        windowX -= 1 / deltaX / 10;
+        windowY = startWindowY - deltaY / H;
-        windowY -= 1 / deltaY / 10;
 
         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();