chore(demo): polish leaderboard demo

leeyeh · leeyeh · commit c736eeb4c579 · 2018-05-17T11:53:19.000+08:00
diff --git a/demo/leaderboard/index.html b/demo/leaderboard/index.html
@@ -3,6 +3,7 @@
 
 <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">
diff --git a/demo/leaderboard/leaderboard.css b/demo/leaderboard/leaderboard.css
@@ -17,6 +17,8 @@ a:visited {
 
 #app {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 [v-cloak] {
@@ -62,18 +64,20 @@ a:visited {
 
 .statistic-list {
   height: 100%;
+  flex: 1;
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   font-size: 1.4em;
+  overflow: auto;
 }
 
 .statistic {
   background: linear-gradient(320deg, #581b98, #9c1de7);
   height: 100%;
-  max-height: 7.84%;
+  max-height: 8.333%;
   min-height: 44px;
   flex: 1;
   display: flex;
@@ -110,19 +114,20 @@ a:visited {
   width: 100%;
   flex: 1;
 }
+.statistic .score {
+  max-width: 44px;
+  overflow: hidden;
+}
 
 .operations {
-  position: fixed;
-  bottom: 0;
-  padding: 6px;
-  width: 100%;
+  padding: 6px 0;
   text-align: center;
   color: #ddd;
 }
 
 .operations .separator {
   display: inline-block;
-  margin: 0 0.5em;
+  margin: 0 0.4em;
 }
 
 #overlay {
@@ -143,6 +148,7 @@ a:visited {
   background: transparent;
   border: 1px solid #ffffff99;
   border-width: 0 0 2px 0;
+  border-radius: 0;
   color: white;
   font-size: 20px;
   text-align: center;
diff --git a/demo/leaderboard/leaderboard.js b/demo/leaderboard/leaderboard.js
@@ -50,7 +50,7 @@ var app = new Vue({
   data: {
     statistics: [],
     score: null,
-    hightScore: 0,
+    highScore: 0,
     newHighScore: false,
     username: '',
     password: '',
@@ -79,7 +79,7 @@ var app = new Vue({
         this.fetchResults();
         if (!id) {
           this.score = null;
-          this.hightScore = 0;
+          this.highScore = 0;
           this.newHighScore = false;
         }
       },
@@ -93,9 +93,9 @@ var app = new Vue({
       this.newHighScore = false;
       setTimeout(() => {
         this.score = Math.ceil(Math.pow(Math.random(), 2) * 1000);
-        if (this.score > this.hightScore) {
+        if (this.score > this.highScore) {
           this.newHighScore = true;
-          this.hightScore = this.score;
+          this.highScore = this.score;
           this.updateScore(this.score);
         }
         this.rolling = false;
@@ -126,15 +126,22 @@ var app = new Vue({
             : []
         ),
       ])
-        .then(([tops, [beforeUser, user]]) => {
-          console.log(tops, [beforeUser, user]);
+        .then(([topStatistics, [beforeUserStatistic, userStatistic]]) => {
+          console.log(topStatistics, [beforeUserStatistic, userStatistic]);
           let statistics;
-          if (user && user.position >= MAX_RESULTS_COUNT) {
-            statistics = [...tops.slice(0, -2), beforeUser, user];
+          if (userStatistic && userStatistic.position >= MAX_RESULTS_COUNT) {
+            statistics = [
+              ...topStatistics.slice(0, -2),
+              beforeUserStatistic,
+              userStatistic,
+            ];
           } else {
-            statistics = tops;
+            statistics = topStatistics;
           }
           this.statistics = JSON.parse(JSON.stringify(statistics));
+          if (userStatistic) {
+            this.highScore = userStatistic.value;
+          }
         })
         .catch(console.error);
     },
diff --git a/script/deploy.sh b/script/deploy.sh
@@ -3,7 +3,8 @@ echo "Deploy docs to github pages.";
 npm run docs;
 mkdir gh_pages;
 cp -r docs gh_pages/;
-cp -r dist/av* gh_pages/;
+mkdir gh_pages/dist;
+cp -r dist/av* gh_pages/dist/;
 cp -r demo gh_pages/;
 cd gh_pages && git init;
 git config user.name "leancloud-bot";
