add question marking

app/app.vue → app/App.vue

@@ -10,74 +10,67 @@
             <li v-for="item of levels" :key="item.name" :class="{checked:level===item}" @click="changeLevel(item)">
               <span class="check">✔</span> {{item.name}}
             </li>
+            <hr>
+            <li :class="{checked:qmark}" @click="qmark=!qmark">
+              <span class="check">✔</span> Marks(?)
+            </li>
           </ul>
         </div>
       </li>
       <li class="help"><span class="help">Help</span></li>
     </ul>
-    <minesweeper ref="minesweeper"/>
+    <minesweeper :level="level" :qmark="qmark"/>
   </div>
 </div>
 
 </template>
 <script>
-import minesweeper from './minesweeper/minesweeper.vue'
+import Minesweeper from './Minesweeper/Minesweeper.vue'
 
 export default {
-  name: 'app',
-  components: { minesweeper },
+  name: 'App',
+  components: { Minesweeper },
   data () {
     return {
       levels: [
         { name: 'Beginner', size: [9, 9], mineTotal: 10 },
         { name: 'Intermediate', size: [16, 16], mineTotal: 40 },
         { name: 'Expert', size: [16, 30], mineTotal: 99 }
       ],
-      level: null,
+      qmark: false,
+      level: { name: 'Beginner', size: [9, 9], mineTotal: 10 },
       menu: { game: false }
     }
   },
   computed: {
     isMenuOpen () { return !Object.values(this.menu).every(x => !x) }
   },
   watch: {
-    level (nv, ov) { ov && this.reset() },
     isMenuOpen (v) { this.$emit('menu', v) }
   },
-  created () {
-    this.level = this.levels[0]
-  },
   methods: {
     changeLevel (item) {
       this.level = item
       this.$emit('changeLevel', item)
-    },
-    reset () {
-      const { size, mineTotal } = this.level
-      this.$refs.minesweeper.reset(size, mineTotal)
     }
   },
   templateSrc: './app.html',
   styleSrc: './app.css'
 }
 </script>
 <style scoped>
-:focus {outline:none;}
+:focus {outline: none;}
 .container {
-  width: 100%; height: 100%; background-color: silver;
+  width: 100%;
+  height: 100%;
+  background-color: silver;
   font-size: 12px;
   font-family: Tahoma;
   display: flex;
   justify-content: center;
 }
-.app{max-width: 100%;}
-.option {
-  margin-top: 40px;
-}
-.option input {
-  width: 50px;
-}
-ul{list-style: none;}
+.app {max-width: 100%;}
+ul {list-style: none;}
 .toolbar {
   padding: 1px 0;
   margin: 0;
@@ -86,54 +79,53 @@ ul{list-style: none;}
   flex-direction: row;
   display: flex;
 }
