Skip to content

Commit

Permalink
Deploy docs and demos to Github Pages [skip ci]
Browse files Browse the repository at this point in the history
  • Loading branch information
leancloud-bot committed Sep 25, 2023
0 parents commit aa7578b
Show file tree
Hide file tree
Showing 89 changed files with 293,813 additions and 0 deletions.
67 changes: 67 additions & 0 deletions demo/leaderboard/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!doctype html>
<html>

<head>
<title>LeanCloud Leaderboard Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="//unpkg.com/@leancloud/styles@^1/styles/font.css">
<link rel="stylesheet" href="./leaderboard.css">
</head>

<body>
<div id="app" v-cloak>
<div id="overlay" class="center" v-if="!user.username">
<form action="#" id="login" v-on:submit.prevent="login">
<input v-model="username" autofocus required placeholder="用户名（将会显示在排行榜上）">
<input type="password" v-model="password" required placeholder="密码">
<div class="control">
<input type="submit" value="登录" id="login-button">&nbsp;
<input type="button" @click="signup" value="注册">
</div>
</form>
</div>
<div class="center" id="dice-wrapper" v-if="user.username">
<div class="dice" :class="{ 'animated wobble': rolling }" @click="roll">
<transition :duration="1000" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<span class="score" v-show="!rolling">{{ score || '🎲' }}</span>
</transition>
<transition :duration="1000" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<span class="new-high-score" v-show="newHighScore">新纪录</span>
</transition>
</div>
</div>
<transition-group name="ranking-list" class="ranking-list" tag="ul">
<li v-for="ranking in rankings" class="ranking" :key="ranking.user.username" :class="{ completed: ranking.done }">
<span>{{ranking.rank + 1}}.&nbsp;</span>
<span class="username">{{ranking.user.username}}
<span v-if="ranking.user.username == user.username">（你）</span>
</span>
<span class="score">
<animated-integer :value="ranking.value"></animated-integer>
</span>
</li>
</transition-group>

<div class="operations">
<div v-if="nextResetAt">下次重置时间：{{ nextResetAt }}
<span @click="fetchResults">⟳</span>
</span>
</div>
<div>
Powered by <a href="https://leancloud.cn" target="_blank">LeanCloud</a>
<span class="separator">•</span>
<a href="https://github.com/leancloud/javascript-sdk/blob/master/demo/leaderboard/">源码</a>
<span v-if="user.username">
<span class="separator">•</span>{{user.username}}（<a href="javascript:" @click='logout'>注销</a>）</span>
</div>
</div>

</div>
<script src="//unpkg.com/vue@^2/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
<script src="../../dist/av-min.js"></script>
<script src="./leaderboard.js"></script>
</body>

</html>
167 changes: 167 additions & 0 deletions demo/leaderboard/leaderboard.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
body,
html {
background: linear-gradient(320deg, #581b98, #9c1de7);
height: 100vh;
width: 100vw;
margin: 0;
color: white;
font-family: radikal, sans-serif;
}

a,
a:active,
a:visited {
color: white;
text-decoration: none;
}

#app {
height: 100%;
display: flex;
flex-direction: column;
}

[v-cloak] {
display: none;
}

.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
z-index: 1000;
}

#dice-wrapper {
height: 8.5rem;
width: 8.5rem;
}

.dice {
background: #fefefe;
border-radius: 10px;
box-shadow: 4px 3px 12px 2px #333;
height: 100%;
width: 100%;
cursor: pointer;
display: inline-block;
text-align: center;
}

.dice .score {
color: black;
line-height: 8.5rem;
font-size: 4rem;
}

.new-high-score {
position: absolute;
top: -2em;
width: 100%;
left: 0;
}

.ranking-list {
height: 100%;
flex: 1;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
font-size: 1.4em;
overflow: auto;
}

.ranking {
background: linear-gradient(320deg, #581b98, #9c1de7);
height: 100%;
max-height: 8.333%;
min-height: 44px;
flex: 1;
display: flex;
align-items: center;
padding: 0 10px;
transition: all 1s;
position: relative;
}

.ranking-list-move {
transition: transform 1s;
}

.ranking-list-enter,
.ranking-list-leave-to {
opacity: 0;
transform: translateY(-30px);
}
.ranking-list-leave-active {
position: absolute;
}

.ranking:nth-child(1) {
color: gold;
}
.ranking:nth-child(2) {
color: lightgray;
}
.ranking:nth-child(3) {
color: sandybrown;
}

.username {
width: 100%;
flex: 1;
}
.ranking .score {
max-width: 44px;
overflow: hidden;
}

.operations {
padding: 6px 0;
text-align: center;
color: #ddd;
}

.operations .separator {
display: inline-block;
margin: 0 0.4em;
}

#overlay {
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
#login {
width: 300px;
margin: 0 auto;
padding: 14px 0 18px;
display: flex;
flex-direction: column;
}

#login input {
box-sizing: border-box;
width: 100%;
background: transparent;
border: 1px solid #ffffff99;
border-width: 0 0 2px 0;
border-radius: 0;
color: white;
font-size: 20px;
text-align: center;
padding: 10px 6px 14px;
margin: 0 0 4px;
}
#login input:hover {
background: #ffffff18;
}
#login input:focus {
background: #ffffff28;
}

.control {
display: flex;
}
Loading

0 comments on commit aa7578b

Please sign in to comment.