uno声音警告

index.html

@@ -20,15 +20,9 @@
         <button class="card draw-button" id="id-button-draw">摸牌</button>
         <div class="cards"></div>
     </div>
-<!--    <button id="id-button-draw">摸牌</button>-->
+
     <label>
         转色：
-<!--        <select id="id-select-choose-color">-->
-<!--            <option value ="红">红</option>-->
-<!--            <option value ="黄">黄</option>-->
-<!--            <option value="蓝">蓝</option>-->
-<!--            <option value="绿">绿</option>-->
-<!--        </select>-->
         <label class="red"><input class="color-checker" type="radio" name="color" value="红" checked>红</label>
         <label class="yellow"><input class="color-checker" type="radio" name="color" value="黄">黄</label>
         <label class="blue"><input class="color-checker" type="radio" name="color" value="蓝">蓝</label>
@@ -37,6 +31,7 @@
     <textarea class="message"></textarea>
 </div>
 
+<audio src="static/alert.mp3"></audio>
 </body>
 <script type="text/javascript" src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
 <script src="static/main.js"></script>

static/main.js

@@ -86,6 +86,22 @@ const chooseColor = function () {
     return s.value
 }
 
+class AlertAudio {
+    constructor() {
+        this.audio = q('audio')
+        this.audio.volume = 0.1
+    }
+
+    play () {
+        this.audio.currentTime = 0
+        this.audio.play()
+    }
+
+    stop() {
+        this.audio.pause()
+    }
+}
+
 class Client {
     constructor() {
         this.socket = io.connect({transports: ['websocket']})
@@ -96,6 +112,7 @@ class Client {
         this.playersNums = {}
         this.cards = []
         this.checkColor = '红'
+        this.alertAudio = new AlertAudio()
 
         this.socket.on('broadcast', (msg) => this.broadcastCallback(msg))
 
@@ -122,8 +139,6 @@ class Client {
                 this.showCards()
             })
         }
-        // colorCheckers.forEach(c => )
-        // s.addEventListener('change', () => this.showCards(), false)
     }
 
     playerHTML (player) {
@@ -137,7 +152,8 @@ class Client {
             num = num.toString()
         }
         let next = this.next === p ? 'next' : ''
-        let head = `<div class="player ${next}" data-name="${p}"><div class="name">${p}：${num}</div>`
+        let uno = num === 'UNO!' ? 'red' : ''
+        let head = `<div class="player ${next} ${uno}" data-name="${p}"><div class="name">${p}：${num}</div>`
         let cardHtml = ''
         let tail = '</div>'
         if (this.currentLeadPlayer === p) {
@@ -179,6 +195,15 @@ class Client {
         })
     }
 
+    checkUno () {
+        let hasUno = Object.values(this.playersNums).some(n => n === 1)
+        if (hasUno) {
+            this.alertAudio.play()
+        } else {
+            this.alertAudio.stop()
+        }
+    }
+
     broadcastCallback (msg) {
         let name = msg['name']
         let type = msg['type']
@@ -217,6 +242,7 @@ class Client {
             showMsg(name, msg['type'])
         }
         this.showPlayers()
+        this.checkUno()
     }
 }
 

uno.py

@@ -9,10 +9,11 @@
 def generate_cards():
     colors = ['红', '黄', '绿', '蓝']
     # 暂时没有反转牌   '跳过',
-    symbols = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '+2', '反转']
+    symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+    spec_cards = ['+2', '反转']
     super_cards = ['黑转色', '黑+4']
     # generate a complete cards
-    cards = [n + m for n in colors for m in symbols] * 2 + super_cards * 4
+    cards = [n + m for n in colors for m in symbols] * 2 + [c + m for c in colors for m in spec_cards] * 4 + super_cards * 8
     return cards