zhaoxin/xiaomaodiaoyu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

显示SVG扑克

Browse Source
This commit is contained in:
赵鑫 2022-08-19 01:59:55 +08:00
parent 090a94cd24
commit 90f003aa79
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/client.js
View File

@ -23,19 +23,21 @@ player.on('join', (number) => {
player.on('status', (status) => { player.on('status', (status) => {
const { players, cards, current } = status const { players, cards, current } = status
player1.innerText = makeCards(players[0] || 0) player1.innerText = '🎴'.repeat(players[0] || 0)
player2.innerText = makeCards(players[1] || 0) player2.innerText = '🎴'.repeat(players[1] || 0)
player3.innerText = makeCards(players[2] || 0) player3.innerText = '🎴'.repeat(players[2] || 0)
currentPlayerNumber.innerText = current + 1 currentPlayerNumber.innerText = current + 1
buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black' buttonGo.style.color = myNumber > 0 && myNumber === current + 1 ? 'red' : 'black'
cardsDisplay.innerText = cards cardsDisplay.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)
}
}) })
function makeCards(n) {
if (n == 0) return ''
return '['.repeat(n) + ']'
}
buttonAuto.addEventListener('click', () => { buttonAuto.addEventListener('click', () => {
if (autoPlayer != 0) { if (autoPlayer != 0) {
clearInterval(autoPlayer) clearInterval(autoPlayer)

24
public/index.html
View File

@ -4,27 +4,45 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" ,content="width=device-width, initial-scale=1.0"> <meta name="viewport" ,content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:" type="image/x-icon"> <link
href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAANDQ0AHFxcQBPT08AjIyMAAsLCwAUFBQA0tLSAHNzcwDb29sAJiYmAOTk5AAvLy8A7e3tAMLCwgAEBAQA9vb2AMvLywD///8AqampALu7uwCQkJAAMTExAAYGBgD4+PgA1tbWAImJiQDx8fEAMzMzADw8PAD6+voApKSkAOHh4QABAQEANTU1AAoKCgD8/PwAPj4+ABMTEwDa2toA4+PjAOzs7ACNjY0AYmJiAAMDAwDBwcEAysrKAAwMDAD+/v4AUlJSAOXl5QCGhoYAurq6AFtbWwAwMDAA7u7uAPf39wDV1dUA3t7eAOfn5wAyMjIAxcXFAAcHBwCampoAzs7OABkZGQDX19cAtbW1ACsrKwDp6ekAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEhIQEwgdCjY8RBYrKhsSEhISEhIkCQMAAEQ9GyQSEhISEhISEhIbAQUgEhISEhISEhISOhQnEh8VEjIuKRISEhISLSMhLCoJOTQ+IQYOEhISN0EAAAAACAQ+AAAALygkEjQAAAAAAA8XAAAAAAA/CxJFIwAAAAAAAAAAAAAABx4SEjMAAAAAAAAAAAAAIh4SEhIYMQAAAAAAAAAAJkASEhISEjgCAAAAAAAADEISEhISEhISMBoAAAAAJTsSEhISEhISEhISMwAAFkUSEhISEhISEhISEh4cABESEhISEhISEhISEhISQzUSEhISEhISEhISEhISEg0ZEhISEhISEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
rel="icon" type="image/x-icon" />
<!-- <link rel="shortcut icon" href="data:" type="image/x-icon"> -->
<title>小猫钓鱼</title> <title>小猫钓鱼</title>
<style>
card-t {
display: inline-block;
width: 80px;
margin: 2px;
}
</style>
</head> </head>
<body> <body>
<h1>小猫钓鱼</h1> <h1>小猫钓鱼</h1>
<!-- <card-t cid="Qs"></card-t> -->
<p>[ 在线 <var id="onlineNumber">0</var> ] [ 玩家 <var id="playersNumber">0</var> ] [ 我是 玩家<var <p>[ 在线 <var id="onlineNumber">0</var> ] [ 玩家 <var id="playersNumber">0</var> ] [ 我是 玩家<var
id="playerNumber">0</var> id="playerNumber">0</var>
] [ 当前 玩家<var id="currentPlayerNumber">0</var>
]</p> ]</p>
<p>玩家1 <var id="player1"></var></p> <p>玩家1 <var id="player1"></var></p>
<p>玩家2 <var id="player2"></var></p> <p>玩家2 <var id="player2"></var></p>
<p>玩家3 <var id="player3"></var></p> <p>玩家3 <var id="player3"></var></p>
<p>当前 = 玩家<var id="currentPlayerNumber">0</var></p>
<p> <p>
<button id="buttonJoin" style="color:red;" onclick="player.emit('join')">加入</button> <button id="buttonJoin" style="color:red;" onclick="player.emit('join')">加入</button>
<button id="buttonGo" onclick="player.emit('go')">出牌</button> <button id="buttonGo" onclick="player.emit('go')">出牌</button>
<button id="buttonAuto">自动</button> <button id="buttonAuto">自动</button>
</p> </p>
<p id="cardsDisplay"></p> <p id="cardsDisplay"></p>
<!-- https://github.com/cardmeister/cardmeister.github.io -->
<script src="/elements.cardmeister.min.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script> <script src="/client.js"></script>
</body> </body>
</html> </html>