From 2a01a9d7802d32f1d1fde8d6b56c8481a49af8ed Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Sat, 1 Aug 2020 15:53:50 +0200
Subject: [PATCH] Surround field with border

Fixes #27.
---
 package.json           | 2 +-
 src/main/css/main.css  | 3 ++-
 src/main/js/Display.ts | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ba6ac62..f55db05 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.0.50",
+    "version": "0.0.51",
     "description": "Just Minesweeper!",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index c0838c5..b5b1bab 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -17,9 +17,10 @@
 
 #canvasContainer {
     text-align: center;
-    overflow: auto;
 }
 
 #canvas {
     display: inline;
+    box-sizing: border-box;
+    border: 4mm ridge #bdbdbd;
 }
diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index 616d98a..1ad3576 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -141,8 +141,8 @@ export class Display {
     posToSquare(pos: { x: number, y: number }): Square | null {
         const rect = this.canvas.getBoundingClientRect();
         return this.field?.getSquareOrElse(
-            Math.floor((pos.x - rect.left) / this.scale),
-            Math.floor((pos.y - rect.top) / this.scale),
+            Math.floor((pos.x - rect.left - this.canvas.clientLeft) / this.scale),
+            Math.floor((pos.y - rect.top - this.canvas.clientTop) / this.scale),
             null
         );
     }
@@ -190,8 +190,8 @@ export class Display {
 
         // Create grid
         ctx.save();
-        ctx.strokeStyle = "#7b7b7b";
         ctx.beginPath();
+        ctx.strokeStyle = "#7b7b7b";
         for (let x = 0; x <= this.field.width; x++) {
             ctx.moveTo(x * scale, 0);
             ctx.lineTo(x * scale, this.field.height * scale);