Updates 2021

.editorconfig

@@ -0,0 +1,24 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[*.js]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1,3 +1,4 @@
 index.html
 .idea/
+node_modules/
 

.prettierignore

@@ -0,0 +1,6 @@
+build
+coverage
+.idea
+node_modules
+
+css/smoothness

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.travis.yml

@@ -1,11 +1,11 @@
+dist: focal
 language: node_js
-node_js:
-  - "4.4.7"
+services:
+  - docker
 before_install:
-  - npm install -g grunt-cli
-  # - npm install
-  # - npm install -g bower
-  # - bower install
+  - make build-ci
+script:
+  - make travis
 notifications:
   email:
     on_success: never

CONTRIBUTE.md

@@ -1,5 +1,4 @@
-Contributing
-===========
+# Contributing
 
 Contributions welcome. To contribute, checkout the code,
 make your changes, and submit a pull request.
@@ -8,8 +7,7 @@ Please make sure your code passes the style guide (see .jshintrc)
 to be accepted. You can run `grunt travis -v` to run the tests
 locally.
 
-To Do:
------------
+## To Do:
 
 - Add unit tests
 - Implement better JavaScript package standards

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:10.19.0
+
+WORKDIR /app
+
+ENV PATH=$PATH:/app/node_modules/.bin
+
+COPY ./package.json /app/package.json
+COPY ./package-lock.json /app/package-lock.json
+
+RUN npm install
+
+COPY . /app

Makefile

@@ -0,0 +1,21 @@
+
+build-ci:
+	# Build docker image for CI-CD purposes
+	docker build -t ci-testing:latest .
+
+ci: build-ci travis
+
+travis:
+	# Check if any JS or CSS file doesn't match the standard
+	docker run --rm ci-testing:latest npx prettier --check .
+	docker run --rm ci-testing:latest npx jshint js/
+	@echo "✅️ SUCCESS"
+
+format: build-ci
+	# Format files to a specific style. Changes should be then git committed.
+	docker run --rm -v ${PWD}:/app -u $(id -u ${USER}):$(id -g ${USER}) ci-testing:latest npx prettier --write .
+	@echo "✅️ SUCCESS"
+
+local-server:
+	# Spin up a local server using PHP
+	php -S 127.0.0.1:8080

README.md

