tools
/
minesweeper
1
0
Fork 0
Code Issues 11 Pull Requests Releases Activity

Display number of mines left 

Fixes #17.
This commit is contained in:
Florine W. Dekker 2020-07-29 22:25:14 +02:00
parent 81206c5a87
commit acffa4ca0f
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
3 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "minesweeper",
"version": "0.0.15",
"version": "0.0.16",
"description": "Just Minesweeper!",
"author": "Felix W. Dekker",
"browser": "dist/bundle.js",

4
src/main/index.html
View File

@ -29,7 +29,7 @@
<div class="row">
<div class="column column-60">
<!-- Field -->
<canvas id="canvas" width="500" height="500"></canvas>
<canvas id="canvas" width="1" height="1"></canvas>
</div>
<div class="column column-40">
@ -40,7 +40,7 @@
</form>
<form id="controlForm">
<label for="displayScale">Scale</label>
<input type="number" id="displayScale" value="10" />
<input type="number" id="displayScale" value="30" />
</form>
<!-- Settings -->

31
src/main/js/index.js
View File

@ -14,6 +14,7 @@ class Game {
this.canvas = $("#canvas");
this.solveForm = $("#solveForm");
this.controlForm = $("#controlForm");
this.displayScale = $("#displayScale");
this.settingsForm = $("#settingsForm");
@ -24,7 +25,7 @@ class Game {
this.reset();
this.display = new Display(this.canvas, this.field);
this.display.scale = this.displayScale.value;
this.display.setScale(+this.displayScale.value);
this.display.startDrawLoop();
this.leftDown = false;
@ -38,13 +39,15 @@ class Game {
new Solver().solve(this.field);
}
);
this.controlForm.addEventListener(
"submit",
event => event.preventDefault()
);
this.displayScale.addEventListener(
"change",
event => {
event.preventDefault();
this.canvas.width = this.field.width * this.displayScale.value;
this.canvas.height = this.field.height * this.displayScale.value;
this.display.scale = this.displayScale.value;
this.display.setScale(+this.displayScale.value);
}
);
@ -378,6 +381,17 @@ class Display {
);
}
/**
* Rescales the display appropriately.
*
* @param scale {number} the size of a square in pixels
*/
setScale(scale) {
this.scale = scale;
this.canvas.width = this.field.width * this.scale;
this.canvas.height = this.field.height * this.scale + this.scale;
}
/**
* Invokes `#draw` in every animation frame of this window.
@ -466,6 +480,15 @@ class Display {
ctx.restore();
}
// Draw counter
ctx.save();
ctx.fillStyle = "#000";
ctx.font = scale + "px serif";
ctx.textBaseline = "top";
ctx.textAlign = "left";
ctx.fillText(`${this.field.squareList.filter(it => it.hasFlag).length}/${this.field.mineCount}`, 0, (this.field.height) * scale);
ctx.restore();
// Done
}
}