add rank btn

data/events.json

@@ -2924,7 +2924,7 @@
         "id": 10346,
         "event": "寿元终。",
         "include": "TLT?[1048]",
-        "exclude": "EVT?[10333]",
+        "exclude": "EVT?[10333,40001]",
         "branch": [
             "TLT?[1048]:10000"
         ]
@@ -2933,7 +2933,7 @@
         "id": 10347,
         "event": "寿元终。",
         "include": "TLT?[1048]",
-        "exclude": "EVT?[10345,10361]",
+        "exclude": "EVT?[10345,10361,40001]",
         "branch": [
             "TLT?[1048]:10000"
         ]

data/specialthanks.json

@@ -1359,5 +1359,71 @@
     {
         "group": 2,
         "name": "圆果团子"
+    },
+    {
+        "group": 2,
+        "name": "神之领域"
+    },
+    {
+        "group": 2,
+        "name": "西域刀客"
+    },
+    {
+        "group": 2,
+        "name": "书签"
+    },
+    {
+        "group": 2,
+        "name": "轩尘"
+    },
+    {
+        "group": 1,
+        "name": "正牌孟岩様",
+        "comment": "如果真能重来的话……"
+    },
+    {
+        "group": 2,
+        "name": "王杰文"
+    },
+    {
+        "group": 2,
+        "name": "Kevin Lu"
+    },
+    {
+        "group": 2,
+        "name": "赵发红"
+    },
+    {
+        "group": 2,
+        "name": "黑衣人"
+    },
+    {
+        "group": 2,
+        "name": "你的粉丝"
+    },
+    {
+        "group": 2,
+        "name": "有林啊.",
+        "color": "red"
+    },
+    {
+        "group": 2,
+        "name": "渡鸦"
+    },
+    {
+        "group": 2,
+        "name": "犽犽超级喜欢赫尔"
+    },
+    {
+        "group": 2,
+        "name": "绕圈跑"
+    },
+    {
+        "group": 2,
+        "name": "董研策"
+    },
+    {
+        "group": 2,
+        "name": "口爆青年"
     }
 ]

src/app.js

