An implementation of the Minesweeper game built using Angular 16.
The idea is to make it look and feel like the gameplay from Windows 98 with added options for multiplayer games and storing games and ranks.
SASS
for styling.Karma
andJasmine
used for the unit tests implementation and code coverage reportsWebpack
is used for the build. Using @angular-builders/custom-webpack to overwrite the Angular build defaults.
There are two options for webpack config.
webpack.dev.config.ts
(Development) andwebpack.config.ts
(Production).
ESLint
is used as linterYarn
is used as default package manager
-
Regular Minesweeper gameplay. Adding flags, timer, bomb count, etc.
-
Multiplayer support. Currently hardcoded for a max o 4 players but its easily changeable on the code.
-
List of previous games
-
Difficulty levels (easy, medium and hard). With the addition of
custom
level for the player to choose the size of the board and amount of bombs. -
Saving / Loading games (currently limited a single game).
NOTE: Currently limited to just saving 1 game, still didn't have the time to fully make and test the feature.
- Install dependencies using
yarn install
- Run dev server using the command (it will start by default on port 4200
http://localhost:4200/
):
yarn start
- Run the command
yarn test
- You should see the results of the test and Karma will open a browser with the results
- Run
yarn test:report
- The results will be shown on the console and the report will be generated on
./coverage/minesweeper-angular/
. You can open theindex.html
file on that folder to see the results
- Production Build:
Run yarn build
to make the production build. The output path will be on the folder dist\minesweeper-angular
.
NOTE: The build setup can be overwritten using webpack by modifying the
webpack.config.ts
file.
- Development Build
You can run yarn watch
to make a development build and watch for code changes.
You can also run yarn build:dev
to make the development build.
NOTE: To customize the dev build you can modify the
webpack.dev.config.ts
file.
Run yarn lint
to run the linter.
You can change the lint specs on the ./.eslintrc.json
file.
TODOS:
- Improve CSS styles
- General removal of duplication
- remove inline styles
- More code coverage / unit tests
- Improve multiplayer support to add possibility of adding the names of the players.
- Improved load game functionality by allowing multiple games to be saved.