diff --git a/public/client.js b/public/client.js
index 43bd0a7..335d38f 100644
--- a/public/client.js
+++ b/public/client.js
@@ -1,50 +1,51 @@
const player = io()
-let myNumber = 0
-let autoPlayer = 0
+let my_number = 0
+let auto_play = false
+
+buttonAuto.addEventListener('click', () => {
+ auto_play = !auto_play
+ if (auto_play) player.emit('go')
+ buttonAuto.style.color = auto_play ? 'red' : 'black'
+})
+
+player.on('online', (number) => (online.innerText = number))
+player.on('players', (number) => (players.innerText = number))
player.on('alert', (message) => {
- alert(message)
-})
-
-player.on('onlineNumber', (number) => {
- onlineNumber.innerText = number
-})
-
-player.on('playersNumber', (number) => {
- playersNumber.innerText = number
+ const alert = document.createElement('li')
+ alert.innerText = message
+ messages.appendChild(alert)
+ while (messages.childElementCount > 5) messages.childNodes[0].remove()
})
player.on('join', (number) => {
- myNumber = number
- playerNumber.innerText = number
- buttonJoin.innerText = number == 0 ? '加入' : '退出'
- buttonJoin.style.color = number == 0 ? 'red' : 'black'
+ my_number = number
+ player_number.innerText = number
+ buttonJoin.innerText = number ? '退出' : '加入'
+ buttonJoin.style.color = number ? 'black' : 'red'
})
player.on('status', (status) => {
const { players, cards, current } = status
+ // 更新玩家剩余牌数的显示
player1.innerText = '🎴'.repeat(players[0] || 0)
player2.innerText = '🎴'.repeat(players[1] || 0)
player3.innerText = '🎴'.repeat(players[2] || 0)
- currentPlayerNumber.innerText = current + 1
- buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
- cardsDisplay.innerHTML = ''
+ // 更新桌面上牌的显示
+ table.innerHTML = ''
for (let cid of cards) {
let card = document.createElement('card-t')
card.setAttribute('cid', cid)
- card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
card.setAttribute('backtext', 'JOKER')
- cardsDisplay.appendChild(card)
+ card.setAttribute('backcolor', cid[1] == 1 ? 'black' : 'red')
+ table.appendChild(card)
}
-})
-
-buttonAuto.addEventListener('click', () => {
- if (autoPlayer != 0) {
- clearInterval(autoPlayer)
- autoPlayer = 0
- buttonAuto.style.color = 'black'
+ // 依据当前玩家更新相关显示
+ currentPlayerNumber.innerText = current
+ if (my_number > 0 && my_number == current) {
+ if (auto_play) player.emit('go')
+ else buttonGo.style.color = 'red'
} else {
- autoPlayer = setInterval(() => player.emit('go'), 1000)
- buttonAuto.style.color = 'red'
+ buttonGo.style.color = 'black'
}
})
diff --git a/public/index.html b/public/index.html
index 740c0d6..6e65c8f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,12 +4,8 @@
-
-
+
小猫钓鱼
-