@@ -16,6 +16,7 @@ class App{
     #selectedExtendTalent = null;
     #hintTimeout;
     #specialthanks;
+    #autoTrajectory;
 
     async initial() {
         this.initPages();
@@ -123,7 +124,7 @@ class App{
             <span class="title">统计</span>
             <ul id="total"></ul>
             <span style="padding:0.25rem; margin: 0.5rem 0; border: none; background: #ccc;"></span>
-            <span class="title">成就</span>
+            <span class="title">成就<button id="rank">排行榜</button></span>
             <ul id="achievements"></ul>
         `)
 
@@ -131,6 +132,9 @@ class App{
             .find('#specialthanks')
             .click(()=>this.switch('index'));
 
+        achievementPage
+            .find('#rank')
+            .click(()=>this.hint('别卷了，没有排行榜'));
         // Talent
         const talentPage = $(`
         <div id="main">
@@ -347,6 +351,8 @@ class App{
             <ul id="lifeProperty" class="lifeProperty"></ul>
             <ul id="lifeTrajectory" class="lifeTrajectory"></ul>
             <div class="btn-area">
+                <button id="auto" class="mainbtn">自动播放</button>
+                <button id="auto2x" class="mainbtn">自动播放2x</button>
                 <button id="summary" class="mainbtn">人生总结</button>
                 <button id="domToImage" class="mainbtn">人生回放</button>
             </div>
@@ -380,6 +386,8 @@ class App{
                     $(document).unbind("keydown");
                     this.#isEnd = true;
                     trajectoryPage.find('#summary').show();
+                    trajectoryPage.find('#auto').hide();
+                    trajectoryPage.find('#auto2x').hide();
                     // trajectoryPage.find('#domToImage').show();
                 } else {
                     // 如未死亡，更新数值
@@ -419,9 +427,40 @@ class App{
         trajectoryPage
             .find('#summary')
             .click(()=>{
+                clearInterval(this.#autoTrajectory);
+                this.#autoTrajectory = null;
                 this.switch('summary');
             });
 
+        const auto = tick=>{
+            if(this.#autoTrajectory) {
+                clearInterval(this.#autoTrajectory);
+                this.#autoTrajectory = null;
+            } else {
+                if(!this.isEnd)
+                    trajectoryPage
+                        .find('#lifeTrajectory')
+                        .click();
+                this.#autoTrajectory = setInterval(()=>{
+                    if(this.isEnd) {
+                        clearInterval(this.#autoTrajectory);
+                        this.#autoTrajectory = null;
+                    } else {
+                        trajectoryPage
+                            .find('#lifeTrajectory')
+                            .click();
+                    }
+                }, tick);
+            }
+        };
+
+        trajectoryPage
+            .find('#auto')
+            .click(()=>auto(1000));
+        trajectoryPage
+            .find('#auto2x')
+            .click(()=>auto(500));
+
         // Summary
         const summaryPage = $(`
         <div id="main">
@@ -543,7 +582,7 @@ class App{
                     total.append(`
                         <li class="achvg${getGrade('times', times)}"><span class="achievementtitle">已重开${times}次</span>${formatRate('times', times)}</li>
                         <li class="achvg${getGrade('achievement', achievement)}"><span class="achievementtitle">成就达成${achievement}个</span>${formatRate('achievement', achievement)}</li>
-                        <li class="achvg${getGrade('eventRate', eventRate)}"><span class="achievementtitle">事件选择率</span>${Math.floor(eventRate * 100)}%</li>
+                        <li class="achvg${getGrade('eventRate', eventRate)}"><span class="achievementtitle">事件收集率</span>${Math.floor(eventRate * 100)}%</li>
                         <li class="achvg${getGrade('talentRate', talentRate)}"><span class="achievementtitle">天赋收集率</span>${Math.floor(talentRate * 100)}%</li>
                     `);
 
@@ -606,6 +645,8 @@ class App{
                     this.#currentPage = 'trajectory';
                     trajectoryPage.find('#lifeTrajectory').empty();
                     trajectoryPage.find('#summary').hide();
+                    trajectoryPage.find('#auto').show();
+                    trajectoryPage.find('#auto2x').show();
                     this.#isEnd = false;
                 },
                 born: ()=>{
@@ -620,7 +661,18 @@ class App{
                     const talents = summaryPage.find('#talents');
                     judge.empty();
                     talents.empty();
-                    this.#talentSelected.forEach(talent=>{
+                    const lastExtendTalent = this.#life.getLastExtendTalent();
+                    Array
+                        .from(this.#talentSelected)
+                        .sort((
+                            {id:a, grade:ag},
+                            {id:b, grade:bg},
+                        )=>{
+                            if(a == lastExtendTalent) return -1;
+                            if(b == lastExtendTalent) return 1;
+                            return bg - ag;
+                        })
+                        .forEach((talent, i)=>{
                             const li = createTalent(talent);
                             talents.append(li);
                             li.click(()=>{
@@ -635,6 +687,7 @@ class App{
                                     li.addClass('selected');
                                 }
                             });
+                            if(!i) li.click();
                         });
 
                     const summaryData = this.#life.getSummary();

view/dark.css

@@ -135,6 +135,7 @@ body {
 }
 
 .sponsor,
+#rank,
 #specialthanks,
 #achievement {
   position: fixed;
@@ -164,6 +165,13 @@ body {
   padding: 0.5rem;
 }
 
+#rank {
+  position: absolute;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+}
+
 #spthx {
   position: fixed;
   display: grid;
@@ -221,6 +229,7 @@ body {
 
 .title {
   color: white;
+  position: relative;
   font-size: 1.5rem;
   font-weight: 700;
   padding: 1rem;
@@ -395,28 +404,57 @@ ul#total li .achievementtitle,
   }
 }
 
-.grade0b.selected {
+.grade0b.selected,
-  background-color: #c0c0c0 !important;
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #ccc 0px 0px 10px;
   color: #3b3b3b;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #c0c0c0 !important;
 }
 
 .grade1b.selected {
   background-color: #87cefa !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade2b.selected {
   background-color: #e7beff !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade3b.selected {
   background-color: #f1bfac !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .propinitial {

view/light.css

@@ -134,6 +134,7 @@ body {
 }
 
 .sponsor,
+#rank,
 #specialthanks,
 #achievement {
   position: fixed;
@@ -163,6 +164,13 @@ body {
   padding: 0.5rem;
 }
 
+#rank {
+  position: absolute;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+}
+
 #spthx {
   position: fixed;
   display: grid;
@@ -218,6 +226,7 @@ body {
 }
 
 .title {
+  position: relative;
   font-size: 1.5rem;
   font-weight: 700;
   padding: 1rem;
@@ -622,28 +631,57 @@ i {
   }
 }
 
-.grade0b.selected {
+.grade0b.selected,
-  background-color: #444 !important;
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #bbb 0px 0px 10px;
   color: #fff;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #444 !important;
 }
 
 .grade1b.selected {
   background-color: #407dec !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade2b.selected {
   background-color: #b362e7 !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade3b.selected {
   background-color: #ff7f4d !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 @keyframes banner-in {

webpack.config.cjs

@@ -22,6 +22,10 @@ module.exports = {
         directory: path.join(__dirname, 'src'),
         publicPath: '/src',
       },
+      {
+        directory: path.join(__dirname, 'lib'),
+        publicPath: '/lib',
+      }
     ],
   },
   output: {