diff --git a/README.md b/README.md
index a2676af..9a4ede3 100644
--- a/README.md
+++ b/README.md
@@ -6,14 +6,38 @@ This is the classic game **Minesweeper** built as a single page application with
Stack:
- HTML, JS, and CSS
- Webpack for bundling
+- Firebase for leader board store
+- Netlify for hosting
## Development
To start development, you need node v16 (the dev server doesn't work on v18 *yet*). Once you know you have this, you can do the following:
1. Install dependencies: `npm i`
2. Start the dev server: `npm run dev`
+*Sorry there's no hot reloading. You have to reload the app after making a change. OR contribute to enable HMR? ;)*
+
## Running Locally
After running the commands to start development, open in a browser: `http://localhost:4200`
## Live Demo
The live site is here: [Minesweeper](https://mnswpr.com)
+
+## Project motivation
+One day, while working in my home office, I heard loud and fast mouse clicks coming from our bedroom. It's my wife, playing her favorite game (Minesweeper) on a crappy website full of advertisements.
+
+I can't allow this, it's a security issue. 🤣
+
+But it is also an opportunity.
+
+I wanted to give her the same game, with a similar leader board she can dominate. But I also saw it as a chance to dig deeper into vanilla JS.
+
+Can I make page with complex interactions (more on this later) without any dependency?
+
+## What I have learned:
+✨ We don't always necessarily *need* JS frameworks (or TS) ✨
+
+✨ Even subtle UI changes *can improve* user experience ✨
+
+✨ There's more ways to break you're app than you are initially aware of ✨
+
+✨ Competition motivates users to use your app more ✨
diff --git a/index.html b/index.html
index 2839764..1b69bc7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,6 @@
-
diff --git a/src/minesweeper.js b/src/minesweeper.js
index 02f586d..73333a8 100644
--- a/src/minesweeper.js
+++ b/src/minesweeper.js
@@ -6,7 +6,7 @@ import {
} from './modules';
import { levels } from './levels.js';
-const TEST_MODE = true; // set to true if you want to test the game with visual hints and separate leaderboard
+const TEST_MODE = false; // set to true if you want to test the game with visual hints and separate leaderboard
const VERSION = "0.3.12";
const MOBILE_BUSY_DELAY = 250;
const PC_BUSY_DELAY = 500;
@@ -69,20 +69,27 @@ export const Minesweeper = function(appId) {
let minesArray = [];
this.initialize = function() {
-
- appElement.innerHTML = '';
- const heading = `Minesweeper v${VERSION}`;
const headingElement = document.createElement('h1');
- headingElement.innerText = heading;
-
const gameBoard = document.createElement('div');
+
+ headingElement.innerText = `Minesweeper v${VERSION}`;
gameBoard.setAttribute('id', 'game-board');
-
gameBoard.append(initializeToolbar(), grid, initializeFootbar());
-
+ appElement.innerHTML = '';
appElement.append(headingElement, gameBoard);
- generateGrid()
- // appElement.append(gameWrapper);
+ appElement.append(initializeSourceLink());
+
+ generateGrid();
+ }
+
+ function initializeSourceLink() {
+ const sourceLink = document.createElement('a');
+ sourceLink.href = 'https://github.com/ayoayco/mnswpr';
+ sourceLink.innerText = 'Source code';
+ sourceLink.target = '_blank';
+ sourceLink.style.color = 'white';
+
+ return sourceLink;
}
function initializeLeaderBoard() {
@@ -114,22 +121,21 @@ export const Minesweeper = function(appId) {
levelsDropdown.add(levelOption, null);
});
- const customOption = document.createElement('option');
- customOption.onmousedown = () => {}
- customOption.value = 'custom';
- customOption.text = 'Custom';
+ // custom level
+ // const customOption = document.createElement('option');
+ // customOption.onmousedown = () => {}
+ // customOption.value = 'custom';
+ // customOption.text = 'Custom';
// levelsDropdown.add(customOption);
+
if (TEST_MODE) {
const testLevel = document.createElement('span');
testLevel.innerText = 'Test Mode';
footBar.append(testLevel);
} else {
-
footBar.append(levelsDropdown);
}
-
-
return footBar;
}
@@ -257,7 +263,6 @@ export const Minesweeper = function(appId) {
appElement.style.width = `${grid.offsetWidth + 40}px`;
appElement.style.margin = '0 auto';
-
if (!CASUAL_MODE) {
initializeLeaderBoard();
}