-.toolbar>li {
+.toolbar > li {
   display: flex;
   cursor: default;
   position: relative;
 }
-.toolbar>li>span{
+.toolbar > li > span {
   display: flex;
   align-items: center;
   border: solid 1px transparent;
   padding: 0 5px;
   height: 16px;
 }
-.toolbar>li>span:hover:not(.help){
-  border: outset 1px #eee;
-}
-.toolbar>li.open>span{
-  border: inset 1px #eee;
+.toolbar > li > span:hover:not(.help) {border: outset 1px #eee;}
+.toolbar > li.open > span {border: inset 1px #eee;}
+.toolbar > li.open .cancel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
-.toolbar>li:not(.open)>.menu {display: none;}
-
-.menu{
+.toolbar > li:not(.open) > .menu {display: none;}
+.menu {
   position: absolute;
-  border:solid 1px silver; border-right-color: #000;border-bottom-color: #000;
+  border: solid 1px silver;
+  border-right-color: #000;
+  border-bottom-color: #000;
   background-color: silver;
   top: 100%;
   left: 0;
 }
-.menu>ul{
+.menu hr {
+  border-style: inset;
+  border-width: 1px;
+  margin: 3px 1px 4px 1px;
+}
+.menu > ul {
   border: outset 1px #eee;
   width: 120px;
-  padding: 0;
+  padding: 1px;
 }
-.menu>ul>li{
-  padding: 4px 6px;
-}
-.menu>ul>li>.check{visibility: hidden;}
-.menu>ul>li.checked>.check{visibility: visible;}
-.menu>ul>li:hover{
-  color:white;
+.menu > ul > li {padding: 4px 6px;}
+.menu > ul > li.checked > .check {visibility: visible;}
+.menu > ul > li > .check {visibility: hidden;}
+.menu > ul > li:hover {
+  color: white;
   background-color: #0000a8;
 }
-.check {font-weight:bolder;}
-
-.open .cancel {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
+.check {font-weight: bolder;}
 </style>

app/Minesweeper/Cell.vue

@@ -0,0 +1,73 @@
+<template>
+  <button class="cell" :class="[display,{pressed,flag,fixed,triggerDead,question}]"/>
+</template>
+<script>
+export default {
+  name: 'Cell',
+  props: ['data', 'state', 'qmark'],
+  data () {
+    return { open: false, markState: 0, triggerDead: false, pressed: false }
+  },
+  computed: {
+    display () {
+      const { open, data: { mine, adjMine }, state: { dead } } = this
+      if (open) return mine ? 'mine' : 'n' + adjMine
+      if (dead) return ['dead', mine && 'mine']
+      return undefined
+    },
+    flag () { return this.markState === 1 },
+    question () { return this.markState === 2 },
+    fixed () { return this.state.dead || this.state.win || this.open }
+  },
+  watch: {
+    data () { Object.assign(this, this.$options.data()) } // reset component state when data changed
+  },
+  methods: {
+    press (v) {
+      if (this.state.dead || this.open) return
+      this.pressed = v
+    },
+    doOpen () {
+      if (this.fixed || this.flag) return false
+      this.open = true
+      this.markState = 0
+      return true
+    },
+    mark () {
+      if (this.fixed) return false
+      const ret = !this.question
+      this.markState = this.question ? 0 : (this.markState + 1) % (this.qmark ? 3 : 2)
+      return ret // flag changed
+    }
+  }
+}
+</script>
+<style scoped>
+.cell {
+  display: inline-block;
+  border: none;
+  outline: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  background: url(sprite.png) no-repeat 0 -39px;
+}
+.cell.pressed {background-position: 0 -23px;}
+.cell.pressed.question {background-position: -96px -39px;}
+.cell.fixed {background-position: 0 -39px;}
+.cell.question {background-position: -80px -39px;}
+.cell.mine {background-position: -64px -39px;}
+.cell.flag {background-position: -16px -39px;}
+.cell.triggerDead {background-position: -32px -39px;}
+.cell.dead.flag:not(.mine) {background-position: -48px -39px;}
+.cell.n0 {background-position: 0px -23px;}
+.cell.n1 {background-position: -16px -23px;}
+.cell.n2 {background-position: -32px -23px;}
+.cell.n3 {background-position: -48px -23px;}
+.cell.n4 {background-position: -64px -23px;}
+.cell.n5 {background-position: -80px -23px;}
+.cell.n6 {background-position: -96px -23px;}
+.cell.n7 {background-position: -112px -23px;}
+.cell.n8 {background-position: -128px -23px;}
+</style>

app/minesweeper/minesweeper.css → app/Minesweeper/Minesweeper.css

@@ -4,15 +4,18 @@
   border: outset 2px #eee;
   padding: 6px;
 }
+.board {border: inset 2px #eee;}
+.board .row {
+  height: 16px;
+  white-space: nowrap;
+}
 .indicator {
   height: 25px;
   border: inset 2px #eee;
   padding: 4px 6px;
   text-align: center;
   margin-bottom: 6px;
 }
-.board {border: inset 2px #eee;}
-.board .row {height: 16px; white-space: nowrap;}
 .indicator * {background-repeat: no-repeat;}
 .indicator > * {color: transparent;}
 .indicator .smiley {
@@ -23,21 +26,21 @@
   outline: none;
   margin: 0;
   padding: 0;
-  background: url('sprite.png') no-repeat;
+  background: url(sprite.png) no-repeat;
   background-position-y: -55px;
   background-position-x: 0;
 }
 .indicator .smiley.ooh {background-position-x: -52px;}
 .indicator .smiley.dead {background-position-x: -78px;}
 .indicator .smiley.win {background-position-x: -104px;}
 .indicator .smiley:active {background-position-x: -26px;}
-.indicator .left {float: left}
-.indicator .right {float: right}
+.indicator .left {float: left;}
+.indicator .right {float: right;}
 .indicator .count {
   width: 13px;
   height: 23px;
   display: inline-block;
-  background: url('sprite.png') no-repeat;
+  background: url(sprite.png) no-repeat;
   background-position-y: 0;
 }
 .indicator .count.n0 {background-position-x: 0;}