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

Add overlay for seed input 

Fixes #62.
This commit is contained in:
Florine W. Dekker 2020-08-04 21:41:10 +02:00
parent c2544c520c
commit 6fbdc17bce
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 123 additions and 49 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.73.1",
"version": "0.74.0",
"description": "Just Minesweeper!",
"author": "Felix W. Dekker",
"browser": "dist/bundle.js",

16
src/main/index.html
View File

@ -46,7 +46,7 @@
</form>
<!-- Seed -->
<form id="seedForm">
<form id="seedOpenForm">
<button>Enter seed</button>
</form>
</div>
@ -105,6 +105,20 @@
</form>
</div>
</div>
<!-- Seed input overlay -->
<div class="overlayWrapper" id="seedOverlay">
<div class="overlay">
<form id="seedForm">
<label for="seed">Seed</label>
<input id="seed" />
<button>New game</button>
</form>
<form id="seedCancelForm">
<button>Cancel</button>
</form>
</div>
</div>
</main>

78
src/main/js/Game.ts
View File

@ -7,6 +7,7 @@ import {customDifficulty, defaultDifficulty, difficulties} from "./Difficulty";
import {Display} from "./Display";
import {Field} from "./Field";
import {Solver} from "./Solver";
import {Overlay} from "./UI";
/**
@ -15,14 +16,14 @@ import {Solver} from "./Solver";
export class Game {
private readonly canvas: HTMLCanvasElement;
private readonly difficultySelect: HTMLSelectElement;
private readonly customDifficultyOverlay: HTMLDivElement;
private readonly customDifficultyForm: HTMLFormElement;
private readonly customDifficultyCancelForm: HTMLFormElement;
private readonly newGameForm: HTMLFormElement;
private readonly restartForm: HTMLFormElement;
private readonly seedForm: HTMLFormElement;
private readonly seedOverlay: Overlay;
private readonly seedOpenForm: HTMLFormElement;
private readonly seedInput: HTMLFormElement;
private readonly undoForm: HTMLFormElement;
private readonly solveForm: HTMLFormElement;
private readonly customDifficultyOverlay: Overlay;
private readonly widthInput: HTMLInputElement;
private readonly heightInput: HTMLInputElement;
private readonly minesInput: HTMLInputElement;
@ -81,7 +82,7 @@ export class Game {
return;
}
this.customDifficultyOverlay.style.visibility = "unset";
this.customDifficultyOverlay.show();
this.widthInput.value = "" + (this.field?.width ?? defaultDifficulty.width);
this.heightInput.value = "" + (this.field?.height ?? defaultDifficulty.height);
this.minesInput.value = "" + (this.field?.mineCount ?? defaultDifficulty.mineCount);
@ -92,28 +93,11 @@ export class Game {
);
// Custom difficulty
this.customDifficultyOverlay = $("#customDifficultyOverlay");
this.customDifficultyOverlay.addEventListener(
"mousedown",
event => {
if (event.target === this.customDifficultyOverlay)
this.customDifficultyOverlay.style.visibility = "hidden";
}
);
this.customDifficultyOverlay.addEventListener(
"keydown",
event => {
if (event.key === "Escape")
this.customDifficultyOverlay.style.visibility = "hidden";
}
);
this.customDifficultyForm = $("#customDifficultyForm");
this.customDifficultyForm.addEventListener(
"submit",
event => {
event.preventDefault();
this.customDifficultyOverlay.style.visibility = "hidden";
this.customDifficultyOverlay = new Overlay(
$("#customDifficultyOverlay"),
$("#customDifficultyForm"),
$("#customDifficultyCancelForm"),
() => {
this.initNewField(
+this.widthInput.value,
+this.heightInput.value,
@ -122,15 +106,6 @@ export class Game {
);
}
);
this.customDifficultyCancelForm = $("#customDifficultyCancelForm");
this.customDifficultyCancelForm.addEventListener(
"submit",
event => {
event.preventDefault();
this.customDifficultyOverlay.style.visibility = "hidden";
}
);
this.widthInput = $("#settingsWidth");
this.widthInput.addEventListener("change", _ => this.setMineLimit());
@ -162,21 +137,30 @@ export class Game {
);
// Seed
this.seedForm = $("#seedForm");
this.seedForm.addEventListener(
this.seedInput = $("#seed");
this.seedOpenForm = $("#seedOpenForm");
this.seedOpenForm.addEventListener(
"submit",
event => {
event.preventDefault();
const input = window.prompt("Enter seed", "" + this.seed);
if (input !== null)
this.initNewField(
this.field?.width,
this.field?.height,
this.field?.mineCount,
this.field?.solvable,
input
);
this.seedOverlay.show();
this.seedInput.value = this.seed;
this.seedInput.focus();
}
);
this.seedOverlay = new Overlay(
$("#seedOverlay"),
$("#seedForm"),
$("#seedCancelForm"),
() => {
this.initNewField(
this.field?.width,
this.field?.height,
this.field?.mineCount,
this.field?.solvable,
this.seedInput.value
);
}
);

76
src/main/js/UI.ts Normal file
View File

@ -0,0 +1,76 @@
/**
* An overlay displayed in HTML.
*/
export class Overlay {
private readonly overlay: HTMLDivElement;
private readonly submitForm: HTMLFormElement;
private readonly cancelForm: HTMLFormElement;
/**
* Constructs a new overlay.
*
* @param overlay the overlay element to show and hide
* @param submitForm the form that invokes `onSubmit` and closes the overlay when submitted
* @param cancelForm the form that closes the overlay when submitted
* @param onSubmit the callback to invoke when the form is submit
*/
constructor(
overlay: HTMLDivElement,
submitForm: HTMLFormElement,
cancelForm: HTMLFormElement,
onSubmit: () => void
) {
this.overlay = overlay;
overlay.addEventListener(
"mousedown",
event => {
if (event.target === overlay)
this.hide();
}
);
overlay.addEventListener(
"keydown",
event => {
if (event.key === "Escape")
this.hide();
}
);
this.submitForm = submitForm;
submitForm.addEventListener(
"submit",
event => {
event.preventDefault();
this.hide();
onSubmit();
}
);
this.cancelForm = cancelForm;
cancelForm.addEventListener(
"submit",
event => {
event.preventDefault();
this.hide();
}
);
}
/**
* Shows the overlay.
*/
show(): void {
this.overlay.style.visibility = "unset";
}
/**
* Hides the overlay.
*/
hide(): void {
this.overlay.style.visibility = "hidden";
}
}