@@ -1,27 +1,27 @@
-Minesweeper.js
-===========
+# Minesweeper.js
+
 [![Build Status](https://travis-ci.org/michaelbutler/minesweeper.svg?branch=master)](https://travis-ci.org/michaelbutler/minesweeper)
 
 By Michael Butler
 
-A WebWorker powered Minesweeper game written in JavaScript, HTML and CSS. 
+A WebWorker powered Minesweeper game written in JavaScript, HTML and CSS.
 
 Demo: http://michaelbutler.github.io/minesweeper/
 
-Features:
------------
-+ User can choose difficulty level
-+ Custom option with configurable grid size (X, Y) and number of mines
-+ Stopwatch with score keeping (LocalStorage)
-+ Stack based grid traversal algorithm for memory efficiency
-+ HTML5 web worker (if supported) will be used to perform the stack algorithm outside of the UI thread
+## Features:
+
+- User can choose difficulty level
+- Custom option with configurable grid size (X, Y) and number of mines
+- Stopwatch with score keeping (LocalStorage)
+- Stack based grid traversal algorithm for memory efficiency
+- HTML5 web worker (if supported) will be used to perform the stack algorithm outside of the UI thread
+
+## How to use:
 
-How to use:
------------
 Download all the files and open `index.html` in a modern web browser.
 
-Example HTML usage:
------------
+## Example HTML usage:
+
 ```
 <!-- requires jQuery -->
 <h1 class="logo">JavaScript MineSweeper
@@ -37,19 +37,17 @@ Example HTML usage:
 </script>
 ```
 
-To Do:
------------
-+ Add animation and better graphics
-+ Enhance UI for a sleek new look
+## To Do:
+
+- Add animation and better graphics
+- Enhance UI for a sleek new look
 
+## Contributing:
 
-Contributing:
------------
 See [CONTRIBUTE.md](https://github.com/michaelbutler/minesweeper/blob/master/CONTRIBUTE.md) for how to contribute.
 
+## License:
 
-License:
------------
     Minesweeper.js is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or

css/minesweeper.css

@@ -1,121 +1,126 @@
 /* minesweeper.css */
 
-html, body {
-   margin: 0;
-   padding: 0;
+html,
+body {
+  margin: 0;
+  padding: 0;
 }
 
 body {
-   font-size: 1em;
-   font-family: Arial, Helvetica, sans-serif;
-   padding: 1em;
+  font-size: 1em;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1em;
 }
 
 .hide {
-   display: none;
+  display: none;
 }
 
 .invisible {
-   visibility: hidden;
+  visibility: hidden;
 }
 
 .ajax-loading {
-   display: inline-block;
-   padding-left: 1em;
+  display: inline-block;
+  padding-left: 1em;
 }
 
 h1 {
-   margin: 0 0 0.3em 0;
+  margin: 0 0 0.3em 0;
 }
 
-.gh { float: right; }
+.gh {
+  float: right;
+}
 
 .board-wrap {
-   -moz-user-select: none;
-   -khtml-user-select: none;
-   -webkit-user-select: none;
-   user-select: none;
-   cursor: default;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
 }
 
 .board-wrap .row {
-   padding: 0;
-   margin: 0;
-   height: 24px;
+  padding: 0;
+  margin: 0;
+  height: 24px;
 }
 
 .board-wrap .row .cell {
-   list-style: none;
-   padding: 0;
-   margin: 0;
-   display: inline-block;
-   width: 18px;
-   height: 18px;
-   border: 3px outset #aaa;
-   background-color: #c9c9c9;
-   vertical-align: middle;
-   text-align: center;
-   line-height: 19px;
-   font-weight: bold;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 3px outset #aaa;
+  background-color: #c9c9c9;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 19px;
+  font-weight: bold;
 }
 
 .board-wrap .row li:hover {
-   background-color: #dee6ed;
+  background-color: #dee6ed;
 }
 
 .board-wrap .row .cell.open {
 }
 
 .board-wrap .row .cell.number,
 .board-wrap .row .cell.open {
-   border: 1px solid grey;
-   padding: 2px;
+  border: 1px solid grey;
+  padding: 2px;
 }
 
 .board-wrap .row .cell.number {
-   background-color: rgb(213, 187, 191);
+  background-color: rgb(213, 187, 191);
 }
 
 .board-wrap .row .cell.flagged {
-   background-color: red;
-   background-color: rgba(255, 61, 61, 0.82);
+  background-color: red;
+  background-color: rgba(255, 61, 61, 0.82);
 }
 
 .board-wrap .row .cell.question {
-   background-color: lightblue;
+  background-color: lightblue;
 }
 
 .board-wrap .row .cell.explode {
-   color: red;
-   background-color: white;
+  color: red;
+  background-color: white;
 }
 
 .board-wrap .cell.unknown:active {
-   border-style: inset;
+  border-style: inset;
 }
 
-.board-wrap .cell.test{
-   border-style: inset;
+.board-wrap .cell.test {
+  border-style: inset;
 }
 
 .cell.blown {
-   opacity: 1.0;
+  opacity: 1;
 }
 
 .cell.unblown {
-   opacity: 0.5;
+  opacity: 0.5;
 }
 
-.cell[data-number="1"] {
-   color: blue;
+.cell[data-number='1'] {
+  color: blue;
 }
-.cell[data-number="2"] {
-   color: darkgreen;
+.cell[data-number='2'] {
+  color: darkgreen;
 }
-.cell[data-number="3"] {
-   color: red;
+.cell[data-number='3'] {
+  color: red;
 }
 
-.game_settings, .game_actions, .game_status {
-   margin: 10px 0;
+.game_settings,
+.game_actions,
+.game_status {
+  margin: 10px 0;
 }