Skip to content

Commit e576dc6

Browse files
leeyehleeyeh
committed
feat(demo): Leaderboard
1 parent 44b8480 commit e576dc6

File tree

6 files changed

+399
-92
lines changed

6 files changed

+399
-92
lines changed

‎demo/index.html‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎demo/leaderboard/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>LeanCloud Leaderboard Demo</title>
6+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
7+
<link rel="stylesheet" href="//unpkg.com/@leancloud/styles@^1/styles/font.css">
8+
<link rel="stylesheet" href="./leaderboard.css">
9+
</head>
10+
11+
<body>
12+
<div id="app" v-cloak>
13+
<div id="overlay" class="center" v-if="!user.username">
14+
<form action="#" id="login" v-on:submit.prevent="login">
15+
<input v-model="username" autofocus required placeholder="用户名（将会显示在排行榜上）">
16+
<input type="password" v-model="password" required placeholder="密码">
17+
<div class="control">
18+
<input type="submit" value="登录" id="login-button">&nbsp;
19+
<input type="button" @click="signup" value="注册">
20+
</div>
21+
</form>
22+
</div>
23+
<div class="center" id="dice-wrapper" v-if="user.username">
24+
<div class="dice" :class="{ 'animated wobble': rolling }" @click="roll">
25+
<transition :duration="1000" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
26+
<span class="score" v-show="!rolling">{{ score || '🎲' }}</span>
27+
</transition>
28+
<transition :duration="1000" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
29+
<span class="new-high-score" v-show="newHighScore">新纪录</span>
30+
</transition>
31+
</div>
32+
</div>
33+
<transition-group name="statistic-list" class="statistic-list" tag="ul">
34+
<li v-for="statistic in statistics" class="statistic" :key="statistic.user.username" :class="{ completed: statistic.done }">
35+
<span>{{statistic.position + 1}}.&nbsp;</span>
36+
<span class="username">{{statistic.user.username}}
37+
<span v-if="statistic.user.username == user.username">（你）</span>
38+
</span>
39+
<span class="score">
40+
<animated-integer :value="statistic.value"></animated-integer>
41+
</span>
42+
</li>
43+
</transition-group>
44+
45+
<div class="operations">
46+
<div v-if="nextResetAt">下次重置时间：{{ nextResetAt }}
47+
<span @click="fetchResults">⟳</span>
48+
</span>
49+
</div>
50+
<div>
51+
Powered by <a href="https://leancloud.cn" target="_blank">LeanCloud</a>
52+
<span class="separator">•</span>
53+
<a href="https://github.com/leancloud/javascript-sdk/blob/master/demo/leaderboard/">源码</a>
54+
<span v-if="user.username">
55+
<span class="separator">•</span>{{user.username}}（<a href="javascript:" @click='logout'>注销</a>）</span>
56+
</div>
57+
</div>
58+
59+
</div>
60+
<script src="//unpkg.com/vue/dist/vue.js"></script>
61+
<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
62+
<script src="../../dist/av-min.js"></script>
63+
<script src="./leaderboard.js"></script>
64+
</body>
65+
66+
</html>

‎demo/leaderboard/leaderboard.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
body,
2+
html {
3+
background: linear-gradient(320deg, #581b98, #9c1de7);
4+
height: 100vh;
5+
width: 100vw;
6+
margin: 0;
7+
color: white;
8+
font-family: radikal, sans-serif;
9+
}
10+
11+
a,
12+
a:active,
13+
a:visited {
14+
color: white;
15+
text-decoration: none;
16+
}
17+
18+
#app {
19+
height: 100%;
20+
}
21+
22+
[v-cloak] {
23+
display: none;
24+
}
25+
26+
.center {
27+
top: 50%;
28+
left: 50%;
29+
transform: translate(-50%, -50%);
30+
position: fixed;
31+
z-index: 1000;
32+
}
33+
34+
#dice-wrapper {
35+
height: 8.5rem;
36+
width: 8.5rem;
37+
}
38+
39+
.dice {
40+
background: #fefefe;
41+
border-radius: 10px;
42+
box-shadow: 4px 3px 12px 2px #333;
43+
height: 100%;
44+
width: 100%;
45+
cursor: pointer;
46+
display: inline-block;
47+
text-align: center;
48+
}
49+
50+
.dice .score {
51+
color: black;
52+
line-height: 8.5rem;
53+
font-size: 4rem;
54+
}
55+
56+
.new-high-score {
57+
position: absolute;
58+
top: -2em;
59+
width: 100%;
60+
left: 0;
61+
}
62+
63+
.statistic-list {
64+
height: 100%;
65+
margin: 0;
66+
padding: 0;
67+
list-style: none;
68+
display: flex;
69+
flex-direction: column;
70+
font-size: 1.4em;
71+
}
72+
73+
.statistic {
74+
background: linear-gradient(320deg, #581b98, #9c1de7);
75+
height: 100%;
76+
max-height: 7.84%;
77+
min-height: 44px;
78+
flex: 1;
79+
display: flex;
80+
align-items: center;
81+
padding: 0 10px;
82+
transition: all 1s;
83+
position: relative;
84+
}
85+
86+
.statistic-list-move {
87+
transition: transform 1s;
88+
}
89+
90+
.statistic-list-enter,
91+
.statistic-list-leave-to {
92+
opacity: 0;
93+
transform: translateY(-30px);
94+
}
95+
.statistic-list-leave-active {
96+
position: absolute;
97+
}
98+
99+
.statistic:nth-child(1) {
100+
color: gold;
101+
}
102+
.statistic:nth-child(2) {
103+
color: lightgray;
104+
}
105+
.statistic:nth-child(3) {
106+
color: sandybrown;
107+
}
108+
109+
.username {
110+
width: 100%;
111+
flex: 1;
112+
}
113+
114+
.operations {
115+
position: fixed;
116+
bottom: 0;
117+
padding: 6px;
118+
width: 100%;
119+
text-align: center;
120+
color: #ddd;
121+
}
122+
123+
.operations .separator {
124+
display: inline-block;
125+
margin: 0 0.5em;
126+
}
127+
128+
#overlay {
129+
width: 100%;
130+
background: rgba(0, 0, 0, 0.8);
131+
}
132+
#login {
133+
width: 300px;
134+
margin: 0 auto;
135+
padding: 14px 0 18px;
136+
display: flex;
137+
flex-direction: column;
138+
}
139+
140+
#login input {
141+
box-sizing: border-box;
142+
width: 100%;
143+
background: transparent;
144+
border: 1px solid #ffffff99;
145+
border-width: 0 0 2px 0;
146+
color: white;
147+
font-size: 20px;
148+
text-align: center;
149+
padding: 10px 6px 14px;
150+
margin: 0 0 4px;
151+
}
152+
#login input:hover {
153+
background: #ffffff18;
154+
}
155+
#login input:focus {
156+
background: #ffffff28;
157+
}
158+
159+
.control {
160+
display: flex;
161+
}

0 commit comments

Comments
 (0)