Added some feature

1.支持双击展开.
2.查看地雷位置.
3.增加输入验证

Author: woshiguabi

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+*.cmd

.postcssrc.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}

README.md

@@ -2,8 +2,6 @@
 
 > A minesweeper game by vue 2.0
 
-<a href="http://woshiguabi.github.io/minesweeper/" target="_blank">Online Demo</a>
-
 ## Build Setup
 
 ``` bash
@@ -15,4 +13,4 @@ npm run dev
 
 # build for production with minification
 npm run build
-```
+```

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

src/components/cell.vue

@@ -3,27 +3,16 @@
 </template>
 <script>
   import Utils from '../utils'
+  import config from '../config'
   export default {
     name: 'cell',
     props: ['row', 'col', 'isBomb', 'status', 'isFlag', 'bombCount'],
     computed: {
       display () {
-        return Utils.getCellStatus({
-          isFlag: '',
-          status0: '',
-          isBomb: '雷',
-          bombCount: '',
-          bombCount0: ''
-        }, this)
+        return Utils.getCellStatus(config.cellDisplayText, this)
       },
       className () {
-        return Utils.getCellStatus({
-          isFlag: 'flag fa-flag',
-          status0: 'status0',
-          isBomb: 'bomb',
-          bombCount: 'bomb-count-',
-          bombCount0: 'bomb-count-0'
-        }, this)
+        return Utils.getCellStatus(config.cellClassName, this)
       }
     }
   }

src/components/game.vue

@@ -7,14 +7,14 @@
     </vue-drr>
     <div class="game-config">
       <form action="" @submit.prevent="init">
-        <label>行: <input type="number" v-model="inputRow"></label>
-        <label>列: <input type="number" v-model="inputCol"></label>
-        <label>雷的数量: <input type="number" v-model="inputBombCount"></label>
+        <label>行: <input type="number" min="2" :max="config.maxRow" v-model="inputRow"></label>
+        <label>列: <input type="number" min="2" :max="config.maxCol" v-model="inputCol"></label>
+        <label>雷的数量: <input type="number" min="1" :max="~~inputRow * ~~inputCol - 1" v-model="inputBombCount"></label>
         <button type="submit">生成</button>
       </form>
       <div v-if="showTips" class="game-config-tips">{{ tipsText }}</div>
     </div>
-    <table :width="width" class="game" :class="{'tips-open': showTips}" @mouseup="handleClick" @contextmenu.prevent="handleRightClick">
+    <table :width="width" class="game" :class="{'tips-open': showTips}" @click="handleClick" @contextmenu.prevent="handleRightClick" @dblclick="handleDblClick">
       <tr :key="row" v-for="(rows, row) in cellData">
         <cell :key="col" v-for="(cell, col) in rows" :row="cell.row" :col="cell.col" :isBomb="cell.isBomb" :status="cell.status" :isFlag="cell.isFlag" :bombCount="cell.bombCount"></cell>
       </tr>
@@ -23,19 +23,38 @@
       <div>Game Over</div>
       <div>你美丽了!</div>
       <div class="retry"><a href="#" @click.prevent="init">再试一次</a></div>
+      <div class="retry"><a href="#" @click.prevent="view">查看雷的位置</a></div>
     </div>
     <div v-if="success" class="success layer">
       <div>Win!</div>
       <div>你成功了!</div>
       <div class="retry"><a href="#" @click.prevent="init">我还要玩</a></div>
     </div>
+    <div v-if="viewBomb" class="layer-transparent"></div>
+
   </div>
 </template>
 <script>
   import cell from './cell'
   import config from '../config'
   import Utils from '../utils'
   import VueDRR from 'vue-drag-resize-rotate'
+
+  /* F**k IE */
+  const createRightClickEvent = (function () {
+    return 'ActiveXObject' in window ? function () {
+      let evt = document.createEvent('MouseEvent')
+      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+      return evt
+    } : function () {
+      let evt = new MouseEvent('click', {
+        button: 0,
+        bubbles: true
+      })
+      return evt
+    }
+  })()
+
   export default {
     name: 'game',
     components: {
@@ -48,6 +67,7 @@
         gameOver: false,
         cellData: [],
         showTips: false,
+        viewBomb: false,
         width: 0,
         flagCount: 0,
         score: 0,
@@ -74,7 +94,6 @@
           this.bombSet.forEach(e => {
             let col = e % $this.config.col
             let row = ~~(e / $this.config.col)
-            console.log(col, row)
             $this.cellData[row][col].isFlag = 1
           })
           this.$forceUpdate()
@@ -85,6 +104,17 @@
       }
     },
     methods: {
+      view () {
+        this.gameOver = false
+        this.viewBomb = true
+        let $this = this
+        this.bombSet.forEach(e => {
+          let col = e % $this.config.col
+          let row = ~~(e / $this.config.col)
+          $this.cellData[row][col].status = 1
+        })
+        this.$forceUpdate()
+      },
       init () {
         if ((~~this.inputCol) > this.config.maxCol || (~~this.inputRow) > this.config.maxRow) {
           this.tipsText = '请勿作死设置过大行列！'
@@ -106,6 +136,7 @@
         this.showTips = false
         this.success = false
         this.gameOver = false
+        this.viewBomb = false
         this.score = 0
         this.flagCount = 0
         this.width = this.config.col * 41 + 1
@@ -160,11 +191,8 @@
               cell.isTriggered = true
               aroundCell.forEach(e => {
                 if (e.isTriggered || e.isFlag || e.status === 1) return
-                let evt = new MouseEvent('mouseup', {
-                  button: 0,
-                  bubbles: true
-                })
                 // TODO: cell展开性能优化
+                let evt = createRightClickEvent()
                 nextTick(() => {
                   table.rows[e.row].cells[e.col].dispatchEvent(evt)
                 })
@@ -173,17 +201,41 @@
             this.$forceUpdate()
           }
         } else if (clickType === 2) {
-          if (!cell.isFlag) {
-            this.flagCount++
-            cell.isFlag = true
-          } else {
-            this.flagCount--
-            cell.isFlag = false
-          }
-          this.$forceUpdate()
         }
       },
-      handleRightClick () {
+      handleRightClick (ev) {
+        if (ev.target.nodeName !== 'TD') return
+        let col = ev.target.cellIndex
+        let row = ev.target.parentNode.rowIndex
+        let cell = this.cellData[row][col]
+        if (cell.status === 1) return
+        if (!cell.isFlag) {
+          this.flagCount++
+          cell.isFlag = true
+        } else {
+          this.flagCount--
+          cell.isFlag = false
+        }
+        this.$forceUpdate()
+      },
+      handleDblClick (ev) {
+        if (ev.target.nodeName !== 'TD') return
+        let col = ev.target.cellIndex
+        let row = ev.target.parentNode.rowIndex
+        let cell = this.cellData[row][col]
+        if (cell.status !== 1) return
+        let table = this.$el.querySelector('table')
+        let aroundCell = this.getAroundCell(row, col)
+        let nextTick = this.$nextTick
+        cell.isTriggered = true
+        aroundCell.forEach(e => {
+          if (e.isTriggered || e.isFlag || e.status === 1) return
+          // TODO: cell展开性能优化
+          let evt = createRightClickEvent()
+          nextTick(() => {
+            table.rows[e.row].cells[e.col].dispatchEvent(evt)
+          })
+        })
       },
       getAroundCell (row, col) {
         let rowArr = [row - 1, row, row + 1]
@@ -204,7 +256,7 @@
 <style scoped>
   .scoreboard.dragable{
     position: fixed;
-    z-index: 10;
+    z-index: 99;
     max-width: 180px;
     max-height: 180px;
     min-height: 180px;
@@ -238,6 +290,7 @@
     left: 0;
     right: 0;
     top: 0;
+    z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -279,6 +332,14 @@
     font-family: Arial, Microsoft Yahei;
     background-color: rgba(255, 255, 255, .7);
   }
+  .layer-transparent{
+    position: fixed;
+    z-index: 90;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
   .layer > div{
     width: 100%;
   }
@@ -313,29 +374,29 @@
     background-color: #ddd;
     cursor: pointer;
   }
+  .classic .bomb, .classic .flag{
+    color: #f36;
+    font-size: 24px;
+    font-family: FontAwesome;
+    font-weight: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .classic .flag{
     cursor: pointer;
     width: 30px;
     height: 30px;
-    font-size: 24px;
-    color: #f36;
     border-style: solid;
     border-width: 5px;
     border-color: #eee #aaa #aaa #eee;
     background-color: #ddd;
-    font-family: FontAwesome;
-    font-weight: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
   }
   .classic .bomb{
-    font-size: 20px;
     width: 38px;
     height: 38px;
     border: 1px solid #666;
     background-color: #ccc;
-    color: #f36;
     cursor: default;
   }
   .classic [class^=bomb-count-]{

src/config.js

@@ -4,5 +4,19 @@ export default {
   col: 20,
   maxRow: 100,
   maxCol: 100,
-  theme: 'classic'
+  theme: 'classic',
+  cellClassName: {
+    isFlag: 'flag fa-flag',
+    status0: 'status0',
+    isBomb: 'bomb fa-bomb',
+    bombCount: 'bomb-count-',
+    bombCount0: 'bomb-count-0'
+  },
+  cellDisplayText: {
+    isFlag: '',
+    status0: '',
+    isBomb: '',
+    bombCount: '',
+    bombCount0: ''
+  }
 }

src/utils/index.js

@@ -1,7 +1,55 @@
 const Utils = {}
+
+/* Array.prototype.fill Polyfill By https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill */
+/* eslint-disable */
+if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length >>> 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Step 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Step 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+/* eslint-enable */
+
 Utils.randomBomb = function (bombCount, cellCount) {
   console.time('random')
-  console.log(bombCount, cellCount)
   if (bombCount > cellCount) {
     bombCount = cellCount
   }
@@ -15,7 +63,6 @@ Utils.randomBomb = function (bombCount, cellCount) {
       return uniqueRandom()
     }
   })
-  console.log(resultArr)
   let result = new Set()
   resultArr.forEach(e => result.add(e))
   console.timeEnd('random')