ayo/mnswpr
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update readme

Browse source
This commit is contained in:
Ayo 2022-11-28 09:52:03 +01:00
parent b110cc5d87
commit 055541a34d
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
README.md
View file

@ -1,7 +1,7 @@
# Play Minesweeper Online # Play Minesweeper Online
[![Netlify Status](https://api.netlify.com/api/v1/badges/172478bd-afc5-4e47-95ba-d9ab814248fb/deploy-status)](https://app.netlify.com/sites/mnswpr/deploys) [![Netlify Status](https://api.netlify.com/api/v1/badges/172478bd-afc5-4e47-95ba-d9ab814248fb/deploy-status)](https://app.netlify.com/sites/mnswpr/deploys)
This is the classic game **Minesweeper** built as a single page application with vanilla JS (i.e., no framework dependency). This is the classic game **Minesweeper** built with vanilla JS (i.e., no framework dependency).
Stack: Stack:
- HTML, JS, and CSS - HTML, JS, and CSS
@ -9,19 +9,6 @@ Stack:
- Firebase for leader board store - Firebase for leader board store
- Netlify for hosting - 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 ## 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. 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.
@ -34,6 +21,7 @@ I wanted to give her the same game, with a similar leader board she can dominate
Can I make page with complex interactions (more on this later) without any dependency? Can I make page with complex interactions (more on this later) without any dependency?
## What I have learned: ## What I have learned:
✨ We don't always necessarily *need* JS frameworks (or TS) ✨ ✨ We don't always necessarily *need* JS frameworks (or TS) ✨
✨ Even subtle UI changes *can improve* user experience ✨ ✨ Even subtle UI changes *can improve* user experience ✨
@ -41,3 +29,17 @@ Can I make page with complex interactions (more on this later) without any depen
✨ There's more ways to break you're app than you are initially aware of ✨ ✨ There's more ways to break you're app than you are initially aware of ✨
✨ Competition motivates users to use your app more ✨ ✨ Competition motivates users to use your app more ✨
✨ Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨
## 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)*