增加游戏胜利判断

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.4.4",
     "vue": "^2.6.10",
+    "vue-router": "^3.1.4",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -21,16 +22,16 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10",
     "koa": "^2.11.0",
     "koa-bodyparser": "^4.2.1",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
     "koa-websocket": "^6.0.0",
     "lru-cache": "^5.1.1",
+    "node-sass": "^4.12.0",
     "pm2": "^4.2.1",
+    "sass-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.10",
     "ws": "^7.2.1"
   }
 }

server.js

@@ -38,14 +38,26 @@ wss.on('connection', ws => {
   ws.on('message', msg => {
     const res = JSON.parse(msg)
     console.log('msg: ', res)
-    if (res.code && res.status === 'update') {
+    if (res.code) {
       const list = cache.get(res.code)
-      const data = JSON.stringify({ data: list })
-      wss.clients.forEach(client => {
-        if (client.readyState === WebSocket.OPEN) {
-          client.send(data)
-        }
-      })
+      if (res.status === 'update') {
+        const data = JSON.stringify({ data: list })
+        wss.clients.forEach(client => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(data)
+          }
+        })
+      } else if (res.status === 'over') {
+        list.forEach(el => {
+          el.status = 1
+        })
+        const data = JSON.stringify({ data: list })
+        wss.clients.forEach(client => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(data)
+          }
+        })
+      }
     }
   })
 })

src/components/Card.vue

@@ -26,6 +26,10 @@ export default {
     isCaptain: {
       type: Boolean,
       default: false
+    },
+    winner: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -69,9 +73,9 @@ export default {
   },
   methods: {
     async onReverse() {
-      const { index, isCaptain } = this
+      const { index, isCaptain, winner } = this
       const code = this.$store.getters.code
-      if (!code || isCaptain) return
+      if (!code || isCaptain || winner) return
 
       const { success, data = {} } = await http.put(`/api/status/${code}`, { index })
       if (success) {

src/components/Game.vue

@@ -6,6 +6,7 @@
           :card="el"
           :index="i"
           :isCaptain="isCaptain"
+          :winner="winner"
           @statusChange="onStatusChange"></Card>
       </div>
     </div>
@@ -24,10 +25,24 @@ export default {
   data() {
     return {
       list: [],
+      winnerList: [],
       isCaptain: false,
       code: '',
       ws: null,
-      height: '20vh'
+      height: '20vh',
+      winner: ''
+    }
+  },
+  watch: {
+    winner(val) {
+      if (val) {
+        if (val === 'unknow') {
+          alert('game over!')
+        } else {
+          alert(`${val} is winner!`)
+        }
+        this.ws.send(JSON.stringify({ code: this.code, status: 'over' }))
+      }
     }
   },
   created() {
@@ -65,6 +80,9 @@ export default {
     onStatusChange(cardIndex, status) {
       this.list[cardIndex].status = status
       this.ws.send(JSON.stringify({ code: this.code, status: 'update' }))
+      setTimeout(() => {
+        this.isOverHandle()
+      }, 500)
     },
     createWebsocket() {
       const ws = new WebSocket(process.env.VUE_APP_WS_URL)
@@ -87,6 +105,33 @@ export default {
       ws.onclose = () => {
         console.log('connection closed')
       }
+    },
+    isOverHandle() {
+      if (this.isCaptain) {
+        return
+      }
+      let blue = 0
+      let red = 0
+      let black = 0
+      this.list.forEach(el => {
+        const { status, group } = el
+        if (status !== 0) {
+          if (group === 1) {
+            blue += 1
+          } else if (group === 2) {
+            red += 1
+          } else if (group === 3) {
+            black = 1
+          }
+        }
+      })
+      if (blue === 9) {
+        this.winner = 'blue'
+      } else if (red === 8) {
+        this.winner = 'red'
+      } else if (black === 1) {
+        this.winner = 'unknow'
+      }
     }
   }
 }
@@ -99,13 +144,13 @@ export default {
   .prevserve {
     height: 100%;
     transform-style: preserve-3d;
-    perspective: 1000px;
-    perspective-origin: 30% 30%;
-    /* display: grid;
+    perspective: 2000px;
+    perspective-origin: 30% 50%;
+    display: grid;
     grid-template-columns: repeat(5, 20%);
-    grid-template-rows: repeat(5, 20%); */
-    display: flex;
-    flex-wrap: wrap;
+    grid-template-rows: repeat(5, 20%);
+    /* display: flex;
+    flex-wrap: wrap; */
   }
   .item {
     width: 20vw;

yarn.lock

@@ -9438,6 +9438,11 @@ vue-loader@^15.7.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.4.tgz#98a6a4dd38fca0db3b9f3c04bfbd008a3b6d958d"
+  integrity sha512-pX2BGvZg5/MOXbJoYsRppoZM+0B4LSszvIXQvLPZ7govbgbBorYQ4JHx99lDTjzEBkbTyKfRG+ru1VCnMuVcUg==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"