Some minor improvements

Fix several font errors
Update bomb count depending on field size
Improve layout

.gitignore

@@ -1 +1,3 @@
 .idea/*
+icons/Minesweeper Icon.ai
+icons/icon.svg

css/style.css

@@ -1,18 +1,37 @@
 @font-face {
     font-family: "Roboto";
-    src: url("/fonts/Roboto-Regular.ttf");
+    font-weight: 500;
+    src: url("../fonts/Roboto-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Roboto Bold";
+    font-weight: bold;
+    src: url("../fonts/Roboto-Bold.ttf");
+}
+
+@font-face {
+    font-family: "Roboto Black";
+    font-weight: bold;
+    src: url("../fonts/Roboto-Black.ttf");
+}
+
+@font-face {
+    font-family: "Roboto Light";
+    font-weight: 100;
+    src: url("../fonts/Roboto-Light.ttf");
 }
 
 @font-face {
     font-family: "SF Digital Readout";
-    src: url("/fonts/SFDigitalReadout-Heavy.ttf");
+    src: url("../fonts/SFDigitalReadout-Medium.ttf");
 }
 
 html {
     overflow: hidden;
 }
 
-body {
+html, body, p, button, h1, h2 {
     margin: 0;
     font-family: Roboto, Helvetica, Arial, sans-serif;
     font-size: 1.4em;
@@ -74,7 +93,9 @@ body {
 }
 
 .start-container h3 {
-    font-weight: lighter;
+    font-size: .8em;
+    font-family: "Roboto Light", Roboto, Helvetica, sans-serif;
+    font-weight: 100;
 }
 
 button {
@@ -121,9 +142,9 @@ button:active {
 
 .game-container {
     position: absolute;
-    bottom: 2.5%;
+    top: 52.5vh;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
 }
 
 .game-stats {

game.js

@@ -45,7 +45,7 @@ class Game {
         this.restartButton = document.getElementById('restart-btn');
 
         this.fieldSize = {x: 16, y: 12};
-        this.bombCount = 25;
+        this.bombCount = this.fieldSize.x * this.fieldSize.y * .25;
         this.field = [];
         this.gameOver = false;
         this.scaleFactor = .5;
@@ -159,7 +159,7 @@ class Game {
 
         let color = this.getColor(virtualX, virtualY);
         const fontSize = this.renderingConfig.sizeY * .5;
-        let fontFamily = "Roboto";
+        let fontFamily = "Roboto Bold";
         let textColor = "white";
         let text = "";
 
@@ -193,13 +193,13 @@ class Game {
 
     gameOverEvent() {
         play = false;
-        animateBackground(0, 0, this.width, this.height, 0, .75, new Date().getTime(), 200, {
+        animateBackground(this.layer2, 0, 0, this.width, this.height, 0, .75, new Date().getTime(), 200, {
             r: 0,
             g: 0,
             b: 0,
             a: 0
         });
-        animateText(this.layer2, this.renderingConfig, "Game Over", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, this.tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto");
+        animateText(this.layer2, this.renderingConfig, "Game Over", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, this.tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto Black");
     }
 
     getColor(x, y) {
@@ -544,13 +544,13 @@ class Game {
             animateVictory();
             play = false;
             const fontSize = this.tileSize.y * 1.33;
-            animateBackground(0, 0, this.canvas.width, this.canvas.height, 0, .01, new Date().getTime(), 300, {
+            animateBackground(this.layer2, 0, 0, this.canvas.width, this.canvas.height, 0, .01, new Date().getTime(), 300, {
                 r: 0,
                 g: 0,
                 b: 0,
                 a: 0
             });
-            animateText(this.layer2, this.renderingConfig, "Victory!", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto");
+            animateText(this.layer2, this.renderingConfig, "Victory!", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto Black");
         }
     }
 }

minesweeper.js

@@ -11,7 +11,7 @@ const colors = {
     6: "pink"
 };
 
-function animateBackground(x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) {
+function animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) {
     const time = (new Date()).getTime() - startTime;
 
     if (curOpacity >= finalOpacity)
@@ -26,12 +26,12 @@ function animateBackground(x, y, width, height, curOpacity, finalOpacity, startT
 
     color.a = curOpacity;
 
-    overlay2Ctx.clearRect(x, y, width, height);
-    overlay2Ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + color.a + ")";
-    overlay2Ctx.fillRect(x, y, width, height);
+    ctx.clearRect(x, y, width, height);
+    ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + color.a + ")";
+    ctx.fillRect(x, y, width, height);
 
     requestAnimFrame(function () {
-        animateBackground(x, y, width, height, curOpacity, finalOpacity, startTime, duration, color);
+        animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color);
     });
 }
 
@@ -85,7 +85,7 @@ function animateText(ctx, renderingConfig, text, x, y, curFontSize, finalFontSiz
     const textDrawY = (y + .5 - renderingConfig.tiltY) * renderingConfig.sizeY + curFontSize * .33;
 
     if (font === undefined)
-        font = "Roboto";
+        font = "Roboto Bold";
 
     ctx.fillStyle = color;
     ctx.font = "bold " + curFontSize + "px " + font;