-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (177 loc) · 6.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="asset/image/favicon.ico" type="image/icon" />
<link
rel="shortcut icon"
href="asset/image/favicon.ico"
type="image/x-icon"
/>
<title>欢乐斗地主-桌面版</title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/card-number.css" />
</head>
<body>
<div id="app">
<div id="welcome" v-if="displayStatus.welcome">
<h1>欢乐斗地主，欢迎您的到来！{{ username }}</h1>
<button @click="enterStage();bubble()">点击开始游戏</button>
</div>
<div id="result" v-if="displayStatus.result">
<h2>你{{this.winnerIndex===1?'赢了。牛逼！':'输了。很遗憾'}}</h2>
<button @click="startGame();bubble()" style="box-shadow: none">
再来一局
</button>
</div>
<svg
class="bg-music-btn"
:class="{'paused':displayStatus.isRotate}"
@click="toggleBgMusic"
viewBox="0 0 1024 1024"
p-id="1585"
width="200"
height="200"
>
<path
d="M512 56.889344c251.35104 0 455.110656 203.759616 455.110656 455.110656S763.35104 967.110656 512 967.110656 56.889344 763.35104 56.889344 512 260.64896 56.889344 512 56.889344z m30.036992 170.665984h-3.18464c-13.76768 0-24.576 10.467328-26.226688 23.665664-0.05632 0.683008-0.284672 1.195008-0.340992 1.878016-0.057344 0.454656-0.284672 0.852992-0.284672 1.307648v341.618688c-14.961664-7.964672-31.686656-12.914688-49.777664-12.914688h-71.11168c-58.88 0-106.665984 47.787008-106.665984 106.667008s47.785984 106.667008 106.665984 106.667008h71.11168c58.88 0 106.667008-47.787008 106.667008-106.667008 0-2.446336-0.569344-4.721664-0.740352-7.110656h0.740352V305.26464l76.34432 44.089344a28.326912 28.326912 0 0 0 14.164992 3.811328c9.842688 0 19.39968-5.12 24.633344-14.222336 7.907328-13.596672 3.243008-31.004672-10.353664-38.912l-116.451328-67.185664c-4.380672-3.072-9.387008-5.291008-15.190016-5.291008zM462.22336 640C489.643008 640 512 662.356992 512 689.777664s-22.356992 49.777664-49.777664 49.777664h-71.11168c-27.419648 0-49.77664-22.356992-49.77664-49.77664 0-27.421696 22.356992-49.778688 49.77664-49.778688h71.11168z"
fill="#d4237a"
p-id="1586"
></path>
</svg>
<div
v-show="displayStatus.clock"
class="clock"
:class="{['clock--'+ ['left','myself','right'][grabLandlordInfo.currentGrabTurnIndex] ]:displayStatus.countdownOfGrab,['clock--'+ ['left','myself','right'][putUpInfo.currentPutUpTurnIndex] ]:displayStatus.countdownOfPutUp}
"
>
<img src="asset/image/clock.png" alt="" srcset="" />
<span v-if="displayStatus.countdownOfGrab">
抢地主计时：{{countdownNumber.grab}}
</span>
<span v-if="displayStatus.countdownOfPutUp"
>出牌计时:{{countdownNumber.putUp}}</span
>
</div>
<div class="controls" v-show="displayStatus.controls">
<button @click="startGame();bubble()" v-if="displayStatus.deliver">
开始发牌！
</button>
<button
@click="bubble"
id="snatch-btn"
ref="snatch-btn"
v-show="displayStatus.grabLordland"
>
抢地主！
</button>
<button
@click="bubble"
id="not-snatch-btn"
ref="not-snatch-btn"
v-show="displayStatus.grabLordland"
>
不抢
</button>
<div ref="put-up-btn-group" v-show="displayStatus.putUpGroup">
<button
@click="bubble"
ref="put-up-btn"
v-show="displayStatus.putUpCards"
>
出牌
</button>
<button
@click="bubble"
ref="not-put-up-btn"
v-show="displayStatus.notPutUpCards"
>
不出
</button>
</div>
</div>
<div v-if="displayStatus.stage" class="stage">
<div class="user user--1">
<div class="user-info">
<img
src="http://placeimg.com/640/480/business"
alt=""
class="user-info__avatar"
/>
<div class="user-info__username">Zelda Carroll</div>
<div class="user-info__score">当前积分：5000</div>
</div>
<div class="user-card">
<div
v-for="itemCard in firstUserCardsBindedView"
class="card card--u1"
:class="'card-' + itemCard"
></div>
</div>
</div>
<div class="center">
<div class="center__cards">
<!-- 地主牌 -->
<div
v-for="itemCard in landLordCardsShuffled"
class="card card--lord"
:class="'card-' + itemCard"
></div>
</div>
<div class="center__info">
<div class="debug-info" style="width: 300px">
{{desktopCardsInfo}}
</div>
<div
v-for="itemCard in desktopCardsInfo.cards"
class="card card--desktop"
:class="'card-' + itemCard"
></div>
</div>
</div>
<div class="user user--2">
<div class="user-info">
<img
src="http://placeimg.com/640/480/people"
alt=""
class="user-info__avatar"
/>
<div class="user-info__username">Gregory Keebler</div>
<div class="user-info__score">当前积分：12000</div>
</div>
<div class="user-card">
<div
v-for="itemCard in secondUserCardsBindedView"
class="card card--u2"
:class="'card-' + itemCard"
></div>
</div>
</div>
<div class="user user--3">
<div class="user-info">
<img
src="http://placeimg.com/640/480/animals"
alt=""
class="user-info__avatar"
/>
<div class="user-info__username">Richie Wiza</div>
<div class="user-info__score">当前积分：48000</div>
</div>
<div class="user-card">
<!-- 每个元素都绑定点击事件？没有委托？性能怎么样，VUE是怎么处理的？ -->
<div
v-for="(item,index) in myselfUserCardsBindedView"
:class="['card card--u3', {['card-'+item.number]:true,'card--u3--selected':item.isSelected,'card--u3--selecting':item.isSelecting}]"
@mousedown="mousedownHandler(index,item)"
@mouseup="mouseupHandler(index,item)"
@mouseenter="mouseenterHandler(index,item)"
></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="module" src="js/index.js"></script>
</body>
</html>