More Improvements 2021 (michaelbutler#18)

* Merge dik's improvements * Commit formatting * Update contrib * Add image and update README.
WorldsOnlineGames · Mar 1, 2021 · 7ea40f5 · 7ea40f5
1 parent 7d529c8
commit 7ea40f5
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 42 deletions.
diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md
@@ -3,13 +3,14 @@
 Contributions welcome. To contribute, checkout the code,
 make your changes, and submit a pull request.
 
-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.
+Please run `make format` (note: [Docker](https://docs.docker.com/get-docker/) is
+required, install it first) and all your JS and CSS code will be automatically
+formatted to the standard. You may run `make ci` to check the code prior to
+committing as well.
 
 ## To Do:
 
 - Add unit tests
 - Implement better JavaScript package standards
 - Separate html template code
-- ReactJs? Flux? Modernize it.
+- ReactJs? Webpack?? Modernize it.
diff --git a/README.md b/README.md
@@ -4,7 +4,10 @@
 
 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. Yes, using webworkers
+just for minesweepr might be overkill but for when this was first written around 2013 it actually
+made a visible difference in Firefox at least. But it is also an exercise to
+understand how they work and pass messages between the main UI thread and the background thread.
 
 Demo: https://michaelbutler.github.io/minesweeper/
 
@@ -46,7 +49,7 @@ Download all the files and open `index.html` in a modern web browser.
 
 See [CONTRIBUTE.md](https://github.com/michaelbutler/minesweeper/blob/master/CONTRIBUTE.md) for how to contribute.
 
-## License:
+## License (GPL v3):
 
     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

diff --git a/css/minesweeper.css b/css/minesweeper.css
@@ -39,6 +39,15 @@ h1 {
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
+  background-image: none;
+}
+
+.board-wrap.paused {
+  background: url(../images/paused.png) no-repeat 12px 22px;
+}
+
+.board-wrap.paused ul {
+  visibility: hidden;
 }
 
 .board-wrap .row {
@@ -89,8 +98,8 @@ h1 {
 }
 
 .board-wrap .row .cell.explode {
-  color: red;
-  background-color: white;
+  color: white;
+  background-color: red;
 }
 
 .board-wrap .cell.unknown:active {
@@ -118,6 +127,21 @@ h1 {
 .cell[data-number='3'] {
   color: red;
 }
+.cell[data-number='4'] {
+  color: darkblue;
+}
+.cell[data-number='5'] {
+  color: darkblue;
+}
+.cell[data-number='6'] {
+  color: darkblue;
+}
+.cell[data-number='7'] {
+  color: darkblue;
+}
+.cell[data-number='8'] {
+  color: darkblue;
+}
 
 .game_settings,
 .game_actions,

diff --git a/images/paused.png b/images/paused.png
diff --git a/js/MineSweeper.js b/js/MineSweeper.js
@@ -186,7 +186,7 @@ jQuery(function ($) {
           (ev.which === LEFT_MOUSE_BUTTON && msObj.RIGHT_MOUSE_DOWN) ||
           (ev.which === RIGHT_MOUSE_BUTTON && msObj.LEFT_MOUSE_DOWN)
         ) {
-          // This occurs when player is hold BOTH the left and right mouse buttons down simultaneously
+          // This occurs when player is holding BOTH the left and right mouse buttons down simultaneously
           let x = targ.attr('data-x') - 1;
           let ud = targ.parent().prev();
           let i;
@@ -225,6 +225,8 @@ jQuery(function ($) {
         msObj.stopTimer();
         msObj.timer = '';
         msObj.running = true;
+        msObj.paused = false;
+        msObj.board.removeClass('paused');
         msObj.setBoardOptions();
         msObj.clearBoard();
         msObj.redrawBoard();
@@ -252,22 +254,31 @@ jQuery(function ($) {
           localStorage.getItem('intermediate_record_holder') || 'None';
         let expertName = localStorage.getItem('expert_record_holder') || 'None';
         alert(
-          'Best times:\nBeginner:\t' +
+          'Best times:\nBeginner:     ' +
             beginnerName +
-            '\t' +
+            ' : ' +
             beginnerTime +
             '\n' +
-            'Intermediate:\t' +
+            'Intermediate: ' +
             intermediateName +
-            '\t' +
+            ' : ' +
             intermediateTime +
             '\n' +
-            'Expert:\t' +
+            'Expert:       ' +
             expertName +
-            '\t' +
+            ' : ' +
             expertTime
         );
       });
+
+      $('.msPause').on('click', function (ev) {
+        ev.preventDefault();
+        if (msObj.paused) {
+          msObj.resumeGame();
+        } else if (msObj.timer) {
+          msObj.pauseGame();
+        }
+      });
     };
 
     /**
@@ -365,6 +376,25 @@ jQuery(function ($) {
       }
     };
 
+    this.pauseGame = function () {
+      // hide board so they can't cheat
+      msObj.board.addClass('paused');
+      // pause stopwatch
+      msObj.stopTimer();
+      // toggle button
+      $('.msPause').html('Resume');
+      msObj.paused = true;
+    };
+
+    this.resumeGame = function () {
+      // show board
+      msObj.board.removeClass('paused');
+      // resume stopwatch
+      msObj.resumeTimer();
+      // toggle button
+      msObj.paused = false;
+    };
+
     this.handleWorkerMessage = function (data) {
       if (data.type === 'touch_adjacent' || data.type === 'get_adjacent') {
         msObj.grid = data.grid;
@@ -447,8 +477,9 @@ jQuery(function ($) {
         fisherYates(array);
         infiniteLoop += 1;
         if (infiniteLoop > 999) {
-          // Try to shuffle until we get a board where the safe x/y does not have a mine.
-          // But after too many attempts, just bail out and let player lose.
+          console.warn(
+            'Giving up trying to prevent initial space from blowing up'
+          );
           break;
         }
       } while (array[safeIndex] === 1);
@@ -497,11 +528,12 @@ jQuery(function ($) {
     this.startTimer = function () {
       let timerElement = $('#timer');
       timerElement.val(0);
-      console.log('starting timer');
-      msObj.timer = window.setInterval(function () {
+      $('.msPause').show();
+      msObj.resumeTimer();
+      /*msObj.timer = window.setInterval(function () {
         let curr = parseInt(timerElement.val(), 10);
         timerElement.val(curr + 1);
-      }, 1000);
+      }, 1000);*/
     };
 
     this.stopTimer = function () {
@@ -510,6 +542,16 @@ jQuery(function ($) {
       }
     };
 
+    this.resumeTimer = function () {
+      $('.msPause').html('Pause');
+      let timerElement = $('#timer');
+      console.log('resuming timer');
+      msObj.timer = window.setInterval(function () {
+        let curr = parseInt(timerElement.val(), 10);
+        timerElement.val(curr + 1);
+      }, 1000);
+    };
+
     this.resetDisplays = function () {
       let level = $('#level option:selected').val();
       let numMines;
@@ -522,6 +564,7 @@ jQuery(function ($) {
 
       $('#mine_flag_display').val(numMines);
       $('#timer').val(0);
+      $('.msPause').hide();
     };
 
     /**
@@ -677,6 +720,7 @@ jQuery(function ($) {
      */
     this.gameOver = function (cellParam) {
       msObj.stopTimer();
+      $('.msPause').hide();
 
       let width = msObj.options.boardSize[0],
         height = msObj.options.boardSize[1],
@@ -705,6 +749,7 @@ jQuery(function ($) {
 
     this.winGame = function () {
       msObj.stopTimer();
+      $('.msPause').hide();
       msObj.running = false;
       let time = $('#timer').val();
       alert('You win!\nYour time: ' + time);
@@ -713,43 +758,53 @@ jQuery(function ($) {
 
     this.checkBestTime = function (time) {
       let level = $('#level').val();
-      if (level !== 'custom') {
-        let bestTime = localStorage.getItem('best_time_' + level);
-
-        if (!bestTime || parseInt(time, 10) < parseInt(bestTime, 10)) {
-          let displayName = localStorage.getItem(level + '_record_holder');
-          if (!displayName) {
-            displayName = 'Your name';
-          }
-          let name = window.prompt(
-            'Congrats! You beat the best ' + level + ' time!',
-            displayName
-          );
-
-          localStorage.setItem('best_time_' + level, time);
-          localStorage.setItem(level + '_record_holder', name);
+      if (level === 'custom') {
+        return;
+      }
+      let bestTime = localStorage.getItem('best_time_' + level);
+      if (!bestTime || parseInt(time, 10) < parseInt(bestTime, 10)) {
+        let displayName = localStorage.getItem(level + '_record_holder');
+        if (!displayName) {
+          displayName = localStorage.getItem('beginner_record_holder');
+        }
+        if (!displayName) {
+          displayName = localStorage.getItem('intermediate_record_holder');
+        }
+        if (!displayName) {
+          displayName = localStorage.getItem('expert_record_holder');
         }
+        if (!displayName) {
+          displayName = 'Your name';
+        }
+        let name = window.prompt(
+          'Congrats! You beat the best ' + level + ' time!',
+          displayName
+        );
+
+        localStorage.setItem('best_time_' + level, time);
+        localStorage.setItem(level + '_record_holder', name);
       }
     };
 
     this.getTemplate = function (template) {
       let templates = {
         settings:
-          '<div class="game_settings"><select id="level"><option value="beginner">Beginner</option>' +
+          '<div class="game_settings"><select id="level" class="msLevel"><option value="beginner">Beginner</option>' +
           '<option value="intermediate">Intermediate</option><option value="expert">Expert</option>' +
           '<option value="custom">Custom</option></select>' +
-          '<input type="text" id="dim_x" placeholder="x" size="5" disabled value="20" />' +
-          '<input type="text" id="dim_y" placeholder="y" size="5" disabled value="20" />' +
-          '<input type="text" id="numMines" placeholder="mines" size="5" disabled />' +
+          '<input type="text" id="dim_x" class="msDimX" placeholder="x" size="5" disabled value="20" />' +
+          '<input type="text" id="dim_y" class="msDimY" placeholder="y" size="5" disabled value="20" />' +
+          '<input type="text" id="numMines" class="msNumMines" placeholder="mines" size="5" disabled />' +
           '</div>',
         actions:
           '<div class="game_actions"><button class="new-game">New Game</button>' +
-          '<button id="bestTimes">Best times</button></div>',
+          '<button id="bestTimes">Best times</button></div>' +
+          '<button id="pause" class="msPause">Pause</button></div>',
         status:
           '<div class="game_status"><label>Time:</label>' +
-          '<input type="text" id="timer" size="6" value="0" readonly />' +
+          '<input type="text" id="timer" class="msTimer" size="6" value="0" readonly />' +
           '<label>Mines:</label>' +
-          '<input type="text" id="mine_flag_display" size="6" value="10" disabled />',
+          '<input type="text" id="mine_flag_display" class="msMineFlagDisplay" size="6" value="10" disabled />',
       };
 
       return templates[template];